yarn logo

yarn from CoreUI Brands by creativeLabs Łukasz Holeczek · Brand · CC0-1.0 Free for personal and commercial use.

Name: yarn
Set: CoreUI Brands
Style: Brand
Viewbox: 32×32
License: CC0 1.0

The same logo in other sets

yarn-fillAkar Icons yarnBoxicons Brands yarnCatppuccin Icons 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 yarnPhosphor yarnSimple Icons yarn-darkSkill Icons yarnTabler Icons yarnTwitter Emoji

Use the yarn logo

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M16 0C7.167 0 0 7.167 0 16s7.167 16 16 16s16-7.167 16-16S24.833 0 16 0m1.026 5.474c.24 0 .484.068.698.208c.167.109.38.245 1.005 1.536c.417-.115.625-.052.734-.021c.276.073.49.25.62.5c.635 1.219.724 3.401.443 4.807c-.318 1.641-1.005 2.703-1.505 3.432c.432.438 1.036 1.198 1.49 2.432a6.6 6.6 0 0 1 .365 2.688q.413-.195.802-.438c.792-.49 1.979-1.224 3.401-1.245c.953-.01 1.693.594 1.807 1.474a1.643 1.643 0 0 1-1.26 1.813c-.865.214-1.266.375-2.427 1.125c-1.646 1.063-3.385 1.656-4.016 1.854c-.276.224-.599.38-.943.458c-.979.24-4.354.422-4.62.422h-.063c-1.042 0-1.62-.323-1.932-.656c-.875.438-2.01.255-2.828-.177a1.44 1.44 0 0 1-.776-1.542a2 2 0 0 1-.203-.26c-.214-.333-.703-1.245-.604-2.594c.073-.964.74-1.823 1.172-2.276a7.35 7.35 0 0 1 .547-3.01c.406-.969 1.177-1.797 1.76-2.318c-.427-.714-.859-1.823-.443-2.943c.302-.807.552-1.25 1.094-1.443h-.005c.266-.099.521-.203.646-.344a4.57 4.57 0 0 1 3.068-1.474q.072-.18.167-.375c.411-.875.849-1.37 1.365-1.557q.21-.078.438-.078zm.005.932c-.677.021-1.333 2.026-1.333 2.026s-1.693-.271-3.021 1.161c-.266.292-.625.443-.995.589c-.104.036-.234.026-.557.896c-.495 1.318.833 2.792.833 2.792s-1.583 1.115-2.167 2.505c-.651 1.526-.453 3.016-.453 3.016s-1.125.974-1.198 1.984c-.068.88.188 1.599.458 2.021c.302.453.682.234.682.234s-.75.87-.052 1.24c.635.333 1.708.526 2.281-.052c.411-.411.495-1.333.646-1.708c.036-.089.161.146.281.266c.13.125.349.26.349.26s-1.005.432-.594 1.422c.135.328.625.536 1.422.531c.297-.01 3.552-.188 4.417-.396c.5-.12.677-.38.677-.38s2.089-.573 3.995-1.807c1.224-.797 1.724-1.016 2.714-1.25c.818-.193.76-1.464-.323-1.443c-1.12.01-2.099.589-2.927 1.099c-1.552.958-2.323.896-2.323.896l-.026-.042c-.104-.172.495-1.724-.177-3.573c-.729-2.016-1.885-2.505-1.792-2.661c.396-.667 1.385-1.729 1.781-3.708c.234-1.198.172-3.167-.359-4.198c-.099-.193-.979.323-.979.323s-.818-1.828-1.047-1.979a.4.4 0 0 0-.214-.063z"/></svg>

React

import type { SVGProps } from "react";

export function CibYarn(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M16 0C7.167 0 0 7.167 0 16s7.167 16 16 16s16-7.167 16-16S24.833 0 16 0m1.026 5.474c.24 0 .484.068.698.208c.167.109.38.245 1.005 1.536c.417-.115.625-.052.734-.021c.276.073.49.25.62.5c.635 1.219.724 3.401.443 4.807c-.318 1.641-1.005 2.703-1.505 3.432c.432.438 1.036 1.198 1.49 2.432a6.6 6.6 0 0 1 .365 2.688q.413-.195.802-.438c.792-.49 1.979-1.224 3.401-1.245c.953-.01 1.693.594 1.807 1.474a1.643 1.643 0 0 1-1.26 1.813c-.865.214-1.266.375-2.427 1.125c-1.646 1.063-3.385 1.656-4.016 1.854c-.276.224-.599.38-.943.458c-.979.24-4.354.422-4.62.422h-.063c-1.042 0-1.62-.323-1.932-.656c-.875.438-2.01.255-2.828-.177a1.44 1.44 0 0 1-.776-1.542a2 2 0 0 1-.203-.26c-.214-.333-.703-1.245-.604-2.594c.073-.964.74-1.823 1.172-2.276a7.35 7.35 0 0 1 .547-3.01c.406-.969 1.177-1.797 1.76-2.318c-.427-.714-.859-1.823-.443-2.943c.302-.807.552-1.25 1.094-1.443h-.005c.266-.099.521-.203.646-.344a4.57 4.57 0 0 1 3.068-1.474q.072-.18.167-.375c.411-.875.849-1.37 1.365-1.557q.21-.078.438-.078zm.005.932c-.677.021-1.333 2.026-1.333 2.026s-1.693-.271-3.021 1.161c-.266.292-.625.443-.995.589c-.104.036-.234.026-.557.896c-.495 1.318.833 2.792.833 2.792s-1.583 1.115-2.167 2.505c-.651 1.526-.453 3.016-.453 3.016s-1.125.974-1.198 1.984c-.068.88.188 1.599.458 2.021c.302.453.682.234.682.234s-.75.87-.052 1.24c.635.333 1.708.526 2.281-.052c.411-.411.495-1.333.646-1.708c.036-.089.161.146.281.266c.13.125.349.26.349.26s-1.005.432-.594 1.422c.135.328.625.536 1.422.531c.297-.01 3.552-.188 4.417-.396c.5-.12.677-.38.677-.38s2.089-.573 3.995-1.807c1.224-.797 1.724-1.016 2.714-1.25c.818-.193.76-1.464-.323-1.443c-1.12.01-2.099.589-2.927 1.099c-1.552.958-2.323.896-2.323.896l-.026-.042c-.104-.172.495-1.724-.177-3.573c-.729-2.016-1.885-2.505-1.792-2.661c.396-.667 1.385-1.729 1.781-3.708c.234-1.198.172-3.167-.359-4.198c-.099-.193-.979.323-.979.323s-.818-1.828-1.047-1.979a.4.4 0 0 0-.214-.063z"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M16 0C7.167 0 0 7.167 0 16s7.167 16 16 16s16-7.167 16-16S24.833 0 16 0m1.026 5.474c.24 0 .484.068.698.208c.167.109.38.245 1.005 1.536c.417-.115.625-.052.734-.021c.276.073.49.25.62.5c.635 1.219.724 3.401.443 4.807c-.318 1.641-1.005 2.703-1.505 3.432c.432.438 1.036 1.198 1.49 2.432a6.6 6.6 0 0 1 .365 2.688q.413-.195.802-.438c.792-.49 1.979-1.224 3.401-1.245c.953-.01 1.693.594 1.807 1.474a1.643 1.643 0 0 1-1.26 1.813c-.865.214-1.266.375-2.427 1.125c-1.646 1.063-3.385 1.656-4.016 1.854c-.276.224-.599.38-.943.458c-.979.24-4.354.422-4.62.422h-.063c-1.042 0-1.62-.323-1.932-.656c-.875.438-2.01.255-2.828-.177a1.44 1.44 0 0 1-.776-1.542a2 2 0 0 1-.203-.26c-.214-.333-.703-1.245-.604-2.594c.073-.964.74-1.823 1.172-2.276a7.35 7.35 0 0 1 .547-3.01c.406-.969 1.177-1.797 1.76-2.318c-.427-.714-.859-1.823-.443-2.943c.302-.807.552-1.25 1.094-1.443h-.005c.266-.099.521-.203.646-.344a4.57 4.57 0 0 1 3.068-1.474q.072-.18.167-.375c.411-.875.849-1.37 1.365-1.557q.21-.078.438-.078zm.005.932c-.677.021-1.333 2.026-1.333 2.026s-1.693-.271-3.021 1.161c-.266.292-.625.443-.995.589c-.104.036-.234.026-.557.896c-.495 1.318.833 2.792.833 2.792s-1.583 1.115-2.167 2.505c-.651 1.526-.453 3.016-.453 3.016s-1.125.974-1.198 1.984c-.068.88.188 1.599.458 2.021c.302.453.682.234.682.234s-.75.87-.052 1.24c.635.333 1.708.526 2.281-.052c.411-.411.495-1.333.646-1.708c.036-.089.161.146.281.266c.13.125.349.26.349.26s-1.005.432-.594 1.422c.135.328.625.536 1.422.531c.297-.01 3.552-.188 4.417-.396c.5-.12.677-.38.677-.38s2.089-.573 3.995-1.807c1.224-.797 1.724-1.016 2.714-1.25c.818-.193.76-1.464-.323-1.443c-1.12.01-2.099.589-2.927 1.099c-1.552.958-2.323.896-2.323.896l-.026-.042c-.104-.172.495-1.724-.177-3.573c-.729-2.016-1.885-2.505-1.792-2.661c.396-.667 1.385-1.729 1.781-3.708c.234-1.198.172-3.167-.359-4.198c-.099-.193-.979.323-.979.323s-.818-1.828-1.047-1.979a.4.4 0 0 0-.214-.063z"/></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%2032%2032%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M16%200C7.167%200%200%207.167%200%2016s7.167%2016%2016%2016s16-7.167%2016-16S24.833%200%2016%200m1.026%205.474c.24%200%20.484.068.698.208c.167.109.38.245%201.005%201.536c.417-.115.625-.052.734-.021c.276.073.49.25.62.5c.635%201.219.724%203.401.443%204.807c-.318%201.641-1.005%202.703-1.505%203.432c.432.438%201.036%201.198%201.49%202.432a6.6%206.6%200%200%201%20.365%202.688q.413-.195.802-.438c.792-.49%201.979-1.224%203.401-1.245c.953-.01%201.693.594%201.807%201.474a1.643%201.643%200%200%201-1.26%201.813c-.865.214-1.266.375-2.427%201.125c-1.646%201.063-3.385%201.656-4.016%201.854c-.276.224-.599.38-.943.458c-.979.24-4.354.422-4.62.422h-.063c-1.042%200-1.62-.323-1.932-.656c-.875.438-2.01.255-2.828-.177a1.44%201.44%200%200%201-.776-1.542a2%202%200%200%201-.203-.26c-.214-.333-.703-1.245-.604-2.594c.073-.964.74-1.823%201.172-2.276a7.35%207.35%200%200%201%20.547-3.01c.406-.969%201.177-1.797%201.76-2.318c-.427-.714-.859-1.823-.443-2.943c.302-.807.552-1.25%201.094-1.443h-.005c.266-.099.521-.203.646-.344a4.57%204.57%200%200%201%203.068-1.474q.072-.18.167-.375c.411-.875.849-1.37%201.365-1.557q.21-.078.438-.078zm.005.932c-.677.021-1.333%202.026-1.333%202.026s-1.693-.271-3.021%201.161c-.266.292-.625.443-.995.589c-.104.036-.234.026-.557.896c-.495%201.318.833%202.792.833%202.792s-1.583%201.115-2.167%202.505c-.651%201.526-.453%203.016-.453%203.016s-1.125.974-1.198%201.984c-.068.88.188%201.599.458%202.021c.302.453.682.234.682.234s-.75.87-.052%201.24c.635.333%201.708.526%202.281-.052c.411-.411.495-1.333.646-1.708c.036-.089.161.146.281.266c.13.125.349.26.349.26s-1.005.432-.594%201.422c.135.328.625.536%201.422.531c.297-.01%203.552-.188%204.417-.396c.5-.12.677-.38.677-.38s2.089-.573%203.995-1.807c1.224-.797%201.724-1.016%202.714-1.25c.818-.193.76-1.464-.323-1.443c-1.12.01-2.099.589-2.927%201.099c-1.552.958-2.323.896-2.323.896l-.026-.042c-.104-.172.495-1.724-.177-3.573c-.729-2.016-1.885-2.505-1.792-2.661c.396-.667%201.385-1.729%201.781-3.708c.234-1.198.172-3.167-.359-4.198c-.099-.193-.979.323-.979.323s-.818-1.828-1.047-1.979a.4.4%200%200%200-.214-.063z%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%2032%2032%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M16%200C7.167%200%200%207.167%200%2016s7.167%2016%2016%2016s16-7.167%2016-16S24.833%200%2016%200m1.026%205.474c.24%200%20.484.068.698.208c.167.109.38.245%201.005%201.536c.417-.115.625-.052.734-.021c.276.073.49.25.62.5c.635%201.219.724%203.401.443%204.807c-.318%201.641-1.005%202.703-1.505%203.432c.432.438%201.036%201.198%201.49%202.432a6.6%206.6%200%200%201%20.365%202.688q.413-.195.802-.438c.792-.49%201.979-1.224%203.401-1.245c.953-.01%201.693.594%201.807%201.474a1.643%201.643%200%200%201-1.26%201.813c-.865.214-1.266.375-2.427%201.125c-1.646%201.063-3.385%201.656-4.016%201.854c-.276.224-.599.38-.943.458c-.979.24-4.354.422-4.62.422h-.063c-1.042%200-1.62-.323-1.932-.656c-.875.438-2.01.255-2.828-.177a1.44%201.44%200%200%201-.776-1.542a2%202%200%200%201-.203-.26c-.214-.333-.703-1.245-.604-2.594c.073-.964.74-1.823%201.172-2.276a7.35%207.35%200%200%201%20.547-3.01c.406-.969%201.177-1.797%201.76-2.318c-.427-.714-.859-1.823-.443-2.943c.302-.807.552-1.25%201.094-1.443h-.005c.266-.099.521-.203.646-.344a4.57%204.57%200%200%201%203.068-1.474q.072-.18.167-.375c.411-.875.849-1.37%201.365-1.557q.21-.078.438-.078zm.005.932c-.677.021-1.333%202.026-1.333%202.026s-1.693-.271-3.021%201.161c-.266.292-.625.443-.995.589c-.104.036-.234.026-.557.896c-.495%201.318.833%202.792.833%202.792s-1.583%201.115-2.167%202.505c-.651%201.526-.453%203.016-.453%203.016s-1.125.974-1.198%201.984c-.068.88.188%201.599.458%202.021c.302.453.682.234.682.234s-.75.87-.052%201.24c.635.333%201.708.526%202.281-.052c.411-.411.495-1.333.646-1.708c.036-.089.161.146.281.266c.13.125.349.26.349.26s-1.005.432-.594%201.422c.135.328.625.536%201.422.531c.297-.01%203.552-.188%204.417-.396c.5-.12.677-.38.677-.38s2.089-.573%203.995-1.807c1.224-.797%201.724-1.016%202.714-1.25c.818-.193.76-1.464-.323-1.443c-1.12.01-2.099.589-2.927%201.099c-1.552.958-2.323.896-2.323.896l-.026-.042c-.104-.172.495-1.724-.177-3.573c-.729-2.016-1.885-2.505-1.792-2.661c.396-.667%201.385-1.729%201.781-3.708c.234-1.198.172-3.167-.359-4.198c-.099-.193-.979.323-.979.323s-.818-1.828-1.047-1.979a.4.4%200%200%200-.214-.063z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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