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

Freehand free icons (Iconify)

ColorGradient

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.026 18.289a1.994 1.994 0 0 0-1.995 2.345c.29 2.674 3.253 2.275 3.991 1.596a1.9 1.9 0 0 0 .589-1.437a2.48 2.48 0 0 0-.659-1.995a2.76 2.76 0 0 0-1.926-.51m1.248 3.362c-.16.11-2.195.998-2.166-1.067a.918.918 0 0 1 .998-.998a1.5 1.5 0 0 1 1.098.21a1.25 1.25 0 0 1 .36.997c.01.41-.05.699-.3.858zm13.391-3.361a1.994 1.994 0 0 0-1.996 2.345c.3 2.674 3.263 2.275 3.991 1.596a1.86 1.86 0 0 0 .589-1.437a2.44 2.44 0 0 0-.659-1.995a2.76 2.76 0 0 0-1.926-.51m1.257 3.362c-.16.11-2.195.998-2.175-1.067a.93.93 0 0 1 .997-.998a1.52 1.52 0 0 1 1.098.21a1.27 1.27 0 0 1 .35.997c.03.41-.03.699-.27.858"/><path d="M6.666 18.289a2.046 2.046 0 0 0-1.995 2.345c.299 2.674 3.263 2.275 4.04 1.596a1.87 1.87 0 0 0 .6-1.437a2.42 2.42 0 0 0-.649-1.995a2.76 2.76 0 0 0-1.996-.51m1.248 3.362c-.16.11-2.196.998-2.166-1.067a.918.918 0 0 1 .998-.998a1.5 1.5 0 0 1 1.098.21a1.25 1.25 0 0 1 .359.997c.02.41-.04.699-.29.858m13.411-3.361a2.046 2.046 0 0 0-1.995 2.345c.299 2.674 3.263 2.275 4.04 1.596a1.87 1.87 0 0 0 .61-1.437a2.42 2.42 0 0 0-.65-1.995a2.76 2.76 0 0 0-2.005-.51m1.247 3.362c-.16.11-2.195.998-2.165-1.067a.918.918 0 0 1 .998-.998a1.5 1.5 0 0 1 1.098.21a1.25 1.25 0 0 1 .359.997c.02.41-.04.699-.29.858m-20.325-8.2A1.875 1.875 0 0 0 .44 15.604c.29 2.424 2.993 2.065 3.682 1.457a1.73 1.73 0 0 0 .549-1.318a2.26 2.26 0 0 0-.599-1.806a2.48 2.48 0 0 0-1.826-.489m1.088 2.993c-.4.27-1.866.698-1.846-.908a.768.768 0 0 1 .828-.798c.32-.057.649.004.928.17a1.07 1.07 0 0 1 .3.837c.03.34-.01.58-.21.719zm13.56-2.991a1.877 1.877 0 0 0-1.806 2.155c.3 2.434 2.993 2.065 3.692 1.457a1.76 1.76 0 0 0 .539-1.318a2.19 2.19 0 0 0-.599-1.806a2.47 2.47 0 0 0-1.826-.489m1.088 2.993c-.4.27-1.866.688-1.836-.908a.76.76 0 0 1 .828-.798c.32-.054.648.006.928.17a1.06 1.06 0 0 1 .29.837c.03.34 0 .58-.2.719zM6.896 13.45a1.877 1.877 0 0 0-1.806 2.155c.29 2.424 2.993 2.065 3.682 1.457a1.73 1.73 0 0 0 .549-1.318a2.24 2.24 0 0 0-.61-1.806a2.44 2.44 0 0 0-1.815-.489m1.087 2.993c-.399.27-1.865.698-1.846-.908a.768.768 0 0 1 .829-.798c.32-.057.649.004.928.17a1.07 1.07 0 0 1 .299.837c.03.34-.01.58-.18.719zm15.447.62a1.77 1.77 0 0 0 .549-1.318a2.23 2.23 0 0 0-.61-1.806a2.44 2.44 0 0 0-1.815-.489a1.877 1.877 0 0 0-1.806 2.156c.29 2.394 2.973 2.065 3.682 1.457m-1.806-2.306c.32-.056.649.004.928.17a1.07 1.07 0 0 1 .299.838c0 .32 0 .56-.21.699c-.399.27-1.866.698-1.846-.908a.768.768 0 0 1 .829-.798M4.022 11.883a1.57 1.57 0 0 0 .509-1.198a2 2 0 0 0-.509-1.666a2.2 2.2 0 0 0-1.646-.449a1.696 1.696 0 0 0-1.637 1.996c.29 2.195 2.694 1.856 3.283 1.317M2.406 9.887c.26-.047.528 0 .758.13a.83.83 0 0 1 .24.668c0 .26 0 .45-.14.56c-.14.109-1.567.847-1.517-.75a.608.608 0 0 1 .699-.588zm16.314 1.996a1.6 1.6 0 0 0 .499-1.198a2 2 0 0 0-.539-1.666a2.23 2.23 0 0 0-1.686-.419a1.706 1.706 0 0 0-1.637 1.996c.32 2.165 2.724 1.826 3.363 1.287m-1.616-1.996c.257-.047.522-.001.748.13a.83.83 0 0 1 .24.668c0 .26 0 .45-.14.56c-.14.109-1.557.847-1.517-.75a.62.62 0 0 1 .669-.588zm-8.392 1.996a1.57 1.57 0 0 0 .509-1.198a2 2 0 0 0-.549-1.666A2.2 2.2 0 0 0 7.016 8.6a1.696 1.696 0 0 0-1.637 1.996c.29 2.165 2.694 1.826 3.333 1.287M7.095 9.887c.26-.047.529 0 .759.13c.24.18.22.499.24.668s0 .45-.14.56c-.14.109-1.567.847-1.517-.75a.61.61 0 0 1 .658-.588zm16.275 1.996a1.6 1.6 0 0 0 .509-1.198a2 2 0 0 0-.549-1.666a2.2 2.2 0 0 0-1.646-.449a1.696 1.696 0 0 0-1.637 1.996c.28 2.195 2.684 1.856 3.323 1.317m-1.617-1.996c.26-.047.529 0 .759.13c.24.18.22.499.24.668s0 .45-.14.56c-.14.109-1.567.847-1.517-.75a.61.61 0 0 1 .658-.588zM4.022 6.754a1.48 1.48 0 0 0 .47-1.088a1.84 1.84 0 0 0-.49-1.466a2 2 0 0 0-1.477-.41A1.537 1.537 0 0 0 1.03 5.577c.25 1.925 2.365 1.646 2.993 1.177M2.545 5.108c.34 0 .53 0 .619.11a.9.9 0 0 1 .15.478c0 .18 0 .33-.08.41s-1.208.678-1.208-.58a.44.44 0 0 1 .52-.418M18.63 6.754a1.48 1.48 0 0 0 .46-1.088A1.8 1.8 0 0 0 18.6 4.2a2 2 0 0 0-1.477-.41a1.547 1.547 0 0 0-1.476 1.787c.28 1.925 2.404 1.646 2.983 1.177m-1.437-1.646c.34 0 .53 0 .619.11a.9.9 0 0 1 .15.478c0 .18 0 .33-.07.41s-1.238.678-1.188-.58a.43.43 0 0 1 .49-.418M8.622 6.754a1.44 1.44 0 0 0 .459-1.088A1.79 1.79 0 0 0 8.602 4.2a2 2 0 0 0-1.477-.41A1.537 1.537 0 0 0 5.65 5.577c.279 1.925 2.364 1.646 2.973 1.177M7.195 5.108c.33 0 .519 0 .619.11c.107.139.176.304.2.478c0 .18 0 .33-.08.41s-1.238.678-1.188-.58a.44.44 0 0 1 .45-.418M23.28 6.754a1.44 1.44 0 0 0 .459-1.088A1.82 1.82 0 0 0 23.26 4.2a2 2 0 0 0-1.477-.41a1.537 1.537 0 0 0-1.476 1.787c.279 1.925 2.394 1.646 2.973 1.177m-1.427-1.646c.33 0 .519 0 .619.11a1 1 0 0 1 .15.478c0 .18 0 .33-.08.41s-1.238.678-1.188-.58a.44.44 0 0 1 .5-.418m-9.51 14.528c.07-1.726.15-3.443.2-5.159c0-.828 0-1.656.05-2.475c.05-.818 0-1.656 0-2.474c0-1.716-.12-3.433-.17-5.139a.4.4 0 0 0 .15-.07l.159-.08a2.7 2.7 0 0 0 .469-.309a1.846 1.846 0 0 0 .649-2.295A2.205 2.205 0 0 0 11.595.518a1.696 1.696 0 0 0-1.586 1.826a2.355 2.355 0 0 0 1.686 1.995c-.13 1.707-.27 3.423-.339 5.149v4.96c0 1.725.13 3.452.21 5.178a1.656 1.656 0 0 0-1.457 1.776c.08 1.217 1.526 2.993 3.203 1.586a1.846 1.846 0 0 0 .648-2.304a2 2 0 0 0-1.616-1.048M11.147 2.673a.618.618 0 0 1 .608-.798a1 1 0 0 1 .998.369a.92.92 0 0 1-.19 1.137c-.21.22-1.157.33-1.417-.758zm1.526 19.787c-.718.838-1.337-.26-1.437-.699a.608.608 0 0 1 .599-.808a1 1 0 0 1 .998.38a.91.91 0 0 1-.16 1.077z"/></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. ColorGradientIcon.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.