Cómo elegir una colección de iconos para tu proyecto
Actualizado · 6 min de lectura
Una colección de iconos coherente hace que una interfaz parezca diseñada; una mezcla de tres colecciones, que parezca ensamblada. Con cientos de colecciones gratuitas disponibles, el reto no es encontrar iconos, sino dar con la colección que cubra tus necesidades, encaje con tu estilo y tenga una licencia que puedas asumir. Aquí tienes una forma rápida de decidir.
1. Comprueba primero la cobertura
Haz una lista de los 15 a 20 iconos que más necesita tu producto (inicio, buscar, ajustes, usuario, subir, papelera, editar, cerrar, chevrones, alertas…) y añade algunos específicos de tu sector, como factura, estetoscopio o rama de git. Después busca cada uno en la colección candidata. Si le faltan dos de tus iconos clave, tarde o temprano tendrás que mezclarla con otra, y los iconos que no combinan son la incoherencia visual más frecuente en las interfaces.
El tamaño ayuda, pero no lo es todo: Material Design Icons tiene 7447 iconos y Fluent UI System Icons 19 850, mientras que Heroicons tiene 1288 cuidadosamente seleccionados. Para un sitio de marketing puede bastar una colección pequeña; para un panel complejo, valorarás la profundidad.
2. Elige un estilo: contorno, relleno o duotono
- Los iconos de contorno (trazo) se ven ligeros y modernos, y encajan en la mayoría de las interfaces. Ejemplos: Lucide, Tabler Icons.
- Los iconos rellenos (sólidos) se leen mejor en tamaños pequeños y en estados activos. Ejemplos: Material Design Icons, Bootstrap Icons (que también tiene versiones de contorno).
- Las colecciones con varios grosores permiten usar contorno para el estado inactivo y relleno para el seleccionado sin cambiar de familia. Phosphor tiene seis grosores, de fino a duotono. Material Symbols ofrece estilos de contorno, redondeado y recto. Heroicons y Fluent combinan contorno y relleno.
- Los iconos multicolor dan personalidad a ilustraciones, pantallas de bienvenida y estados vacíos, pero cuesta más adaptarlos a un tema. Explora los iconos de interfaz multicolor.
Adapta el estilo de los iconos a tu tipografía. Los trazos finos combinan con fuentes ligeras y geométricas, y los iconos más gruesos, con textos de interfaz en negrita.
3. Ajusta la cuadrícula y el grosor del trazo
Los iconos se dibujan sobre una cuadrícula, casi siempre de 24×24 píxeles. Se ven más nítidos al tamaño de su cuadrícula o a un múltiplo, así que elige una colección diseñada para el tamaño que vas a usar:
- Las colecciones UI de 24px encajan en botones, menús y navegación, el caso más habitual.
- Las colecciones de 16px y 32px sirven, respectivamente, para herramientas densas y para zonas táctiles grandes.
La página de cada colección indica el tamaño de su cuadrícula. Si combinas iconos con texto, revisa también el grosor del trazo: un trazo de 1,5px junto a un texto de peso normal queda equilibrado, y uno de 2px encaja con textos medianos o en negrita.
4. Revisa la licencia
La mayoría de las colecciones permiten el uso comercial, pero las condiciones varían. MIT, ISC y Apache 2.0 solo piden incluir el texto de la licencia, mientras que CC BY exige un reconocimiento visible. Unas pocas colecciones prohíben por completo el uso comercial. Cada página de categoría incluye una tabla de licencias, y la guía de licencias de iconos explica cada una.
5. Prefiere colecciones con mantenimiento
Una colección con mantenimiento activo recibe iconos nuevos a medida que surgen necesidades (nuevas marcas, nuevos patrones de interfaz) y correcciones de los existentes. Las colecciones de la categoría archivo sin mantenimiento siguen funcionando, pero estarás solo cuando necesites un icono nuevo. Revisa también el ecosistema: las colecciones populares tienen paquetes oficiales para React, Vue y otros frameworks, y archivos de diseño para Figma.
Recomendaciones por caso de uso
| Si estás creando… | Considera | Por qué |
|---|---|---|
| Una app web moderna o un SaaS | Lucide, Tabler | Estilo de contorno limpio, colecciones grandes y en crecimiento, licencias permisivas (ISC, MIT) |
| Una app con estados activo/inactivo | Phosphor, Heroicons | Versiones de contorno y relleno a juego |
| Una app Android o con Material UI | Material Symbols, Material Design Icons | Encajan con Material Design; Apache 2.0 |
| Una app empresarial o de estilo Microsoft | Fluent UI System Icons, Carbon | Cobertura muy amplia, pensadas para interfaces de negocio densas |
| Un sitio con Bootstrap | Bootstrap Icons | Diseñados junto a Bootstrap; MIT |
| Logotipos de marcas y redes sociales | Simple Icons, SVG Logos | Logotipos monocromos y a todo color; CC0 |
| Secciones de stack tecnológico | Devicon, VS Code Icons | Lenguajes, frameworks y tipos de archivo |
| Emojis | Noto Emoji, Twitter Emoji | Cobertura completa de emojis; Apache 2.0 / CC BY 4.0 |
| Selectores de país | Circle Flags, Flag Icons | Banderas redondas o rectangulares; MIT |
¿Sigues sin decidirte? Abre dos candidatas una al lado de la otra, busca en ambas tus diez iconos más importantes y colócalos en una pantalla real de tu producto. La mejor opción suele ser evidente en pocos minutos. Cuando lo tengas claro, la guía de uso de iconos SVG explica cómo añadirlos a HTML, React o Vue.