# yarn icon

Yarn. Gentleface icon, drawn on the 16 px pixel grid. Free, MIT licensed. Page: https://gentleface.com/icons/yarn

- Category: Home & household
- Use it for: yarn, knitting, crochet, knit, wool
- Tags: yarn, knitting, crochet, knit, wool, ball-of-yarn, craft, hobby, handmade, thread
- Component name: YarnIcon
- Added: 2026-11-06
- Since: version 0.4.0
- npm: `import { YarnIcon } from '@gentleface/react';` (@gentleface/react 0.6.0)

## Alternatives

- `needle`: sewing

## Also fits

- needle: knitting or crochet

## Files

Each icon is drawn on the 16 px grid, and most also on the 20 and 24 px grids (at 24 in three weights: light 1 px, regular 1.5 px, bold 2 px). Show the drawing made for your size, or an exact multiple of it, on whole pixels: 16 for 16 and 32 px, 20 for 20 and 40, 24 for 24 and 48. A size in between or a fractional position blurs it. The code on each icon page is the 16 px drawing, an SVG with fill="currentColor"; the icon page's downloads follow its Grid switch, and npm has the 20 and 24 px drawings too.

- line-round: https://gentleface.com/svg/line-round/16/yarn.svg · PNG https://gentleface.com/png/line-round/16/yarn.png · https://gentleface.com/png/line-round/32/yarn.png · https://gentleface.com/png/line-round/48/yarn.png
- line-soft: https://gentleface.com/svg/line-soft/16/yarn.svg · PNG https://gentleface.com/png/line-soft/16/yarn.png · https://gentleface.com/png/line-soft/32/yarn.png · https://gentleface.com/png/line-soft/48/yarn.png
- line-sharp: https://gentleface.com/svg/line-sharp/16/yarn.svg · PNG https://gentleface.com/png/line-sharp/16/yarn.png · https://gentleface.com/png/line-sharp/32/yarn.png · https://gentleface.com/png/line-sharp/48/yarn.png
- solid-round: https://gentleface.com/svg/solid-round/16/yarn.svg · PNG https://gentleface.com/png/solid-round/16/yarn.png · https://gentleface.com/png/solid-round/32/yarn.png · https://gentleface.com/png/solid-round/48/yarn.png
- solid-soft: https://gentleface.com/svg/solid-soft/16/yarn.svg · PNG https://gentleface.com/png/solid-soft/16/yarn.png · https://gentleface.com/png/solid-soft/32/yarn.png · https://gentleface.com/png/solid-soft/48/yarn.png
- solid-sharp: https://gentleface.com/svg/solid-sharp/16/yarn.svg · PNG https://gentleface.com/png/solid-sharp/16/yarn.png · https://gentleface.com/png/solid-sharp/32/yarn.png · https://gentleface.com/png/solid-sharp/48/yarn.png

The SVG of every style: https://gentleface.com/icons/yarn.json (`svg`).

## Animated

`yarn-unwind`: The loose end is pulled out to the right and off the edge: the ball turns back as the yarn comes off its bottom and grows smaller. Then the yarn is wound back on and the ball grows to its size.

File: https://gentleface.com/motion/yarn-unwind.svg (line-round, 16 px). Native SVG animation that loops by itself. To play it once, run 0.25 s to 2.65 s. Patterns: https://gentleface.com/animated-icons.md

```svg
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.001" stroke-linecap="round" stroke-linejoin="round"><path d="M1.5 7.5C1.5 4.186 4.186 1.5 7.5 1.5C10.814 1.5 13.5 4.186 13.5 7.5C13.5 10.814 10.814 13.5 7.5 13.5C4.186 13.5 1.5 10.814 1.5 7.5Z"><animate attributeName="d" dur="3.2s" repeatCount="indefinite" keyTimes="0;0.094;0.406;0.531;0.797;1" values="M1.5 7.5C1.5 4.186 4.186 1.5 7.5 1.5C10.814 1.5 13.5 4.186 13.5 7.5C13.5 10.814 10.814 13.5 7.5 13.5C4.186 13.5 1.5 10.814 1.5 7.5Z;M1.5 7.5C1.5 4.186 4.186 1.5 7.5 1.5C10.814 1.5 13.5 4.186 13.5 7.5C13.5 10.814 10.814 13.5 7.5 13.5C4.186 13.5 1.5 10.814 1.5 7.5Z;M2.46 8.46C2.46 5.676 4.716 3.42 7.5 3.42C10.284 3.42 12.54 5.676 12.54 8.46C12.54 11.244 10.284 13.5 7.5 13.5C4.716 13.5 2.46 11.244 2.46 8.46Z;M2.46 8.46C2.46 5.676 4.716 3.42 7.5 3.42C10.284 3.42 12.54 5.676 12.54 8.46C12.54 11.244 10.284 13.5 7.5 13.5C4.716 13.5 2.46 11.244 2.46 8.46Z;M1.5 7.5C1.5 4.186 4.186 1.5 7.5 1.5C10.814 1.5 13.5 4.186 13.5 7.5C13.5 10.814 10.814 13.5 7.5 13.5C4.186 13.5 1.5 10.814 1.5 7.5Z;M1.5 7.5C1.5 4.186 4.186 1.5 7.5 1.5C10.814 1.5 13.5 4.186 13.5 7.5C13.5 10.814 10.814 13.5 7.5 13.5C4.186 13.5 1.5 10.814 1.5 7.5Z" calcMode="spline" keySplines="0 0 1 1;.6 0 .25 1;0 0 1 1;.6 0 .25 1;0 0 1 1"/></path><g><animateTransform attributeName="transform" type="rotate" dur="3.2s" repeatCount="indefinite" keyTimes="0;0.094;0.406;0.531;0.797;1" values="0 7.5 7.5;0 7.5 7.5;-70 7.5 8.46;-70 7.5 8.46;0 7.5 7.5;0 7.5 7.5" calcMode="spline" keySplines="0 0 1 1;.6 0 .25 1;0 0 1 1;.6 0 .25 1;0 0 1 1"/><path d="M7.895 1.513C6.837 4.493 4.493 6.837 1.513 7.895"><animate attributeName="d" dur="3.2s" repeatCount="indefinite" keyTimes="0;0.094;0.406;0.531;0.797;1" values="M7.895 1.513C6.837 4.493 4.493 6.837 1.513 7.895;M7.895 1.513C6.837 4.493 4.493 6.837 1.513 7.895;M7.832 3.431C6.943 5.934 4.974 7.903 2.471 8.792;M7.832 3.431C6.943 5.934 4.974 7.903 2.471 8.792;M7.895 1.513C6.837 4.493 4.493 6.837 1.513 7.895;M7.895 1.513C6.837 4.493 4.493 6.837 1.513 7.895" calcMode="spline" keySplines="0 0 1 1;.6 0 .25 1;0 0 1 1;.6 0 .25 1;0 0 1 1"/></path><path d="M10.745 2.453C9.388 6.335 6.335 9.388 2.453 10.745"><animate attributeName="d" dur="3.2s" repeatCount="indefinite" keyTimes="0;0.094;0.406;0.531;0.797;1" values="M10.745 2.453C9.388 6.335 6.335 9.388 2.453 10.745;M10.745 2.453C9.388 6.335 6.335 9.388 2.453 10.745;M10.226 4.221C9.086 7.481 6.521 10.046 3.261 11.186;M10.226 4.221C9.086 7.481 6.521 10.046 3.261 11.186;M10.745 2.453C9.388 6.335 6.335 9.388 2.453 10.745;M10.745 2.453C9.388 6.335 6.335 9.388 2.453 10.745" calcMode="spline" keySplines="0 0 1 1;.6 0 .25 1;0 0 1 1;.6 0 .25 1;0 0 1 1"/></path><path d="M12.948 4.986C11.31 8.492 8.492 11.31 4.986 12.948"><animate attributeName="d" dur="3.2s" repeatCount="indefinite" keyTimes="0;0.094;0.406;0.531;0.797;1" values="M12.948 4.986C11.31 8.492 8.492 11.31 4.986 12.948;M12.948 4.986C11.31 8.492 8.492 11.31 4.986 12.948;M12.076 6.348C10.7 9.293 8.333 11.66 5.388 13.036;M12.076 6.348C10.7 9.293 8.333 11.66 5.388 13.036;M12.948 4.986C11.31 8.492 8.492 11.31 4.986 12.948;M12.948 4.986C11.31 8.492 8.492 11.31 4.986 12.948" calcMode="spline" keySplines="0 0 1 1;.6 0 .25 1;0 0 1 1;.6 0 .25 1;0 0 1 1"/></path></g><path d="M7.5 13.5L14.5 13.5"><animate attributeName="d" dur="3.2s" repeatCount="indefinite" keyTimes="0;0.094;0.406;0.531;0.797;1" values="M7.5 13.5L14.5 13.5;M7.5 13.5L14.5 13.5;M7.5 13.5L21 13.5;M7.5 13.5L21 13.5;M7.5 13.5L14.5 13.5;M7.5 13.5L14.5 13.5" calcMode="spline" keySplines="0 0 1 1;.6 0 .25 1;0 0 1 1;.6 0 .25 1;0 0 1 1"/></path></svg>
```

## Code (line-round)

The snippets are decorative (aria-hidden). For an icon that carries meaning on its own, such as an icon-only button, label the button, or give the SVG role="img" and an aria-label. For another style, take its SVG from the JSON and swap the path `d`.

### SVG

```svg
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M14.856 13.144C14.952 13.241 15 13.359 15 13.5C15 13.641 14.952 13.759 14.856 13.856C14.759 13.952 14.641 14 14.5 14L7.5 14C6.673 14 5.876 13.848 5.107 13.544C4.273 13.213 3.538 12.731 2.904 12.096C2.269 11.462 1.787 10.727 1.456 9.893C1.152 9.124 1 8.327 1 7.5C1 6.673 1.152 5.876 1.456 5.107C1.787 4.273 2.269 3.538 2.904 2.904C3.538 2.269 4.273 1.787 5.107 1.456C5.876 1.152 6.673 1 7.5 1C8.327 1 9.124 1.152 9.893 1.456C10.727 1.787 11.462 2.269 12.096 2.904C12.731 3.538 13.213 4.273 13.544 5.107C13.848 5.876 14 6.673 14 7.5C14 8.327 13.848 9.124 13.544 9.893C13.213 10.727 12.731 11.462 12.096 12.096C11.75 12.443 11.373 12.744 10.967 13L14.5 13C14.641 13 14.759 13.048 14.856 13.144ZM3.611 3.611C3.074 4.148 2.666 4.769 2.386 5.475C2.17 6.02 2.045 6.582 2.01 7.162C3.156 6.663 4.176 5.966 5.071 5.071C5.966 4.176 6.663 3.156 7.162 2.01C6.582 2.045 6.02 2.17 5.475 2.386C4.769 2.666 4.148 3.074 3.611 3.611ZM2.67 10.132C3.441 9.836 4.179 9.468 4.882 9.029C5.722 8.505 6.492 7.893 7.192 7.192C7.893 6.492 8.505 5.722 9.029 4.882C9.468 4.179 9.836 3.441 10.132 2.67C9.937 2.564 9.735 2.469 9.525 2.386C9.103 2.219 8.671 2.106 8.229 2.048C7.673 3.456 6.856 4.7 5.778 5.778C4.7 6.856 3.456 7.673 2.048 8.229C2.106 8.671 2.219 9.103 2.386 9.525C2.469 9.735 2.564 9.937 2.67 10.132ZM7.9 7.9C7.146 8.653 6.316 9.313 5.412 9.877C4.719 10.309 3.996 10.678 3.242 10.982C3.357 11.123 3.48 11.258 3.611 11.389C4.021 11.799 4.48 12.134 4.988 12.393C6.601 11.611 8.043 10.585 9.314 9.314C10.585 8.043 11.611 6.601 12.393 4.988C12.134 4.48 11.799 4.021 11.389 3.611C11.258 3.48 11.123 3.357 10.982 3.242C10.678 3.996 10.309 4.719 9.877 5.412C9.313 6.316 8.653 7.146 7.9 7.9ZM9.525 12.614C10.231 12.334 10.852 11.926 11.389 11.389C11.926 10.852 12.334 10.231 12.614 9.525C12.871 8.874 13 8.199 13 7.5C13 7.078 12.953 6.664 12.859 6.26C12.094 7.64 11.148 8.894 10.021 10.021C8.894 11.148 7.64 12.094 6.26 12.859C6.664 12.953 7.078 13 7.5 13C8.199 13 8.874 12.871 9.525 12.614Z"/></svg>
```

### React

```tsx
// Gentleface "yarn" (line-round), MIT. https://gentleface.com/icons/yarn
import type { SVGProps } from 'react';

export function YarnIcon(props: SVGProps<SVGSVGElement>) {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" {...props}>
      <path d="M14.856 13.144C14.952 13.241 15 13.359 15 13.5C15 13.641 14.952 13.759 14.856 13.856C14.759 13.952 14.641 14 14.5 14L7.5 14C6.673 14 5.876 13.848 5.107 13.544C4.273 13.213 3.538 12.731 2.904 12.096C2.269 11.462 1.787 10.727 1.456 9.893C1.152 9.124 1 8.327 1 7.5C1 6.673 1.152 5.876 1.456 5.107C1.787 4.273 2.269 3.538 2.904 2.904C3.538 2.269 4.273 1.787 5.107 1.456C5.876 1.152 6.673 1 7.5 1C8.327 1 9.124 1.152 9.893 1.456C10.727 1.787 11.462 2.269 12.096 2.904C12.731 3.538 13.213 4.273 13.544 5.107C13.848 5.876 14 6.673 14 7.5C14 8.327 13.848 9.124 13.544 9.893C13.213 10.727 12.731 11.462 12.096 12.096C11.75 12.443 11.373 12.744 10.967 13L14.5 13C14.641 13 14.759 13.048 14.856 13.144ZM3.611 3.611C3.074 4.148 2.666 4.769 2.386 5.475C2.17 6.02 2.045 6.582 2.01 7.162C3.156 6.663 4.176 5.966 5.071 5.071C5.966 4.176 6.663 3.156 7.162 2.01C6.582 2.045 6.02 2.17 5.475 2.386C4.769 2.666 4.148 3.074 3.611 3.611ZM2.67 10.132C3.441 9.836 4.179 9.468 4.882 9.029C5.722 8.505 6.492 7.893 7.192 7.192C7.893 6.492 8.505 5.722 9.029 4.882C9.468 4.179 9.836 3.441 10.132 2.67C9.937 2.564 9.735 2.469 9.525 2.386C9.103 2.219 8.671 2.106 8.229 2.048C7.673 3.456 6.856 4.7 5.778 5.778C4.7 6.856 3.456 7.673 2.048 8.229C2.106 8.671 2.219 9.103 2.386 9.525C2.469 9.735 2.564 9.937 2.67 10.132ZM7.9 7.9C7.146 8.653 6.316 9.313 5.412 9.877C4.719 10.309 3.996 10.678 3.242 10.982C3.357 11.123 3.48 11.258 3.611 11.389C4.021 11.799 4.48 12.134 4.988 12.393C6.601 11.611 8.043 10.585 9.314 9.314C10.585 8.043 11.611 6.601 12.393 4.988C12.134 4.48 11.799 4.021 11.389 3.611C11.258 3.48 11.123 3.357 10.982 3.242C10.678 3.996 10.309 4.719 9.877 5.412C9.313 6.316 8.653 7.146 7.9 7.9ZM9.525 12.614C10.231 12.334 10.852 11.926 11.389 11.389C11.926 10.852 12.334 10.231 12.614 9.525C12.871 8.874 13 8.199 13 7.5C13 7.078 12.953 6.664 12.859 6.26C12.094 7.64 11.148 8.894 10.021 10.021C8.894 11.148 7.64 12.094 6.26 12.859C6.664 12.953 7.078 13 7.5 13C8.199 13 8.874 12.871 9.525 12.614Z" />
    </svg>
  );
}
```

### Vue

```vue
<!-- Gentleface "yarn" (line-round), MIT. https://gentleface.com/icons/yarn -->
<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
    <path d="M14.856 13.144C14.952 13.241 15 13.359 15 13.5C15 13.641 14.952 13.759 14.856 13.856C14.759 13.952 14.641 14 14.5 14L7.5 14C6.673 14 5.876 13.848 5.107 13.544C4.273 13.213 3.538 12.731 2.904 12.096C2.269 11.462 1.787 10.727 1.456 9.893C1.152 9.124 1 8.327 1 7.5C1 6.673 1.152 5.876 1.456 5.107C1.787 4.273 2.269 3.538 2.904 2.904C3.538 2.269 4.273 1.787 5.107 1.456C5.876 1.152 6.673 1 7.5 1C8.327 1 9.124 1.152 9.893 1.456C10.727 1.787 11.462 2.269 12.096 2.904C12.731 3.538 13.213 4.273 13.544 5.107C13.848 5.876 14 6.673 14 7.5C14 8.327 13.848 9.124 13.544 9.893C13.213 10.727 12.731 11.462 12.096 12.096C11.75 12.443 11.373 12.744 10.967 13L14.5 13C14.641 13 14.759 13.048 14.856 13.144ZM3.611 3.611C3.074 4.148 2.666 4.769 2.386 5.475C2.17 6.02 2.045 6.582 2.01 7.162C3.156 6.663 4.176 5.966 5.071 5.071C5.966 4.176 6.663 3.156 7.162 2.01C6.582 2.045 6.02 2.17 5.475 2.386C4.769 2.666 4.148 3.074 3.611 3.611ZM2.67 10.132C3.441 9.836 4.179 9.468 4.882 9.029C5.722 8.505 6.492 7.893 7.192 7.192C7.893 6.492 8.505 5.722 9.029 4.882C9.468 4.179 9.836 3.441 10.132 2.67C9.937 2.564 9.735 2.469 9.525 2.386C9.103 2.219 8.671 2.106 8.229 2.048C7.673 3.456 6.856 4.7 5.778 5.778C4.7 6.856 3.456 7.673 2.048 8.229C2.106 8.671 2.219 9.103 2.386 9.525C2.469 9.735 2.564 9.937 2.67 10.132ZM7.9 7.9C7.146 8.653 6.316 9.313 5.412 9.877C4.719 10.309 3.996 10.678 3.242 10.982C3.357 11.123 3.48 11.258 3.611 11.389C4.021 11.799 4.48 12.134 4.988 12.393C6.601 11.611 8.043 10.585 9.314 9.314C10.585 8.043 11.611 6.601 12.393 4.988C12.134 4.48 11.799 4.021 11.389 3.611C11.258 3.48 11.123 3.357 10.982 3.242C10.678 3.996 10.309 4.719 9.877 5.412C9.313 6.316 8.653 7.146 7.9 7.9ZM9.525 12.614C10.231 12.334 10.852 11.926 11.389 11.389C11.926 10.852 12.334 10.231 12.614 9.525C12.871 8.874 13 8.199 13 7.5C13 7.078 12.953 6.664 12.859 6.26C12.094 7.64 11.148 8.894 10.021 10.021C8.894 11.148 7.64 12.094 6.26 12.859C6.664 12.953 7.078 13 7.5 13C8.199 13 8.874 12.871 9.525 12.614Z" />
  </svg>
</template>
```

### Svelte

```svelte
<!-- Gentleface "yarn" (line-round), MIT. https://gentleface.com/icons/yarn -->
<script>
  let props = $props();
</script>

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" {...props}>
  <path d="M14.856 13.144C14.952 13.241 15 13.359 15 13.5C15 13.641 14.952 13.759 14.856 13.856C14.759 13.952 14.641 14 14.5 14L7.5 14C6.673 14 5.876 13.848 5.107 13.544C4.273 13.213 3.538 12.731 2.904 12.096C2.269 11.462 1.787 10.727 1.456 9.893C1.152 9.124 1 8.327 1 7.5C1 6.673 1.152 5.876 1.456 5.107C1.787 4.273 2.269 3.538 2.904 2.904C3.538 2.269 4.273 1.787 5.107 1.456C5.876 1.152 6.673 1 7.5 1C8.327 1 9.124 1.152 9.893 1.456C10.727 1.787 11.462 2.269 12.096 2.904C12.731 3.538 13.213 4.273 13.544 5.107C13.848 5.876 14 6.673 14 7.5C14 8.327 13.848 9.124 13.544 9.893C13.213 10.727 12.731 11.462 12.096 12.096C11.75 12.443 11.373 12.744 10.967 13L14.5 13C14.641 13 14.759 13.048 14.856 13.144ZM3.611 3.611C3.074 4.148 2.666 4.769 2.386 5.475C2.17 6.02 2.045 6.582 2.01 7.162C3.156 6.663 4.176 5.966 5.071 5.071C5.966 4.176 6.663 3.156 7.162 2.01C6.582 2.045 6.02 2.17 5.475 2.386C4.769 2.666 4.148 3.074 3.611 3.611ZM2.67 10.132C3.441 9.836 4.179 9.468 4.882 9.029C5.722 8.505 6.492 7.893 7.192 7.192C7.893 6.492 8.505 5.722 9.029 4.882C9.468 4.179 9.836 3.441 10.132 2.67C9.937 2.564 9.735 2.469 9.525 2.386C9.103 2.219 8.671 2.106 8.229 2.048C7.673 3.456 6.856 4.7 5.778 5.778C4.7 6.856 3.456 7.673 2.048 8.229C2.106 8.671 2.219 9.103 2.386 9.525C2.469 9.735 2.564 9.937 2.67 10.132ZM7.9 7.9C7.146 8.653 6.316 9.313 5.412 9.877C4.719 10.309 3.996 10.678 3.242 10.982C3.357 11.123 3.48 11.258 3.611 11.389C4.021 11.799 4.48 12.134 4.988 12.393C6.601 11.611 8.043 10.585 9.314 9.314C10.585 8.043 11.611 6.601 12.393 4.988C12.134 4.48 11.799 4.021 11.389 3.611C11.258 3.48 11.123 3.357 10.982 3.242C10.678 3.996 10.309 4.719 9.877 5.412C9.313 6.316 8.653 7.146 7.9 7.9ZM9.525 12.614C10.231 12.334 10.852 11.926 11.389 11.389C11.926 10.852 12.334 10.231 12.614 9.525C12.871 8.874 13 8.199 13 7.5C13 7.078 12.953 6.664 12.859 6.26C12.094 7.64 11.148 8.894 10.021 10.021C8.894 11.148 7.64 12.094 6.26 12.859C6.664 12.953 7.078 13 7.5 13C8.199 13 8.874 12.871 9.525 12.614Z" />
</svg>
```

### HTML img

```html
<!-- Gentleface "yarn" (line-round), MIT. https://gentleface.com/icons/yarn. An <img> can't take currentColor: it draws black. Inline the SVG or use the CSS mask to color it. -->
<img src="https://gentleface.com/svg/line-round/16/yarn.svg" width="16" height="16" alt="">
```

### CSS

```css
/* Gentleface "yarn" (line-round), MIT. https://gentleface.com/icons/yarn. Takes the text color. */
.icon-yarn {
  display: inline-block;
  width: 16px;
  height: 16px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='currentColor'%3E%3Cpath d='M14.856 13.144C14.952 13.241 15 13.359 15 13.5C15 13.641 14.952 13.759 14.856 13.856C14.759 13.952 14.641 14 14.5 14L7.5 14C6.673 14 5.876 13.848 5.107 13.544C4.273 13.213 3.538 12.731 2.904 12.096C2.269 11.462 1.787 10.727 1.456 9.893C1.152 9.124 1 8.327 1 7.5C1 6.673 1.152 5.876 1.456 5.107C1.787 4.273 2.269 3.538 2.904 2.904C3.538 2.269 4.273 1.787 5.107 1.456C5.876 1.152 6.673 1 7.5 1C8.327 1 9.124 1.152 9.893 1.456C10.727 1.787 11.462 2.269 12.096 2.904C12.731 3.538 13.213 4.273 13.544 5.107C13.848 5.876 14 6.673 14 7.5C14 8.327 13.848 9.124 13.544 9.893C13.213 10.727 12.731 11.462 12.096 12.096C11.75 12.443 11.373 12.744 10.967 13L14.5 13C14.641 13 14.759 13.048 14.856 13.144ZM3.611 3.611C3.074 4.148 2.666 4.769 2.386 5.475C2.17 6.02 2.045 6.582 2.01 7.162C3.156 6.663 4.176 5.966 5.071 5.071C5.966 4.176 6.663 3.156 7.162 2.01C6.582 2.045 6.02 2.17 5.475 2.386C4.769 2.666 4.148 3.074 3.611 3.611ZM2.67 10.132C3.441 9.836 4.179 9.468 4.882 9.029C5.722 8.505 6.492 7.893 7.192 7.192C7.893 6.492 8.505 5.722 9.029 4.882C9.468 4.179 9.836 3.441 10.132 2.67C9.937 2.564 9.735 2.469 9.525 2.386C9.103 2.219 8.671 2.106 8.229 2.048C7.673 3.456 6.856 4.7 5.778 5.778C4.7 6.856 3.456 7.673 2.048 8.229C2.106 8.671 2.219 9.103 2.386 9.525C2.469 9.735 2.564 9.937 2.67 10.132ZM7.9 7.9C7.146 8.653 6.316 9.313 5.412 9.877C4.719 10.309 3.996 10.678 3.242 10.982C3.357 11.123 3.48 11.258 3.611 11.389C4.021 11.799 4.48 12.134 4.988 12.393C6.601 11.611 8.043 10.585 9.314 9.314C10.585 8.043 11.611 6.601 12.393 4.988C12.134 4.48 11.799 4.021 11.389 3.611C11.258 3.48 11.123 3.357 10.982 3.242C10.678 3.996 10.309 4.719 9.877 5.412C9.313 6.316 8.653 7.146 7.9 7.9ZM9.525 12.614C10.231 12.334 10.852 11.926 11.389 11.389C11.926 10.852 12.334 10.231 12.614 9.525C12.871 8.874 13 8.199 13 7.5C13 7.078 12.953 6.664 12.859 6.26C12.094 7.64 11.148 8.894 10.021 10.021C8.894 11.148 7.64 12.094 6.26 12.859C6.664 12.953 7.078 13 7.5 13C8.199 13 8.874 12.871 9.525 12.614Z'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='currentColor'%3E%3Cpath d='M14.856 13.144C14.952 13.241 15 13.359 15 13.5C15 13.641 14.952 13.759 14.856 13.856C14.759 13.952 14.641 14 14.5 14L7.5 14C6.673 14 5.876 13.848 5.107 13.544C4.273 13.213 3.538 12.731 2.904 12.096C2.269 11.462 1.787 10.727 1.456 9.893C1.152 9.124 1 8.327 1 7.5C1 6.673 1.152 5.876 1.456 5.107C1.787 4.273 2.269 3.538 2.904 2.904C3.538 2.269 4.273 1.787 5.107 1.456C5.876 1.152 6.673 1 7.5 1C8.327 1 9.124 1.152 9.893 1.456C10.727 1.787 11.462 2.269 12.096 2.904C12.731 3.538 13.213 4.273 13.544 5.107C13.848 5.876 14 6.673 14 7.5C14 8.327 13.848 9.124 13.544 9.893C13.213 10.727 12.731 11.462 12.096 12.096C11.75 12.443 11.373 12.744 10.967 13L14.5 13C14.641 13 14.759 13.048 14.856 13.144ZM3.611 3.611C3.074 4.148 2.666 4.769 2.386 5.475C2.17 6.02 2.045 6.582 2.01 7.162C3.156 6.663 4.176 5.966 5.071 5.071C5.966 4.176 6.663 3.156 7.162 2.01C6.582 2.045 6.02 2.17 5.475 2.386C4.769 2.666 4.148 3.074 3.611 3.611ZM2.67 10.132C3.441 9.836 4.179 9.468 4.882 9.029C5.722 8.505 6.492 7.893 7.192 7.192C7.893 6.492 8.505 5.722 9.029 4.882C9.468 4.179 9.836 3.441 10.132 2.67C9.937 2.564 9.735 2.469 9.525 2.386C9.103 2.219 8.671 2.106 8.229 2.048C7.673 3.456 6.856 4.7 5.778 5.778C4.7 6.856 3.456 7.673 2.048 8.229C2.106 8.671 2.219 9.103 2.386 9.525C2.469 9.735 2.564 9.937 2.67 10.132ZM7.9 7.9C7.146 8.653 6.316 9.313 5.412 9.877C4.719 10.309 3.996 10.678 3.242 10.982C3.357 11.123 3.48 11.258 3.611 11.389C4.021 11.799 4.48 12.134 4.988 12.393C6.601 11.611 8.043 10.585 9.314 9.314C10.585 8.043 11.611 6.601 12.393 4.988C12.134 4.48 11.799 4.021 11.389 3.611C11.258 3.48 11.123 3.357 10.982 3.242C10.678 3.996 10.309 4.719 9.877 5.412C9.313 6.316 8.653 7.146 7.9 7.9ZM9.525 12.614C10.231 12.334 10.852 11.926 11.389 11.389C11.926 10.852 12.334 10.231 12.614 9.525C12.871 8.874 13 8.199 13 7.5C13 7.078 12.953 6.664 12.859 6.26C12.094 7.64 11.148 8.894 10.021 10.021C8.894 11.148 7.64 12.094 6.26 12.859C6.664 12.953 7.078 13 7.5 13C8.199 13 8.874 12.871 9.525 12.614Z'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
}
```

### Data URL

```text
data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='currentColor'%3E%3Cpath d='M14.856 13.144C14.952 13.241 15 13.359 15 13.5C15 13.641 14.952 13.759 14.856 13.856C14.759 13.952 14.641 14 14.5 14L7.5 14C6.673 14 5.876 13.848 5.107 13.544C4.273 13.213 3.538 12.731 2.904 12.096C2.269 11.462 1.787 10.727 1.456 9.893C1.152 9.124 1 8.327 1 7.5C1 6.673 1.152 5.876 1.456 5.107C1.787 4.273 2.269 3.538 2.904 2.904C3.538 2.269 4.273 1.787 5.107 1.456C5.876 1.152 6.673 1 7.5 1C8.327 1 9.124 1.152 9.893 1.456C10.727 1.787 11.462 2.269 12.096 2.904C12.731 3.538 13.213 4.273 13.544 5.107C13.848 5.876 14 6.673 14 7.5C14 8.327 13.848 9.124 13.544 9.893C13.213 10.727 12.731 11.462 12.096 12.096C11.75 12.443 11.373 12.744 10.967 13L14.5 13C14.641 13 14.759 13.048 14.856 13.144ZM3.611 3.611C3.074 4.148 2.666 4.769 2.386 5.475C2.17 6.02 2.045 6.582 2.01 7.162C3.156 6.663 4.176 5.966 5.071 5.071C5.966 4.176 6.663 3.156 7.162 2.01C6.582 2.045 6.02 2.17 5.475 2.386C4.769 2.666 4.148 3.074 3.611 3.611ZM2.67 10.132C3.441 9.836 4.179 9.468 4.882 9.029C5.722 8.505 6.492 7.893 7.192 7.192C7.893 6.492 8.505 5.722 9.029 4.882C9.468 4.179 9.836 3.441 10.132 2.67C9.937 2.564 9.735 2.469 9.525 2.386C9.103 2.219 8.671 2.106 8.229 2.048C7.673 3.456 6.856 4.7 5.778 5.778C4.7 6.856 3.456 7.673 2.048 8.229C2.106 8.671 2.219 9.103 2.386 9.525C2.469 9.735 2.564 9.937 2.67 10.132ZM7.9 7.9C7.146 8.653 6.316 9.313 5.412 9.877C4.719 10.309 3.996 10.678 3.242 10.982C3.357 11.123 3.48 11.258 3.611 11.389C4.021 11.799 4.48 12.134 4.988 12.393C6.601 11.611 8.043 10.585 9.314 9.314C10.585 8.043 11.611 6.601 12.393 4.988C12.134 4.48 11.799 4.021 11.389 3.611C11.258 3.48 11.123 3.357 10.982 3.242C10.678 3.996 10.309 4.719 9.877 5.412C9.313 6.316 8.653 7.146 7.9 7.9ZM9.525 12.614C10.231 12.334 10.852 11.926 11.389 11.389C11.926 10.852 12.334 10.231 12.614 9.525C12.871 8.874 13 8.199 13 7.5C13 7.078 12.953 6.664 12.859 6.26C12.094 7.64 11.148 8.894 10.021 10.021C8.894 11.148 7.64 12.094 6.26 12.859C6.664 12.953 7.078 13 7.5 13C8.199 13 8.874 12.871 9.525 12.614Z'/%3E%3C/svg%3E
```

### Sprite

```html
<!-- Gentleface "yarn" (line-round), MIT. https://gentleface.com/icons/yarn
     Every icon of this style in one file: https://gentleface.com/sprite/line-round.svg
     Serve it from your own origin: <use> does not load from another origin. -->
<svg width="16" height="16" aria-hidden="true"><use href="/sprite/line-round.svg#yarn"/></svg>
```

### SwiftUI

```swift
// Gentleface "yarn" (line-round), MIT. https://gentleface.com/icons/yarn
import SwiftUI

struct YarnIcon: Shape {
    func path(in rect: CGRect) -> Path {
        var p = Path()
        p.move(to: CGPoint(x: 14.856, y: 13.144))
        p.addCurve(to: CGPoint(x: 15, y: 13.5), control1: CGPoint(x: 14.952, y: 13.241), control2: CGPoint(x: 15, y: 13.359))
        p.addCurve(to: CGPoint(x: 14.856, y: 13.856), control1: CGPoint(x: 15, y: 13.641), control2: CGPoint(x: 14.952, y: 13.759))
        p.addCurve(to: CGPoint(x: 14.5, y: 14), control1: CGPoint(x: 14.759, y: 13.952), control2: CGPoint(x: 14.641, y: 14))
        p.addLine(to: CGPoint(x: 7.5, y: 14))
        p.addCurve(to: CGPoint(x: 5.107, y: 13.544), control1: CGPoint(x: 6.673, y: 14), control2: CGPoint(x: 5.876, y: 13.848))
        p.addCurve(to: CGPoint(x: 2.904, y: 12.096), control1: CGPoint(x: 4.273, y: 13.213), control2: CGPoint(x: 3.538, y: 12.731))
        p.addCurve(to: CGPoint(x: 1.456, y: 9.893), control1: CGPoint(x: 2.269, y: 11.462), control2: CGPoint(x: 1.787, y: 10.727))
        p.addCurve(to: CGPoint(x: 1, y: 7.5), control1: CGPoint(x: 1.152, y: 9.124), control2: CGPoint(x: 1, y: 8.327))
        p.addCurve(to: CGPoint(x: 1.456, y: 5.107), control1: CGPoint(x: 1, y: 6.673), control2: CGPoint(x: 1.152, y: 5.876))
        p.addCurve(to: CGPoint(x: 2.904, y: 2.904), control1: CGPoint(x: 1.787, y: 4.273), control2: CGPoint(x: 2.269, y: 3.538))
        p.addCurve(to: CGPoint(x: 5.107, y: 1.456), control1: CGPoint(x: 3.538, y: 2.269), control2: CGPoint(x: 4.273, y: 1.787))
        p.addCurve(to: CGPoint(x: 7.5, y: 1), control1: CGPoint(x: 5.876, y: 1.152), control2: CGPoint(x: 6.673, y: 1))
        p.addCurve(to: CGPoint(x: 9.893, y: 1.456), control1: CGPoint(x: 8.327, y: 1), control2: CGPoint(x: 9.124, y: 1.152))
        p.addCurve(to: CGPoint(x: 12.096, y: 2.904), control1: CGPoint(x: 10.727, y: 1.787), control2: CGPoint(x: 11.462, y: 2.269))
        p.addCurve(to: CGPoint(x: 13.544, y: 5.107), control1: CGPoint(x: 12.731, y: 3.538), control2: CGPoint(x: 13.213, y: 4.273))
        p.addCurve(to: CGPoint(x: 14, y: 7.5), control1: CGPoint(x: 13.848, y: 5.876), control2: CGPoint(x: 14, y: 6.673))
        p.addCurve(to: CGPoint(x: 13.544, y: 9.893), control1: CGPoint(x: 14, y: 8.327), control2: CGPoint(x: 13.848, y: 9.124))
        p.addCurve(to: CGPoint(x: 12.096, y: 12.096), control1: CGPoint(x: 13.213, y: 10.727), control2: CGPoint(x: 12.731, y: 11.462))
        p.addCurve(to: CGPoint(x: 10.967, y: 13), control1: CGPoint(x: 11.75, y: 12.443), control2: CGPoint(x: 11.373, y: 12.744))
        p.addLine(to: CGPoint(x: 14.5, y: 13))
        p.addCurve(to: CGPoint(x: 14.856, y: 13.144), control1: CGPoint(x: 14.641, y: 13), control2: CGPoint(x: 14.759, y: 13.048))
        p.closeSubpath()
        p.move(to: CGPoint(x: 3.611, y: 3.611))
        p.addCurve(to: CGPoint(x: 2.386, y: 5.475), control1: CGPoint(x: 3.074, y: 4.148), control2: CGPoint(x: 2.666, y: 4.769))
        p.addCurve(to: CGPoint(x: 2.01, y: 7.162), control1: CGPoint(x: 2.17, y: 6.02), control2: CGPoint(x: 2.045, y: 6.582))
        p.addCurve(to: CGPoint(x: 5.071, y: 5.071), control1: CGPoint(x: 3.156, y: 6.663), control2: CGPoint(x: 4.176, y: 5.966))
        p.addCurve(to: CGPoint(x: 7.162, y: 2.01), control1: CGPoint(x: 5.966, y: 4.176), control2: CGPoint(x: 6.663, y: 3.156))
        p.addCurve(to: CGPoint(x: 5.475, y: 2.386), control1: CGPoint(x: 6.582, y: 2.045), control2: CGPoint(x: 6.02, y: 2.17))
        p.addCurve(to: CGPoint(x: 3.611, y: 3.611), control1: CGPoint(x: 4.769, y: 2.666), control2: CGPoint(x: 4.148, y: 3.074))
        p.closeSubpath()
        p.move(to: CGPoint(x: 2.67, y: 10.132))
        p.addCurve(to: CGPoint(x: 4.882, y: 9.029), control1: CGPoint(x: 3.441, y: 9.836), control2: CGPoint(x: 4.179, y: 9.468))
        p.addCurve(to: CGPoint(x: 7.192, y: 7.192), control1: CGPoint(x: 5.722, y: 8.505), control2: CGPoint(x: 6.492, y: 7.893))
        p.addCurve(to: CGPoint(x: 9.029, y: 4.882), control1: CGPoint(x: 7.893, y: 6.492), control2: CGPoint(x: 8.505, y: 5.722))
        p.addCurve(to: CGPoint(x: 10.132, y: 2.67), control1: CGPoint(x: 9.468, y: 4.179), control2: CGPoint(x: 9.836, y: 3.441))
        p.addCurve(to: CGPoint(x: 9.525, y: 2.386), control1: CGPoint(x: 9.937, y: 2.564), control2: CGPoint(x: 9.735, y: 2.469))
        p.addCurve(to: CGPoint(x: 8.229, y: 2.048), control1: CGPoint(x: 9.103, y: 2.219), control2: CGPoint(x: 8.671, y: 2.106))
        p.addCurve(to: CGPoint(x: 5.778, y: 5.778), control1: CGPoint(x: 7.673, y: 3.456), control2: CGPoint(x: 6.856, y: 4.7))
        p.addCurve(to: CGPoint(x: 2.048, y: 8.229), control1: CGPoint(x: 4.7, y: 6.856), control2: CGPoint(x: 3.456, y: 7.673))
        p.addCurve(to: CGPoint(x: 2.386, y: 9.525), control1: CGPoint(x: 2.106, y: 8.671), control2: CGPoint(x: 2.219, y: 9.103))
        p.addCurve(to: CGPoint(x: 2.67, y: 10.132), control1: CGPoint(x: 2.469, y: 9.735), control2: CGPoint(x: 2.564, y: 9.937))
        p.closeSubpath()
        p.move(to: CGPoint(x: 7.9, y: 7.9))
        p.addCurve(to: CGPoint(x: 5.412, y: 9.877), control1: CGPoint(x: 7.146, y: 8.653), control2: CGPoint(x: 6.316, y: 9.313))
        p.addCurve(to: CGPoint(x: 3.242, y: 10.982), control1: CGPoint(x: 4.719, y: 10.309), control2: CGPoint(x: 3.996, y: 10.678))
        p.addCurve(to: CGPoint(x: 3.611, y: 11.389), control1: CGPoint(x: 3.357, y: 11.123), control2: CGPoint(x: 3.48, y: 11.258))
        p.addCurve(to: CGPoint(x: 4.988, y: 12.393), control1: CGPoint(x: 4.021, y: 11.799), control2: CGPoint(x: 4.48, y: 12.134))
        p.addCurve(to: CGPoint(x: 9.314, y: 9.314), control1: CGPoint(x: 6.601, y: 11.611), control2: CGPoint(x: 8.043, y: 10.585))
        p.addCurve(to: CGPoint(x: 12.393, y: 4.988), control1: CGPoint(x: 10.585, y: 8.043), control2: CGPoint(x: 11.611, y: 6.601))
        p.addCurve(to: CGPoint(x: 11.389, y: 3.611), control1: CGPoint(x: 12.134, y: 4.48), control2: CGPoint(x: 11.799, y: 4.021))
        p.addCurve(to: CGPoint(x: 10.982, y: 3.242), control1: CGPoint(x: 11.258, y: 3.48), control2: CGPoint(x: 11.123, y: 3.357))
        p.addCurve(to: CGPoint(x: 9.877, y: 5.412), control1: CGPoint(x: 10.678, y: 3.996), control2: CGPoint(x: 10.309, y: 4.719))
        p.addCurve(to: CGPoint(x: 7.9, y: 7.9), control1: CGPoint(x: 9.313, y: 6.316), control2: CGPoint(x: 8.653, y: 7.146))
        p.closeSubpath()
        p.move(to: CGPoint(x: 9.525, y: 12.614))
        p.addCurve(to: CGPoint(x: 11.389, y: 11.389), control1: CGPoint(x: 10.231, y: 12.334), control2: CGPoint(x: 10.852, y: 11.926))
        p.addCurve(to: CGPoint(x: 12.614, y: 9.525), control1: CGPoint(x: 11.926, y: 10.852), control2: CGPoint(x: 12.334, y: 10.231))
        p.addCurve(to: CGPoint(x: 13, y: 7.5), control1: CGPoint(x: 12.871, y: 8.874), control2: CGPoint(x: 13, y: 8.199))
        p.addCurve(to: CGPoint(x: 12.859, y: 6.26), control1: CGPoint(x: 13, y: 7.078), control2: CGPoint(x: 12.953, y: 6.664))
        p.addCurve(to: CGPoint(x: 10.021, y: 10.021), control1: CGPoint(x: 12.094, y: 7.64), control2: CGPoint(x: 11.148, y: 8.894))
        p.addCurve(to: CGPoint(x: 6.26, y: 12.859), control1: CGPoint(x: 8.894, y: 11.148), control2: CGPoint(x: 7.64, y: 12.094))
        p.addCurve(to: CGPoint(x: 7.5, y: 13), control1: CGPoint(x: 6.664, y: 12.953), control2: CGPoint(x: 7.078, y: 13))
        p.addCurve(to: CGPoint(x: 9.525, y: 12.614), control1: CGPoint(x: 8.199, y: 13), control2: CGPoint(x: 8.874, y: 12.871))
        p.closeSubpath()
        return p.applying(CGAffineTransform(scaleX: rect.width / 16, y: rect.height / 16))
    }
}

// YarnIcon().frame(width: 16, height: 16) fills with the foreground style. Keep it on whole points to stay crisp.
```

### Compose

```kotlin
// Gentleface "yarn" (line-round), MIT. https://gentleface.com/icons/yarn
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.SolidColor
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.graphics.vector.addPathNodes
import androidx.compose.ui.unit.dp

val YarnIcon: ImageVector by lazy {
    ImageVector.Builder(
        name = "yarn", defaultWidth = 16.dp, defaultHeight = 16.dp,
        viewportWidth = 16f, viewportHeight = 16f,
    ).addPath(
        pathData = addPathNodes("M14.856 13.144C14.952 13.241 15 13.359 15 13.5C15 13.641 14.952 13.759 14.856 13.856C14.759 13.952 14.641 14 14.5 14L7.5 14C6.673 14 5.876 13.848 5.107 13.544C4.273 13.213 3.538 12.731 2.904 12.096C2.269 11.462 1.787 10.727 1.456 9.893C1.152 9.124 1 8.327 1 7.5C1 6.673 1.152 5.876 1.456 5.107C1.787 4.273 2.269 3.538 2.904 2.904C3.538 2.269 4.273 1.787 5.107 1.456C5.876 1.152 6.673 1 7.5 1C8.327 1 9.124 1.152 9.893 1.456C10.727 1.787 11.462 2.269 12.096 2.904C12.731 3.538 13.213 4.273 13.544 5.107C13.848 5.876 14 6.673 14 7.5C14 8.327 13.848 9.124 13.544 9.893C13.213 10.727 12.731 11.462 12.096 12.096C11.75 12.443 11.373 12.744 10.967 13L14.5 13C14.641 13 14.759 13.048 14.856 13.144ZM3.611 3.611C3.074 4.148 2.666 4.769 2.386 5.475C2.17 6.02 2.045 6.582 2.01 7.162C3.156 6.663 4.176 5.966 5.071 5.071C5.966 4.176 6.663 3.156 7.162 2.01C6.582 2.045 6.02 2.17 5.475 2.386C4.769 2.666 4.148 3.074 3.611 3.611ZM2.67 10.132C3.441 9.836 4.179 9.468 4.882 9.029C5.722 8.505 6.492 7.893 7.192 7.192C7.893 6.492 8.505 5.722 9.029 4.882C9.468 4.179 9.836 3.441 10.132 2.67C9.937 2.564 9.735 2.469 9.525 2.386C9.103 2.219 8.671 2.106 8.229 2.048C7.673 3.456 6.856 4.7 5.778 5.778C4.7 6.856 3.456 7.673 2.048 8.229C2.106 8.671 2.219 9.103 2.386 9.525C2.469 9.735 2.564 9.937 2.67 10.132ZM7.9 7.9C7.146 8.653 6.316 9.313 5.412 9.877C4.719 10.309 3.996 10.678 3.242 10.982C3.357 11.123 3.48 11.258 3.611 11.389C4.021 11.799 4.48 12.134 4.988 12.393C6.601 11.611 8.043 10.585 9.314 9.314C10.585 8.043 11.611 6.601 12.393 4.988C12.134 4.48 11.799 4.021 11.389 3.611C11.258 3.48 11.123 3.357 10.982 3.242C10.678 3.996 10.309 4.719 9.877 5.412C9.313 6.316 8.653 7.146 7.9 7.9ZM9.525 12.614C10.231 12.334 10.852 11.926 11.389 11.389C11.926 10.852 12.334 10.231 12.614 9.525C12.871 8.874 13 8.199 13 7.5C13 7.078 12.953 6.664 12.859 6.26C12.094 7.64 11.148 8.894 10.021 10.021C8.894 11.148 7.64 12.094 6.26 12.859C6.664 12.953 7.078 13 7.5 13C8.199 13 8.874 12.871 9.525 12.614Z"),
        fill = SolidColor(Color.Black),
    ).build()
}

// Icon(YarnIcon, contentDescription = null) tints it with LocalContentColor.
```

### Android XML

```xml
<!-- res/drawable/ic_yarn.xml · Gentleface "yarn" (line-round), MIT. https://gentleface.com/icons/yarn -->
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="16dp"
    android:height="16dp"
    android:viewportWidth="16"
    android:viewportHeight="16"
    android:tint="?attr/colorControlNormal">
  <path
      android:fillColor="@android:color/white"
      android:pathData="M14.856 13.144C14.952 13.241 15 13.359 15 13.5C15 13.641 14.952 13.759 14.856 13.856C14.759 13.952 14.641 14 14.5 14L7.5 14C6.673 14 5.876 13.848 5.107 13.544C4.273 13.213 3.538 12.731 2.904 12.096C2.269 11.462 1.787 10.727 1.456 9.893C1.152 9.124 1 8.327 1 7.5C1 6.673 1.152 5.876 1.456 5.107C1.787 4.273 2.269 3.538 2.904 2.904C3.538 2.269 4.273 1.787 5.107 1.456C5.876 1.152 6.673 1 7.5 1C8.327 1 9.124 1.152 9.893 1.456C10.727 1.787 11.462 2.269 12.096 2.904C12.731 3.538 13.213 4.273 13.544 5.107C13.848 5.876 14 6.673 14 7.5C14 8.327 13.848 9.124 13.544 9.893C13.213 10.727 12.731 11.462 12.096 12.096C11.75 12.443 11.373 12.744 10.967 13L14.5 13C14.641 13 14.759 13.048 14.856 13.144ZM3.611 3.611C3.074 4.148 2.666 4.769 2.386 5.475C2.17 6.02 2.045 6.582 2.01 7.162C3.156 6.663 4.176 5.966 5.071 5.071C5.966 4.176 6.663 3.156 7.162 2.01C6.582 2.045 6.02 2.17 5.475 2.386C4.769 2.666 4.148 3.074 3.611 3.611ZM2.67 10.132C3.441 9.836 4.179 9.468 4.882 9.029C5.722 8.505 6.492 7.893 7.192 7.192C7.893 6.492 8.505 5.722 9.029 4.882C9.468 4.179 9.836 3.441 10.132 2.67C9.937 2.564 9.735 2.469 9.525 2.386C9.103 2.219 8.671 2.106 8.229 2.048C7.673 3.456 6.856 4.7 5.778 5.778C4.7 6.856 3.456 7.673 2.048 8.229C2.106 8.671 2.219 9.103 2.386 9.525C2.469 9.735 2.564 9.937 2.67 10.132ZM7.9 7.9C7.146 8.653 6.316 9.313 5.412 9.877C4.719 10.309 3.996 10.678 3.242 10.982C3.357 11.123 3.48 11.258 3.611 11.389C4.021 11.799 4.48 12.134 4.988 12.393C6.601 11.611 8.043 10.585 9.314 9.314C10.585 8.043 11.611 6.601 12.393 4.988C12.134 4.48 11.799 4.021 11.389 3.611C11.258 3.48 11.123 3.357 10.982 3.242C10.678 3.996 10.309 4.719 9.877 5.412C9.313 6.316 8.653 7.146 7.9 7.9ZM9.525 12.614C10.231 12.334 10.852 11.926 11.389 11.389C11.926 10.852 12.334 10.231 12.614 9.525C12.871 8.874 13 8.199 13 7.5C13 7.078 12.953 6.664 12.859 6.26C12.094 7.64 11.148 8.894 10.021 10.021C8.894 11.148 7.64 12.094 6.26 12.859C6.664 12.953 7.078 13 7.5 13C8.199 13 8.874 12.871 9.525 12.614Z"/>
</vector>
```

### Flutter

```dart
// Gentleface "yarn" (line-round), MIT. https://gentleface.com/icons/yarn
import 'package:flutter/widgets.dart';

class YarnIcon extends StatelessWidget {
  const YarnIcon({super.key, this.size = 16, this.color});
  final double size;
  final Color? color;

  @override
  Widget build(BuildContext context) => CustomPaint(
        size: Size.square(size),
        painter: _YarnIconPainter(color ?? IconTheme.of(context).color ?? const Color(0xFF000000)),
      );
}

class _YarnIconPainter extends CustomPainter {
  _YarnIconPainter(this.color);
  final Color color;

  @override
  void paint(Canvas canvas, Size size) {
    canvas.scale(size.width / 16, size.height / 16);
    final p = Path()
      ..moveTo(14.856, 13.144)
      ..cubicTo(14.952, 13.241, 15, 13.359, 15, 13.5)
      ..cubicTo(15, 13.641, 14.952, 13.759, 14.856, 13.856)
      ..cubicTo(14.759, 13.952, 14.641, 14, 14.5, 14)
      ..lineTo(7.5, 14)
      ..cubicTo(6.673, 14, 5.876, 13.848, 5.107, 13.544)
      ..cubicTo(4.273, 13.213, 3.538, 12.731, 2.904, 12.096)
      ..cubicTo(2.269, 11.462, 1.787, 10.727, 1.456, 9.893)
      ..cubicTo(1.152, 9.124, 1, 8.327, 1, 7.5)
      ..cubicTo(1, 6.673, 1.152, 5.876, 1.456, 5.107)
      ..cubicTo(1.787, 4.273, 2.269, 3.538, 2.904, 2.904)
      ..cubicTo(3.538, 2.269, 4.273, 1.787, 5.107, 1.456)
      ..cubicTo(5.876, 1.152, 6.673, 1, 7.5, 1)
      ..cubicTo(8.327, 1, 9.124, 1.152, 9.893, 1.456)
      ..cubicTo(10.727, 1.787, 11.462, 2.269, 12.096, 2.904)
      ..cubicTo(12.731, 3.538, 13.213, 4.273, 13.544, 5.107)
      ..cubicTo(13.848, 5.876, 14, 6.673, 14, 7.5)
      ..cubicTo(14, 8.327, 13.848, 9.124, 13.544, 9.893)
      ..cubicTo(13.213, 10.727, 12.731, 11.462, 12.096, 12.096)
      ..cubicTo(11.75, 12.443, 11.373, 12.744, 10.967, 13)
      ..lineTo(14.5, 13)
      ..cubicTo(14.641, 13, 14.759, 13.048, 14.856, 13.144)
      ..close()
      ..moveTo(3.611, 3.611)
      ..cubicTo(3.074, 4.148, 2.666, 4.769, 2.386, 5.475)
      ..cubicTo(2.17, 6.02, 2.045, 6.582, 2.01, 7.162)
      ..cubicTo(3.156, 6.663, 4.176, 5.966, 5.071, 5.071)
      ..cubicTo(5.966, 4.176, 6.663, 3.156, 7.162, 2.01)
      ..cubicTo(6.582, 2.045, 6.02, 2.17, 5.475, 2.386)
      ..cubicTo(4.769, 2.666, 4.148, 3.074, 3.611, 3.611)
      ..close()
      ..moveTo(2.67, 10.132)
      ..cubicTo(3.441, 9.836, 4.179, 9.468, 4.882, 9.029)
      ..cubicTo(5.722, 8.505, 6.492, 7.893, 7.192, 7.192)
      ..cubicTo(7.893, 6.492, 8.505, 5.722, 9.029, 4.882)
      ..cubicTo(9.468, 4.179, 9.836, 3.441, 10.132, 2.67)
      ..cubicTo(9.937, 2.564, 9.735, 2.469, 9.525, 2.386)
      ..cubicTo(9.103, 2.219, 8.671, 2.106, 8.229, 2.048)
      ..cubicTo(7.673, 3.456, 6.856, 4.7, 5.778, 5.778)
      ..cubicTo(4.7, 6.856, 3.456, 7.673, 2.048, 8.229)
      ..cubicTo(2.106, 8.671, 2.219, 9.103, 2.386, 9.525)
      ..cubicTo(2.469, 9.735, 2.564, 9.937, 2.67, 10.132)
      ..close()
      ..moveTo(7.9, 7.9)
      ..cubicTo(7.146, 8.653, 6.316, 9.313, 5.412, 9.877)
      ..cubicTo(4.719, 10.309, 3.996, 10.678, 3.242, 10.982)
      ..cubicTo(3.357, 11.123, 3.48, 11.258, 3.611, 11.389)
      ..cubicTo(4.021, 11.799, 4.48, 12.134, 4.988, 12.393)
      ..cubicTo(6.601, 11.611, 8.043, 10.585, 9.314, 9.314)
      ..cubicTo(10.585, 8.043, 11.611, 6.601, 12.393, 4.988)
      ..cubicTo(12.134, 4.48, 11.799, 4.021, 11.389, 3.611)
      ..cubicTo(11.258, 3.48, 11.123, 3.357, 10.982, 3.242)
      ..cubicTo(10.678, 3.996, 10.309, 4.719, 9.877, 5.412)
      ..cubicTo(9.313, 6.316, 8.653, 7.146, 7.9, 7.9)
      ..close()
      ..moveTo(9.525, 12.614)
      ..cubicTo(10.231, 12.334, 10.852, 11.926, 11.389, 11.389)
      ..cubicTo(11.926, 10.852, 12.334, 10.231, 12.614, 9.525)
      ..cubicTo(12.871, 8.874, 13, 8.199, 13, 7.5)
      ..cubicTo(13, 7.078, 12.953, 6.664, 12.859, 6.26)
      ..cubicTo(12.094, 7.64, 11.148, 8.894, 10.021, 10.021)
      ..cubicTo(8.894, 11.148, 7.64, 12.094, 6.26, 12.859)
      ..cubicTo(6.664, 12.953, 7.078, 13, 7.5, 13)
      ..cubicTo(8.199, 13, 8.874, 12.871, 9.525, 12.614)
      ..close();
    canvas.drawPath(p, Paint()..color = color);
  }

  @override
  bool shouldRepaint(_YarnIconPainter old) => old.color != color;
}
```