Iconos web: formatos, tamaños y buenas prácticas

Una lupa, una casa, un sobre: los iconos web son el idioma que todo el mundo entiende sin leer. Bien elegidos, hacen que una página se use más rápido; mal resueltos, cargan de más, se ven borrosos o dejan fuera a quien navega con lector de pantalla. En esta guía vemos qué tipos de iconos existen, qué formato conviene en cada caso (SVG, fuente de iconos o imagen), qué tamaños usar, cómo hacerlos accesibles y dónde conseguir iconos para web gratis con una licencia clara.

Qué son los iconos web y para qué sirven

Un icono web es un pequeño gráfico que representa una acción, un objeto o una idea dentro de una página o una aplicación: buscar, abrir el menú, compartir, descargar, avisar de un error. Cumplen tres funciones:

• Ahorrar espacio: un símbolo de 24 píxeles sustituye a una palabra o refuerza un botón con poco sitio.
• Acelerar la lectura: el ojo reconoce antes la forma conocida que la palabra, sobre todo en menús y listados.
• Dar identidad: un set de iconos coherente, con el mismo trazo y las mismas esquinas, hace que una web parezca cuidada.

Los tres tipos de iconos

Según la relación entre el dibujo y lo que significa, los iconos se suelen agrupar en tres tipos:

• Por semejanza: se parecen a lo que representan. Una casa para la página de inicio, un carrito para la compra o una papelera para borrar.
• Por referencia o asociación: muestran algo relacionado con la idea, no la idea en sí. Una lupa para buscar o un engranaje para los ajustes.
• Arbitrarios o convencionales: su forma no tiene relación directa con el significado; se entienden porque los hemos aprendido, como el símbolo de Bluetooth o el de wifi.

Cuanto más arbitrario es un icono, más conviene acompañarlo de texto. Además del significado, los iconos varían de estilo: de línea (solo contorno), de relleno, duotono o en color. Lo importante es no mezclar estilos en una misma interfaz.

Formatos de iconos para web

Hay tres maneras de llevar un icono a una página. Cada una tiene su momento, aunque hoy una gana con claridad.

SVG: el estándar actual

El SVG es un formato vectorial basado en texto. Se ve perfecto en pantallas de alta densidad, pesa muy poco si está optimizado y su color puede heredarse del texto con currentColor, de modo que cambia solo al pasar el ratón o en modo oscuro. Se puede insertar directamente en el HTML, reutilizar desde un sprite con <use> o cargar como imagen con <img> (en este último caso, ya no se puede colorear con CSS).

Fuentes de iconos

Una fuente de iconos (el famoso «icon font», de donde viene el nombre de este blog) es una tipografía en la que cada carácter es un dibujo. Se colocan con una clase o con una ligadura de texto y se colorean y escalan como si fueran letras. Fueron la solución estrella durante años, pero tienen inconvenientes: si la fuente no carga se ven cuadrados vacíos o letras sueltas, solo admiten un color, obligan a descargar el set completo aunque uses tres iconos y los lectores de pantalla pueden leer caracteres sin sentido si no se ocultan bien.

PNG, WebP y sprites

Las imágenes de píxeles tienen sentido para iconos ilustrados, a todo color o con degradados complejos. Para que no se vean borrosos hay que servirlos al doble de tamaño en pantallas de alta densidad. Los sprites, que agrupaban todos los iconos en una sola imagen para ahorrar peticiones, han perdido sentido con HTTP/2 y con el SVG.

Tamaños de iconos para web

La mayoría de sets se dibujan sobre una rejilla de 24 × 24 píxeles, y es el tamaño más habitual en botones y menús. A partir de ahí:

• 16–20 px: acompañando texto, en etiquetas, listas o enlaces.
• 24 px: botones, menús y barras de herramientas.
• 32–48 px: accesos destacados, tarjetas de servicios o pasos de un proceso.

Lo que no puede encogerse es la zona donde se pulsa. Las pautas de accesibilidad WCAG 2.2 piden un objetivo táctil de al menos 24 × 24 píxeles, y las guías de Apple y Google recomiendan 44 y 48, respectivamente. Un icono de 24 px puede vivir dentro de un botón de 44 px sin problema.

Iconos web accesibles: la lista corta

• Los decorativos, ocultos: si el icono acompaña a un texto que ya dice lo mismo, añade aria-hidden="true" para que el lector de pantalla no lo repita.
• Los que van solos, con nombre: un botón que solo muestra una lupa necesita un aria-label="Buscar" o un texto oculto visualmente.
• SVG con significado: role="img" y un aria-label o un <title> que lo describa.
• Contraste suficiente: los iconos que transmiten información deben tener al menos un contraste de 3:1 con el fondo.
• No solo color: un aviso en rojo debe llevar también un símbolo o un texto que lo explique.
• Un mismo icono, un mismo significado: si la estrella es «favoritos» en una pantalla, no puede ser «valorar» en otra.

Iconos web gratis: dónde descargarlos

Hay bibliotecas excelentes que se pueden usar en proyectos comerciales. Lo que cambia es la licencia y si exigen o no citar al autor:

Antes de mezclar iconos de varias bibliotecas, compara el grosor de trazo y las esquinas: un set coherente se nota más que un icono bonito.

Cómo poner iconos en una página web, paso a paso

1. Elige un solo set que tenga todos los iconos que necesitas, con el mismo estilo.
2. Descarga en SVG solo los que vas a usar y pásalos por un optimizador para quitar metadatos innecesarios.
3. Usa currentColor en el trazo o el relleno para que el icono tome el color del texto.
4. Define el tamaño en CSS (por ejemplo, en em) para que crezca con la letra a la que acompaña.
5. Etiquétalos: ocultos si son decorativos, con nombre si funcionan solos.
6. Pruébalos en móvil, en modo oscuro y con un lector de pantalla antes de publicar.

Errores habituales con los iconos web

• Cargar una fuente de iconos entera para mostrar cuatro símbolos.
• Mezclar iconos de relleno y de línea, o de grosores distintos, en la misma barra.
• Usar iconos sin texto para acciones poco conocidas: si hay que adivinar qué hace, falta la palabra.
• Exportar PNG pequeños que se ven borrosos en pantallas de alta resolución.
• Dejar botones de solo icono sin nombre accesible.

Preguntas frecuentes