Home/Libraries/Freehand free icons (Iconify)/color-picker-drop

Freehand free icons (Iconify)

ColorPickerDrop

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="M2.934 18.324c.7.949 1.689 3.995.32 4.255a2.17 2.17 0 0 1-1.368-.24c-.77-.38-1-.779-.72-1.808c.49-1.997 1.249-2.117 1.279-2.457s-.3-.65-.64-.38a8 8 0 0 0-1.538 2.558a2.217 2.217 0 0 0 .7 2.886c1.488 1.09 3.805.85 3.995-1.168a7.3 7.3 0 0 0-1.458-4.076a.357.357 0 1 0-.57.43M22.932 1.433a3.85 3.85 0 0 0-4.395-.54c-.48.25-1.049.83-1.409.85c-.519.02-1.308-1.24-2.207-1.489a1.668 1.668 0 0 0-1.998 1.518c0 1.23 1.728 3.337 2.368 4.366q.315.563.719 1.068c.819 1 1.248 0 .719-.16c-.3-.05-.72-1.048-.85-1.248c-.509-.919-1.997-2.887-2.057-3.876c0-.39.47-.839.82-.729c.349.11.758.62 1.138.999c1.518 1.418 2.337.23 3.286-.26a2.8 2.8 0 0 1 2.997.3c2.357 2.667-1.219 4.455-1.568 5.474c-.29.859 1.828 2.677.45 3.296a.92.92 0 0 1-1-.26a16 16 0 0 1-2.197-2.637a.35.35 0 0 0-.47-.11c-.549.37.33 1.15.85 1.818c-.31 0-6.703 4.555-9.05 5.544c-1.23.52-1.09.05-1.639-.45c-1.058-.998-1.668.68-2.996.72c-.24 0-.39-.15-.5-.51s.24-.489.53-.659c.829-.48 1.518-.909 1.298-1.928a7.4 7.4 0 0 1-.42-1.328c-.03-1.548 7.972-5.204 8.561-6.543a.32.32 0 0 0-.38-.43c-.31.07-1.857 1.12-6.232 3.996c-1.09.77-3.427 1.509-2.947 3.486q.23.583.34 1.199c-.09.46-2.358.78-1.848 2.537a1.68 1.68 0 0 0 1.178 1.299c.99.006 1.96-.283 2.787-.83a1.67 1.67 0 0 0 1.299.75a6.43 6.43 0 0 0 2.996-1.269c1.628-.899 5.694-3.855 7.212-4.994a.4.4 0 0 0 .14-.2c.367.527.82.99 1.338 1.369a1.63 1.63 0 0 0 2.498-1c.14-.828-.57-1.917-.82-2.656c3.097-2.448 3.047-4.665 1.459-6.483"/><path d="M11.155 8.475a1.5 1.5 0 0 0-.42-.19c-2.207-.17-1.588.2-.848.6c.24.051.461.169.639.34a18.4 18.4 0 0 0 2.407 2.586c1.249.52 1.529.29.93-.61c-.85-.658-1.45-1.807-2.708-2.726"/></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. ColorPickerDropIcon.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.