[Icons] Redesign paperClip

[acstll]

Summary

Opening this draft to ask for feedback on the icon design.

Here's a codesandbox with the icon in different sizes together with other icons for context.

Redesign of the paperClip icon following the latest guidelines.

Copy/paste for Figma

Vector

<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.5 4L6.5 11" stroke="black"/>
<path d="M4.5 4L4.5 11" stroke="black"/>
<line x1="11.5" y1="4" x2="11.5" y2="11" stroke="black"/>
<path d="M4.5 11C4.5 13 5.74772 14.5 8 14.5C10.2523 14.5 11.5 13 11.5 11" stroke="black"/>
<path d="M6.5 4C6.5 2.75 7.25023 1.5 9 1.5C10.7498 1.5 11.5 2.75 11.5 4" stroke="black"/>
<path d="M9.5 5V11" stroke="black"/>
<path d="M6.5 11C6.5 12 7 12.5 8 12.5C9 12.5 9.5 12 9.5 11" stroke="black"/>
</svg>

Glyph

<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7 11C7 11.4229 7.10536 11.6483 7.22852 11.7715C7.35168 11.8946 7.57707 12 8 12C8.42293 12 8.64832 11.8946 8.77148 11.7715C8.89464 11.6483 9 11.4229 9 11V5H10V11C10 11.5771 9.85536 12.1017 9.47852 12.4785C9.10168 12.8554 8.57707 13 8 13C7.42293 13 6.89832 12.8554 6.52148 12.4785C6.14464 12.1017 6 11.5771 6 11V4C6 3.28108 6.21527 2.53178 6.71582 1.9541C7.22667 1.3647 7.99544 1 9 1C10.0046 1 10.7733 1.3647 11.2842 1.9541C11.7847 2.53178 12 3.28108 12 4V11C12 12.103 11.6546 13.1101 10.957 13.8447C10.2555 14.5834 9.24184 15 8 15C6.75816 15 5.74451 14.5834 5.04297 13.8447C4.34537 13.1101 4 12.103 4 11V4H5V11C5 11.8967 5.2785 12.64 5.76758 13.1553C6.25296 13.6664 6.98973 14 8 14C9.01027 14 9.74704 13.6664 10.2324 13.1553C10.7215 12.64 11 11.8967 11 11V4C11 3.46903 10.8402 2.96818 10.5283 2.6084C10.2266 2.26039 9.74507 2 9 2C8.25493 2 7.7734 2.26039 7.47168 2.6084C7.15985 2.96818 7 3.46903 7 4V11Z" fill="black"/>
</svg>

Screenshot

Before	After

[julianrosado]

Have you thrown the SVG into svgomg? Other than shaving a few bits and bites this looks ammmaaziiinnng

[acstll]

Thank you @julianrosado!

Have you thrown the SVG into svgomg?

not initially, I did now and added the optimized code to the description above.

For the code implementation, the SVG is based on the glyph from Figma so it's already as optimized as it can be.

---

@MichaelMarcialis @JoseLuisGJ do you have any feedback?

[MichaelMarcialis]

Left two small comments. Otherwise, assuming you're able to address them, this is good to go from my perspective. Thanks!

[mgadewoll]

🟢 Changes LGTM

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: f0b70b6
• Documentation website
• Storybook

History

• 💚 Build #1755 succeeded a2e15ae
• 💚 Build #1752 succeeded 51370ef
• 💚 Build #1696 succeeded d7a0765
• 💚 Build #1690 succeeded 575107c

cc @acstll

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: f0b70b6

History

• 💚 Build #5078 succeeded a2e15ae
• 💚 Build #5075 succeeded 51370ef
• 💚 Build #5033 succeeded d7a0765
• 💔 Build #5029 failed 575107c

cc @acstll