yarn emoji

yarn from Fluent Emoji Flat by Microsoft Corporation · Default · Activities · MIT Free for personal and commercial use.

Name
yarn
Set
Fluent Emoji Flat
Style
Default
Category
Activities
Viewbox
32×32
License
MIT

The same emoji in other sets

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

More activities icons from Fluent Emoji Flat

1st-place-medal2nd-place-medal3rd-place-medaladmission-ticketsamerican-footballartist-palettebadmintonballoonbaseballbasketballbowlingboxing-glovebullseyecarp-streamerchess-pawnchristmas-treeclub-suitconfetti-ballcricket-gamecrystal-ballcurling-stonediamond-suitdiving-maskfield-hockey

Use the yarn emoji

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><g fill="none"><path fill="#f3c07b" d="M9.111 4.338a.913.913 0 0 1 .367-1.24a.855.855 0 0 1 1.186.43l4.3 9.876a.43.43 0 0 1-.183.55a.39.39 0 0 1-.53-.17zm-4.699 4.42c-.43-.287-.538-.903-.254-1.35c.293-.446.861-.541 1.262-.212l8.417 7.012a.463.463 0 0 1 .088.606a.395.395 0 0 1-.558.117z"/><path fill="#00a6ed" d="M25 15.5a8.5 8.5 0 1 1-17 0a8.5 8.5 0 0 1 17 0"/><path fill="#0074ba" d="M16.635 7.001q.886.015 1.718.202a26 26 0 0 0-3.716 2.303q.397.847.89 1.68c1.548-1.108 3.34-2.11 5.392-2.948q.51.311.972.69c-2.255.865-4.19 1.925-5.829 3.104q.552.826 1.211 1.603c1.906-1.479 4.057-2.614 6.2-2.996q.31.443.563.925c-2.037.265-4.166 1.333-6.091 2.815a16 16 0 0 0 1.613 1.47c1.604-1.133 3.405-1.985 5.227-2.257q.112.484.166.987c-1.54.226-3.104.927-4.543 1.898q.8.55 1.699 1.016a9.1 9.1 0 0 1 2.826-.917a9 9 0 0 1-.2 1.048a8 8 0 0 0-1.43.424q.151.063.305.123l.323.123q.263.096.532.185l-.005.014l.428.163A4.312 4.312 0 0 1 23.357 27H15a1 1 0 1 0 0 2h4a.5.5 0 0 1 0 1h-4a2 2 0 1 1 0-4h8.357a3.312 3.312 0 0 0 1.175-6.41l-.935-.354q-.188-.069-.373-.141l-.069-.026l-.038-.017a17 17 0 0 1-2.028-.97a16.6 16.6 0 0 1-2.356-1.613a17 17 0 0 1-2.236-2.202a18.6 18.6 0 0 1-1.773-2.48a21 21 0 0 1-1.356-2.674q-.275-.654-.5-1.3a8.5 8.5 0 0 0-1.731 1.092c1.733 4.676 5.29 9.83 11.752 12.202q-.363.413-.775.776c-6.366-2.498-9.952-7.586-11.769-12.246a8.5 8.5 0 0 0-1.37 1.905a27 27 0 0 0 1.104 2.195a25 25 0 0 0 1.626 2.523a23 23 0 0 0 2.054 2.427a22 22 0 0 0 2.302 2.053a21.3 21.3 0 0 0 4.046 2.459a8.5 8.5 0 0 1-1.289.481a22 22 0 0 1-.983-.54a5 5 0 0 0-.283.796q-.51.062-1.036.064c.08-.451.242-.922.461-1.388a22 22 0 0 1-1.46-1.027q-.135.229-.255.454c-.335.633-.564 1.221-.685 1.742a8 8 0 0 1-.96-.283c.151-.623.417-1.277.761-1.927q.164-.307.35-.618a23 23 0 0 1-1.545-1.424q-.253.396-.474.787c-.443.787-.77 1.539-.972 2.225a9 9 0 0 1-.842-.651a12.4 12.4 0 0 1 .943-2.065q.292-.52.638-1.042q-.735-.812-1.375-1.662a15.2 15.2 0 0 0-1.61 3.19a8.5 8.5 0 0 1-.642-1.103a16.8 16.8 0 0 1 1.627-2.95q-.575-.836-1.07-1.686a21 21 0 0 0-1.343 1.97a8.6 8.6 0 0 1-.024-1.86q.393-.575.812-1.11q-.21-.4-.404-.799a8.5 8.5 0 0 1 2.69-3.868a8.5 8.5 0 0 1 2.66-1.466q.183.53.4 1.066c.854-.6 1.68-1.101 2.438-1.504"/></g></svg>

React

import type { SVGProps } from "react";

export function FluentEmojiFlatYarn(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><g fill="none"><path fill="#f3c07b" d="M9.111 4.338a.913.913 0 0 1 .367-1.24a.855.855 0 0 1 1.186.43l4.3 9.876a.43.43 0 0 1-.183.55a.39.39 0 0 1-.53-.17zm-4.699 4.42c-.43-.287-.538-.903-.254-1.35c.293-.446.861-.541 1.262-.212l8.417 7.012a.463.463 0 0 1 .088.606a.395.395 0 0 1-.558.117z"/><path fill="#00a6ed" d="M25 15.5a8.5 8.5 0 1 1-17 0a8.5 8.5 0 0 1 17 0"/><path fill="#0074ba" d="M16.635 7.001q.886.015 1.718.202a26 26 0 0 0-3.716 2.303q.397.847.89 1.68c1.548-1.108 3.34-2.11 5.392-2.948q.51.311.972.69c-2.255.865-4.19 1.925-5.829 3.104q.552.826 1.211 1.603c1.906-1.479 4.057-2.614 6.2-2.996q.31.443.563.925c-2.037.265-4.166 1.333-6.091 2.815a16 16 0 0 0 1.613 1.47c1.604-1.133 3.405-1.985 5.227-2.257q.112.484.166.987c-1.54.226-3.104.927-4.543 1.898q.8.55 1.699 1.016a9.1 9.1 0 0 1 2.826-.917a9 9 0 0 1-.2 1.048a8 8 0 0 0-1.43.424q.151.063.305.123l.323.123q.263.096.532.185l-.005.014l.428.163A4.312 4.312 0 0 1 23.357 27H15a1 1 0 1 0 0 2h4a.5.5 0 0 1 0 1h-4a2 2 0 1 1 0-4h8.357a3.312 3.312 0 0 0 1.175-6.41l-.935-.354q-.188-.069-.373-.141l-.069-.026l-.038-.017a17 17 0 0 1-2.028-.97a16.6 16.6 0 0 1-2.356-1.613a17 17 0 0 1-2.236-2.202a18.6 18.6 0 0 1-1.773-2.48a21 21 0 0 1-1.356-2.674q-.275-.654-.5-1.3a8.5 8.5 0 0 0-1.731 1.092c1.733 4.676 5.29 9.83 11.752 12.202q-.363.413-.775.776c-6.366-2.498-9.952-7.586-11.769-12.246a8.5 8.5 0 0 0-1.37 1.905a27 27 0 0 0 1.104 2.195a25 25 0 0 0 1.626 2.523a23 23 0 0 0 2.054 2.427a22 22 0 0 0 2.302 2.053a21.3 21.3 0 0 0 4.046 2.459a8.5 8.5 0 0 1-1.289.481a22 22 0 0 1-.983-.54a5 5 0 0 0-.283.796q-.51.062-1.036.064c.08-.451.242-.922.461-1.388a22 22 0 0 1-1.46-1.027q-.135.229-.255.454c-.335.633-.564 1.221-.685 1.742a8 8 0 0 1-.96-.283c.151-.623.417-1.277.761-1.927q.164-.307.35-.618a23 23 0 0 1-1.545-1.424q-.253.396-.474.787c-.443.787-.77 1.539-.972 2.225a9 9 0 0 1-.842-.651a12.4 12.4 0 0 1 .943-2.065q.292-.52.638-1.042q-.735-.812-1.375-1.662a15.2 15.2 0 0 0-1.61 3.19a8.5 8.5 0 0 1-.642-1.103a16.8 16.8 0 0 1 1.627-2.95q-.575-.836-1.07-1.686a21 21 0 0 0-1.343 1.97a8.6 8.6 0 0 1-.024-1.86q.393-.575.812-1.11q-.21-.4-.404-.799a8.5 8.5 0 0 1 2.69-3.868a8.5 8.5 0 0 1 2.66-1.466q.183.53.4 1.066c.854-.6 1.68-1.101 2.438-1.504"/></g></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><g fill="none"><path fill="#f3c07b" d="M9.111 4.338a.913.913 0 0 1 .367-1.24a.855.855 0 0 1 1.186.43l4.3 9.876a.43.43 0 0 1-.183.55a.39.39 0 0 1-.53-.17zm-4.699 4.42c-.43-.287-.538-.903-.254-1.35c.293-.446.861-.541 1.262-.212l8.417 7.012a.463.463 0 0 1 .088.606a.395.395 0 0 1-.558.117z"/><path fill="#00a6ed" d="M25 15.5a8.5 8.5 0 1 1-17 0a8.5 8.5 0 0 1 17 0"/><path fill="#0074ba" d="M16.635 7.001q.886.015 1.718.202a26 26 0 0 0-3.716 2.303q.397.847.89 1.68c1.548-1.108 3.34-2.11 5.392-2.948q.51.311.972.69c-2.255.865-4.19 1.925-5.829 3.104q.552.826 1.211 1.603c1.906-1.479 4.057-2.614 6.2-2.996q.31.443.563.925c-2.037.265-4.166 1.333-6.091 2.815a16 16 0 0 0 1.613 1.47c1.604-1.133 3.405-1.985 5.227-2.257q.112.484.166.987c-1.54.226-3.104.927-4.543 1.898q.8.55 1.699 1.016a9.1 9.1 0 0 1 2.826-.917a9 9 0 0 1-.2 1.048a8 8 0 0 0-1.43.424q.151.063.305.123l.323.123q.263.096.532.185l-.005.014l.428.163A4.312 4.312 0 0 1 23.357 27H15a1 1 0 1 0 0 2h4a.5.5 0 0 1 0 1h-4a2 2 0 1 1 0-4h8.357a3.312 3.312 0 0 0 1.175-6.41l-.935-.354q-.188-.069-.373-.141l-.069-.026l-.038-.017a17 17 0 0 1-2.028-.97a16.6 16.6 0 0 1-2.356-1.613a17 17 0 0 1-2.236-2.202a18.6 18.6 0 0 1-1.773-2.48a21 21 0 0 1-1.356-2.674q-.275-.654-.5-1.3a8.5 8.5 0 0 0-1.731 1.092c1.733 4.676 5.29 9.83 11.752 12.202q-.363.413-.775.776c-6.366-2.498-9.952-7.586-11.769-12.246a8.5 8.5 0 0 0-1.37 1.905a27 27 0 0 0 1.104 2.195a25 25 0 0 0 1.626 2.523a23 23 0 0 0 2.054 2.427a22 22 0 0 0 2.302 2.053a21.3 21.3 0 0 0 4.046 2.459a8.5 8.5 0 0 1-1.289.481a22 22 0 0 1-.983-.54a5 5 0 0 0-.283.796q-.51.062-1.036.064c.08-.451.242-.922.461-1.388a22 22 0 0 1-1.46-1.027q-.135.229-.255.454c-.335.633-.564 1.221-.685 1.742a8 8 0 0 1-.96-.283c.151-.623.417-1.277.761-1.927q.164-.307.35-.618a23 23 0 0 1-1.545-1.424q-.253.396-.474.787c-.443.787-.77 1.539-.972 2.225a9 9 0 0 1-.842-.651a12.4 12.4 0 0 1 .943-2.065q.292-.52.638-1.042q-.735-.812-1.375-1.662a15.2 15.2 0 0 0-1.61 3.19a8.5 8.5 0 0 1-.642-1.103a16.8 16.8 0 0 1 1.627-2.95q-.575-.836-1.07-1.686a21 21 0 0 0-1.343 1.97a8.6 8.6 0 0 1-.024-1.86q.393-.575.812-1.11q-.21-.4-.404-.799a8.5 8.5 0 0 1 2.69-3.868a8.5 8.5 0 0 1 2.66-1.466q.183.53.4 1.066c.854-.6 1.68-1.101 2.438-1.504"/></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%2032%2032%22%3E%3Cg%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22%23f3c07b%22%20d%3D%22M9.111%204.338a.913.913%200%200%201%20.367-1.24a.855.855%200%200%201%201.186.43l4.3%209.876a.43.43%200%200%201-.183.55a.39.39%200%200%201-.53-.17zm-4.699%204.42c-.43-.287-.538-.903-.254-1.35c.293-.446.861-.541%201.262-.212l8.417%207.012a.463.463%200%200%201%20.088.606a.395.395%200%200%201-.558.117z%22%2F%3E%3Cpath%20fill%3D%22%2300a6ed%22%20d%3D%22M25%2015.5a8.5%208.5%200%201%201-17%200a8.5%208.5%200%200%201%2017%200%22%2F%3E%3Cpath%20fill%3D%22%230074ba%22%20d%3D%22M16.635%207.001q.886.015%201.718.202a26%2026%200%200%200-3.716%202.303q.397.847.89%201.68c1.548-1.108%203.34-2.11%205.392-2.948q.51.311.972.69c-2.255.865-4.19%201.925-5.829%203.104q.552.826%201.211%201.603c1.906-1.479%204.057-2.614%206.2-2.996q.31.443.563.925c-2.037.265-4.166%201.333-6.091%202.815a16%2016%200%200%200%201.613%201.47c1.604-1.133%203.405-1.985%205.227-2.257q.112.484.166.987c-1.54.226-3.104.927-4.543%201.898q.8.55%201.699%201.016a9.1%209.1%200%200%201%202.826-.917a9%209%200%200%201-.2%201.048a8%208%200%200%200-1.43.424q.151.063.305.123l.323.123q.263.096.532.185l-.005.014l.428.163A4.312%204.312%200%200%201%2023.357%2027H15a1%201%200%201%200%200%202h4a.5.5%200%200%201%200%201h-4a2%202%200%201%201%200-4h8.357a3.312%203.312%200%200%200%201.175-6.41l-.935-.354q-.188-.069-.373-.141l-.069-.026l-.038-.017a17%2017%200%200%201-2.028-.97a16.6%2016.6%200%200%201-2.356-1.613a17%2017%200%200%201-2.236-2.202a18.6%2018.6%200%200%201-1.773-2.48a21%2021%200%200%201-1.356-2.674q-.275-.654-.5-1.3a8.5%208.5%200%200%200-1.731%201.092c1.733%204.676%205.29%209.83%2011.752%2012.202q-.363.413-.775.776c-6.366-2.498-9.952-7.586-11.769-12.246a8.5%208.5%200%200%200-1.37%201.905a27%2027%200%200%200%201.104%202.195a25%2025%200%200%200%201.626%202.523a23%2023%200%200%200%202.054%202.427a22%2022%200%200%200%202.302%202.053a21.3%2021.3%200%200%200%204.046%202.459a8.5%208.5%200%200%201-1.289.481a22%2022%200%200%201-.983-.54a5%205%200%200%200-.283.796q-.51.062-1.036.064c.08-.451.242-.922.461-1.388a22%2022%200%200%201-1.46-1.027q-.135.229-.255.454c-.335.633-.564%201.221-.685%201.742a8%208%200%200%201-.96-.283c.151-.623.417-1.277.761-1.927q.164-.307.35-.618a23%2023%200%200%201-1.545-1.424q-.253.396-.474.787c-.443.787-.77%201.539-.972%202.225a9%209%200%200%201-.842-.651a12.4%2012.4%200%200%201%20.943-2.065q.292-.52.638-1.042q-.735-.812-1.375-1.662a15.2%2015.2%200%200%200-1.61%203.19a8.5%208.5%200%200%201-.642-1.103a16.8%2016.8%200%200%201%201.627-2.95q-.575-.836-1.07-1.686a21%2021%200%200%200-1.343%201.97a8.6%208.6%200%200%201-.024-1.86q.393-.575.812-1.11q-.21-.4-.404-.799a8.5%208.5%200%200%201%202.69-3.868a8.5%208.5%200%200%201%202.66-1.466q.183.53.4%201.066c.854-.6%201.68-1.101%202.438-1.504%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%2032%2032%22%3E%3Cg%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22%23f3c07b%22%20d%3D%22M9.111%204.338a.913.913%200%200%201%20.367-1.24a.855.855%200%200%201%201.186.43l4.3%209.876a.43.43%200%200%201-.183.55a.39.39%200%200%201-.53-.17zm-4.699%204.42c-.43-.287-.538-.903-.254-1.35c.293-.446.861-.541%201.262-.212l8.417%207.012a.463.463%200%200%201%20.088.606a.395.395%200%200%201-.558.117z%22%2F%3E%3Cpath%20fill%3D%22%2300a6ed%22%20d%3D%22M25%2015.5a8.5%208.5%200%201%201-17%200a8.5%208.5%200%200%201%2017%200%22%2F%3E%3Cpath%20fill%3D%22%230074ba%22%20d%3D%22M16.635%207.001q.886.015%201.718.202a26%2026%200%200%200-3.716%202.303q.397.847.89%201.68c1.548-1.108%203.34-2.11%205.392-2.948q.51.311.972.69c-2.255.865-4.19%201.925-5.829%203.104q.552.826%201.211%201.603c1.906-1.479%204.057-2.614%206.2-2.996q.31.443.563.925c-2.037.265-4.166%201.333-6.091%202.815a16%2016%200%200%200%201.613%201.47c1.604-1.133%203.405-1.985%205.227-2.257q.112.484.166.987c-1.54.226-3.104.927-4.543%201.898q.8.55%201.699%201.016a9.1%209.1%200%200%201%202.826-.917a9%209%200%200%201-.2%201.048a8%208%200%200%200-1.43.424q.151.063.305.123l.323.123q.263.096.532.185l-.005.014l.428.163A4.312%204.312%200%200%201%2023.357%2027H15a1%201%200%201%200%200%202h4a.5.5%200%200%201%200%201h-4a2%202%200%201%201%200-4h8.357a3.312%203.312%200%200%200%201.175-6.41l-.935-.354q-.188-.069-.373-.141l-.069-.026l-.038-.017a17%2017%200%200%201-2.028-.97a16.6%2016.6%200%200%201-2.356-1.613a17%2017%200%200%201-2.236-2.202a18.6%2018.6%200%200%201-1.773-2.48a21%2021%200%200%201-1.356-2.674q-.275-.654-.5-1.3a8.5%208.5%200%200%200-1.731%201.092c1.733%204.676%205.29%209.83%2011.752%2012.202q-.363.413-.775.776c-6.366-2.498-9.952-7.586-11.769-12.246a8.5%208.5%200%200%200-1.37%201.905a27%2027%200%200%200%201.104%202.195a25%2025%200%200%200%201.626%202.523a23%2023%200%200%200%202.054%202.427a22%2022%200%200%200%202.302%202.053a21.3%2021.3%200%200%200%204.046%202.459a8.5%208.5%200%200%201-1.289.481a22%2022%200%200%201-.983-.54a5%205%200%200%200-.283.796q-.51.062-1.036.064c.08-.451.242-.922.461-1.388a22%2022%200%200%201-1.46-1.027q-.135.229-.255.454c-.335.633-.564%201.221-.685%201.742a8%208%200%200%201-.96-.283c.151-.623.417-1.277.761-1.927q.164-.307.35-.618a23%2023%200%200%201-1.545-1.424q-.253.396-.474.787c-.443.787-.77%201.539-.972%202.225a9%209%200%200%201-.842-.651a12.4%2012.4%200%200%201%20.943-2.065q.292-.52.638-1.042q-.735-.812-1.375-1.662a15.2%2015.2%200%200%200-1.61%203.19a8.5%208.5%200%200%201-.642-1.103a16.8%2016.8%200%200%201%201.627-2.95q-.575-.836-1.07-1.686a21%2021%200%200%200-1.343%201.97a8.6%208.6%200%200%201-.024-1.86q.393-.575.812-1.11q-.21-.4-.404-.799a8.5%208.5%200%200%201%202.69-3.868a8.5%208.5%200%200%201%202.66-1.466q.183.53.4%201.066c.854-.6%201.68-1.101%202.438-1.504%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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