yarn logo
yarn from Devicon by konpa · Original · MIT Free for personal and commercial use.
- Name
- yarn
- Set
- Devicon
- Style
- Original
- Viewbox
- 128×128
- License
- MIT
1 other variant in Devicon
The same logo in other sets
Use the yarn logo
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 128 128"><path fill="#2c8ebb" d="M64 0a64 64 0 1 0 64 64A64 64 0 0 0 64 0m4.685 21.948a5.04 5.04 0 0 1 2.21.802c.671.444 1.528 1.032 4.026 6.194a4.84 4.84 0 0 1 2.942-.103a3.93 3.93 0 0 1 2.468 2.004c2.55 4.893 2.889 13.614 1.774 19.22a34.9 34.9 0 0 1-6.028 13.74a26.6 26.6 0 0 1 5.957 9.733a26.2 26.2 0 0 1 1.456 10.746a30 30 0 0 0 3.22-1.796c3.158-1.951 7.927-4.894 13.615-4.966a6.834 6.834 0 0 1 7.225 5.885a6.555 6.555 0 0 1-5.046 7.256c-3.458.836-5.069 1.486-9.714 4.5a69.2 69.2 0 0 1-16.062 7.412a9 9 0 0 1-3.758 1.828c-3.933.96-17.425 1.682-18.488 1.682h-.248c-4.13 0-6.47-1.28-7.73-2.621c-3.51 1.755-8.052 1.03-11.355-.714a5.73 5.73 0 0 1-3.097-4.024a6.2 6.2 0 0 1 0-2.127a7 7 0 0 1-.816-1.032a16.9 16.9 0 0 1-2.333-10.386c.3-3.85 2.964-7.287 4.698-9.114A29.5 29.5 0 0 1 35.726 64a27.7 27.7 0 0 1 7.04-9.29c-1.703-2.87-3.436-7.288-1.754-11.789c1.208-3.21 2.199-4.996 4.377-5.76a7.1 7.1 0 0 0 2.59-1.383a18.22 18.22 0 0 1 12.243-5.843c.196-.495.423-1.033.671-1.508c1.652-3.51 3.406-5.48 5.46-6.193a5.04 5.04 0 0 1 2.332-.286m-.558 3.697c-2.703.089-5.355 8.099-5.355 8.099a14.45 14.45 0 0 0-12.089 4.645a9.95 9.95 0 0 1-3.973 2.345c-.424.144-.94.122-2.22 3.58c-1.961 5.234 3.345 11.16 3.345 11.16s-6.328 4.47-8.672 10.034a25.6 25.6 0 0 0-1.806 12.057s-4.5 3.901-4.788 7.927a13.3 13.3 0 0 0 1.826 8.083a2.003 2.003 0 0 0 2.714.94s-2.993 3.487-.196 4.963c2.55 1.331 6.844 2.065 9.115-.196c1.652-1.651 1.982-5.335 2.591-6.842c.144-.351.64.588 1.115 1.032a10.3 10.3 0 0 0 1.403 1.032s-4.024 1.734-2.373 5.688c.547 1.31 2.498 2.145 5.688 2.125c1.187 0 14.203-.743 17.671-1.58a4.47 4.47 0 0 0 2.696-1.505a65 65 0 0 0 15.99-7.226c4.892-3.19 6.895-4.059 10.848-4.998c3.262-.774 3.045-5.83-1.28-5.758c-4.48.052-8.402 2.363-11.716 4.427c-6.193 3.83-9.29 3.583-9.29 3.583l-.105-.175c-.423-.692 1.983-6.896-.712-14.287c-2.91-8.082-7.534-10.033-7.163-10.653c1.58-2.673 5.534-6.917 7.113-14.824c.94-4.79.691-12.676-1.435-16.805c-.393-.764-3.902 1.28-3.902 1.28s-3.283-7.319-4.201-7.907a1.44 1.44 0 0 0-.839-.244"/></svg>
React
import type { SVGProps } from "react";
export function DeviconYarn(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 128 128"><path fill="#2c8ebb" d="M64 0a64 64 0 1 0 64 64A64 64 0 0 0 64 0m4.685 21.948a5.04 5.04 0 0 1 2.21.802c.671.444 1.528 1.032 4.026 6.194a4.84 4.84 0 0 1 2.942-.103a3.93 3.93 0 0 1 2.468 2.004c2.55 4.893 2.889 13.614 1.774 19.22a34.9 34.9 0 0 1-6.028 13.74a26.6 26.6 0 0 1 5.957 9.733a26.2 26.2 0 0 1 1.456 10.746a30 30 0 0 0 3.22-1.796c3.158-1.951 7.927-4.894 13.615-4.966a6.834 6.834 0 0 1 7.225 5.885a6.555 6.555 0 0 1-5.046 7.256c-3.458.836-5.069 1.486-9.714 4.5a69.2 69.2 0 0 1-16.062 7.412a9 9 0 0 1-3.758 1.828c-3.933.96-17.425 1.682-18.488 1.682h-.248c-4.13 0-6.47-1.28-7.73-2.621c-3.51 1.755-8.052 1.03-11.355-.714a5.73 5.73 0 0 1-3.097-4.024a6.2 6.2 0 0 1 0-2.127a7 7 0 0 1-.816-1.032a16.9 16.9 0 0 1-2.333-10.386c.3-3.85 2.964-7.287 4.698-9.114A29.5 29.5 0 0 1 35.726 64a27.7 27.7 0 0 1 7.04-9.29c-1.703-2.87-3.436-7.288-1.754-11.789c1.208-3.21 2.199-4.996 4.377-5.76a7.1 7.1 0 0 0 2.59-1.383a18.22 18.22 0 0 1 12.243-5.843c.196-.495.423-1.033.671-1.508c1.652-3.51 3.406-5.48 5.46-6.193a5.04 5.04 0 0 1 2.332-.286m-.558 3.697c-2.703.089-5.355 8.099-5.355 8.099a14.45 14.45 0 0 0-12.089 4.645a9.95 9.95 0 0 1-3.973 2.345c-.424.144-.94.122-2.22 3.58c-1.961 5.234 3.345 11.16 3.345 11.16s-6.328 4.47-8.672 10.034a25.6 25.6 0 0 0-1.806 12.057s-4.5 3.901-4.788 7.927a13.3 13.3 0 0 0 1.826 8.083a2.003 2.003 0 0 0 2.714.94s-2.993 3.487-.196 4.963c2.55 1.331 6.844 2.065 9.115-.196c1.652-1.651 1.982-5.335 2.591-6.842c.144-.351.64.588 1.115 1.032a10.3 10.3 0 0 0 1.403 1.032s-4.024 1.734-2.373 5.688c.547 1.31 2.498 2.145 5.688 2.125c1.187 0 14.203-.743 17.671-1.58a4.47 4.47 0 0 0 2.696-1.505a65 65 0 0 0 15.99-7.226c4.892-3.19 6.895-4.059 10.848-4.998c3.262-.774 3.045-5.83-1.28-5.758c-4.48.052-8.402 2.363-11.716 4.427c-6.193 3.83-9.29 3.583-9.29 3.583l-.105-.175c-.423-.692 1.983-6.896-.712-14.287c-2.91-8.082-7.534-10.033-7.163-10.653c1.58-2.673 5.534-6.917 7.113-14.824c.94-4.79.691-12.676-1.435-16.805c-.393-.764-3.902 1.28-3.902 1.28s-3.283-7.319-4.201-7.907a1.44 1.44 0 0 0-.839-.244"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 128 128"><path fill="#2c8ebb" d="M64 0a64 64 0 1 0 64 64A64 64 0 0 0 64 0m4.685 21.948a5.04 5.04 0 0 1 2.21.802c.671.444 1.528 1.032 4.026 6.194a4.84 4.84 0 0 1 2.942-.103a3.93 3.93 0 0 1 2.468 2.004c2.55 4.893 2.889 13.614 1.774 19.22a34.9 34.9 0 0 1-6.028 13.74a26.6 26.6 0 0 1 5.957 9.733a26.2 26.2 0 0 1 1.456 10.746a30 30 0 0 0 3.22-1.796c3.158-1.951 7.927-4.894 13.615-4.966a6.834 6.834 0 0 1 7.225 5.885a6.555 6.555 0 0 1-5.046 7.256c-3.458.836-5.069 1.486-9.714 4.5a69.2 69.2 0 0 1-16.062 7.412a9 9 0 0 1-3.758 1.828c-3.933.96-17.425 1.682-18.488 1.682h-.248c-4.13 0-6.47-1.28-7.73-2.621c-3.51 1.755-8.052 1.03-11.355-.714a5.73 5.73 0 0 1-3.097-4.024a6.2 6.2 0 0 1 0-2.127a7 7 0 0 1-.816-1.032a16.9 16.9 0 0 1-2.333-10.386c.3-3.85 2.964-7.287 4.698-9.114A29.5 29.5 0 0 1 35.726 64a27.7 27.7 0 0 1 7.04-9.29c-1.703-2.87-3.436-7.288-1.754-11.789c1.208-3.21 2.199-4.996 4.377-5.76a7.1 7.1 0 0 0 2.59-1.383a18.22 18.22 0 0 1 12.243-5.843c.196-.495.423-1.033.671-1.508c1.652-3.51 3.406-5.48 5.46-6.193a5.04 5.04 0 0 1 2.332-.286m-.558 3.697c-2.703.089-5.355 8.099-5.355 8.099a14.45 14.45 0 0 0-12.089 4.645a9.95 9.95 0 0 1-3.973 2.345c-.424.144-.94.122-2.22 3.58c-1.961 5.234 3.345 11.16 3.345 11.16s-6.328 4.47-8.672 10.034a25.6 25.6 0 0 0-1.806 12.057s-4.5 3.901-4.788 7.927a13.3 13.3 0 0 0 1.826 8.083a2.003 2.003 0 0 0 2.714.94s-2.993 3.487-.196 4.963c2.55 1.331 6.844 2.065 9.115-.196c1.652-1.651 1.982-5.335 2.591-6.842c.144-.351.64.588 1.115 1.032a10.3 10.3 0 0 0 1.403 1.032s-4.024 1.734-2.373 5.688c.547 1.31 2.498 2.145 5.688 2.125c1.187 0 14.203-.743 17.671-1.58a4.47 4.47 0 0 0 2.696-1.505a65 65 0 0 0 15.99-7.226c4.892-3.19 6.895-4.059 10.848-4.998c3.262-.774 3.045-5.83-1.28-5.758c-4.48.052-8.402 2.363-11.716 4.427c-6.193 3.83-9.29 3.583-9.29 3.583l-.105-.175c-.423-.692 1.983-6.896-.712-14.287c-2.91-8.082-7.534-10.033-7.163-10.653c1.58-2.673 5.534-6.917 7.113-14.824c.94-4.79.691-12.676-1.435-16.805c-.393-.764-3.902 1.28-3.902 1.28s-3.283-7.319-4.201-7.907a1.44 1.44 0 0 0-.839-.244"/></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%20128%20128%22%3E%3Cpath%20fill%3D%22%232c8ebb%22%20d%3D%22M64%200a64%2064%200%201%200%2064%2064A64%2064%200%200%200%2064%200m4.685%2021.948a5.04%205.04%200%200%201%202.21.802c.671.444%201.528%201.032%204.026%206.194a4.84%204.84%200%200%201%202.942-.103a3.93%203.93%200%200%201%202.468%202.004c2.55%204.893%202.889%2013.614%201.774%2019.22a34.9%2034.9%200%200%201-6.028%2013.74a26.6%2026.6%200%200%201%205.957%209.733a26.2%2026.2%200%200%201%201.456%2010.746a30%2030%200%200%200%203.22-1.796c3.158-1.951%207.927-4.894%2013.615-4.966a6.834%206.834%200%200%201%207.225%205.885a6.555%206.555%200%200%201-5.046%207.256c-3.458.836-5.069%201.486-9.714%204.5a69.2%2069.2%200%200%201-16.062%207.412a9%209%200%200%201-3.758%201.828c-3.933.96-17.425%201.682-18.488%201.682h-.248c-4.13%200-6.47-1.28-7.73-2.621c-3.51%201.755-8.052%201.03-11.355-.714a5.73%205.73%200%200%201-3.097-4.024a6.2%206.2%200%200%201%200-2.127a7%207%200%200%201-.816-1.032a16.9%2016.9%200%200%201-2.333-10.386c.3-3.85%202.964-7.287%204.698-9.114A29.5%2029.5%200%200%201%2035.726%2064a27.7%2027.7%200%200%201%207.04-9.29c-1.703-2.87-3.436-7.288-1.754-11.789c1.208-3.21%202.199-4.996%204.377-5.76a7.1%207.1%200%200%200%202.59-1.383a18.22%2018.22%200%200%201%2012.243-5.843c.196-.495.423-1.033.671-1.508c1.652-3.51%203.406-5.48%205.46-6.193a5.04%205.04%200%200%201%202.332-.286m-.558%203.697c-2.703.089-5.355%208.099-5.355%208.099a14.45%2014.45%200%200%200-12.089%204.645a9.95%209.95%200%200%201-3.973%202.345c-.424.144-.94.122-2.22%203.58c-1.961%205.234%203.345%2011.16%203.345%2011.16s-6.328%204.47-8.672%2010.034a25.6%2025.6%200%200%200-1.806%2012.057s-4.5%203.901-4.788%207.927a13.3%2013.3%200%200%200%201.826%208.083a2.003%202.003%200%200%200%202.714.94s-2.993%203.487-.196%204.963c2.55%201.331%206.844%202.065%209.115-.196c1.652-1.651%201.982-5.335%202.591-6.842c.144-.351.64.588%201.115%201.032a10.3%2010.3%200%200%200%201.403%201.032s-4.024%201.734-2.373%205.688c.547%201.31%202.498%202.145%205.688%202.125c1.187%200%2014.203-.743%2017.671-1.58a4.47%204.47%200%200%200%202.696-1.505a65%2065%200%200%200%2015.99-7.226c4.892-3.19%206.895-4.059%2010.848-4.998c3.262-.774%203.045-5.83-1.28-5.758c-4.48.052-8.402%202.363-11.716%204.427c-6.193%203.83-9.29%203.583-9.29%203.583l-.105-.175c-.423-.692%201.983-6.896-.712-14.287c-2.91-8.082-7.534-10.033-7.163-10.653c1.58-2.673%205.534-6.917%207.113-14.824c.94-4.79.691-12.676-1.435-16.805c-.393-.764-3.902%201.28-3.902%201.28s-3.283-7.319-4.201-7.907a1.44%201.44%200%200%200-.839-.244%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%20128%20128%22%3E%3Cpath%20fill%3D%22%232c8ebb%22%20d%3D%22M64%200a64%2064%200%201%200%2064%2064A64%2064%200%200%200%2064%200m4.685%2021.948a5.04%205.04%200%200%201%202.21.802c.671.444%201.528%201.032%204.026%206.194a4.84%204.84%200%200%201%202.942-.103a3.93%203.93%200%200%201%202.468%202.004c2.55%204.893%202.889%2013.614%201.774%2019.22a34.9%2034.9%200%200%201-6.028%2013.74a26.6%2026.6%200%200%201%205.957%209.733a26.2%2026.2%200%200%201%201.456%2010.746a30%2030%200%200%200%203.22-1.796c3.158-1.951%207.927-4.894%2013.615-4.966a6.834%206.834%200%200%201%207.225%205.885a6.555%206.555%200%200%201-5.046%207.256c-3.458.836-5.069%201.486-9.714%204.5a69.2%2069.2%200%200%201-16.062%207.412a9%209%200%200%201-3.758%201.828c-3.933.96-17.425%201.682-18.488%201.682h-.248c-4.13%200-6.47-1.28-7.73-2.621c-3.51%201.755-8.052%201.03-11.355-.714a5.73%205.73%200%200%201-3.097-4.024a6.2%206.2%200%200%201%200-2.127a7%207%200%200%201-.816-1.032a16.9%2016.9%200%200%201-2.333-10.386c.3-3.85%202.964-7.287%204.698-9.114A29.5%2029.5%200%200%201%2035.726%2064a27.7%2027.7%200%200%201%207.04-9.29c-1.703-2.87-3.436-7.288-1.754-11.789c1.208-3.21%202.199-4.996%204.377-5.76a7.1%207.1%200%200%200%202.59-1.383a18.22%2018.22%200%200%201%2012.243-5.843c.196-.495.423-1.033.671-1.508c1.652-3.51%203.406-5.48%205.46-6.193a5.04%205.04%200%200%201%202.332-.286m-.558%203.697c-2.703.089-5.355%208.099-5.355%208.099a14.45%2014.45%200%200%200-12.089%204.645a9.95%209.95%200%200%201-3.973%202.345c-.424.144-.94.122-2.22%203.58c-1.961%205.234%203.345%2011.16%203.345%2011.16s-6.328%204.47-8.672%2010.034a25.6%2025.6%200%200%200-1.806%2012.057s-4.5%203.901-4.788%207.927a13.3%2013.3%200%200%200%201.826%208.083a2.003%202.003%200%200%200%202.714.94s-2.993%203.487-.196%204.963c2.55%201.331%206.844%202.065%209.115-.196c1.652-1.651%201.982-5.335%202.591-6.842c.144-.351.64.588%201.115%201.032a10.3%2010.3%200%200%200%201.403%201.032s-4.024%201.734-2.373%205.688c.547%201.31%202.498%202.145%205.688%202.125c1.187%200%2014.203-.743%2017.671-1.58a4.47%204.47%200%200%200%202.696-1.505a65%2065%200%200%200%2015.99-7.226c4.892-3.19%206.895-4.059%2010.848-4.998c3.262-.774%203.045-5.83-1.28-5.758c-4.48.052-8.402%202.363-11.716%204.427c-6.193%203.83-9.29%203.583-9.29%203.583l-.105-.175c-.423-.692%201.983-6.896-.712-14.287c-2.91-8.082-7.534-10.033-7.163-10.653c1.58-2.673%205.534-6.917%207.113-14.824c.94-4.79.691-12.676-1.435-16.805c-.393-.764-3.902%201.28-3.902%201.28s-3.283-7.319-4.201-7.907a1.44%201.44%200%200%200-.839-.244%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/devicon/yarn.svg?color=%231a73e8&size=48
