Home/Libraries/IonIcons/ios-color-filter-outline

IonIcons

IosColorFilterOutline

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 512 512"><path d="M366.195 212.122A112.581 112.581 0 0 0 368.001 192c0-61.856-50.145-112.001-112.001-112.001S143.999 130.144 143.999 192c0 6.87.621 13.594 1.806 20.122C98.616 225.302 63.999 268.606 63.999 320c0 61.856 50.145 112.001 112.001 112.001 31.342 0 59.671-12.879 80-33.627 20.329 20.748 48.658 33.627 80 33.627 61.856 0 112.001-50.145 112.001-112.001 0-51.394-34.617-94.697-81.806-107.878zM159.999 192c0-52.935 43.065-96.001 96.001-96.001s96.001 43.066 96.001 96.001c0 5.776-.513 11.435-1.495 16.933-4.749-.614-9.59-.934-14.506-.934-31.342 0-59.671 12.879-80 33.627-20.329-20.748-48.658-33.627-80-33.627-4.916 0-9.757.319-14.506.934A96.248 96.248 0 0 1 159.999 192zm112.002 128c0 19.58-5.896 37.806-16.001 53.006-10.104-15.2-16.001-33.426-16.001-53.006 0-5.776.513-11.435 1.495-16.933a113.082 113.082 0 0 0 29.012 0A96.248 96.248 0 0 1 272.001 320zM256 288.001a96.29 96.29 0 0 1-10.314-.556A95.787 95.787 0 0 1 256 266.994a95.74 95.74 0 0 1 10.314 20.451 96.29 96.29 0 0 1-10.314.556zm-26.209-3.637c-29.756-8.455-53.666-30.937-64.105-59.81 3.39-.364 6.83-.556 10.314-.556 27.353 0 52.069 11.5 69.572 29.917a111.686 111.686 0 0 0-15.781 30.449zm36.637-30.447c17.503-18.418 42.219-29.918 69.572-29.918 3.484 0 6.925.191 10.314.556-10.439 28.873-34.35 51.354-64.105 59.81a111.637 111.637 0 0 0-15.781-30.448zM176 416.001c-52.936 0-96.001-43.065-96.001-96.001 0-43.852 29.555-80.931 69.792-92.364 11.732 34.983 40.265 62.257 76.014 72.243A112.57 112.57 0 0 0 223.999 320c0 24.717 8.013 47.559 21.573 66.084-17.503 18.417-42.219 29.917-69.572 29.917zm160 0c-27.354 0-52.069-11.5-69.572-29.918 13.561-18.524 21.573-41.366 21.573-66.083 0-6.869-.621-13.594-1.806-20.121 35.749-9.986 64.281-37.26 76.014-72.243 40.237 11.434 69.792 48.513 69.792 92.364 0 52.936-43.065 96.001-96.001 96.001z" fill="#818cf8"/></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 react-ionicons) 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. IosColorFilterOutlineIcon.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.