devpack
EnglishDeutsch · StartseiteFrançais · AccueilEspañol · InicioPortuguês (Brasil) · Início
Site Audit

Free Filter Icons (SVG)

48 free filter icons from open-source sets — click one to change its size, color and stroke and copy it as SVG, JSX, a data URI or CSS.

Updated

filter
Tablerfilter
Bootstrap Iconsfilter
Iconoirfilter-12-filled
Fluent UIfilter
Material Symbolsfilter
Material Design Iconsfilter
Carbonfilter-filled
Tablerfilter-solid
Iconoirfilter-12-regular
Fluent UIfilter-outline
Material Symbolsfilter-outline
Material Design Iconsfilter-filled
Carbonfilter-2
Tablerfilter-16-filled
Fluent UIfilter-outline-rounded
Material Symbolsfilter-1
Material Design Iconsfilter-x
Tablerfilter-16-regular
Fluent UIfilter-outline-sharp
Material Symbolsfilter-2
Material Design Iconsfilter-up
Tablerfilter-20-filled
Fluent UIfilter-rounded
Material Symbolsfilter-3
Material Design Iconsfilter-20-regular
Fluent UIfilter-sharp
Material Symbolsfilter-4
Material Design Iconsfilter-24-filled
Fluent UIfilter-1
Material Symbolsfilter-5
Material Design Iconsfilter-24-regular
Fluent UIfilter-1-outline
Material Symbolsfilter-6
Material Design Iconsfilter-28-filled
Fluent UIfilter-1-outline-rounded
Material Symbolsfilter-7
Material Design Iconsfilter-28-regular
Fluent UIfilter-1-outline-sharp
Material Symbolsfilter-8
Material Design Iconsfilter-32-filled
Fluent UIfilter-1-rounded
Material Symbolsfilter-9
Material Design Iconsfilter-32-light
Fluent UIfilter-1-sharp
Material Symbolsfilter-32-regular
Fluent UIfilter-2
Material Symbolsfilter-2-outline
Material Symbols

Using filter icons

A funnel opens filters on product lists, tables and search results.

All icons here follow currentColor, so they take the text color of the element they sit in — one SVG works on light and dark backgrounds, in links and in buttons. Set an explicit width and height (or size them in CSS with 1em) so the layout doesn’t shift while the page loads.

Accessible icons

If the icon is decorative or sits next to visible text, add aria-hidden="true". If it is the only content of a button or link, give that element an aria-label such as “Filter”.

Licenses

These filter icons come from Tabler, Bootstrap Icons, Iconoir, Fluent UI, Material Symbols, Material Design Icons, Carbon — open-source sets under MIT, ISC or Apache 2.0 licenses, which allow personal and commercial use. Need something else? Search all 70,000+ icons in the SVG Icon Finder.

SVG Icon FinderSearch 70,000+ open-source SVG icons — Lucide, Tabler, Heroicons, Phosphor, Bootstrap, Material and more.
Open the tool

Frequently asked questions

Are these filter icons free for commercial use?
Yes. They come from open-source icon sets under MIT, ISC or Apache 2.0 licenses, which allow commercial use. Keep the license notice if you redistribute the icon files themselves.
How do I change the color of a filter icon?
The SVGs use currentColor, so set the CSS color of the parent element — or open the icon in the finder and pick a fixed color before copying.
Can I use these icons in Webflow or React?
Yes. Open an icon and use Copy to Webflow (pastes a Code Embed) or Copy JSX for a React component.