Iconografía en interfaces: estilo, rejilla, peso óptico y librerías

Un día, revisando la app de reservas de un club náutico, preguntamos a cinco socios qué pensaban que hacía un icono con forma de ancla que había en la barra inferior. Dos dijeron «el puerto», uno «mis amarres», otro «información del club» y el último no sabía. Llevaba ahí la sección de servicios. El icono era bonito y estaba bien dibujado; simplemente, cada persona leía una cosa distinta. Añadirle una palabra debajo resolvió el problema en una tarde.

Los iconos son el vocabulario más pequeño de una interfaz. Cuando funcionan, aceleran la lectura, ordenan la pantalla y aportan carácter. Cuando se eligen por estética o se mezclan sin criterio, añaden una capa de interpretación que nadie había pedido. Esta guía recoge lo que aplicamos en el estudio para que los iconos de una interfaz se entiendan, parezcan de la misma familia y lleguen al código con la misma calidad con la que se diseñaron.

01Cuándo un icono ayuda (y cuándo necesita compañía)

Antes de elegir estilos y librerías, la primera decisión es si un icono es la mejor manera de decir algo. Los iconos rinden mejor en tres situaciones:

• →Acciones universales que casi todo el mundo reconoce: buscar (lupa), cerrar (X), menú (tres líneas en móvil), compartir, carrito, inicio, ajustes.
• →Acompañar al texto para que se escanee más rápido: un icono de reloj junto al horario, de teléfono junto al número, de ubicación junto a la dirección.
• →Espacios muy reducidos donde el icono va con un nombre accesible y un tooltip, como las herramientas de un editor.

En casi todo lo demás, el icono con texto gana al icono solo. El Nielsen Norman Group lo resume en una idea que repite en sus estudios: la etiqueta es lo que hace que un icono se entienda; el icono es lo que hace que una etiqueta se encuentre rápido. La navegación principal de una app, por ejemplo, funciona mucho mejor con palabra debajo de cada icono.

Clave: un icono se entiende por convención, no por dibujo. Si tienes que explicar qué significa, necesita una etiqueta visible a su lado.

Metáforas que envejecen

Algunos iconos siguen funcionando aunque su objeto haya desaparecido de nuestra vida: el disquete para guardar, el sobre para el correo, el teléfono de auricular. Han dejado de ser dibujos y se han convertido en símbolos aprendidos. Lo que conviene es no forzar metáforas nuevas para conceptos abstractos («integraciones», «sostenibilidad», «experiencia»): ahí casi siempre es mejor la palabra.

02Elegir un estilo y mantenerlo

Una familia de iconos coherente comparte un puñado de decisiones de estilo. Si cambias una de ellas a mitad de proyecto, se nota.

Un recurso muy útil es combinar línea y relleno con significado: línea para el estado normal y relleno para el estado activo. Es lo que hacen iOS y muchas apps en su barra de pestañas, y comunica la sección actual sin necesidad de color.

Las decisiones de estilo que hay que fijar son pocas y concretas:

1. 01Grosor de trazo: 1,5 o 2 px a 24 px de tamaño es lo más habitual. Un trazo más fino (1 px) transmite delicadeza pero se pierde en tamaños pequeños.
2. 02Terminaciones: redondeadas o rectas.
3. 03Esquinas: radio de 0, 1 o 2 px en las uniones.
4. 04Nivel de detalle: cuántos elementos interiores admite cada icono. Menos es más legible.
5. 05Perspectiva: plano frontal casi siempre; sin perspectiva ni sombras en interfaces.

Lo ideal es que estas decisiones dialoguen con la tipografía de la interfaz. Un trazo de 2 px con terminaciones redondeadas casa bien con una sans-serif humanista de peso regular; una tipografía geométrica fina pide iconos de trazo 1,5 px y esquinas más vivas.

03La rejilla y el peso óptico

Si vas a diseñar o adaptar iconos, la rejilla es la herramienta que hace que todos parezcan de la misma familia.

La rejilla de 24 px

El estándar de facto es un lienzo de 24×24 px con un margen interior de 2 px, lo que deja un área viva de 20×20 px donde se dibuja. Dentro de esa área se definen unas formas clave (keylines): un círculo de unos 20 px de diámetro, un cuadrado de unos 18 px, un rectángulo vertical y otro horizontal. Material Design popularizó este sistema y casi todas las librerías actuales trabajan con algo parecido.

Las formas clave existen por una razón: a igual medida, las figuras no parecen igual de grandes. Un círculo de 20 px parece más pequeño que un cuadrado de 20 px, porque tiene menos superficie. Por eso el cuadrado se dibuja algo más pequeño que el círculo, y así los dos se perciben del mismo tamaño.

Peso óptico

El peso óptico es la sensación de masa de un icono. Dos iconos del mismo tamaño pueden parecer de pesos distintos si uno tiene muchas líneas interiores y otro es casi vacío. Algunos ajustes que hacemos:

• →Compensar tamaños: un triángulo de play se dibuja algo más grande y se desplaza un poco a la derecha para que parezca centrado dentro de un círculo.
• →Equilibrar densidad: si un icono tiene mucho detalle interior, se simplifica o se abre espacio entre trazos para que no se vea más oscuro que sus vecinos.
• →Ajustar al píxel: en tamaños pequeños, alinear los trazos horizontales y verticales a píxeles enteros para que se vean nítidos y no borrosos.

04Tamaños, alineación y color

Un sistema de iconos se completa con unas reglas de uso:

• →Tamaños: 16 px junto a textos pequeños, 20 px junto a textos de 14 a 16 px, 24 px como estándar, y 32, 40 o 48 px para iconos ilustrativos. Los tamaños grandes merecen a veces una versión con más detalle, igual que hace Material Symbols con su eje de tamaño óptico.
• →Alineación con el texto: el icono se centra verticalmente con la altura de las minúsculas o con la primera línea, no con la caja entera del párrafo. En código, un contenedor flex con align-items: center lo resuelve en líneas únicas.
• →Separación con el texto: 4 a 8 px, según tamaño.
• →Área pulsable: si el icono es un botón, su zona de toque debe llegar a 44 o 48 px aunque el dibujo sea de 24. Lo explicamos con más detalle en la guía de botones en UI.
• →Color: normalmente el mismo que el texto al que acompañan, o un gris de la escala de neutros. El color de acción solo en iconos interactivos. Los iconos que transmiten información necesaria necesitan un contraste de 3:1 con el fondo, según el criterio 1.4.11 de WCAG 2.2.

05Librerías: cuál elegir

Para la mayoría de proyectos, una buena librería de código abierto es el punto de partida más sensato. Estas son las que más usamos o vemos en proyectos serios:

Algunas notas prácticas:

• →Lee la licencia. Casi todas permiten uso comercial, pero SF Symbols, por ejemplo, está limitada a interfaces para plataformas de Apple.
• →Comprueba que cubre todo el proyecto. Haz la lista de iconos que vas a necesitar antes de elegir. Si a la librería le faltan cinco de cuarenta, puedes dibujarlos siguiendo su rejilla; si le faltan veinte, quizá no es la adecuada.
• →Adáptala a la marca con tres palancas: grosor de trazo, tamaño y color. Con solo cambiar el trazo de 2 a 1,5 px, una librería conocida puede sentirse más propia.

Cuándo merece la pena una iconografía propia

Una iconografía a medida tiene sentido cuando los iconos son parte visible de la identidad: señalética en un espacio comercial, packaging, una app de marca con muchas funciones o una identidad cuyo símbolo invita a extender un lenguaje gráfico. En esos casos los diseñamos como parte de la identidad de marca, sobre la misma rejilla y con un documento que recoge sus reglas para que cualquiera pueda añadir iconos nuevos. Para piezas más expresivas, como ilustraciones de estados vacíos o de bienvenida, hay otra guía dedicada a la ilustración en interfaces.

06Llevar los iconos al código

La forma más robusta de usar iconos en la web hoy es el SVG. Se ve nítido en cualquier pantalla, pesa muy poco y puede heredar el color del texto. Este es el patrón que usamos:

<!-- Icono decorativo junto a un texto: oculto a lectores de pantalla -->
<p class="info">
  <svg class="icon" aria-hidden="true" focusable="false" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    <circle cx="12" cy="12" r="9" />
    <path d="M12 7v5l3 2" />
  </svg>
  Abierto de 9:00 a 14:00
</p>
<!-- Botón de solo icono: necesita un nombre accesible -->
<button class="icon-button" type="button" aria-label="Cerrar">
  <svg class="icon" aria-hidden="true" focusable="false" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
    <path d="M6 6l12 12M18 6L6 18" />
  </svg>
</button>

Las claves:

• →`currentColor` hace que el icono tome el color del texto que lo rodea. Al cambiar el color del botón en hover o en modo oscuro, el icono cambia solo.
• →`aria-hidden="true"` en los iconos decorativos, para que el lector de pantalla no los anuncie.
• →`aria-label` en el botón cuando el icono va solo, para que tenga un nombre.
• →Tamaño por CSS, con una clase .icon que fije ancho y alto (por ejemplo 1.25rem o 1.5rem), así los iconos escalan con el texto si la persona agranda la letra.

En proyectos con React o frameworks parecidos, las librerías como Lucide o Phosphor se instalan como componentes y solo se incluyen en el código los iconos que realmente se usan. En webs estáticas, un sprite SVG con <symbol> y <use> permite cargar todos los iconos una vez y reutilizarlos. Cualquiera de las dos opciones es preferible a una fuente de iconos.

Los iconos también encajan en el sistema de design tokens: su tamaño, su color y su trazo pueden definirse como variables, igual que los espacios o la tipografía. Lo contamos en design tokens explicados.

07Checklist para revisar la iconografía de tu web

1. 01¿Todos los iconos vienen de la misma familia o siguen las mismas reglas?
2. 02¿Hay como mucho tres o cuatro tamaños de icono distintos?
3. 03¿Los iconos de navegación tienen una etiqueta visible?
4. 04¿Los botones de solo icono tienen nombre accesible y un área de toque de 44 px?
5. 05¿Los iconos que transmiten información tienen un contraste de 3:1?
6. 06¿Están en SVG y heredan el color del texto?
7. 07¿Cada icono significa siempre lo mismo en toda la interfaz?

Cuando la iconografía está bien resuelta, nadie habla de ella: la gente simplemente encuentra lo que busca un poco antes. En SIMA la diseñamos como parte de cada interfaz y, cuando la marca lo pide, como parte de su identidad, del primer boceto al SVG final. Si quieres que revisemos los iconos de tu web o tu app, o que diseñemos una familia propia, escríbenos y lo hablamos.