Home/Libraries/Clarity (Iconify)/recycle-line

Clarity (Iconify)

RecycleLine

License: MITCommercial Safe

ICON SIZE

COLOR PICKER

Download SVG without fill color (CSS-styleable)

<svg style="color: #818cf8" xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 36 36"><path fill="#818cf8" d="M6.4 17.4c.2.1.3.1.5.1s.4-.1.5-.1l7-4.1c.3-.2.5-.5.5-.9s-.2-.7-.5-.9L11.9 10L14 6.2c.4-.7 1-1.3 1.7-1.7c2-1.1 4.5-.3 5.6 1.7c.3.5.9.6 1.4.3h.1c.4-.3.5-.9.3-1.3c-.6-1-1.4-1.9-2.4-2.4c-3-1.6-6.7-.6-8.3 2.4L9.6 9.9c-.3.5-.1 1.1.3 1.4l2 1.2l-4 2.4V8.2c0-.6-.4-1-1-1c-.5.1-.9.5-.9 1.1v8.3c0 .3.2.6.4.8" class="clr-i-outline clr-i-outline-path-1"/><path fill="#818cf8" d="m32.1 21l-3.5-6.2c-.1-.2-.4-.4-.6-.5c-.3-.1-.5 0-.8.1L25 15.7V11l5.5 3.3c.1 0 .1.1.2.1c.5.2 1.1 0 1.3-.5s0-1.1-.5-1.3l-7-4.2c-.3-.2-.7-.2-1 0c-.4.1-.5.4-.5.8v8.3c0 .4.1.8.4 1s.7.2 1 0l2.9-1.7l3 5.3c.7 1.3.7 2.8 0 4.1c-.6 1.2-1.9 1.9-3.2 1.9h-.9c-.5 0-1.2.4-1.2 1c.1.6.6 1 1.2 1h.9c2.1 0 4-1.1 5-2.9c1.1-2 1.1-4.3 0-6.2" class="clr-i-outline clr-i-outline-path-2"/><path fill="#818cf8" d="m22.4 28.2l-7-4.2c-.3-.2-.7-.2-1 0s-.4.5-.4.9v3.3H9.1c-1.5-.1-2.9-.9-3.6-2.3c-.8-1.4-.8-3.2 0-4.6c.3-.5.1-1.1-.4-1.4s-1.1-.1-1.4.4c-1.2 2.1-1.1 4.6.1 6.6C4.9 28.8 7 30 9.2 30H15c.6 0 1-.4 1-1v-2.4l4 2.4l-5.6 3.3c-.3.2-.5.5-.5.9c0 .6.5 1 1 1c.2 0 .3-.1.5-.2l7-4.2c.2-.1.3-.2.4-.4c.3-.4.1-1-.4-1.2" class="clr-i-outline clr-i-outline-path-3"/><path fill="none" d="M0 0h36v36H0z"/></svg>

Icons in Action

WEB APPLICATION HEADER & NAVIGATION

my-app.com/dashboard

Overview Dashboard

PROGRESS STEPPER

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. RecycleLineIcon.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.