yarn logo

yarn from Catppuccin Icons by Catppuccin · Color · MIT Free for personal and commercial use.

Name
yarn
Set
Catppuccin Icons
Style
Color
Viewbox
16×16
License
MIT

The same logo in other sets

yarn-fillAkar IconsyarnBoxicons BrandsyarnCoreUI BrandsyarnDeviconyarnFont Awesome 6 BrandsyarnFont Awesome BrandsyarnFluent EmojiyarnFluent Emoji FlatyarnFluent Emoji High ContrastyarnLine AwesomeyarnSVG LogosyarnMaterial Icon ThemeyarnNoto EmojiyarnOpenMojiyarnPhosphoryarnSimple Iconsyarn-darkSkill IconsyarnTabler IconsyarnTwitter Emoji

Related icons in Catppuccin Icons

yarn-lock

Use the yarn logo

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16"><g fill="none" fill-rule="evenodd" stroke="#c6a0f6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="1.5" stroke-width="6.22"><path d="M11.9 65.033s-1.241-16.91 11.549-24.936c0 0-8.286-12.228 0-19.036s12.645-9.145 18.736-8.634c0 0 7.247-20.251 14.643 0c0 0 9.061-7.776 7.844 17.247c-.323 6.646-4.717 16.289-7.844 20.326c0 0 8.881 6.323 8.881 25.924c0 0 14.526-7.698 18.663-8.162c4.136-.463 7.724-.011 8.572 2.799s1.245 4.744-1.062 6.558c-2.308 1.813-10.589 4.258-19.484 10.194c-8.894 5.936-11.77 4.105-14.208 5.576c-2.438 1.472-16.058 7.342-33.033.927c0 0-15.323 4.247-14.195-6.503c0 0-10.684-12.422.938-22.28" transform="matrix(.1608 0 0 .16076 -.053 -.054)"/><path d="M27.469 94.285c-1.525-1.407.321-8.703.321-8.703s-1.252 4.723-3.116 7.525" transform="matrix(.1608 0 0 .16076 -.053 -.054)"/></g></svg>

React

import type { SVGProps } from "react";

export function CatppuccinYarn(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16"><g fill="none" fillRule="evenodd" stroke="#c6a0f6" strokeLinecap="round" strokeLinejoin="round" strokeMiterlimit="1.5" strokeWidth="6.22"><path d="M11.9 65.033s-1.241-16.91 11.549-24.936c0 0-8.286-12.228 0-19.036s12.645-9.145 18.736-8.634c0 0 7.247-20.251 14.643 0c0 0 9.061-7.776 7.844 17.247c-.323 6.646-4.717 16.289-7.844 20.326c0 0 8.881 6.323 8.881 25.924c0 0 14.526-7.698 18.663-8.162c4.136-.463 7.724-.011 8.572 2.799s1.245 4.744-1.062 6.558c-2.308 1.813-10.589 4.258-19.484 10.194c-8.894 5.936-11.77 4.105-14.208 5.576c-2.438 1.472-16.058 7.342-33.033.927c0 0-15.323 4.247-14.195-6.503c0 0-10.684-12.422.938-22.28" transform="matrix(.1608 0 0 .16076 -.053 -.054)"/><path d="M27.469 94.285c-1.525-1.407.321-8.703.321-8.703s-1.252 4.723-3.116 7.525" transform="matrix(.1608 0 0 .16076 -.053 -.054)"/></g></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16"><g fill="none" fill-rule="evenodd" stroke="#c6a0f6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="1.5" stroke-width="6.22"><path d="M11.9 65.033s-1.241-16.91 11.549-24.936c0 0-8.286-12.228 0-19.036s12.645-9.145 18.736-8.634c0 0 7.247-20.251 14.643 0c0 0 9.061-7.776 7.844 17.247c-.323 6.646-4.717 16.289-7.844 20.326c0 0 8.881 6.323 8.881 25.924c0 0 14.526-7.698 18.663-8.162c4.136-.463 7.724-.011 8.572 2.799s1.245 4.744-1.062 6.558c-2.308 1.813-10.589 4.258-19.484 10.194c-8.894 5.936-11.77 4.105-14.208 5.576c-2.438 1.472-16.058 7.342-33.033.927c0 0-15.323 4.247-14.195-6.503c0 0-10.684-12.422.938-22.28" transform="matrix(.1608 0 0 .16076 -.053 -.054)"/><path d="M27.469 94.285c-1.525-1.407.321-8.703.321-8.703s-1.252 4.723-3.116 7.525" transform="matrix(.1608 0 0 .16076 -.053 -.054)"/></g></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%2016%2016%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%20stroke%3D%22%23c6a0f6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-miterlimit%3D%221.5%22%20stroke-width%3D%226.22%22%3E%3Cpath%20d%3D%22M11.9%2065.033s-1.241-16.91%2011.549-24.936c0%200-8.286-12.228%200-19.036s12.645-9.145%2018.736-8.634c0%200%207.247-20.251%2014.643%200c0%200%209.061-7.776%207.844%2017.247c-.323%206.646-4.717%2016.289-7.844%2020.326c0%200%208.881%206.323%208.881%2025.924c0%200%2014.526-7.698%2018.663-8.162c4.136-.463%207.724-.011%208.572%202.799s1.245%204.744-1.062%206.558c-2.308%201.813-10.589%204.258-19.484%2010.194c-8.894%205.936-11.77%204.105-14.208%205.576c-2.438%201.472-16.058%207.342-33.033.927c0%200-15.323%204.247-14.195-6.503c0%200-10.684-12.422.938-22.28%22%20transform%3D%22matrix(.1608%200%200%20.16076%20-.053%20-.054)%22%2F%3E%3Cpath%20d%3D%22M27.469%2094.285c-1.525-1.407.321-8.703.321-8.703s-1.252%204.723-3.116%207.525%22%20transform%3D%22matrix(.1608%200%200%20.16076%20-.053%20-.054)%22%2F%3E%3C%2Fg%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%2016%2016%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%20stroke%3D%22%23c6a0f6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-miterlimit%3D%221.5%22%20stroke-width%3D%226.22%22%3E%3Cpath%20d%3D%22M11.9%2065.033s-1.241-16.91%2011.549-24.936c0%200-8.286-12.228%200-19.036s12.645-9.145%2018.736-8.634c0%200%207.247-20.251%2014.643%200c0%200%209.061-7.776%207.844%2017.247c-.323%206.646-4.717%2016.289-7.844%2020.326c0%200%208.881%206.323%208.881%2025.924c0%200%2014.526-7.698%2018.663-8.162c4.136-.463%207.724-.011%208.572%202.799s1.245%204.744-1.062%206.558c-2.308%201.813-10.589%204.258-19.484%2010.194c-8.894%205.936-11.77%204.105-14.208%205.576c-2.438%201.472-16.058%207.342-33.033.927c0%200-15.323%204.247-14.195-6.503c0%200-10.684-12.422.938-22.28%22%20transform%3D%22matrix(.1608%200%200%20.16076%20-.053%20-.054)%22%2F%3E%3Cpath%20d%3D%22M27.469%2094.285c-1.525-1.407.321-8.703.321-8.703s-1.252%204.723-3.116%207.525%22%20transform%3D%22matrix(.1608%200%200%20.16076%20-.053%20-.054)%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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