Home/Libraries/Phosphor (Iconify)/clover-thin

Phosphor (Iconify)

CloverThin

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 256 256"><path fill="#818cf8" d="M210.07 161.88C222 156.72 228 142.63 228 120s-6-36.72-17.93-41.88c-12.59-5.45-30.83-.39-54.22 15l-3 2l2-3c15.41-23.39 20.47-41.63 15-54.22C164.72 26 150.63 20 128 20s-36.72 6-41.88 17.93c-5.45 12.59-.39 30.83 15 54.22q1 1.53 2 3l-3-2c-23.39-15.41-41.63-20.47-54.22-15C34 83.28 28 97.37 28 120s6 36.72 17.93 41.88a27.5 27.5 0 0 0 11 2.12c11.46 0 26-5.73 43.26-17.14l3-2l-2 3c-15.41 23.39-20.47 41.63-15 54.21C91.28 214 105.37 220 128 220s36.72-6 41.88-17.94c3.81-8.8 2.47-20.39-3.95-34.56c15.65 20.5 31.41 46.36 38.19 73.5a4 4 0 0 0 3.88 3a4 4 0 0 0 1-.12a4 4 0 0 0 2.91-4.85c-8.41-33.65-29.45-64.78-48-87.2c13.82 8.09 25.62 12.17 35.26 12.17a27.5 27.5 0 0 0 10.9-2.12M93.47 41.11C97.24 32.41 108.86 28 128 28s30.76 4.41 34.53 13.11c8.21 18.94-19.86 56.41-34.53 73c-14.67-16.59-42.74-54.06-34.53-73M49.11 154.53C40.41 150.76 36 139.14 36 120s4.41-30.76 13.11-34.53a19.4 19.4 0 0 1 7.8-1.47c20.08 0 50.66 23.15 65.15 36c-16.54 14.67-54.01 42.74-72.95 34.53m113.42 44.36C158.76 207.59 147.14 212 128 212s-30.76-4.41-34.53-13.11C85.26 180 113.33 142.48 128 125.94c14.67 16.54 42.74 54.06 34.53 72.95m-28.42-78.74L134 120c16.54-14.68 54-42.75 72.94-34.53C215.59 89.24 220 100.86 220 120s-4.41 30.76-13.11 34.53c-18.89 8.18-56.16-19.67-72.78-34.38"/></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. CloverThinIcon.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.