Cómo usar: Buscador de iconos SVG
- Escribe lo que necesites —casa, flecha a la derecha, carrito de la compra— y elige un conjunto, o busca entre todos ellos.
- Haz clic en un icono para abrirlo. Ajusta el tamaño, mantén el color actual para que coincida con el color del texto o elige un color personalizado; ajusta el trazo en los iconos con contorno.
- Cópialo como SVG, JSX para React, un URI de datos o una máscara CSS, o pégalo en Webflow; también puedes descargar el archivo en formato SVG o PNG.
- Haz clic en ☆ Guardar para guardar los iconos que usas a menudo; la próxima vez aparecerán en ★ Guardados.
Iconos gratis que de verdad puedes usar
Todos los iconos que hay aquí proceden de un conjunto de código abierto con una licencia permisiva, así que puedes usarlos en páginas web y aplicaciones tanto personales como comerciales. La licencia y el autor aparecen junto a cada icono:
| Conjunto | Licencia | Estilo |
|---|---|---|
| Lucide | ISC | Contorno, cuadrícula de 24 px |
| Iconos de Tabler | MIT | Contorno y relleno |
| Heroicons | MIT | Contorno, relleno, mini |
| Fósforo | MIT | Seis grosores |
| Iconos de Bootstrap | MIT | Rellenos y contornos |
| Feather, Iconoir | MIT | Contorno |
| Iconos del sistema Fluent UI | MIT | Estilo Microsoft |
| Símbolos Material, iconos de Material Design, Carbon | Apache 2.0 | Estilos de Google, Pictogrammers e IBM |
Las licencias MIT, ISC y Apache 2.0 te piden que mantengas el aviso de derechos de autor y de licencia cuando redistribuyas los propios archivos de iconos (por ejemplo, en un paquete de iconos). Usar iconos dentro de una web o una app es el caso habitual para el que se han redactado estas licencias.
Por qué es importante «currentColor»
Un icono cuyo fill o stroke es currentColor adopta el CSS color 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á desactivado, sin tener que editar el archivo. Mantén currentColor para los iconos en el texto y los botones de la interfaz de usuario; elige un color fijo para las ilustraciones y los favicons.
¿Qué formato copiar
- SVG: pégalo directamente en HTML, en un elemento «Embed» de Webflow o en un
.svgarchivo. - JSX: atributos compatibles con React (
strokeWidth,className) para insertarlos en un componente. - URI de datos: para
<img src>o un CSSbackground-imagesin necesidad de un archivo aparte. - Máscara CSS: un icono que hereda
currentColordel CSS, útil en pseudoelementos. - Copiar a Webflow: pega un código de incrustación con el SVG en el diseñador de Webflow.
Optimiza tus propios SVG con el optimizador de SVG o convierte uno en un favicon con el generador de favicons.
También se busca como: iconos svg, iconos svg gratis, buscador de iconos, búsqueda de iconos svg, iconos de código abierto, iconos de lucide, heroicons, iconos de tabler.
Herramientas que combinan con: Buscador de iconos SVG
- Convertidor de SVG a PNG — Convierte gráficos vectoriales SVG en imágenes PNG nítidas con el tamaño exacto que necesites: para tiendas de aplicaciones, redes sociales, correo electrónico o documentos.
- Imagen a Base64 — Convierte un archivo PNG, JPEG, SVG, WebP o GIF en un URI de datos Base64 con código CSS y HTML listo para copiar, o pega una cadena Base64 para ver una vista previa y descargar la imagen.
- CSS Mask Generator — Make images and sections fade out instead of ending hard: fade one edge, top and bottom, all four edges, a radial vignette or a spotlight, cut the element into stripes — or mask it with a shape (star, heart, hexagon, arrow…) with soft, feathered edges that clip-path can’t do.
- Generador de códigos de barras — Crea códigos de barras escaneables para productos, inventario, envíos y bibliotecas: el sistema calcula automáticamente los dígitos de control y puedes descargar un archivo SVG de alta calidad para imprimir o un PNG para documentos.