Las mejores librerías de iconos gratis: Lucide vs Heroicons vs Phosphor vs Tabler | We.Inc
13 librerías de iconos SVG gratis comparadas: los mismos iconos de cada una, licencias reales revisadas en cada paquete, número de iconos, estilos, paquetes para React y Vue y cómo usarlos de forma accesible.
Librerías de iconos SVG gratis comparadas
Lucide, Heroicons, Phosphor y Tabler son los conjuntos de iconos gratis más prácticos para sitios web: todos tienen licencias permisivas (ISC o MIT) y todos ofrecen paquetes de React que solo incluyen los iconos que importas. Tabler tiene más iconos, Phosphor más grosores y Heroicons el conjunto más pequeño y cuidado.
Elección rápida
Si quieres
Prueba
Un conjunto de contorno grande y coherente
Lucide o Tabler
Varios grosores del mismo icono
Phosphor
Un conjunto pequeño a juego con Tailwind UI
Heroicons
Logotipos de marcas
Simple Icons (revisa las normas de marca registrada)
El estilo de Google, con grosor variable
Material Symbols
Los mismos ocho iconos cotidianos dibujados por seis librerías, para que compares su estilo directamente, y después una tabla completa de trece librerías con las licencias leídas del propio archivo LICENSE de cada paquete, el número de iconos según los archivos publicados y los paquetes que debes instalar.
Compara la cuadrícula. Cada fila es una librería dibujando las mismas ocho ideas: inicio, buscar, usuario, ajustes, corazón, eliminar, correo y notificaciones.
Revisa la columna de licencia antes de elegir. La mayoría son MIT o ISC, pero Remix Icon tiene ahora su propia licencia y Font Awesome Free exige atribución.
Instala el paquete para tu framework desde la columna React o Vue, o copia archivos SVG individuales en tu proyecto.
Sigue las notas de accesibilidad de abajo para que los iconos decorativos queden en silencio para los lectores de pantalla y los que tienen significado reciban una etiqueta.
Elige una librería y mantente fiel a ella. Mezclar conjuntos con distintos grosores de trazo y estilos de esquina hace que una interfaz parezca inacabada.
Importa los iconos uno a uno (import { Search } from 'lucide-react') en lugar de importar la librería entera, para que tu bundle solo lleve lo que usas.
Define el color del icono con currentColor para que siga el color del texto de botones y enlaces, incluidos el hover y el modo oscuro.
Da a los botones que solo tienen un icono un nombre accesible con aria-label en el botón, y oculta el propio svg con aria-hidden="true".
Vuelve a revisar la licencia al actualizar. Remix Icon pasó de Apache 2.0 a su propia licencia en la versión 4.9.0, publicada en enero de 2026.
Preguntas frecuentes
¿Puedo usar estos iconos en proyectos comerciales?
Sí, en las trece librerías de la lista, dentro de sus licencias. MIT, ISC y Apache 2.0 permiten el uso comercial si conservas el aviso de licencia en las copias. Font Awesome Free exige atribución, que sus archivos ya contienen. Remix Icon permite usarlos en productos, pero prohíbe venderlos como pack o usarlos como logotipo.
¿Lucide es lo mismo que Feather?
Lucide nació como un fork comunitario de Feather cuando las actualizaciones de Feather se ralentizaron. Mantiene el estilo de Feather, tiene muchísimos más iconos y se mantiene activamente. Los iconos que vienen de Feather siguen bajo su licencia MIT; el resto de Lucide es ISC.
¿Heroicons o Lucide?
Heroicons es un conjunto más pequeño de los creadores de Tailwind CSS, con versiones sólidas y pequeñas a juego, lo que encaja con interfaces hechas con Tailwind. Lucide tiene varias veces más iconos, así que es menos probable que te quedes sin el que buscas. Ambos tienen licencias permisivas y paquetes de React.
¿Debo usar una fuente de iconos o SVG?
SVG, en la mayoría de los casos. El SVG en línea o un paquete de componentes se ve nítido, permite dar estilo a cada trazado, solo incluye los iconos que usas y funciona con lectores de pantalla. Las fuentes de iconos pueden cargar una fuente entera por unos pocos iconos y fallar sin avisar si la fuente está bloqueada.
¿Cómo hago accesibles los iconos?
Decide si el icono transmite significado. Los iconos decorativos junto a un texto llevan aria-hidden="true". Un icono que es el único contenido de un botón o enlace necesita una alternativa textual, normalmente aria-label en el botón o texto visualmente oculto dentro de él.
Tres formas de poner un icono en una página
Los paquetes de componentes como lucide-react o @heroicons/react son lo más sencillo en un proyecto React o Vue. Cada icono es un componente, importas solo los que usas y las props definen tamaño, color y grosor del trazo.
El SVG en línea consiste en pegar el marcado svg directamente en tu HTML. No necesita paquete ni petición, y el CSS puede dar estilo a cada parte, pero repite el marcado allí donde aparece el icono.
Un sprite SVG reúne todos los iconos en un archivo como elementos symbol, y cada uso hace referencia a uno con <use href="/icons.svg#search">. El navegador guarda el archivo en caché una sola vez, lo que conviene a sitios con muchos iconos en páginas HTML simples.
Cómo revisamos las licencias
Cada licencia de la tabla procede del archivo LICENSE dentro de la versión del paquete indicada, no de los metadatos del paquete. Esto importa: la ficha de npm de Remix Icon todavía dice Apache 2.0, mientras que el archivo LICENSE de la versión 4.9.1 es la nueva Remix Icon License v1.0. El número de iconos es la cantidad de archivos SVG que el paquete incluye en la carpeta indicada.
Las licencias pueden cambiar entre versiones. Antes de publicar, abre el archivo LICENSE de la versión que instales.
Librerías de iconos gratis comparadas (versiones y cifras publicadas en npm, revisadas el 13 de octubre de 2026)
Librería
Licencia
Iconos
Estilos
React
Vue
Lucide 1.55.0
ISC
Contorno (grosor de trazo ajustable)
Heroicons 2.2.0
MIT
324 (cada uno en 4 estilos)
Contorno 24, sólido 24, mini 20, micro 16
@heroicons/react
@heroicons/vue
Phosphor 2.1.1 (core)
MIT
1,512 (cada uno en 6 grosores)
Thin, light, regular, bold, fill, duotone
@phosphor-icons/react
@phosphor-icons/vue
Tabler Icons 3.49.0
MIT
5,184 de contorno, 1,054 rellenos
Contorno (trazo ajustable), relleno
@tabler/icons-react
@tabler/icons-vue
Bootstrap Icons 1.13.2
MIT
2,078 archivos (muchos tienen un gemelo -fill)
Variantes de contorno y relleno
react-bootstrap-icons (comunidad)
Ninguno oficial; usa SVG o la fuente de iconos
Material Symbols 0.48.0 (@material-symbols/svg-400)
Apache 2.0
3,929 símbolos
Outlined, rounded, sharp; ejes de relleno, grosor y grado
Usa la fuente de Google Fonts o los paquetes SVG
Usa la fuente de Google Fonts o los paquetes SVG
Remix Icon 4.9.1
Remix Icon License v1.0
1,539 (línea y relleno)
Línea, relleno
@remixicon/react
@remixicon/vue
Font Awesome Free 7.3.1
CC BY 4.0 (iconos), SIL OFL 1.1 (fuentes), MIT (código)
2,001 solid, 273 regular, 609 brands
Solid, regular (parcial), brands
@fortawesome/react-fontawesome
@fortawesome/vue-fontawesome
Ionicons 8.1.0
MIT
1,357 archivos
Relleno, contorno, sharp
Web component (ion-icon)
Web component (ion-icon)
Iconoir 7.12.1
MIT
1,383 regular, 288 solid
Regular (trazo), solid
@iconoir/vue
Radix Icons 1.3.2
MIT
Un solo estilo, dibujado en una cuadrícula de 15 × 15
@radix-ui/react-icons
Ninguno oficial
Feather 4.29.2
MIT
Contorno
react-feather (comunidad)
vue-feather-icons (comunidad)
Simple Icons 16.35.0
CC0 1.0 (los archivos SVG)
3,466 logotipos de marcas
Marcas de un solo color
@icons-pack/react-simple-icons (comunidad)
Usa SVG
ISC
Los iconos tomados de Feather también están bajo MIT. Conserva el aviso de copyright en las copias.
MIT
Conserva el aviso de copyright en las copias.
MIT
Conserva el aviso de copyright en las copias.
MIT
Conserva el aviso de copyright en las copias.
MIT
Conserva el aviso de copyright en las copias.
Apache 2.0
Incluye el texto de la licencia en las copias e indica los cambios que hagas.
Remix Icon License v1.0
Gratis en productos comerciales, pero no puedes vender los iconos como pack, crear con ellos un conjunto de iconos competidor ni usar uno como logotipo. Las versiones hasta la 4.8.0 eran Apache 2.0; la nueva licencia empieza con la 4.9.0.
CC BY 4.0 (iconos), SIL OFL 1.1 (fuentes), MIT (código)
La atribución es obligatoria; los comentarios que ya incluyen los archivos descargados cuentan como atribución, así que no los elimines. Los iconos Pro son de pago.
MIT
Conserva el aviso de copyright en las copias.
MIT
Conserva el aviso de copyright en las copias.
MIT
Conserva el aviso de copyright en las copias.
MIT
Conserva el aviso de copyright en las copias. Se actualiza muy poco; Lucide nació a partir de él.
CC0 1.0 (los archivos SVG)
Los archivos son de dominio público, pero los logotipos son marcas registradas de sus empresas. Sigue las directrices de cada marca.
Inicio
Buscar
Usuario
Ajustes
Favorito
Eliminar
Correo
Notificaciones
Los mismos ocho iconos, seis librerías
Fondo oscuro
Ocho iconos comunes tal como los dibuja cada librería
Librería
Icono de {concept} de {library}
Los iconos son archivos SVG sin modificar de cada paquete en la versión de la tabla de abajo (solo se cambiaron los nombres de archivo), mostrados bajo sus propias licencias.
Textos de las licencias:
Librerías comparadas
Notas sobre licencias
Usar iconos de forma accesible
En los tres casos, el svg queda oculto para los lectores de pantalla y el botón lleva el nombre. Si un icono aparece junto a un texto visible, oculta el icono y deja que hable el texto.