yarn logo
yarn from SVG Logos by Gil Barbara · Color · CC0-1.0 Free for personal and commercial use.
- Name
- yarn
- Set
- SVG Logos
- Style
- Color
- Viewbox
- 256×256
- License
- CC0
The same logo in other sets
yarn-fillAkar IconsyarnBoxicons BrandsyarnCatppuccin IconsyarnCoreUI BrandsyarnDeviconyarnFont Awesome 6 BrandsyarnFont Awesome BrandsyarnFluent EmojiyarnFluent Emoji FlatyarnFluent Emoji High ContrastyarnLine AwesomeyarnMaterial Icon ThemeyarnNoto EmojiyarnOpenMojiyarnPhosphoryarnSimple Iconsyarn-darkSkill IconsyarnTabler IconsyarnTwitter Emoji
Use the yarn logo
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="#368fb9" d="M128 0C57.328 0 0 57.328 0 128s57.328 128 128 128s128-57.328 128-128S198.672 0 128 0"/><path fill="#fff" d="M203.317 174.06c-7.907 1.878-11.91 3.608-21.695 9.983c-15.271 9.884-31.976 14.48-31.976 14.48s-1.383 2.076-5.387 3.015c-6.918 1.68-32.963 3.114-35.335 3.163c-6.376.05-10.28-1.63-11.367-4.25c-3.311-7.907 4.744-11.367 4.744-11.367s-1.779-1.087-2.817-2.076c-.939-.939-1.927-2.816-2.224-2.125c-1.235 3.015-1.878 10.379-5.189 13.69c-4.547 4.596-13.146 3.064-18.236.395c-5.585-2.965.395-9.933.395-9.933s-3.015 1.779-5.436-1.878c-2.175-3.36-4.2-9.094-3.657-16.16c.593-8.056 9.587-15.865 9.587-15.865s-1.581-11.91 3.608-24.117c4.695-11.12 17.347-20.065 17.347-20.065s-10.626-11.762-6.672-22.338c2.57-6.92 3.608-6.87 4.448-7.166c2.965-1.137 5.831-2.373 7.957-4.695c10.625-11.466 24.166-9.292 24.166-9.292s6.425-19.52 12.356-15.715c1.828 1.186 8.401 15.814 8.401 15.814s7.018-4.102 7.809-2.57c4.25 8.254 4.744 24.019 2.866 33.607c-3.163 15.814-11.07 24.315-14.233 29.652c-.741 1.236 8.5 5.14 14.332 21.3c5.387 14.777.593 27.182 1.433 28.566c.148.247.198.346.198.346s6.177.494 18.582-7.166c6.622-4.102 14.48-8.698 23.425-8.797c8.65-.149 9.094 9.983 2.57 11.564m11.763-7.265c-.89-7.017-6.82-11.86-14.431-11.762c-11.367.148-20.905 6.03-27.231 9.934c-2.471 1.532-4.596 2.669-6.425 3.509c.395-5.733.05-13.245-2.916-21.498c-3.608-9.885-8.45-15.963-11.91-19.472c4.003-5.832 9.489-14.332 12.058-27.478c2.224-11.219 1.533-28.664-3.558-38.45c-1.038-1.976-2.767-3.41-4.942-4.003c-.89-.247-2.57-.741-5.881.198c-4.991-10.329-6.721-11.416-8.056-12.306c-2.767-1.779-6.029-2.174-9.093-1.038c-4.102 1.483-7.61 5.437-10.922 12.454a52 52 0 0 0-1.334 3.015c-6.277.445-16.161 2.718-24.513 11.762c-1.038 1.137-3.064 1.977-5.19 2.768h.05c-4.349 1.532-6.326 5.09-8.747 11.515c-3.361 8.994.098 17.84 3.508 23.574c-4.645 4.151-10.823 10.773-14.084 18.532c-4.053 9.588-4.498 18.978-4.35 24.068c-3.459 3.658-8.796 10.527-9.39 18.237c-.79 10.773 3.114 18.088 4.844 20.756c.494.791 1.038 1.434 1.63 2.076c-.197 1.334-.246 2.768.05 4.25c.643 3.46 2.817 6.277 6.128 8.056c6.524 3.46 15.617 4.942 22.635 1.433c2.52 2.669 7.117 5.239 15.469 5.239h.494c2.125 0 29.109-1.433 36.967-3.36c3.509-.841 5.93-2.324 7.512-3.658c5.04-1.582 18.977-6.326 32.123-14.826c9.291-6.03 12.504-7.315 19.423-8.995c6.72-1.63 10.922-7.759 10.082-14.53"/></svg>
React
import type { SVGProps } from "react";
export function LogosYarn(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="#368fb9" d="M128 0C57.328 0 0 57.328 0 128s57.328 128 128 128s128-57.328 128-128S198.672 0 128 0"/><path fill="#fff" d="M203.317 174.06c-7.907 1.878-11.91 3.608-21.695 9.983c-15.271 9.884-31.976 14.48-31.976 14.48s-1.383 2.076-5.387 3.015c-6.918 1.68-32.963 3.114-35.335 3.163c-6.376.05-10.28-1.63-11.367-4.25c-3.311-7.907 4.744-11.367 4.744-11.367s-1.779-1.087-2.817-2.076c-.939-.939-1.927-2.816-2.224-2.125c-1.235 3.015-1.878 10.379-5.189 13.69c-4.547 4.596-13.146 3.064-18.236.395c-5.585-2.965.395-9.933.395-9.933s-3.015 1.779-5.436-1.878c-2.175-3.36-4.2-9.094-3.657-16.16c.593-8.056 9.587-15.865 9.587-15.865s-1.581-11.91 3.608-24.117c4.695-11.12 17.347-20.065 17.347-20.065s-10.626-11.762-6.672-22.338c2.57-6.92 3.608-6.87 4.448-7.166c2.965-1.137 5.831-2.373 7.957-4.695c10.625-11.466 24.166-9.292 24.166-9.292s6.425-19.52 12.356-15.715c1.828 1.186 8.401 15.814 8.401 15.814s7.018-4.102 7.809-2.57c4.25 8.254 4.744 24.019 2.866 33.607c-3.163 15.814-11.07 24.315-14.233 29.652c-.741 1.236 8.5 5.14 14.332 21.3c5.387 14.777.593 27.182 1.433 28.566c.148.247.198.346.198.346s6.177.494 18.582-7.166c6.622-4.102 14.48-8.698 23.425-8.797c8.65-.149 9.094 9.983 2.57 11.564m11.763-7.265c-.89-7.017-6.82-11.86-14.431-11.762c-11.367.148-20.905 6.03-27.231 9.934c-2.471 1.532-4.596 2.669-6.425 3.509c.395-5.733.05-13.245-2.916-21.498c-3.608-9.885-8.45-15.963-11.91-19.472c4.003-5.832 9.489-14.332 12.058-27.478c2.224-11.219 1.533-28.664-3.558-38.45c-1.038-1.976-2.767-3.41-4.942-4.003c-.89-.247-2.57-.741-5.881.198c-4.991-10.329-6.721-11.416-8.056-12.306c-2.767-1.779-6.029-2.174-9.093-1.038c-4.102 1.483-7.61 5.437-10.922 12.454a52 52 0 0 0-1.334 3.015c-6.277.445-16.161 2.718-24.513 11.762c-1.038 1.137-3.064 1.977-5.19 2.768h.05c-4.349 1.532-6.326 5.09-8.747 11.515c-3.361 8.994.098 17.84 3.508 23.574c-4.645 4.151-10.823 10.773-14.084 18.532c-4.053 9.588-4.498 18.978-4.35 24.068c-3.459 3.658-8.796 10.527-9.39 18.237c-.79 10.773 3.114 18.088 4.844 20.756c.494.791 1.038 1.434 1.63 2.076c-.197 1.334-.246 2.768.05 4.25c.643 3.46 2.817 6.277 6.128 8.056c6.524 3.46 15.617 4.942 22.635 1.433c2.52 2.669 7.117 5.239 15.469 5.239h.494c2.125 0 29.109-1.433 36.967-3.36c3.509-.841 5.93-2.324 7.512-3.658c5.04-1.582 18.977-6.326 32.123-14.826c9.291-6.03 12.504-7.315 19.423-8.995c6.72-1.63 10.922-7.759 10.082-14.53"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="#368fb9" d="M128 0C57.328 0 0 57.328 0 128s57.328 128 128 128s128-57.328 128-128S198.672 0 128 0"/><path fill="#fff" d="M203.317 174.06c-7.907 1.878-11.91 3.608-21.695 9.983c-15.271 9.884-31.976 14.48-31.976 14.48s-1.383 2.076-5.387 3.015c-6.918 1.68-32.963 3.114-35.335 3.163c-6.376.05-10.28-1.63-11.367-4.25c-3.311-7.907 4.744-11.367 4.744-11.367s-1.779-1.087-2.817-2.076c-.939-.939-1.927-2.816-2.224-2.125c-1.235 3.015-1.878 10.379-5.189 13.69c-4.547 4.596-13.146 3.064-18.236.395c-5.585-2.965.395-9.933.395-9.933s-3.015 1.779-5.436-1.878c-2.175-3.36-4.2-9.094-3.657-16.16c.593-8.056 9.587-15.865 9.587-15.865s-1.581-11.91 3.608-24.117c4.695-11.12 17.347-20.065 17.347-20.065s-10.626-11.762-6.672-22.338c2.57-6.92 3.608-6.87 4.448-7.166c2.965-1.137 5.831-2.373 7.957-4.695c10.625-11.466 24.166-9.292 24.166-9.292s6.425-19.52 12.356-15.715c1.828 1.186 8.401 15.814 8.401 15.814s7.018-4.102 7.809-2.57c4.25 8.254 4.744 24.019 2.866 33.607c-3.163 15.814-11.07 24.315-14.233 29.652c-.741 1.236 8.5 5.14 14.332 21.3c5.387 14.777.593 27.182 1.433 28.566c.148.247.198.346.198.346s6.177.494 18.582-7.166c6.622-4.102 14.48-8.698 23.425-8.797c8.65-.149 9.094 9.983 2.57 11.564m11.763-7.265c-.89-7.017-6.82-11.86-14.431-11.762c-11.367.148-20.905 6.03-27.231 9.934c-2.471 1.532-4.596 2.669-6.425 3.509c.395-5.733.05-13.245-2.916-21.498c-3.608-9.885-8.45-15.963-11.91-19.472c4.003-5.832 9.489-14.332 12.058-27.478c2.224-11.219 1.533-28.664-3.558-38.45c-1.038-1.976-2.767-3.41-4.942-4.003c-.89-.247-2.57-.741-5.881.198c-4.991-10.329-6.721-11.416-8.056-12.306c-2.767-1.779-6.029-2.174-9.093-1.038c-4.102 1.483-7.61 5.437-10.922 12.454a52 52 0 0 0-1.334 3.015c-6.277.445-16.161 2.718-24.513 11.762c-1.038 1.137-3.064 1.977-5.19 2.768h.05c-4.349 1.532-6.326 5.09-8.747 11.515c-3.361 8.994.098 17.84 3.508 23.574c-4.645 4.151-10.823 10.773-14.084 18.532c-4.053 9.588-4.498 18.978-4.35 24.068c-3.459 3.658-8.796 10.527-9.39 18.237c-.79 10.773 3.114 18.088 4.844 20.756c.494.791 1.038 1.434 1.63 2.076c-.197 1.334-.246 2.768.05 4.25c.643 3.46 2.817 6.277 6.128 8.056c6.524 3.46 15.617 4.942 22.635 1.433c2.52 2.669 7.117 5.239 15.469 5.239h.494c2.125 0 29.109-1.433 36.967-3.36c3.509-.841 5.93-2.324 7.512-3.658c5.04-1.582 18.977-6.326 32.123-14.826c9.291-6.03 12.504-7.315 19.423-8.995c6.72-1.63 10.922-7.759 10.082-14.53"/></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%22%23368fb9%22%20d%3D%22M128%200C57.328%200%200%2057.328%200%20128s57.328%20128%20128%20128s128-57.328%20128-128S198.672%200%20128%200%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M203.317%20174.06c-7.907%201.878-11.91%203.608-21.695%209.983c-15.271%209.884-31.976%2014.48-31.976%2014.48s-1.383%202.076-5.387%203.015c-6.918%201.68-32.963%203.114-35.335%203.163c-6.376.05-10.28-1.63-11.367-4.25c-3.311-7.907%204.744-11.367%204.744-11.367s-1.779-1.087-2.817-2.076c-.939-.939-1.927-2.816-2.224-2.125c-1.235%203.015-1.878%2010.379-5.189%2013.69c-4.547%204.596-13.146%203.064-18.236.395c-5.585-2.965.395-9.933.395-9.933s-3.015%201.779-5.436-1.878c-2.175-3.36-4.2-9.094-3.657-16.16c.593-8.056%209.587-15.865%209.587-15.865s-1.581-11.91%203.608-24.117c4.695-11.12%2017.347-20.065%2017.347-20.065s-10.626-11.762-6.672-22.338c2.57-6.92%203.608-6.87%204.448-7.166c2.965-1.137%205.831-2.373%207.957-4.695c10.625-11.466%2024.166-9.292%2024.166-9.292s6.425-19.52%2012.356-15.715c1.828%201.186%208.401%2015.814%208.401%2015.814s7.018-4.102%207.809-2.57c4.25%208.254%204.744%2024.019%202.866%2033.607c-3.163%2015.814-11.07%2024.315-14.233%2029.652c-.741%201.236%208.5%205.14%2014.332%2021.3c5.387%2014.777.593%2027.182%201.433%2028.566c.148.247.198.346.198.346s6.177.494%2018.582-7.166c6.622-4.102%2014.48-8.698%2023.425-8.797c8.65-.149%209.094%209.983%202.57%2011.564m11.763-7.265c-.89-7.017-6.82-11.86-14.431-11.762c-11.367.148-20.905%206.03-27.231%209.934c-2.471%201.532-4.596%202.669-6.425%203.509c.395-5.733.05-13.245-2.916-21.498c-3.608-9.885-8.45-15.963-11.91-19.472c4.003-5.832%209.489-14.332%2012.058-27.478c2.224-11.219%201.533-28.664-3.558-38.45c-1.038-1.976-2.767-3.41-4.942-4.003c-.89-.247-2.57-.741-5.881.198c-4.991-10.329-6.721-11.416-8.056-12.306c-2.767-1.779-6.029-2.174-9.093-1.038c-4.102%201.483-7.61%205.437-10.922%2012.454a52%2052%200%200%200-1.334%203.015c-6.277.445-16.161%202.718-24.513%2011.762c-1.038%201.137-3.064%201.977-5.19%202.768h.05c-4.349%201.532-6.326%205.09-8.747%2011.515c-3.361%208.994.098%2017.84%203.508%2023.574c-4.645%204.151-10.823%2010.773-14.084%2018.532c-4.053%209.588-4.498%2018.978-4.35%2024.068c-3.459%203.658-8.796%2010.527-9.39%2018.237c-.79%2010.773%203.114%2018.088%204.844%2020.756c.494.791%201.038%201.434%201.63%202.076c-.197%201.334-.246%202.768.05%204.25c.643%203.46%202.817%206.277%206.128%208.056c6.524%203.46%2015.617%204.942%2022.635%201.433c2.52%202.669%207.117%205.239%2015.469%205.239h.494c2.125%200%2029.109-1.433%2036.967-3.36c3.509-.841%205.93-2.324%207.512-3.658c5.04-1.582%2018.977-6.326%2032.123-14.826c9.291-6.03%2012.504-7.315%2019.423-8.995c6.72-1.63%2010.922-7.759%2010.082-14.53%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%22%23368fb9%22%20d%3D%22M128%200C57.328%200%200%2057.328%200%20128s57.328%20128%20128%20128s128-57.328%20128-128S198.672%200%20128%200%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M203.317%20174.06c-7.907%201.878-11.91%203.608-21.695%209.983c-15.271%209.884-31.976%2014.48-31.976%2014.48s-1.383%202.076-5.387%203.015c-6.918%201.68-32.963%203.114-35.335%203.163c-6.376.05-10.28-1.63-11.367-4.25c-3.311-7.907%204.744-11.367%204.744-11.367s-1.779-1.087-2.817-2.076c-.939-.939-1.927-2.816-2.224-2.125c-1.235%203.015-1.878%2010.379-5.189%2013.69c-4.547%204.596-13.146%203.064-18.236.395c-5.585-2.965.395-9.933.395-9.933s-3.015%201.779-5.436-1.878c-2.175-3.36-4.2-9.094-3.657-16.16c.593-8.056%209.587-15.865%209.587-15.865s-1.581-11.91%203.608-24.117c4.695-11.12%2017.347-20.065%2017.347-20.065s-10.626-11.762-6.672-22.338c2.57-6.92%203.608-6.87%204.448-7.166c2.965-1.137%205.831-2.373%207.957-4.695c10.625-11.466%2024.166-9.292%2024.166-9.292s6.425-19.52%2012.356-15.715c1.828%201.186%208.401%2015.814%208.401%2015.814s7.018-4.102%207.809-2.57c4.25%208.254%204.744%2024.019%202.866%2033.607c-3.163%2015.814-11.07%2024.315-14.233%2029.652c-.741%201.236%208.5%205.14%2014.332%2021.3c5.387%2014.777.593%2027.182%201.433%2028.566c.148.247.198.346.198.346s6.177.494%2018.582-7.166c6.622-4.102%2014.48-8.698%2023.425-8.797c8.65-.149%209.094%209.983%202.57%2011.564m11.763-7.265c-.89-7.017-6.82-11.86-14.431-11.762c-11.367.148-20.905%206.03-27.231%209.934c-2.471%201.532-4.596%202.669-6.425%203.509c.395-5.733.05-13.245-2.916-21.498c-3.608-9.885-8.45-15.963-11.91-19.472c4.003-5.832%209.489-14.332%2012.058-27.478c2.224-11.219%201.533-28.664-3.558-38.45c-1.038-1.976-2.767-3.41-4.942-4.003c-.89-.247-2.57-.741-5.881.198c-4.991-10.329-6.721-11.416-8.056-12.306c-2.767-1.779-6.029-2.174-9.093-1.038c-4.102%201.483-7.61%205.437-10.922%2012.454a52%2052%200%200%200-1.334%203.015c-6.277.445-16.161%202.718-24.513%2011.762c-1.038%201.137-3.064%201.977-5.19%202.768h.05c-4.349%201.532-6.326%205.09-8.747%2011.515c-3.361%208.994.098%2017.84%203.508%2023.574c-4.645%204.151-10.823%2010.773-14.084%2018.532c-4.053%209.588-4.498%2018.978-4.35%2024.068c-3.459%203.658-8.796%2010.527-9.39%2018.237c-.79%2010.773%203.114%2018.088%204.844%2020.756c.494.791%201.038%201.434%201.63%202.076c-.197%201.334-.246%202.768.05%204.25c.643%203.46%202.817%206.277%206.128%208.056c6.524%203.46%2015.617%204.942%2022.635%201.433c2.52%202.669%207.117%205.239%2015.469%205.239h.494c2.125%200%2029.109-1.433%2036.967-3.36c3.509-.841%205.93-2.324%207.512-3.658c5.04-1.582%2018.977-6.326%2032.123-14.826c9.291-6.03%2012.504-7.315%2019.423-8.995c6.72-1.63%2010.922-7.759%2010.082-14.53%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/logos/yarn.svg?color=%231a73e8&size=48
