Home/Libraries/Freehand free icons (Iconify)/color-triangle

Freehand free icons (Iconify)

ColorTriangle

License: CC-BY-4.0

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 24 24"><g fill="#818cf8" fill-rule="evenodd" clip-rule="evenodd"><path d="M22.111 6.093C20.32 3.081 17.408.82 14.005.6a13.93 13.93 0 0 0-6.903 1.43H7a14 14 0 0 0-1.652 1a12.25 12.25 0 0 0-5.103 7.386a9.84 9.84 0 0 0 2.652 9.157a10.54 10.54 0 0 0 9.006 3.072a.35.35 0 0 0 .29-.38a.34.34 0 0 0-.38-.28a9.66 9.66 0 0 1-6.565-1.582q.38-.379.71-.8q.195-.235.361-.49q.162-.262.29-.54q.195-.492.33-1.002q.32.282.67.52q.593.37 1.232.651q.85.361 1.741.61c.66.18 1.671.631 4.333-.54l.15.55c.07.2.15.41.23.611c.08.2.19.4.29.59c.25.47.521.911.791 1.362a.36.36 0 0 0 .25.2a6 6 0 0 1-3.402.49a.372.372 0 0 0-.14.73a8.16 8.16 0 0 0 6.534-2a12.2 12.2 0 0 0 4.003-5.625a12.43 12.43 0 0 0-1.51-9.627m-1 .61a12.5 12.5 0 0 1 1.76 5.274c-.35-.07-.7-.15-1.06-.21a6 6 0 0 0-.62-.1h-.63c-.211 0-.561 0-.841.05a7.7 7.7 0 0 0-1.812-4.573a7.5 7.5 0 0 0-1.65-1.491c.19-.28.39-.55.56-.85a5 5 0 0 0 .19-.531q.116-.251.18-.52q.09-.407.14-.821A11 11 0 0 1 21.1 6.704zm-4.504-4.152a8 8 0 0 0-.5.75a4 4 0 0 0-.23.49a4 4 0 0 0-.17.51c-.08.291-.14.571-.21.851a5.6 5.6 0 0 0-2.262-.66a8 8 0 0 0-3.903.86a.4.4 0 0 0 0-.21c-.21-.38-.33-.76-.49-1.11a3 3 0 0 0-.22-.47a3 3 0 0 0-.28-.441c-.05-.07-.11-.12-.16-.18a12.7 12.7 0 0 1 5.763-1c.918.036 1.82.243 2.662.61M6.05 4.03A12 12 0 0 1 7.2 3.4c0 .09 0 .18.08.27s.15.33.23.48q.138.235.301.451q.4.523.85 1s.07 0 .1.07A9.3 9.3 0 0 0 5.53 8.786c-.37.627-.655 1.3-.85 2.001c-.35-.07-.7-.15-1.061-.19a6 6 0 0 0-.72 0a4 4 0 0 0-.711.07q-.47.11-.92.28c0-.09 0-.17.05-.25A11.16 11.16 0 0 1 6.05 4.032m-.51 13.91q-.18.237-.33.491q-.162.255-.281.53c-.14.29-.26.57-.39.861a10 10 0 0 1-1.001-.86a8.86 8.86 0 0 1-2.412-7.196h1.872l.67-.06l.87-.08a6.2 6.2 0 0 0 1.772 5.414c-.26.32-.53.6-.77.91zM6 15.04a5.77 5.77 0 0 1 .58-5.594a7.66 7.66 0 0 1 6.635-3.663a5.56 5.56 0 0 1 3.793 2.091a6.54 6.54 0 0 1 1.66 4.163a6.9 6.9 0 0 1-2.06 4.604a7 7 0 0 1-5.855 2.061a13 13 0 0 1-1.621-.66a6.5 6.5 0 0 1-1.13-.6a6.6 6.6 0 0 1-.952-.801a6 6 0 0 1-1-1.311m16.512.13a11.23 11.23 0 0 1-3.553 5.224a10 10 0 0 1-2.001 1.27a.4.4 0 0 0 0-.28c-.13-.5-.23-1-.38-1.51a6 6 0 0 0-.511-1.252c-.11-.19-.25-.35-.37-.53a8.7 8.7 0 0 0 1.47-1.1a8 8 0 0 0 2.403-4.694q.376.145.77.24q.316.073.64.1q.326.023.651 0c.41 0 .81-.06 1.22-.1a9.1 9.1 0 0 1-.26 2.632z"/><path d="M16.167 12.127c-1.16-2.171-2.862-4.983-3.573-6.094a.38.38 0 0 0-.32-.15a.37.37 0 0 0-.27.15s-3.903 5.464-5.384 7.635l-.26.39c-.4.641.08 1.792.73 1.492a11.4 11.4 0 0 0 2.262.14c2.182.08 5.074.09 6.595 0c.48 0 .84-.05 1-.07a.65.65 0 0 0 .601-.62a14.4 14.4 0 0 0-1.381-2.873m-.26 2.432c-1.501 0-4.363 0-6.525-.09H7.521a.4.4 0 0 0 .05-.09a445 445 0 0 1 4.663-7.395a97 97 0 0 1 2.562 4.783c.59 1.151 1.12 2.202 1.391 2.822q-.142 0-.28-.03"/></g></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. ColorTriangleIcon.tsx) to avoid installing any npm packages.

Q.Is this icon free for commercial use?

Yes. This icon is published under the open-source **CC-BY-4.0** 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.