devpack
EnglishEspañolPortuguêsBahasa IndonesiaFrançaisРусскийDeutschTiếng Việt

Ícones de Filtro Grátis (SVG)

48 ícones de filtro grátis de bibliotecas open-source — clique em um para mudar o tamanho, a cor e o traço, e copie como SVG, JSX, data URI ou CSS.

Atualizado em

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

Como usar ícones de filtro

Um funil abre filtros em listas de produtos, tabelas e resultados de busca.

Todos os ícones aqui seguem currentColor, então assumem a cor do texto do elemento onde estão — um mesmo SVG funciona em fundos claros e escuros, em links e em botões. Defina um width e um height explícitos (ou dimensione-os no CSS com 1em) para que o layout não mude enquanto a página carrega.

Ícones acessíveis

Se o ícone é decorativo ou fica ao lado de um texto visível, adicione aria-hidden="true". Se ele é o único conteúdo de um botão ou link, dê a esse elemento um aria-label, como “Filtrar”.

Licenças

Estes ícones de filtro vêm de Tabler, Bootstrap Icons, Iconoir, Fluent UI, Material Symbols, Material Design Icons e Carbon — bibliotecas open-source sob licenças MIT, ISC ou Apache 2.0, que permitem uso pessoal e comercial. Precisa de outra coisa? Pesquise em todos os 70.000+ ícones no SVG Icon Finder.

Perguntas frequentes

Esses ícones de filtro são grátis para uso comercial?
Sim. Eles vêm de bibliotecas de ícones open-source sob licenças MIT, ISC ou Apache 2.0, que permitem uso comercial. Mantenha o aviso de licença se você redistribuir os próprios arquivos de ícone.
Como mudo a cor de um ícone de filtro?
Os SVGs usam currentColor, então defina a propriedade color no CSS do elemento pai — ou abra o ícone no buscador e escolha uma cor fixa antes de copiar.
Posso usar esses ícones no Webflow ou no React?
Sim. Abra um ícone e use Copy to Webflow (cola como Code Embed) ou Copy JSX para um componente React.