Iconos SVG gratis — 70.000+ de código abierto

Cómo usar: Buscador de iconos SVG

Escribe lo que necesitas — casa, flecha derecha, carrito de compras — y elige un conjunto, o busca en todos.
Haz clic en un icono para abrirlo. Define el tamaño, mantén currentColor para que siga el color de tu texto o elige un color personalizado; ajusta el trazo en los iconos de contorno.
Cópialo como SVG, JSX para React, como data URI, como máscara CSS o pégalo en Webflow; también puedes descargar el SVG o PNG.
Haz clic en ☆ Guardar para conservar los iconos que más usas; la próxima vez aparecerán en ★ Guardados.

Iconos gratis que realmente puedes usar

Todos los iconos de aquí provienen de conjuntos de código abierto con una licencia permisiva, así que puedes usarlos en sitios web y apps personales o comerciales. La licencia y el autor se muestran con cada icono:

Conjunto	Licencia	Estilo
Lucide	ISC	Contorno, cuadrícula de 24 px
Tabler Icons	MIT	Contorno y relleno
Heroicons	MIT	Contorno, sólido, mini
Phosphor	MIT	Seis grosores
Bootstrap Icons	MIT	Relleno y contorno
Feather, Iconoir	MIT	Contorno
Fluent UI System Icons	MIT	Estilo Microsoft
Material Symbols, Material Design Icons, Carbon	Apache 2.0	Estilos de Google, Pictogrammers e IBM

Las licencias MIT, ISC y Apache 2.0 piden que conserves el aviso de copyright y de licencia cuando redistribuyas los propios archivos de iconos (por ejemplo, en un paquete de iconos). Usar iconos dentro de un sitio web o app es el caso habitual para el que están pensadas estas licencias.

Por qué importa currentColor

Un icono cuyo fill o stroke es currentColor toma el color CSS de su elemento padre, así que el mismo SVG se vuelve blanco en un botón oscuro, azul en un enlace y gris cuando está deshabilitado, sin editar el archivo. Mantén currentColor para los iconos de textos y botones de la interfaz; elige un color fijo para ilustraciones y favicons.

Qué formato copiar

SVG — pégalo directamente en HTML, en un Webflow Embed o en un archivo .svg.
JSX — atributos listos para React (strokeWidth, className) para añadir a un componente.
Data URI — para <img src> o un background-image de CSS sin un archivo aparte.
Máscara CSS — un icono que hereda currentColor desde CSS, útil en pseudo-elementos.
Copiar a Webflow — pega un Code Embed con el SVG en el Designer de Webflow.

Optimiza tus propios SVG con el Optimizador SVG o conviértelo en favicon con el Generador de Favicon.

Iconos populares

Colecciones de iconos SVG gratuitas para los símbolos de interfaz más comunes:

Preguntas frecuentes

¿Estos iconos son gratis para uso comercial?

Sí. Todos los conjuntos listados son de código abierto con licencias MIT, ISC o Apache 2.0, que permiten el uso comercial. Conserva el aviso de licencia si redistribuyes los propios archivos de iconos.

¿Necesito dar crédito al autor del icono?

No dentro de un sitio web o app según estas licencias. Si distribuyes los iconos como archivos, por ejemplo en una plantilla o un paquete de iconos, incluye la licencia del conjunto.

¿Qué hace currentColor?

Hace que el icono use el color del texto del elemento en el que se encuentra, así que un único SVG se adapta a botones, enlaces y modo oscuro mediante CSS.

¿Puedo cambiar el grosor del trazo?

Sí, en los iconos de contorno como Lucide, Tabler, Feather e Iconoir. Los iconos rellenos no tienen trazo que cambiar.

¿Mi búsqueda es privada?

Las palabras de búsqueda se envían a la API pública de Iconify, que aloja los conjuntos de iconos. Nada más sale de tu navegador y no necesitas una cuenta.

¿Puedo instalar Buscador de iconos SVG como aplicación web y utilizarla sin conexión?

Sí. Buscador de iconos SVG es una aplicación web instalable (PWA): se instala desde el navegador, no se descarga desde una tienda de aplicaciones. Haz clic en «Instalar aplicación» en la parte superior de esta página en Chrome o Edge (Windows, macOS, Linux, ChromeOS) o, en Android, utiliza «Compartir» → «Añadir a la pantalla de inicio» en iPhone y iPad, o «Archivo» → «Añadir al Dock» en Safari 17+ en un Mac. A continuación, se abrirá en su propia ventana con su propio icono y, como se ejecuta íntegramente en tu navegador, seguirá funcionando sin conexión. Firefox en el ordenador de sobremesa no permite instalar aplicaciones web. Cómo funciona la instalación.