Icon Fonts 101

Las fuentes de iconos son tipografías en las que los glifos — normalmente letras y números — son reemplazados por símbolos pictográficos. En lugar de renderizar la letra «A», una fuente de iconos renderiza un icono de inicio, una lupa de búsqueda o un carrito de compras.

Dado que los iconos residen dentro de un archivo de fuente, se comportan exactamente como texto. Puede escalarlos a cualquier tamaño con font-size, cambiar su color con color, añadir sombras de texto, aplicar transiciones CSS e incluso animarlos — todo ello sin tocar un solo archivo de imagen.

Este enfoque ofrece varios beneficios prácticos:

• Independencia de resolución — los contornos vectoriales escalan con nitidez en cualquier densidad de pantalla
• Carga mínima — un solo archivo de fuente comprimido reemplaza docenas de recursos de imagen individuales
• Control CSS — color, tamaño, sombra, opacidad y estados de hover son gratuitos con el estilo de texto
• Una sola solicitud HTTP — el conjunto de iconos completo se carga en un único viaje de red

En los primeros tiempos de la web, los desarrolladores dependían de imágenes individuales o sprites de imagen CSS — imágenes compuestas grandes donde cada icono ocupaba una región rectangular fija. Los sprites reducían las solicitudes HTTP, pero eran frágiles: añadir o redimensionar un icono significaba regenerar toda la hoja de sprites y actualizar manualmente los desplazamientos en píxeles.

Alrededor de 2012, proyectos como Font Awesome e IcoMoon popularizaron una alternativa más limpia: empaquetar iconos como glifos de fuente mapeados al Área de Uso Privado de Unicode. Los diseñadores podían reemplazar un conjunto de iconos completo cambiando una sola declaración @font-face, y los desarrolladores podían estilizar los iconos con el mismo CSS que ya usaban para el texto. La técnica se extendió rápidamente y sigue siendo una opción fiable y de bajo costo para los sistemas de diseño que utilizan iconografía monocromática.

El debate «fuentes de iconos vs. SVG inline» ha sido un tema recurrente en las discusiones de front-end durante más de una década. Ambos enfoques son válidos — la elección correcta depende de los requisitos de su proyecto.

Fuentes de iconos

• Una sola solicitud HTTP — un archivo de fuente entrega todos los iconos
• Estilo CSS muy sencillo — cambie color, font-size y text-shadow como cualquier texto
• Solo monocromático — cada glifo admite un único color de relleno
• Integración sencilla — añada un enlace de hoja de estilo, use una clase CSS, listo

SVG inline

• Multicolor — cada trayecto puede tener su propio relleno, trazo o degradado
• Accesible por defecto — <title> y aria-label dan a los lectores de pantalla semántica real
• Cacheable individualmente — los iconos no utilizados nunca se descargan
• Control detallado — animar trayectos individuales, aplicar filtros por elemento

Sprites SVG

• Combinan múltiples SVG en una sola hoja de sprites <symbol>
• Referencia iconos con <use href="#icon-name">
• Ofrece los beneficios de ambos — solicitud única, multicolor, accesible — pero requiere un pipeline de construcción más elaborado

Las fuentes de iconos pueden empaquetarse en cinco formatos de archivo, cada uno con diferente compresión, compatibilidad con navegadores y casos de uso. A continuación se muestra cómo se comparan de un vistazo:

¿No sabe qué formatos incluir? Use esta guía de decisión práctica:

• Si solo elige uno — use WOFF2. Ofrece la mejor compresión (Brotli) y cubre el 97 %+ de los navegadores.
• Si necesita soporte para IE 11 — use WOFF2 + WOFF. WOFF gestiona los navegadores restantes que carecen de decodificación Brotli.
• Si necesita soporte para IE 8 — use WOFF2 + WOFF + EOT. EOT es el único formato que comprende Internet Explorer 6-8.
• Para aplicaciones de escritorio — use TTF. Es el formato nativo para la representación de fuentes a nivel de sistema operativo en Windows, macOS y Linux.
• Para depurar problemas de fuentes — inspeccione la fuente SVG. Su estructura XML es legible por humanos, lo que facilita la verificación de los trayectos de glifos y los metadatos.

Profundice en cada formato para comprender sus aspectos internos, compatibilidad con navegadores y buenas prácticas:

Aprenda a usar estos formatos en sus proyectos: