Si buscas iconos para páginas web, aquí tienes las 18 páginas de iconos gratis que uso y recomiendo en 2026. En cada ficha verás la licencia antes del enlace, para que sepas si puedes usar el icono en un proyecto comercial.
Las he agrupado por necesidad: librerías para programar, bancos de iconos con millones de piezas y sets especializados. Al final te enseño a ponerlos en tu web con código que puedes copiar: SVG inline, icon font, Iconify y WordPress.
Respuesta rápida: para programar una web, Lucide o Tabler Icons (SVG con licencia libre y sin atribución). Para PNG a color o un estilo concreto, Flaticon o Icons8. Para logos de marcas, Simple Icons. ¿Buscas el icono de tu propia web, el que sale en la pestaña del navegador? Eso es el favicon, y aquí tienes cómo crear el favicon en HTML.
Repositorios modernos open source
Estas librerías te dan iconos en SVG con licencia libre y, casi todas, paquetes para React, Vue o Svelte. Si programas tu web, empieza por aquí.
1
Lucide
Más de 1.800 iconos de línea, minimalistas y coherentes entre sí. Nació como fork de Feather Icons y hoy tiene muchos más iconos que el original. Trae paquetes oficiales como lucide-react. Es mi favorita para interfaces limpias.
ISC · Comercial sin atribución · Ir a Lucide
2
Heroicons
Más de 300 iconos curados por el equipo de Tailwind CSS, en versión outline y solid. Vienen en tamaños de 24, 20 y 16 px. Copias el SVG desde su web y lo pegas en tu componente.
MIT · Comercial · Ir a Heroicons
3
Tabler Icons
Más de 6.000 iconos de trazo editable, en versión de línea y rellena. Es la que uso para dashboards, porque rara vez te falta un símbolo. Trae SVG, sprite, webfont, PNG y componentes para React, Vue, Svelte o Angular.
MIT · Comercial · Ir a Tabler
4
Font Awesome
La librería más veterana y la que vas a encontrar en casi cualquier plantilla o tutorial. Ya va por la versión 7, con miles de iconos gratis y el resto en el plan Pro. La usas como SVG, con JavaScript o como webfont.
Free: iconos CC BY 4.0 (la atribución ya va dentro de los archivos) · Pro de pago · Ir a Font Awesome
5
Bootstrap Icons
Más de 2.000 iconos de estilo neutro: es la librería oficial de Bootstrap, pero funciona sin el framework. La usas como SVG, sprite o webfont. Si tu web ya usa Bootstrap, es la opción más directa.
MIT · Comercial · Ir a Bootstrap Icons
6
Remix Icon
Más de 3.200 iconos en versión de línea y rellena sobre una rejilla de 24×24 px. Esa dualidad te sirve para marcar estados activos e inactivos sin cambiar de pack. Usa licencia propia, actualizada en enero de 2026: léela antes de meterla en un producto.
Remix Icon License · Comercial gratis · Ir a Remix Icon
7
Iconoir
Más de 1.600 iconos sin dependencias, con paquetes para React, Vue y Flutter y biblioteca para Figma. Su trazo fino da un aire cuidado a webs editoriales y portfolios.
MIT · Comercial · Ir a Iconoir
Catálogos completos
Cuando necesitas variedad, PNG a color o un estilo concreto (plano, 3D, dibujado a mano), tira de estos bancos de iconos vectoriales. Revisa siempre la licencia de cada icono: en los bancos cambia según el autor.
8
Iconify
Más de 300.000 iconos open source de decenas de sets (Material, Tabler, Phosphor…) en un solo buscador. Lo uso cuando quiero mezclar librerías sin instalar cada una, porque solo carga los iconos que usas. Cada set conserva su licencia, que verás indicada en su ficha.
Open source · Licencia según el set · Ir a Iconify
9
Flaticon
El banco de iconos más grande que conozco, con millones de piezas en estilos plano, lineal, relleno y 3D. La descarga en PNG es directa; el SVG y otros formatos piden cuenta según el icono. Organiza muchos iconos en packs coherentes del mismo autor.
Free con atribución · Premium sin atribución · Ir a Flaticon
10
Icons8
Destaca por la coherencia: el mismo icono existe en decenas de estilos, del plano al 3D o el claymorphism. Va muy bien si necesitas una serie completa con el mismo aspecto.
Free con atribución · Pro sin atribución · Ir a Icons8
11
Freepik (ahora Magnific)
Además de vectores, tiene colecciones enormes de iconos en SVG, PNG, EPS y AI. En abril de 2026 Freepik pasó a llamarse Magnific, pero la sección de iconos sigue activa. Úsala si quieres iconos e ilustraciones con el mismo estilo.
Free con atribución · Premium sin atribución · Ir a Freepik
12
SVG Repo
Más de 500.000 SVG con licencias abiertas, muchos MIT o CC0. Es mi comodín cuando necesito un icono raro y editable al momento. Comprueba la licencia en la ficha de cada uno antes de usarlo.
Gratis · Licencia por icono · Ir a SVG Repo
13
Iconfinder
Un mercado de iconos gratis y de pago con un filtro por licencia muy claro. Ese filtro te ahorra dudas cuando el proyecto es para un cliente. Descargas en SVG, PNG o EPS según el pack.
Gratis y de pago · Filtro por licencia · Ir a Iconfinder
14
The Noun Project
Millones de iconos con una variedad conceptual enorme, ideal para ideas abstractas como «confianza» o «crecimiento». Si ningún set tiene tu símbolo, aquí suele aparecer.
Free con atribución (CC BY) · Pro sin atribución · Ir a The Noun Project
15
Vecteezy
Decenas de miles de iconos y packs vectoriales, con descarga en SVG y PNG. Es útil para packs temáticos (ecommerce, educación, salud) que luego editas en Illustrator a cualquier tamaño.
Free con atribución · Pro sin atribución · Ir a Vecteezy
Tip: si el proyecto es para un cliente y necesitas un set grande con licencia comercial clara, mira los packs de iconos de Envato Elements. Con una sola suscripción descargas los que quieras y no tienes que atribuir archivo por archivo.
Iconos especializados
Tres sets que resuelven un caso concreto mejor que cualquier catálogo general.
16
Simple Icons
Más de 3.400 logos SVG de marcas: redes sociales, lenguajes de programación, herramientas. Ideales para badges de tecnologías o el pie de tu web. Los logos siguen siendo marcas registradas, así que úsalos solo para referirte a esa marca.
CC0 · Dominio público · Ir a Simple Icons
17
Material Symbols (Google)
El sistema de iconos de Google, en tres estilos: Outlined, Rounded y Sharp. Se sirve como fuente variable con cuatro ejes: relleno, peso, grado y tamaño óptico. Con una sola fuente controlas el aspecto de todos los iconos desde CSS.
Apache 2.0 · Comercial sin atribución · Ir a Material Symbols
18
Phosphor Icons
Más de 1.200 iconos, cada uno en seis pesos: thin, light, regular, bold, fill y duotone. Te deja ajustar el grosor al tono de tu diseño sin cambiar de librería.
MIT · Comercial · Ir a Phosphor
Tabla comparativa: formato y licencia
Si solo quieres saber qué formato da cada sitio y si tienes que citar al autor, aquí lo tienes de un vistazo.
| Sitio | Formatos | Licencia | ¿Atribución? |
|---|---|---|---|
| Lucide | SVG, paquetes JS | ISC | No |
| Heroicons | SVG | MIT | No |
| Tabler Icons | SVG, webfont, PNG | MIT | No |
| Font Awesome Free | SVG, JS, webfont | CC BY 4.0 / OFL / MIT | Ya incluida en los archivos |
| Bootstrap Icons | SVG, webfont | MIT | No |
| Remix Icon | SVG, webfont | Remix Icon License | No obligatoria |
| Iconoir | SVG, paquetes JS | MIT | No |
| Iconify | SVG, web component | Según el set | Según el set |
| Flaticon | PNG, SVG | Freemium | Sí, en la versión gratis |
| Icons8 | PNG, SVG | Freemium | Sí, en la versión gratis |
| Freepik (Magnific) | SVG, PNG, EPS, AI | Freemium | Sí, en la versión gratis |
| SVG Repo | SVG | Por icono | Según el icono |
| Iconfinder | SVG, PNG, EPS | Gratis y de pago | Según el icono |
| The Noun Project | SVG, PNG | CC BY / Pro | Sí, en la versión gratis |
| Vecteezy | SVG, PNG | Free / Pro | Sí, en la versión gratis |
| Simple Icons | SVG | CC0 | No |
| Material Symbols | SVG, webfont variable | Apache 2.0 | No |
| Phosphor Icons | SVG, webfont | MIT | No |
Cómo usar iconos en tu web
Elegir la librería es la mitad del trabajo con los iconos para páginas web. La otra mitad es meter el icono sin cargar de más la página. Estos son los cuatro métodos que uso, según el caso.
SVG inline: para unos pocos iconos
Copias el código SVG desde la web de la librería y lo pegas dentro del botón o del enlace. No añade peticiones al servidor y controlas color y tamaño con CSS. Con stroke="currentColor", el icono hereda el color del texto.
<a href="/contacto/" class="btn">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" aria-hidden="true">
<rect width="20" height="16" x="2" y="4" rx="2"/>
<path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/>
</svg>
Escríbeme
</a>Icon font por CDN: para muchos iconos de la misma familia
Enlazas la hoja de estilos de la librería y llamas a cada icono con una clase. Es cómodo si usas decenas de iconos. A cambio, el navegador descarga la fuente entera, así que no compensa para tres iconos sueltos. En la guía de tipografías de iconos gratis tienes 10 librerías que funcionan así.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css">
<i class="bi bi-house" aria-hidden="true"></i> InicioIconify: para mezclar librerías
Cargas un script y escribes el nombre del set y del icono. El componente pide solo los iconos que aparecen en tu página, así que puedes combinar Material, Tabler y Phosphor sin descargar ninguna librería completa.
<script src="https://code.iconify.design/iconify-icon/3.0.0/iconify-icon.min.js"></script>
<iconify-icon icon="mdi:home"></iconify-icon>Si trabajas con React o Vue, instala el paquete oficial de la librería (lucide-react, @heroicons/react) y cada icono será un componente más.
En WordPress
El editor de bloques no deja subir SVG por defecto, por seguridad. Tienes dos caminos sin tocar el tema. El primero es un bloque HTML personalizado con el SVG pegado dentro. El segundo, más cómodo, es el plugin gratuito The Icon Block: trae más de 290 iconos y te deja pegar cualquier SVG de esta lista.
Ten en cuenta que ese plugin solo lo pueden usar administradores y editores. Para iconos sociales en el menú tienes otro tutorial: iconos de redes sociales en WordPress. Y si lo que te falta no son los iconos sino la web entera, echa un vistazo a mis servicios de diseño web.
Accesibilidad y tamaño
Si el icono acompaña a un texto, es decorativo: ponle aria-hidden="true". Si va solo, como en un botón de cerrar, el botón necesita un aria-label que diga qué hace. Y que el área clicable no baje de 24×24 px, el mínimo de WCAG 2.2; en móvil, mejor 44×44 px. Tienes más detalle en la guía de diseño web accesible.
¿SVG o PNG? Qué formato descargar
Para una web, SVG casi siempre: pesa poco, escala sin perder nitidez y cambias el color con CSS. El PNG tiene sentido en dos casos. Uno, iconos a color con degradados o en 3D. Otro, sitios donde no puedes pegar código, como algunos constructores web o una newsletter.
Si necesitas PNG, Flaticon, Icons8, Vecteezy y Tabler te lo dan ya exportado. Descárgalo al doble del tamaño al que lo vas a mostrar, para que se vea nítido en pantallas de alta densidad.
¿Buscas el icono de «página web» para un CV, una tarjeta o una firma de email? Tienes el globo de Lucide en SVG y cientos de variantes en PNG en la búsqueda «website» de Flaticon.
¿Te faltan los botones donde poner estos iconos?
En mi pack CSS gratis tienes 6 estilos de botón, incluido uno con flecha animada. Además, 36 estilos más con un catálogo para copiar cada uno en un clic. Apúntate y te lo envío al correo.
Preguntas frecuentes
¿Cuál es la mejor página de iconos gratis?
No hay una sola. Para programar, Lucide o Tabler; para variedad y PNG, Flaticon; para logos de marca, Simple Icons. Si solo vas a usar una, empieza por Tabler: más de 6.000 iconos con licencia MIT.
¿Puedo usar iconos gratis en un proyecto comercial?
Sí, si respetas la licencia. MIT, ISC, Apache 2.0 y CC0 te dejan usarlos sin atribución visible. En Flaticon, Icons8, Freepik, Vecteezy o The Noun Project, la versión gratis exige citar al autor.
¿Cómo pongo un icono en HTML?
La forma más simple es pegar su código SVG dentro del HTML. Si usas muchos iconos, enlaza la icon font por CDN y llámalos con una clase. Tienes los dos ejemplos de código más arriba.
¿Qué tamaño deben tener los iconos para páginas web?
Junto a un texto, el mismo tamaño que la letra o un poco más: entre 16 y 24 px. En botones y menús, 24 px es el estándar, y casi todas estas librerías están dibujadas sobre esa rejilla. Para iconos destacados de una sección de servicios, entre 32 y 48 px.
¿Los iconos ralentizan la web?
Una icon font completa sí puede pesar. Con SVG inline o con Iconify cargas solo lo que usas y el impacto es mínimo.
¿Qué es el icono que aparece en la pestaña del navegador?
Es el favicon. No se descarga de estas páginas: se crea a partir de tu logo o tu inicial. Tienes los pasos en la guía del favicon en HTML.
Conclusión
Para programar tu web: Lucide, Tabler o Heroicons. Para volumen y PNG: Flaticon, Icons8 o Iconify. Para logos de marca: Simple Icons. Para ajustar grosor y estilo: Phosphor o Material Symbols.
Con estas 18 páginas tienes iconos para páginas web de cualquier estilo, y con licencia clara. Espero que te sirvan para tu próximo proyecto. ¡Disfrútalos!
