Home/Libraries/Freehand free icons (Iconify)/filter

Freehand free icons (Iconify)

Filter

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"><path fill="#818cf8" d="M2.022 10.068q.49.952 1.138 1.806c.432.572.92 1.1 1.456 1.576a10.4 10.4 0 0 0 4.15 2.385a.388.388 0 1 0 .24-.739a10.15 10.15 0 0 1-3.542-2.524a15 15 0 0 1-1.257-1.496c-.3-.38-.389-.45-.648-.799c-.699-.818-1.786-.678-1.537-.21m19.616-7.153a.43.43 0 0 0-.55 0a.367.367 0 0 0 0 .539a2.155 2.155 0 0 1 .39 2.744a6.8 6.8 0 0 1-4.08 2.554c-2.13.45-4.3.684-6.476.698a16.7 16.7 0 0 1-6.276-.997a5.6 5.6 0 0 1-.838-.47a4.6 4.6 0 0 1-.738-.498C1.872 6.486 1.553 5.658 1.862 4.88c.55-1.387 2.575-2.415 4.26-2.884q1.306-.43 2.655-.698q1.346-.24 2.714-.3a23 23 0 0 1 4.21.19c1.399.19 2.78.49 4.13.898a.34.34 0 0 0 .21-.649A26 26 0 0 0 15.811.35A25 25 0 0 0 11.46 0q-1.44.029-2.863.25q-1.419.218-2.803.6C3.748 1.417 1.343 2.734.665 4.39a2.82 2.82 0 0 0 .22 2.504c.336.516.754.975 1.237 1.357c.449.38.908.788.998.868q.481.271.997.469c1.733.639 3.562.976 5.408.998a31 31 0 0 0 8.042-.908a9 9 0 0 0 4.41-2.694q.176-.216.27-.48c.458-1.146.728-2.653-.61-3.59m.25 4.969a7.2 7.2 0 0 1-1.187 2.145a11.5 11.5 0 0 1-1.227 1.596q-.69.756-1.487 1.397a13.5 13.5 0 0 1-4.2 2.325a.38.38 0 0 0-.25.26s-.07-.05-.11-.05a.388.388 0 0 0-.429.409c-.07.748 0 1.855 0 2.783a2.4 2.4 0 0 1-.24.998a3 3 0 0 1-.408.509c-.44.449-.998.898-1.387 1.267l-.51.579l-.079-1.138a60 60 0 0 1-.22-2.993c0-.679-.06-1.347-.07-1.996a.34.34 0 0 0-.318-.349a.35.35 0 0 0-.36.33c-.07.848-.12 1.706-.15 2.554s-.09 1.546-.1 2.444v1.597c0 .209-.099.608-.069.788a.76.76 0 0 0 .24.479a.68.68 0 0 0 .728.13c.275-.102.53-.254.748-.45q.57-.546 1.068-1.157c.329-.39.878-.878 1.297-1.367q.309-.364.529-.788c.196-.454.298-.942.299-1.437c0-.898-.16-1.925-.16-2.674a.44.44 0 0 0 .2 0a13.8 13.8 0 0 0 4.7-2.105a10.3 10.3 0 0 0 1.705-1.497a10 10 0 0 0 1.108-1.496c.28.197.5.466.638.778c.314.793.35 1.669.1 2.484a4 4 0 0 1-1.307 1.727a6.5 6.5 0 0 1-1.995 1.127a3.91 3.91 0 0 1-4.24-.659a.389.389 0 0 0-.59.5a4.79 4.79 0 0 0 5.189 1.316a6.6 6.6 0 0 0 2.504-1.287a4.86 4.86 0 0 0 1.596-2.404a5 5 0 0 0-.468-3.213a2.63 2.63 0 0 0-1.058-.998c.538-.811.833-1.76.848-2.734c-.03-.449-.539-.269-.878.27"/></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. FilterIcon.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.