Buscas iconos para tu web y no quieres pelearte con licencias raras ni con packs que caducan cada temporada. Te he seleccionado las 15 fuentes que uso y recomiendo en 2026, todas verificadas y con su web oficial activa.
He separado las librerÃas para desarrolladores de los bancos vectoriales para diseño, porque resuelven necesidades distintas. En cada ficha verás el formato y la licencia antes del enlace, asà decides sin sorpresas.
LibrerÃas de iconos para desarrolladores (open source)
Estas librerÃas entregan iconos en SVG y, muchas, como webfont. Son open source, coherentes entre sà y pensadas para maquetar interfaces sin fricción. Si programas tu web, empieza por aquÃ.
1
Font Awesome
La librerÃa más veterana y extendida de la web. Su versión gratuita cubre miles de iconos en categorÃas amplias, con integración directa por SVG o por webfont vÃa CDN. Es la opción segura si quieres compatibilidad con casi cualquier tutorial o plantilla.
SVG y webfont · Free tier CC BY 4.0 (freemium) · Ir al sitio
2
Lucide
Un fork comunitario de Feather que mantiene el trazo limpio y suma iconos sin parar. Trae paquetes listos para React, Vue, Svelte y más, asà que se integra en segundos en un proyecto moderno. Es mi favorita para interfaces minimalistas.
SVG y paquetes JS · Licencia ISC (gratis) · Ir al sitio
3
Feather Icons
Un set minimalista de trazo fino y uniforme, con algo más de 280 iconos esenciales. Su ventaja es la coherencia visual: todos comparten el mismo estilo de lÃnea. Va perfecto para dashboards y webs sobrias.
SVG · Licencia MIT (gratis) · Ir al sitio
4
Heroicons
Creada por el equipo de Tailwind CSS, con variantes outline, solid y mini. Si ya usas Tailwind, encaja de forma natural en tu flujo de trabajo. Copias el SVG desde su web y lo pegas en tu componente.
SVG · Licencia MIT (gratis) · Ir al sitio
5
Tabler Icons
Más de 6.000 iconos de trazo consistente y editable, con versión outline y rellena. Su volumen es enorme, asà que rara vez te falta el sÃmbolo que necesitas. Ofrece SVG, webfont y paquetes para frameworks.
SVG y webfont · Licencia MIT (gratis) · Ir al sitio
6
Phosphor Icons
Una familia muy flexible con seis pesos, desde fino hasta relleno. Ese abanico te deja ajustar el grosor al tono de tu diseño sin cambiar de librerÃa. Trae SVG, webfont y componentes para las plataformas habituales.
SVG y webfont · Licencia MIT (gratis) · Ir al sitio
7
Material Symbols (Google)
El sistema oficial de Google, servido como fuente variable con ejes de peso, relleno y grado. Con una sola fuente controlas el estilo de miles de iconos por CSS. Es ideal si tu web sigue el lenguaje Material.
SVG y webfont variable · Apache 2.0 (gratis) · Ir al sitio
8
Bootstrap Icons
La librerÃa oficial de Bootstrap, aunque funciona perfectamente sin el framework. Cubre lo esencial de una interfaz web con un estilo neutro y reconocible. La usas como SVG, sprite o webfont según prefieras.
SVG y webfont · Licencia MIT (gratis) · Ir al sitio
9
Remix Icon
Un sistema de estilo neutro con versiones en lÃnea y rellena para cada icono. Esa dualidad te ayuda a marcar estados activos e inactivos sin buscar otro pack. Descargas SVG, webfont o el sÃmbolo suelto.
SVG y webfont · Apache 2.0 (gratis) · Ir al sitio
10
Iconoir
Más de 1.600 iconos hechos a mano, sin dependencias externas y con soporte para React, Vue, Flutter y Figma. Su trazo elegante encaja en proyectos que buscan un aire cuidado. Es un proyecto abierto que crece a buen ritmo.
SVG y paquetes JS · Licencia MIT (gratis) · Ir al sitio
Bancos de iconos vectoriales para diseño
Cuando diseñas más que programas, un banco te da variedad y formatos editables. Aquà encuentras packs coherentes, iconos ilustrados y estilos que no verás en las librerÃas dev. Revisa siempre la licencia de cada archivo, porque cambia según el autor.
11
Flaticon
El banco de iconos más grande que conozco, con millones de piezas organizadas en packs coherentes. Filtras por estilo, color y formato, y descargas en SVG, PNG o webfont. En la versión gratis basta con atribuir al autor.
SVG, PNG y webfont · Freemium (gratis con atribución) · Ir al sitio
12
Freepik
Además de sus vectores conocidos, ofrece colecciones enormes de iconos en formatos editables. Es útil cuando quieres combinar iconos con ilustraciones del mismo estilo. Trae archivos SVG, PNG, EPS y AI para retocar en tu editor.
SVG, PNG, EPS y AI · Freemium (gratis con atribución) · Ir al sitio
13
SVG Repo
Un buscador con cientos de miles de SVG, muchos de dominio público o con licencias abiertas. Filtras por colección y revisas la licencia de cada icono en su ficha. Es mi comodÃn cuando necesito algo raro y editable al instante.
SVG · Gratis (licencia por icono, muchos MIT o CC0) · Ir al sitio
14
Iconfinder
Un mercado de iconos con calidad alta y un filtro por tipo de licencia muy claro. Ese filtro te ahorra dudas legales cuando el proyecto es comercial. Descargas en SVG, PNG y EPS según el pack.
SVG, PNG y EPS · Freemium (hay set gratuito) · Ir al sitio
15
The Noun Project
Millones de iconos con una variedad conceptual enorme, perfecta para ideas abstractas. Cuando ningún set tiene tu sÃmbolo, aquà suele aparecer. En la versión gratis atribuyes al autor bajo licencia Creative Commons.
SVG y PNG · Freemium (gratis con atribución CC) · Ir al sitio
Tip: si necesitas packs de iconos premium coherentes para un proyecto grande, en Envato Elements y Freepik los descargas por suscripción y olvidas la atribución de cada archivo. Te ahorra horas de gestión de licencias en este enlace.
Cómo usar iconos en tu web
Elegir la fuente es la mitad del trabajo. La otra mitad es integrar el icono sin cargar de más tu página. Te enseño los tres métodos que uso según el caso.
SVG inline
Pegas el código del SVG directamente en tu HTML, dentro del botón o enlace. Es el método más ligero: no añade peticiones extra y controlas color y tamaño por CSS. Lo uso cuando solo necesito unos pocos iconos concretos.
Cambia el color con la propiedad fill o con currentColor para que herede el del texto. Ajusta el tamaño con width y height, y añade un atributo aria-hidden si el icono es decorativo.
Webfont
Cargas una fuente de iconos por CSS y luego llamas cada sÃmbolo con una clase o un carácter. Es cómodo cuando usas muchos iconos de la misma librerÃa, como Font Awesome o Material Symbols. A cambio, sumas una descarga inicial que conviene optimizar.
Te aconsejo cargar solo el subconjunto que uses y precargar la fuente para evitar parpadeos. Asà ganas comodidad sin castigar la velocidad, algo que también repercute en tu posicionamiento.
En Figma
Casi todas estas librerÃas tienen plugin o archivo comunitario para Figma. Instalas el plugin, buscas el icono y lo arrastras a tu lienzo como vector editable. Diseñas la interfaz primero y luego exportas cada icono en SVG para tu web.
Tabla comparativa
| Recurso | Tipo | Formato | Licencia / Tier |
|---|---|---|---|
| Font Awesome | LibrerÃa dev | SVG, webfont | Freemium (CC BY 4.0) |
| Lucide | LibrerÃa dev | SVG, paquetes JS | ISC (gratis) |
| Feather Icons | LibrerÃa dev | SVG | MIT (gratis) |
| Heroicons | LibrerÃa dev | SVG | MIT (gratis) |
| Tabler Icons | LibrerÃa dev | SVG, webfont | MIT (gratis) |
| Phosphor Icons | LibrerÃa dev | SVG, webfont | MIT (gratis) |
| Material Symbols | LibrerÃa dev | SVG, webfont variable | Apache 2.0 (gratis) |
| Bootstrap Icons | LibrerÃa dev | SVG, webfont | MIT (gratis) |
| Remix Icon | LibrerÃa dev | SVG, webfont | Apache 2.0 (gratis) |
| Iconoir | LibrerÃa dev | SVG, paquetes JS | MIT (gratis) |
| Flaticon | Banco vectorial | SVG, PNG, webfont | Freemium (atribución) |
| Freepik | Banco vectorial | SVG, PNG, EPS, AI | Freemium (atribución) |
| SVG Repo | Banco vectorial | SVG | Gratis (por icono) |
| Iconfinder | Banco vectorial | SVG, PNG, EPS | Freemium |
| The Noun Project | Banco vectorial | SVG, PNG | Freemium (atribución CC) |
Preguntas frecuentes
¿Qué formato de iconos web me conviene: SVG o webfont?
El SVG gana en nitidez, control y peso cuando usas pocos iconos. La webfont resulta cómoda si empleas muchos de la misma librerÃa. Para la mayorÃa de webs actuales, te aconsejo SVG inline.
¿Puedo usar iconos gratis en proyectos comerciales?
SÃ, siempre que respetes la licencia. Las librerÃas MIT, Apache o ISC te dejan usarlas en proyectos comerciales sin atribución. En los bancos freemium, revisa si el icono exige atribuir al autor.
¿Los iconos afectan a la velocidad de mi web?
SÃ, sobre todo las webfonts pesadas cargadas enteras. Carga solo lo que uses, usa SVG inline para iconos sueltos y precarga la fuente si la necesitas. Asà mantienes buena velocidad y experiencia.
¿Cómo cambio el color de un icono SVG?
Con CSS, usando la propiedad fill sobre el SVG inline. Si pones fill con el valor currentColor, el icono hereda el color del texto que lo rodea. Es la forma más limpia de mantener coherencia.
¿Necesito instalar algo para usar estas librerÃas?
No siempre. Puedes copiar el SVG desde la web y pegarlo sin instalar nada. Si trabajas con un framework, instalar el paquete oficial te da autocompletado y actualizaciones automáticas.
Conclusión
Si programas tu web, quédate con una librerÃa open source y no te compliques. Lucide, Tabler o Heroicons cubren casi cualquier interfaz con licencias limpias y trazo coherente.
Si diseñas piezas más ricas o necesitas un estilo concreto, tira de los bancos. Flaticon y The Noun Project te dan variedad, y SVG Repo salva los apuros con archivos editables.
Combina ambos mundos y tendrás iconos para cualquier página. Cuando termines, dale coherencia visual al resto con buenas tipografÃas gratis y texturas gratis.
