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

Iconos de filtro gratis (SVG)

48 iconos de filtro gratis de conjuntos de código abierto: haz clic en uno para cambiar su tamaño, color y trazo, y cópialo como SVG, JSX, data URI o CSS.

Actualizado el

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

Uso de iconos de filtro

Un embudo abre filtros en listas de productos, tablas y resultados de búsqueda.

Todos los iconos aquí siguen currentColor, así que toman el color de texto del elemento en el que están: un solo SVG funciona en fondos claros y oscuros, en enlaces y en botones. Define un width y un height explícitos (o ajústalos en CSS con 1em) para que el diseño no se desplace mientras carga la página.

Iconos accesibles

Si el icono es decorativo o va junto a texto visible, añade aria-hidden="true". Si es el único contenido de un botón o enlace, dale a ese elemento un aria-label como «Filtrar».

Licencias

Estos iconos de filtro provienen de Tabler, Bootstrap Icons, Iconoir, Fluent UI, Material Symbols, Material Design Icons y Carbon: conjuntos de código abierto bajo licencias MIT, ISC o Apache 2.0, que permiten el uso personal y comercial. ¿Necesitas otra cosa? Busca entre más de 70,000+ iconos en el SVG Icon Finder.

Preguntas frecuentes

¿Son gratis estos iconos de filtro para uso comercial?
Sí. Provienen de conjuntos de iconos de código abierto bajo licencias MIT, ISC o Apache 2.0, que permiten el uso comercial. Conserva el aviso de licencia si redistribuyes los propios archivos de iconos.
¿Cómo cambio el color de un icono de filtro?
Los SVG usan currentColor, así que define el color CSS del elemento padre, o abre el icono en el buscador y elige un color fijo antes de copiarlo.
¿Puedo usar estos iconos en Webflow o React?
Sí. Abre un icono y usa Copy to Webflow (pega un Code Embed) o Copy JSX para un componente de React.