yarn icon
yarn from Phosphor by Phosphor Icons · Regular · MIT Free for personal and commercial use.
- Name
- yarn
- Set
- Phosphor
- Style
- Regular
- Viewbox
- 256×256
- License
- MIT
5 other variants in Phosphor
The same icon in other sets
yarn-fillAkar IconsyarnBoxicons BrandsyarnCatppuccin IconsyarnCoreUI BrandsyarnDeviconyarnFont Awesome 6 BrandsyarnFont Awesome BrandsyarnFluent EmojiyarnFluent Emoji FlatyarnFluent Emoji High ContrastyarnLine AwesomeyarnSVG LogosyarnMaterial Icon ThemeyarnNoto EmojiyarnOpenMojiyarnSimple Iconsyarn-darkSkill IconsyarnTabler IconsyarnTwitter 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="M232 216h-48.61A103.95 103.95 0 1 0 128 232h104a8 8 0 1 0 0-16M128 40a87.5 87.5 0 0 1 43.93 11.77a222 222 0 0 0-27.88 15.09a222.2 222.2 0 0 0-45-22A87.5 87.5 0 0 1 128 40M78.56 55.24a206 206 0 0 1 51.11 21.57a226 226 0 0 0-19.57 16.55a181.5 181.5 0 0 0-52.37-18.27a88.7 88.7 0 0 1 20.83-19.85M48.72 89.82a165.8 165.8 0 0 1 49.67 15.51a228 228 0 0 0-15.63 19.17A142.7 142.7 0 0 0 41.28 113a87.5 87.5 0 0 1 7.44-23.18M40 129a126 126 0 0 1 33.63 9a222.4 222.4 0 0 0-19.07 38.45A87.5 87.5 0 0 1 40 129m26.42 61.81A209.36 209.36 0 0 1 187 62.74a89 89 0 0 1 16.22 19.57A183.89 183.89 0 0 0 87 205.82a88.6 88.6 0 0 1-20.57-15.01ZM125.66 216a87.7 87.7 0 0 1-23.83-4A167.84 167.84 0 0 1 210.28 96.79a87.4 87.4 0 0 1 5.38 23.55a144.59 144.59 0 0 0-90 95.66m89.82-78.44a88.19 88.19 0 0 1-72.67 77.22a128.64 128.64 0 0 1 72.67-77.25Z"/></svg>
React
import type { SVGProps } from "react";
export function PhYarn(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="M232 216h-48.61A103.95 103.95 0 1 0 128 232h104a8 8 0 1 0 0-16M128 40a87.5 87.5 0 0 1 43.93 11.77a222 222 0 0 0-27.88 15.09a222.2 222.2 0 0 0-45-22A87.5 87.5 0 0 1 128 40M78.56 55.24a206 206 0 0 1 51.11 21.57a226 226 0 0 0-19.57 16.55a181.5 181.5 0 0 0-52.37-18.27a88.7 88.7 0 0 1 20.83-19.85M48.72 89.82a165.8 165.8 0 0 1 49.67 15.51a228 228 0 0 0-15.63 19.17A142.7 142.7 0 0 0 41.28 113a87.5 87.5 0 0 1 7.44-23.18M40 129a126 126 0 0 1 33.63 9a222.4 222.4 0 0 0-19.07 38.45A87.5 87.5 0 0 1 40 129m26.42 61.81A209.36 209.36 0 0 1 187 62.74a89 89 0 0 1 16.22 19.57A183.89 183.89 0 0 0 87 205.82a88.6 88.6 0 0 1-20.57-15.01ZM125.66 216a87.7 87.7 0 0 1-23.83-4A167.84 167.84 0 0 1 210.28 96.79a87.4 87.4 0 0 1 5.38 23.55a144.59 144.59 0 0 0-90 95.66m89.82-78.44a88.19 88.19 0 0 1-72.67 77.22a128.64 128.64 0 0 1 72.67-77.25Z"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M232 216h-48.61A103.95 103.95 0 1 0 128 232h104a8 8 0 1 0 0-16M128 40a87.5 87.5 0 0 1 43.93 11.77a222 222 0 0 0-27.88 15.09a222.2 222.2 0 0 0-45-22A87.5 87.5 0 0 1 128 40M78.56 55.24a206 206 0 0 1 51.11 21.57a226 226 0 0 0-19.57 16.55a181.5 181.5 0 0 0-52.37-18.27a88.7 88.7 0 0 1 20.83-19.85M48.72 89.82a165.8 165.8 0 0 1 49.67 15.51a228 228 0 0 0-15.63 19.17A142.7 142.7 0 0 0 41.28 113a87.5 87.5 0 0 1 7.44-23.18M40 129a126 126 0 0 1 33.63 9a222.4 222.4 0 0 0-19.07 38.45A87.5 87.5 0 0 1 40 129m26.42 61.81A209.36 209.36 0 0 1 187 62.74a89 89 0 0 1 16.22 19.57A183.89 183.89 0 0 0 87 205.82a88.6 88.6 0 0 1-20.57-15.01ZM125.66 216a87.7 87.7 0 0 1-23.83-4A167.84 167.84 0 0 1 210.28 96.79a87.4 87.4 0 0 1 5.38 23.55a144.59 144.59 0 0 0-90 95.66m89.82-78.44a88.19 88.19 0 0 1-72.67 77.22a128.64 128.64 0 0 1 72.67-77.25Z"/></svg> </template>
CSS
.icon-yarn {
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%22M232%20216h-48.61A103.95%20103.95%200%201%200%20128%20232h104a8%208%200%201%200%200-16M128%2040a87.5%2087.5%200%200%201%2043.93%2011.77a222%20222%200%200%200-27.88%2015.09a222.2%20222.2%200%200%200-45-22A87.5%2087.5%200%200%201%20128%2040M78.56%2055.24a206%20206%200%200%201%2051.11%2021.57a226%20226%200%200%200-19.57%2016.55a181.5%20181.5%200%200%200-52.37-18.27a88.7%2088.7%200%200%201%2020.83-19.85M48.72%2089.82a165.8%20165.8%200%200%201%2049.67%2015.51a228%20228%200%200%200-15.63%2019.17A142.7%20142.7%200%200%200%2041.28%20113a87.5%2087.5%200%200%201%207.44-23.18M40%20129a126%20126%200%200%201%2033.63%209a222.4%20222.4%200%200%200-19.07%2038.45A87.5%2087.5%200%200%201%2040%20129m26.42%2061.81A209.36%20209.36%200%200%201%20187%2062.74a89%2089%200%200%201%2016.22%2019.57A183.89%20183.89%200%200%200%2087%20205.82a88.6%2088.6%200%200%201-20.57-15.01ZM125.66%20216a87.7%2087.7%200%200%201-23.83-4A167.84%20167.84%200%200%201%20210.28%2096.79a87.4%2087.4%200%200%201%205.38%2023.55a144.59%20144.59%200%200%200-90%2095.66m89.82-78.44a88.19%2088.19%200%200%201-72.67%2077.22a128.64%20128.64%200%200%201%2072.67-77.25Z%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%22M232%20216h-48.61A103.95%20103.95%200%201%200%20128%20232h104a8%208%200%201%200%200-16M128%2040a87.5%2087.5%200%200%201%2043.93%2011.77a222%20222%200%200%200-27.88%2015.09a222.2%20222.2%200%200%200-45-22A87.5%2087.5%200%200%201%20128%2040M78.56%2055.24a206%20206%200%200%201%2051.11%2021.57a226%20226%200%200%200-19.57%2016.55a181.5%20181.5%200%200%200-52.37-18.27a88.7%2088.7%200%200%201%2020.83-19.85M48.72%2089.82a165.8%20165.8%200%200%201%2049.67%2015.51a228%20228%200%200%200-15.63%2019.17A142.7%20142.7%200%200%200%2041.28%20113a87.5%2087.5%200%200%201%207.44-23.18M40%20129a126%20126%200%200%201%2033.63%209a222.4%20222.4%200%200%200-19.07%2038.45A87.5%2087.5%200%200%201%2040%20129m26.42%2061.81A209.36%20209.36%200%200%201%20187%2062.74a89%2089%200%200%201%2016.22%2019.57A183.89%20183.89%200%200%200%2087%20205.82a88.6%2088.6%200%200%201-20.57-15.01ZM125.66%20216a87.7%2087.7%200%200%201-23.83-4A167.84%20167.84%200%200%201%20210.28%2096.79a87.4%2087.4%200%200%201%205.38%2023.55a144.59%20144.59%200%200%200-90%2095.66m89.82-78.44a88.19%2088.19%200%200%201-72.67%2077.22a128.64%20128.64%200%200%201%2072.67-77.25Z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/ph/yarn.svg?color=%231a73e8&size=48
