Diseño de sistemas de iconos: iconografía que escala más allá de 50 símbolos
Guía de diseñador en activo sobre sistemas de iconos. Cuadrícula, peso, corrección óptica, nomenclatura, gobernanza y las reglas que evitan que una biblioteca de iconos se pudra cuando toca el tercer diseñador.
La mayoría de las bibliotecas de iconos de producto se pudren. El primer diseñador entrega un set limpio de cuarenta símbolos. El segundo necesita tres más y los calca a mano alzada con el grosor de trazo equivocado. El tercero descarga un pack gratuito para sacar una funcionalidad un viernes. Al segundo año del producto, la columna de iconos de cada pantalla parece cuatro marcas distintas cosidas en una sola navegación.
Este paper es la versión de trabajo. Cuadrícula, peso, corrección óptica, nomenclatura, gobernanza y el pequeño conjunto de reglas que mantiene un sistema de iconos coherente más allá de 50 símbolos. Sin vitrinas de iconos de la semana, sin plantillas que se hacen pasar por sistemas, solo las decisiones que hacen que una biblioteca real sobreviva a un equipo real.
Qué es realmente un sistema de iconos
Un sistema de iconos es un conjunto coherente de pictogramas gobernado por reglas compartidas. Tamaño de cuadrícula, grosor de trazo, radio de esquina, alineación óptica, nomenclatura y el proceso para añadir iconos nuevos. El objetivo no es una carpeta de SVGs. El objetivo es un sistema que cualquier diseñador o ingeniero pueda ampliar sin romper el ritmo visual del producto.
Un montón de iconos no es un sistema. Un archivo de Figma con 200 símbolos y sin reglas no es un sistema. Un sistema tiene restricciones, decisiones con nombre y un proceso escrito para cuando alguien necesita un icono que todavía no existe.
La guía de sistemas de diseño cubre el sistema más amplio en el que viven los iconos. Este paper profundiza específicamente en la capa de iconografía.
Por qué los iconos importan más de lo que parece
Los iconos son la pieza más densa de la UI en cualquier producto. Un solo icono de 24x24 píxeles carga más significado por pulgada cuadrada que cualquier otro elemento de la pantalla. Si aciertas con el sistema, el producto se lee como una sola cosa. Si fallas, cada pantalla se siente rara de una forma que los usuarios no saben explicar.
Los iconos también escalan de forma extraña. Una deriva tipográfica entre dos pantallas se detecta fácil. Una deriva de iconos es más difícil de nombrar pero se nota más. El cerebro procesa pictogramas más rápido que texto, lo que significa que procesa la inconsistencia de iconos más rápido que la inconsistencia de copy.
El producto que entrega iconos como un sistema coherente parece pulido aunque el resto del trabajo sea tosco. El producto que entrega iconos como un cada-uno-lo-que-quiera parece barato aunque el resto del trabajo sea afilado.
La cuadrícula es el sistema
Toda biblioteca de iconos coherente empieza con una cuadrícula. La cuadrícula es el andamio invisible al que se ajusta cada icono. Sin ella, los iconos derivan en tamaño, peso y equilibrio óptico, y no hay forma de imponer coherencia en la revisión de código.
La cuadrícula base
Elige un tamaño de cuadrícula base y vive dentro de él. Los dos valores por defecto que funcionan en 2026:
- Cuadrícula de 24 píxeles para iconos de UI de producto. Tamaño estándar para la mayoría de interfaces modernas.
- Cuadrícula de 20 píxeles para interfaces densas en datos, dashboards y herramientas de administración.
Una cuadrícula no es solo el tamaño del lienzo. Es también el área útil dentro del lienzo donde el icono realmente se asienta. Una cuadrícula de 24 píxeles tiene un área útil de 20 píxeles, con 2 píxeles de margen a cada lado. Ese margen le da aire al icono y evita que se vea apretado contra los elementos vecinos.
Líneas guía dentro de la cuadrícula
El área útil tiene líneas guía internas que gobiernan la forma. Un área útil de 20 píxeles recibe cuatro formas guía:
| Forma | Tamaño | Uso |
|---|---|---|
| Cuadrado | 18x18 px | La mayoría de iconos rectangulares (carpeta, documento) |
| Círculo | 20x20 px | Iconos redondos (sol, info, avatar) |
| Rectángulo alto | 16x20 px | Iconos verticales (batería, teléfono) |
| Rectángulo ancho | 20x16 px | Iconos horizontales (búsqueda, mensaje) |
Cada línea guía produce un icono visualmente equilibrado al mismo tamaño. Un círculo dibujado a 18 píxeles parece más pequeño que un cuadrado a 18 píxeles porque el ojo humano lee los círculos como más pequeños. Las líneas guía compensan esta rareza perceptiva.
El grosor de trazo como token
Elige un grosor de trazo y no te muevas de él. La mayoría de los sistemas de iconos de producto usan trazos de 1,5 o 2 píxeles en la cuadrícula de 24 píxeles. Elige según la voz de marca.
Un trazo de 1,5 píxeles se lee ligero, técnico y moderno. Un trazo de 2 píxeles se lee seguro, amigable y accesible. Un trazo de 3 píxeles se lee atrevido, infantil o de estilo impreso. Elige uno. Documéntalo como token. Rechaza cualquier contribución de icono que use un peso distinto.
El glosario de design tokens explica cómo encaja el grosor de trazo en la arquitectura de tokens más amplia.
La corrección óptica marca la diferencia
La alineación matemática no es alineación visual. Los iconos que encajan perfectamente en la cuadrícula a menudo se ven mal porque el ojo humano no mide píxeles, mide peso y equilibrio percibidos.
Por qué existe la corrección óptica
Un círculo de 20x20 píxeles y un cuadrado de 20x20 píxeles no se leen como del mismo tamaño. El cuadrado tiene más masa visual porque llena por completo su caja delimitadora. El círculo tiene espacio vacío en las esquinas que el ojo registra como un objeto más pequeño.
La solución es dibujar el círculo ligeramente más grande que la caja delimitadora, a veces de 1 a 2 píxeles. Las matemáticas dicen que está mal, el ojo dice que está bien. Confía siempre en el ojo.
Correcciones ópticas habituales
Cinco correcciones cubren la mayor parte del trabajo con iconos:
- Los círculos se ven más grandes que los cuadrados. Sube las líneas guía circulares de 1 a 2 píxeles.
- Los triángulos se ven más pequeños que los cuadrados. Sube las líneas guía triangulares de 2 a 3 píxeles.
- Las líneas diagonales se ven más finas que las horizontales. Añade de 0,25 a 0,5 píxeles de peso a las diagonales.
- Los centros de los iconos asimétricos derivan. Centra ópticamente botones de play, flechas y chevrons a ojo, nunca por caja delimitadora.
- Las esquinas afiladas se leen más pequeñas. Redondea ligeramente las esquinas interiores para igualar el peso percibido de las exteriores.
Estas correcciones no son opinión. Prueba cualquier icono con versiones perfectas en matemáticas y corregidas ópticamente, lado a lado en tamaños pequeños. La versión corregida ópticamente siempre gana. Siempre.
Decisiones de estilo que se acumulan
Una vez fijados la cuadrícula y los pesos, cada otra decisión de estilo debe tomarse una vez y aplicarse en todas partes. La inconsistencia en cualquiera de ellas hace pensar que la biblioteca ha pasado por demasiadas manos.
Radio de esquina
Elige un radio de esquina exterior y uno interior. Los dos funcionan en pareja.
Un radio exterior de 1 píxel y uno interior de 0,5 píxeles se lee nítido y moderno. Un radio exterior de 2 píxeles y uno interior de 1 píxel se lee amigable y redondeado. Un set de bordes cuadrados sin radio se lee arquitectónico y serio.
El error es mezclar radios dentro de la misma biblioteca. Incluso un solo icono con esquinas más afiladas que el resto parece prestado de otro set.
Remates y uniones
Los trazos tienen extremos. Los remates pueden ser cuadrados, redondos o proyectantes. Las uniones entre trazos pueden ser en inglete (afiladas), redondas o biseladas (cortadas). Elige una de cada y aplícala en todo el sistema.
Los remates redondos y las uniones redondas producen un set de iconos amigable y cercano. Los remates cuadrados y las uniones en inglete producen un set preciso y técnico. Mezclar remates en la misma biblioteca produce un set que parece a medio terminar.
Relleno vs contorno
La mayoría de los sistemas de iconos modernos entregan dos variantes de cada icono: una versión de contorno para estados inactivos y una versión rellena para estados activos. La versión de contorno usa el trazo. La versión rellena usa la misma forma con el interior relleno.
Las dos variantes deben estar visualmente equilibradas. Una versión rellena del mismo tamaño suele leerse más pesada y dominante que el contorno. La solución es reducir ligeramente la huella de la versión rellena de 1 a 2 píxeles para que el peso visual iguale al contorno a la misma escala.
El glosario de estado de foco explica cómo encaja el cambio de contorno a relleno en el diseño más amplio de estados de interacción.
Nombrar los iconos es la mitad del sistema
Una biblioteca de 200 iconos bien dibujados que nadie encuentra es una biblioteca que nadie usa. La nomenclatura es la capa de descubribilidad, y una mala nomenclatura mata la adopción más rápido que un mal dibujo.
Patrones de nomenclatura que escalan
Usa nombres que empiecen por el objeto, no por la metáfora. El icono de una lupa es search o magnifier, nunca find ni look. El objeto es estable. La metáfora cambia según el contexto.
Usa kebab-case para iconos de varias palabras: arrow-left, chevron-down, cloud-upload. La consistencia en el formato permite a los ingenieros hacer grep en la biblioteca, autocompletarla en los IDEs y entregar sin erratas.
Usa sufijos direccionales solo cuando hagan falta. arrow no basta. arrow-left, arrow-right, arrow-up, arrow-down es el conjunto mínimo. Lo mismo para chevrons, carets y cualquier otro pictograma direccional.
Nomenclatura de variantes
Cuando un icono tiene varias variantes (contorno, relleno, dos tonos), añade la variante como sufijo:
search(contorno por defecto)search-filledsearch-duotone
Este patrón permite al ingeniero meter search-filled en un botón sin rebuscar en una carpeta aparte. La nomenclatura predecible es más rápida que la organización perfecta.
Mapas de sinónimos
El mayor fallo de nomenclatura es el icono que un diseñador no encuentra porque buscó la palabra equivocada. Construye un mapa de sinónimos junto a la biblioteca. cart también coincide con bag, shopping. home también coincide con house, dashboard. delete también coincide con trash, remove, bin.
La mayoría de las herramientas modernas de búsqueda de iconos (Iconify, Lucide, Phosphor) integran mapas de sinónimos en su UI de búsqueda. Construye lo mismo en la biblioteca interna o acepta que los diseñadores seguirán añadiendo iconos duplicados porque no encontraron el existente.
La gobernanza mantiene vivo el sistema
Las decisiones técnicas de arriba las puede reproducir cualquier diseñador competente. Las decisiones de gobernanza son lo que separa un sistema que vive de un sistema que muere en el segundo año.
La única fuente de verdad
Elige un solo lugar donde vivan los iconos. Ya sea una biblioteca de Figma, un repositorio de código con SVGs o un servicio alojado como Iconify. Elige uno. La biblioteca vive ahí. Todo diseñador tira de ahí. Todo ingeniero tira de ahí.
Un sistema con dos fuentes de verdad tiene cero fuentes de verdad. La biblioteca de Figma y la de código derivarán hacia la tercera semana, y desde entonces cada pantalla entregará iconos que no coinciden con el sistema.
El proceso de contribución
Documenta el proceso para añadir un icono nuevo. El proceso debe incluir:
- Busca primero. Confirma que el icono no existe ya con otro nombre.
- Justifica la adición. Escribe una frase sobre qué representa el icono y dónde se usará.
- Dibuja según la especificación. Iguala la cuadrícula, el grosor de trazo, el radio de esquina, los remates y las uniones de la biblioteca existente.
- Revisión óptica. Un segundo diseñador comprueba el icono a 16, 20 y 24 píxeles para ver su equilibrio visual.
- Nombra y entrega. El nombre sigue el patrón de nomenclatura. Entrega a Figma y a código en el mismo PR.
Un sistema sin proceso de contribución es un sistema que se esquiva. La primera vez que un diseñador necesite un icono con urgencia, lo descargará de un pack gratuito y lo entregará sin preguntar. Desde ese momento la biblioteca tiene un fork.
El proceso de deprecación
Los iconos se deprecan. Un rediseño retira un estilo antiguo, se recorta una funcionalidad, un refresh de marca cambia el lenguaje visual. Documenta cómo salen los iconos de la biblioteca, no solo cómo entran.
Marca los iconos deprecados en la biblioteca con una etiqueta visible. Mantenlos disponibles 90 días para que las pantallas existentes tengan tiempo de migrar. Luego elimínalos. Una biblioteca que nunca elimina iconos se convierte en un museo, y los museos se ignoran.
Cómo llegan los iconos al código
El traspaso entre diseño y código es donde se rompen la mayoría de los sistemas de iconos. La biblioteca de Figma está impecable, la de código es un cementerio de SVGs inconsistentes y los ingenieros dejan de confiar en ambas.
SVG es el formato
Entrega los iconos en SVG. No en PNG, no en fuentes de iconos. SVG es vectorial, escala a cualquier tamaño sin pérdida, admite herencia de color actual para theming fácil y pesa lo bastante poco para incrustarse en componentes.
Cada SVG tiene un viewBox que coincide con la cuadrícula (24x24 o 20x20), usa currentColor para trazo y relleno y excluye transformaciones o estilos redundantes. Un SVG limpio pesa menos de 1 KB. La mayoría de las bibliotecas de iconos entregan iconos de 3 a 5 KB porque se exportaron con la configuración por defecto, que incrusta metadatos, transformaciones y estilos en línea que nadie necesita.
La optimización no es negociable
Pasa cada SVG por SVGO antes de que llegue al repositorio de código. SVGO elimina metadatos, simplifica trazados, quita atributos redundantes y recorta el tamaño del archivo entre un 60 y un 80% de media.
Para una biblioteca de 200 iconos, la diferencia entre sin optimizar y optimizada suele ser de 400 KB en cada carga de página. Eso es un golpe en Lighthouse, una regresión en core web vitals y una experiencia móvil más lenta sin motivo.
Wrappers de componente
Envuelve cada SVG en un componente tipado (React, Vue, Svelte). El componente recibe props de tamaño, color y accesibilidad. El ingeniero nunca importa un SVG crudo. Importa un <Icon name="search" size={20} /> y el sistema se encarga del resto.
Este patrón significa que la biblioteca de iconos puede cambiar su formato de exportación subyacente (SVG, sprite, fuente de iconos) sin tocar el código consumidor. El componente es la API, el SVG es la implementación.
El glosario de handoff de diseño explica la disciplina de traspaso más amplia. Los iconos son uno de los pocos casos en que diseñadores e ingenieros comparten de verdad la propiedad.
Fallos comunes de los sistemas de iconos
Toda auditoría de iconos encuentra los mismos fallos. Si el sistema se entrega con alguno de ellos, la biblioteca está a un rediseño de una reescritura completa.
Tres grosores de trazo en una biblioteca. Casi siempre significa que la biblioteca se montó con varios packs gratuitos. La solución es un redibujado forzado de todo el set con un solo grosor.
Variantes rellenas y de contorno a distinta escala. La versión rellena se lee más grande que el contorno porque nadie compensó el peso percibido. La solución es encoger la versión rellena de 1 a 2 píxeles hasta que las dos se lean del mismo tamaño.
Radio de esquina inconsistente. La mitad de los iconos tiene esquinas redondeadas, la otra mitad cuadradas. Casi siempre porque dos diseñadores distintos contribuyeron sin una regla escrita. La solución es definir un radio y refactorizar.
Nombrar por metáfora. Iconos llamados find, look, discover en lugar del objeto que representan. Los diseñadores no los encuentran. La solución es renombrar con convenciones que empiecen por el objeto.
Sin proceso de deprecación. La biblioteca tiene 350 iconos, 80 de ellos sin uso o reemplazados. El volumen ralentiza la búsqueda y confunde a los diseñadores nuevos. La solución es una auditoría trimestral y un ciclo de deprecación de 90 días.
Sistemas de iconos en las condiciones de 2026
Tres cambios han modificado cómo se construyen los sistemas de iconos. El sistema tiene que sobrevivir a ellos.
Las fuentes de iconos variables son reales. Los nuevos formatos permiten que un archivo de icono lleve varios pesos, rellenos y tamaños ópticos que interpolan con suavidad. La ventaja técnica es enorme, el riesgo de diseño es que los equipos entreguen todas las variantes en todas las pantallas porque pueden. Elige las variantes que se entregan. Recorta el resto.
Las herramientas de IA generan iconos en segundos. Midjourney, DALL-E y ChatGPT pueden producir un icono pasable con un solo prompt. El riesgo es que los diseñadores dejen de dibujar iconos y empiecen a promptearlos, lo que mata la coherencia del sistema porque cada prompt produce un estilo ligeramente distinto. Usa la IA para primeros borradores. Refactoriza cada resultado para que encaje con el sistema.
Lucide, Phosphor y Heroicons marcan la línea base. Estas bibliotecas abiertas entregan más de 1500 iconos con cuadrícula, peso y nomenclatura consistentes. Para la mayoría de productos, partir de una de ellas y personalizar es más rápido y mejor que construir desde cero. Los iconos a medida se dibujan solo para conceptos propios del producto que las bibliotecas abiertas no cubren.
El glosario de wcag explica las bases de accesibilidad que gobiernan el contraste y el etiquetado de iconos. Los iconos en elementos interactivos necesitan nombres accesibles, no solo etiquetas visuales.
FAQ
¿Qué tamaño de cuadrícula debería usar un sistema de iconos?
Cuadrícula de 24 píxeles para UI de producto general, cuadrícula de 20 píxeles para interfaces densas en datos. La cuadrícula tiene 2 píxeles de margen a cada lado, lo que deja un área útil de 20 o 16 píxeles donde el icono realmente se asienta. Elige una y vive dentro de ella en toda la biblioteca.
¿Qué grosor deben tener los trazos de los iconos?
De 1,5 a 2 píxeles en una cuadrícula de 24 píxeles. 1,5 píxeles se lee ligero y técnico, 2 píxeles se lee seguro y amigable. Elige un peso, documéntalo como token y rechaza cualquier contribución que use un peso distinto.
¿Qué es la corrección óptica en el diseño de iconos?
La práctica de ajustar los iconos para que se vean equilibrados aunque las matemáticas digan que están alineados. Los círculos se ven más grandes que los cuadrados, los triángulos más pequeños, las diagonales más finas que las horizontales. La corrección óptica compensa estas rarezas perceptivas. Confía siempre en el ojo antes que en la caja delimitadora.
¿Deben los iconos ser rellenos o de contorno?
La mayoría de los sistemas modernos entregan ambos. Contorno para estados inactivos, relleno para estados activos. Las dos variantes deben estar visualmente equilibradas, lo que suele significar que la versión rellena es de 1 a 2 píxeles más pequeña que el contorno para que el peso percibido coincida.
¿Cómo deben nombrarse los iconos en un sistema de diseño?
Empezando por el objeto, en kebab-case, con sufijos direccionales cuando hagan falta. Search, no find. Arrow-left, no back. Usa mapas de sinónimos para que los diseñadores puedan buscar con palabras alternativas. Añade sufijos de variante (filled, duotone) para que los ingenieros tomen la variante correcta con un solo import.
¿Cuándo conviene construir iconos a medida frente a usar una biblioteca abierta?
Usa una biblioteca abierta (Lucide, Phosphor, Heroicons) como base. Dibuja a medida solo los conceptos propios del producto que esas bibliotecas no cubren. Construir un set de 300 iconos desde cero en 2026 es casi siempre esfuerzo perdido. Personaliza la base abierta, documenta las adiciones y entrega.
El sistema se paga solo
Una biblioteca de iconos coherente es la forma más barata de que un producto se sienta pulido. Una biblioteca de iconos a la deriva es la forma más rápida de que un producto se sienta barato. El coste de construir el sistema es de una a dos semanas de trabajo disciplinado. El coste de no construirlo es un impuesto visual permanente sobre cada pantalla que el producto entregue, para siempre.
Elige una cuadrícula. Elige un peso. Elige un radio de esquina. Elige un patrón de nomenclatura. Escribe el proceso de contribución y de deprecación. Optimiza los SVGs. Envuélvelos en un componente tipado. Y luego impón todo eso en la revisión de código.
La columna de iconos de cada pantalla es una de las señales de calidad de producto con más densidad. Acierta una vez y sostendrá el resto del diseño.
Si quieres un equipo que construya sistemas de iconos como parte del traspaso más amplio del sistema de diseño, contrata a Brainy. Cuadrícula, gobernanza y código en un solo proyecto, nunca añadidos a última hora.
Lecturas relacionadas
- Guía de sistemas de diseño
- Diseño de jerarquía visual
- Handoff de diseño de Figma a desarrollo
- Checklist de accesibilidad web
Want an icon library that holds up across 200 screens and four designers? Brainy ships icon systems built into the design system, with grid, governance, and code in one handoff.
Get Started
