yarn icon

Yarn: yarn, knitting, crochet, knit. Drawn on the 16 px grid. Free SVG, PNG and code, MIT licensed.

Animated yarn-unwind · line-round

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.

Download SVG

Native SVG animation, with no CSS or script. It loops by itself. Inline it to take the text color: in an <img> it draws black. To play it once on hover or click, run 0.25 s to 2.65 s. Examples and helper.

Code line-round

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

// 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: see /icons/yarn.md

Svelte

Svelte: see /icons/yarn.md

HTML img

HTML img: see /icons/yarn.md

CSS

CSS: see /icons/yarn.md

Data URL

Data URL: see /icons/yarn.md

Sprite

Sprite: see /icons/yarn.md

SwiftUI

SwiftUI: see /icons/yarn.md

Compose

Compose: see /icons/yarn.md

Android XML

Android XML: see /icons/yarn.md

Flutter

Flutter: see /icons/yarn.md

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. 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. More in how to use.

With npm: import { YarnIcon } from '@gentleface/react'; (setup).

Meaning

Use it for

yarn, knitting, crochet, knit, wool

Alternatives

needle: sewing

Also fits

needle: knitting or crochet

Tags

yarn, knitting, crochet, knit, wool, ball-of-yarn, craft, hobby, handmade, thread

Category

Home & household

Component name

YarnIcon

History

2026-11-06 20 px drawn, 24 px drawn, added, released in 0.4.0

Since

version 0.4.0

More home & household icons

air-freshener air-purifier air-vent armchair baby-changing bath bed bed-double bed-off bed-person bed-plus bed-single blender blinds broom broom-sparkle · all home & household icons

For agents

Metadata: /icons/yarn.json · Markdown: /icons/yarn.md · SVG: https://gentleface.com/svg/{style}/16/yarn.svg · PNG: https://gentleface.com/png/{style}/{16|32|48}/yarn.png

yarn icon Copy name

line-round

line-soft

line-sharp

solid-round

solid-soft

solid-sharp