yarn icon

yarn-fill from Phosphor by Phosphor Icons · Fill · MIT Free for personal and commercial use.

Name: yarn-fill
Set: Phosphor
Style: Fill
Viewbox: 256×256
License: MIT

5 other variants in Phosphor

yarn yarn-bold yarn-duotone yarn-light yarn-thin

The same icon in other sets

yarn-fillAkar Icons yarnBoxicons Brands yarnCatppuccin Icons yarnCoreUI Brands yarnDevicon yarnFont Awesome 6 Brands yarnFont Awesome Brands yarnFluent Emoji yarnFluent Emoji Flat yarnFluent Emoji High Contrast yarnLine Awesome yarnSVG Logos yarnMaterial Icon Theme yarnNoto Emoji yarnOpenMoji yarnSimple Icons yarn-darkSkill Icons yarnTabler Icons yarnTwitter Emoji

Use the yarn icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M69.4 144.89a221 221 0 0 0-18.77 42.6a4 4 0 0 1-7 1.19a103.44 103.44 0 0 1-18.83-48.11a4 4 0 0 1 4.13-4.47a119 119 0 0 1 40.47 8.79M44 77.14a180.1 180.1 0 0 1 63 19.12a227 227 0 0 1 22.6-19.49a206.4 206.4 0 0 0-69.28-25.6a4 4 0 0 0-3.42 1A105.3 105.3 0 0 0 41.08 71A4 4 0 0 0 44 77.14m195.58 144.21A7.91 7.91 0 0 0 232 216h-48.64a104.25 104.25 0 0 0 46.89-69a4 4 0 0 0-5.27-4.52a120.6 120.6 0 0 0-74.1 73.52H134a136.55 136.55 0 0 1 94.78-91.37a4 4 0 0 0 2.92-4.15a102.6 102.6 0 0 0-3.58-20.56a4 4 0 0 0-4.89-2.8A164.53 164.53 0 0 0 103 225a4 4 0 0 0 3.08 4.69A104 104 0 0 0 128 232h104a8 8 0 0 0 7.58-10.65m-211-101.27a134.5 134.5 0 0 1 49.39 11a224 224 0 0 1 17.55-22.68a164.3 164.3 0 0 0-62.16-16.12a4 4 0 0 0-4 2.75a103 103 0 0 0-4.63 20.61a4 4 0 0 0 3.84 4.44Zm57.26-79.42A222.8 222.8 0 0 1 144 66.8a221.3 221.3 0 0 1 38.8-19.67a4 4 0 0 0 .7-7.08a103.86 103.86 0 0 0-98.2-6.85a4 4 0 0 0 .54 7.46M216 82.51a4 4 0 0 0 2.4-5.87a105 105 0 0 0-12.82-17.81a4 4 0 0 0-4.21-1.19A208.81 208.81 0 0 0 62.21 205.51a4 4 0 0 0 1.44 4.13a104.3 104.3 0 0 0 18.55 11.72a4 4 0 0 0 5.71-2.75A180.61 180.61 0 0 1 216 82.51"/></svg>

React

import type { SVGProps } from "react";

export function PhYarnFill(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M69.4 144.89a221 221 0 0 0-18.77 42.6a4 4 0 0 1-7 1.19a103.44 103.44 0 0 1-18.83-48.11a4 4 0 0 1 4.13-4.47a119 119 0 0 1 40.47 8.79M44 77.14a180.1 180.1 0 0 1 63 19.12a227 227 0 0 1 22.6-19.49a206.4 206.4 0 0 0-69.28-25.6a4 4 0 0 0-3.42 1A105.3 105.3 0 0 0 41.08 71A4 4 0 0 0 44 77.14m195.58 144.21A7.91 7.91 0 0 0 232 216h-48.64a104.25 104.25 0 0 0 46.89-69a4 4 0 0 0-5.27-4.52a120.6 120.6 0 0 0-74.1 73.52H134a136.55 136.55 0 0 1 94.78-91.37a4 4 0 0 0 2.92-4.15a102.6 102.6 0 0 0-3.58-20.56a4 4 0 0 0-4.89-2.8A164.53 164.53 0 0 0 103 225a4 4 0 0 0 3.08 4.69A104 104 0 0 0 128 232h104a8 8 0 0 0 7.58-10.65m-211-101.27a134.5 134.5 0 0 1 49.39 11a224 224 0 0 1 17.55-22.68a164.3 164.3 0 0 0-62.16-16.12a4 4 0 0 0-4 2.75a103 103 0 0 0-4.63 20.61a4 4 0 0 0 3.84 4.44Zm57.26-79.42A222.8 222.8 0 0 1 144 66.8a221.3 221.3 0 0 1 38.8-19.67a4 4 0 0 0 .7-7.08a103.86 103.86 0 0 0-98.2-6.85a4 4 0 0 0 .54 7.46M216 82.51a4 4 0 0 0 2.4-5.87a105 105 0 0 0-12.82-17.81a4 4 0 0 0-4.21-1.19A208.81 208.81 0 0 0 62.21 205.51a4 4 0 0 0 1.44 4.13a104.3 104.3 0 0 0 18.55 11.72a4 4 0 0 0 5.71-2.75A180.61 180.61 0 0 1 216 82.51"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M69.4 144.89a221 221 0 0 0-18.77 42.6a4 4 0 0 1-7 1.19a103.44 103.44 0 0 1-18.83-48.11a4 4 0 0 1 4.13-4.47a119 119 0 0 1 40.47 8.79M44 77.14a180.1 180.1 0 0 1 63 19.12a227 227 0 0 1 22.6-19.49a206.4 206.4 0 0 0-69.28-25.6a4 4 0 0 0-3.42 1A105.3 105.3 0 0 0 41.08 71A4 4 0 0 0 44 77.14m195.58 144.21A7.91 7.91 0 0 0 232 216h-48.64a104.25 104.25 0 0 0 46.89-69a4 4 0 0 0-5.27-4.52a120.6 120.6 0 0 0-74.1 73.52H134a136.55 136.55 0 0 1 94.78-91.37a4 4 0 0 0 2.92-4.15a102.6 102.6 0 0 0-3.58-20.56a4 4 0 0 0-4.89-2.8A164.53 164.53 0 0 0 103 225a4 4 0 0 0 3.08 4.69A104 104 0 0 0 128 232h104a8 8 0 0 0 7.58-10.65m-211-101.27a134.5 134.5 0 0 1 49.39 11a224 224 0 0 1 17.55-22.68a164.3 164.3 0 0 0-62.16-16.12a4 4 0 0 0-4 2.75a103 103 0 0 0-4.63 20.61a4 4 0 0 0 3.84 4.44Zm57.26-79.42A222.8 222.8 0 0 1 144 66.8a221.3 221.3 0 0 1 38.8-19.67a4 4 0 0 0 .7-7.08a103.86 103.86 0 0 0-98.2-6.85a4 4 0 0 0 .54 7.46M216 82.51a4 4 0 0 0 2.4-5.87a105 105 0 0 0-12.82-17.81a4 4 0 0 0-4.21-1.19A208.81 208.81 0 0 0 62.21 205.51a4 4 0 0 0 1.44 4.13a104.3 104.3 0 0 0 18.55 11.72a4 4 0 0 0 5.71-2.75A180.61 180.61 0 0 1 216 82.51"/></svg>
</template>

CSS

.icon-yarn-fill {
  width: 24px;
  height: 24px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M69.4%20144.89a221%20221%200%200%200-18.77%2042.6a4%204%200%200%201-7%201.19a103.44%20103.44%200%200%201-18.83-48.11a4%204%200%200%201%204.13-4.47a119%20119%200%200%201%2040.47%208.79M44%2077.14a180.1%20180.1%200%200%201%2063%2019.12a227%20227%200%200%201%2022.6-19.49a206.4%20206.4%200%200%200-69.28-25.6a4%204%200%200%200-3.42%201A105.3%20105.3%200%200%200%2041.08%2071A4%204%200%200%200%2044%2077.14m195.58%20144.21A7.91%207.91%200%200%200%20232%20216h-48.64a104.25%20104.25%200%200%200%2046.89-69a4%204%200%200%200-5.27-4.52a120.6%20120.6%200%200%200-74.1%2073.52H134a136.55%20136.55%200%200%201%2094.78-91.37a4%204%200%200%200%202.92-4.15a102.6%20102.6%200%200%200-3.58-20.56a4%204%200%200%200-4.89-2.8A164.53%20164.53%200%200%200%20103%20225a4%204%200%200%200%203.08%204.69A104%20104%200%200%200%20128%20232h104a8%208%200%200%200%207.58-10.65m-211-101.27a134.5%20134.5%200%200%201%2049.39%2011a224%20224%200%200%201%2017.55-22.68a164.3%20164.3%200%200%200-62.16-16.12a4%204%200%200%200-4%202.75a103%20103%200%200%200-4.63%2020.61a4%204%200%200%200%203.84%204.44Zm57.26-79.42A222.8%20222.8%200%200%201%20144%2066.8a221.3%20221.3%200%200%201%2038.8-19.67a4%204%200%200%200%20.7-7.08a103.86%20103.86%200%200%200-98.2-6.85a4%204%200%200%200%20.54%207.46M216%2082.51a4%204%200%200%200%202.4-5.87a105%20105%200%200%200-12.82-17.81a4%204%200%200%200-4.21-1.19A208.81%20208.81%200%200%200%2062.21%20205.51a4%204%200%200%200%201.44%204.13a104.3%20104.3%200%200%200%2018.55%2011.72a4%204%200%200%200%205.71-2.75A180.61%20180.61%200%200%201%20216%2082.51%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M69.4%20144.89a221%20221%200%200%200-18.77%2042.6a4%204%200%200%201-7%201.19a103.44%20103.44%200%200%201-18.83-48.11a4%204%200%200%201%204.13-4.47a119%20119%200%200%201%2040.47%208.79M44%2077.14a180.1%20180.1%200%200%201%2063%2019.12a227%20227%200%200%201%2022.6-19.49a206.4%20206.4%200%200%200-69.28-25.6a4%204%200%200%200-3.42%201A105.3%20105.3%200%200%200%2041.08%2071A4%204%200%200%200%2044%2077.14m195.58%20144.21A7.91%207.91%200%200%200%20232%20216h-48.64a104.25%20104.25%200%200%200%2046.89-69a4%204%200%200%200-5.27-4.52a120.6%20120.6%200%200%200-74.1%2073.52H134a136.55%20136.55%200%200%201%2094.78-91.37a4%204%200%200%200%202.92-4.15a102.6%20102.6%200%200%200-3.58-20.56a4%204%200%200%200-4.89-2.8A164.53%20164.53%200%200%200%20103%20225a4%204%200%200%200%203.08%204.69A104%20104%200%200%200%20128%20232h104a8%208%200%200%200%207.58-10.65m-211-101.27a134.5%20134.5%200%200%201%2049.39%2011a224%20224%200%200%201%2017.55-22.68a164.3%20164.3%200%200%200-62.16-16.12a4%204%200%200%200-4%202.75a103%20103%200%200%200-4.63%2020.61a4%204%200%200%200%203.84%204.44Zm57.26-79.42A222.8%20222.8%200%200%201%20144%2066.8a221.3%20221.3%200%200%201%2038.8-19.67a4%204%200%200%200%20.7-7.08a103.86%20103.86%200%200%200-98.2-6.85a4%204%200%200%200%20.54%207.46M216%2082.51a4%204%200%200%200%202.4-5.87a105%20105%200%200%200-12.82-17.81a4%204%200%200%200-4.21-1.19A208.81%20208.81%200%200%200%2062.21%20205.51a4%204%200%200%200%201.44%204.13a104.3%20104.3%200%200%200%2018.55%2011.72a4%204%200%200%200%205.71-2.75A180.61%20180.61%200%200%201%20216%2082.51%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/ph/yarn-fill.svg?color=%231a73e8&size=48