IconSearch logoIconsearch
Home/Libraries/Lineicons (Iconify)/yarn
← Back to Search
Lineicons (Iconify)

Yarn

License: MITCommercial Safe


<svg style="color: #818cf8" xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 24 24"><path fill="#818cf8" d="M14.457 15.177c0 .14-.022.277-.045.414l-.027.18c-.021.173-.004.192.171.162c.394-.068.75-.234 1.093-.428l.292-.173c.266-.16.53-.318.818-.433a2.5 2.5 0 0 1 .945-.203c.286 0 .485.155.52.4c.033.228-.092.445-.32.493c-.65.138-1.213.459-1.761.815c-.735.475-1.535.818-2.368 1.08l-.02.006c-.027.007-.054.014-.07.029c-.196.208-.456.243-.719.277c-.726.096-1.458.139-2.19.182h-.001l-.03.002c-.213.013-.428.02-.642-.022c-.34-.068-.485-.195-.537-.475c-.046-.252.072-.49.323-.654l.07-.044l.027-.017a1.1 1.1 0 0 1-.332-.303c-.041-.057-.063-.022-.077.026l-.062.238l-.027.101l-.035.136a2 2 0 0 1-.108.308c-.127.29-.358.43-.664.459a1.65 1.65 0 0 1-.888-.18c-.192-.094-.249-.236-.185-.444c.031-.107.092-.201.164-.314l.008-.012c-.264.053-.38-.1-.472-.286a1.98 1.98 0 0 1-.192-1.283c.067-.354.275-.642.525-.892c.146-.146.19-.286.185-.492c-.033-1.187.416-2.162 1.339-2.915c.08-.068.161-.138.246-.2c.053-.037.059-.06.016-.115c-.239-.3-.424-.625-.51-1.003c-.096-.426.049-.796.263-1.15c.03-.048.079-.072.132-.092c.269-.096.496-.242.701-.448c.463-.463 1.036-.675 1.692-.647c.083.004.12-.02.146-.098c.098-.287.22-.562.384-.818a1 1 0 0 1 .217-.257q.245-.202.408.063a8 8 0 0 1 .498.977l.016.036c.04.087.07.118.162.058c.107-.068.227-.115.347-.158c.097-.033.153-.01.195.09c.122.295.188.604.226.92l.008.062c.01.066.02.132.011.199a7 7 0 0 0 .001.387l.002.068l.001.118q0 .045-.007.089c-.007.056-.014.112.003.168c-.02.52-.157 1.013-.358 1.489c-.187.444-.459.837-.73 1.231l-.005.006c-.107.153-.105.156.035.28c.682.614 1.058 1.386 1.185 2.287q.004.053.002.109c-.019.056-.011.11-.004.165q.007.04.008.08q.003.078-.003.154c-.004.072-.008.142.004.212"/><path fill="#818cf8" fill-rule="evenodd" d="M21.997 11.728c-.14-5.371-4.528-9.72-9.993-9.73C6.343 1.994 1.75 6.722 2.011 12.462c.233 5.18 4.454 9.415 9.76 9.535c5.674.132 10.374-4.5 10.226-10.27M8.32 9.002q.099-.382.28-.732a.92.92 0 0 1 .53-.475a1.1 1.1 0 0 0 .453-.29a2.73 2.73 0 0 1 1.679-.81c.107-.01.162-.05.203-.15c.098-.24.22-.469.382-.672c.214-.269.47-.47.84-.448a.74.74 0 0 1 .57.3c.16.21.278.444.392.68c.037.076.067.105.161.085c.345-.077.625.074.774.395c.172.376.256.774.297 1.18c.088.847.03 1.68-.256 2.49a5.6 5.6 0 0 1-.692 1.334c-.035.05-.044.083.004.135c.772.866 1.15 1.876 1.106 3.039v.083c.044.002.08-.019.114-.039l.024-.014a8 8 0 0 0 .482-.277c.168-.102.336-.204.513-.293c.483-.243.988-.413 1.536-.409c.81.007 1.331.796.992 1.5c-.133.277-.351.474-.651.54c-.547.122-1.032.37-1.495.673c-.763.507-1.598.883-2.473 1.171a.5.5 0 0 0-.164.084c-.234.175-.507.247-.792.286c-.863.12-1.73.173-2.6.21c-.36.016-.716-.033-1.033-.223a1 1 0 0 1-.09-.07a.36.36 0 0 0-.157-.096c-.052-.008-.108.018-.165.045a.6.6 0 0 1-.11.043c-.558.124-1.08.02-1.563-.274c-.287-.172-.422-.445-.407-.782a.33.33 0 0 0-.074-.227c-.232-.324-.345-.693-.409-1.082c-.125-.767.149-1.401.656-1.957a.24.24 0 0 0 .065-.175c0-.767.146-1.497.54-2.166c.22-.374.505-.695.822-.986c.06-.054.068-.091.026-.162a3 3 0 0 1-.289-.717c-.037-.027-.037-.062-.037-.098c0-.023 0-.047-.009-.068l-.002-.04v-.015a.3.3 0 0 0-.011-.07v-.273c.01-.04.01-.08.01-.122c.01-.02.006-.046.028-.061" clip-rule="evenodd"/></svg>

Icons in Action

WEB APPLICATION HEADER & NAVIGATION

my-app.com/dashboard
Dashboard
Analytics
Settings

Overview Dashboard

PROGRESS STEPPER

3

BUTTON UI ACTIONS

SCALABILITY & CLARITY

12px
16px
24px
32px
48px

Highly adaptable, clean vectors that scale perfectly across modern UI components, navigation bars, and mobile actions. Perfectly pre-vetted for production deployment.

IconSearch Presets

Frequently Asked Questions

Q.How do I use this icon in my React/Next.js project?

You have two choices: install the official package listed under the "REACT IMPORT" tab (e.g. npm install @iconify/react) and import the icon directly, or copy the complete React Component code from the "STANDALONE JSX" tab and paste it directly into a local file (e.g. YarnIcon.tsx) to avoid installing any npm packages.

Q.Is this icon free for commercial use?

Yes. This icon is published under the open-source **MIT** license. The license grants full permissions for personal and commercial usage (e.g., in SaaS platforms, client projects, or business landing pages). Attributing the icon creator is generally not required for MIT/ISC licenses, but check details on our dedicated License Guide.

Q.What is the "Download SVG without fill color" toggle?

Many SVGs ship with inline fill="..." attributes. By checking this toggle, we strip these attributes and enforce fill="none", making the SVG fully styleable via CSS classes or Tailwind utility classes like fill-current.

Related Icons in Lineicons (Iconify)

Browse all Lineicons (Iconify) icons →
500px
500px
add-files
add-files
adobe
adobe
adonis
adonis
aeroplane-1
aeroplane-1
agenda
agenda
airbnb
airbnb
airtable
airtable
alarm
alarm
alarm-1
alarm-1
alarm-clock
alarm-clock
align-text-center
align-text-center