Iconografía
La iconografía es un lenguaje visual que ayuda a las personas a reconocer acciones, estados y contenidos con rapidez. En los servicios digitales del Estado, los íconos complementan la información escrita, facilitan la navegación y permiten construir experiencias consistentes entre distintas plataformas e instituciones.
El sistema de diseño ofrece una biblioteca de íconos con un estilo común, preparada para funcionar en diferentes tamaños y contextos. Utilizar esta biblioteca evita interpretaciones ambiguas, mantiene la coherencia visual y reduce la necesidad de crear recursos nuevos para cada producto.
Los íconos deben apoyar la comprensión, no reemplazar información esencial. Cuando su significado no sea universal, acompáñalos siempre con una etiqueta de texto visible.
Principios
- Claridad: elige el ícono que represente de forma más directa la acción o el concepto.
- Consistencia: utiliza el mismo ícono para comunicar una misma acción en todo el servicio.
- Simplicidad: evita combinar varios íconos cuando uno solo sea suficiente.
- Accesibilidad: no dependas únicamente de la iconografía para entregar información o comunicar un estado.
Tamaños
Utiliza los tamaños definidos por el sistema para conservar la legibilidad y alineación de los íconos. Selecciona el tamaño según la jerarquía del elemento y el espacio disponible, sin deformar ni alterar las proporciones originales.
| Tamaño | Uso recomendado |
|---|---|
| 16 px | Información secundaria, etiquetas y elementos compactos. |
| 20 px | Controles y componentes de tamaño reducido. |
| 24 px | Tamaño predeterminado para botones, navegación y acciones. |
| 32 px | Elementos destacados o contenidos que requieren mayor jerarquía. |
Estos valores son referenciales y deben validarse con la escala definitiva de la biblioteca.
Uso con texto
Ubica el ícono antes o después de la etiqueta según la acción que representa. Mantén siempre una separación consistente y procura que ambos elementos se perciban como una sola unidad.
- Usa ícono y texto en acciones que puedan resultar nuevas o ambiguas para las personas.
- Usa un ícono sin etiqueta solo cuando su significado sea ampliamente reconocido, como cerrar o buscar.
- Incorpora un nombre accesible en controles que muestren únicamente un ícono.
Color
El color del ícono debe responder al contexto y asegurar un contraste suficiente con el fondo. Usa los colores definidos por el sistema y reserva los colores semánticos para comunicar estados como éxito, advertencia, error o información.
No uses el color del ícono como único recurso para expresar un estado. Refuerza el mensaje con texto, una etiqueta u otra señal visual.
Buenas prácticas
| Haz | Evita |
|---|---|
| Utilizar íconos disponibles en la biblioteca oficial. | Mezclar íconos de estilos o bibliotecas diferentes. |
| Mantener el tamaño, grosor y proporciones originales. | Estirar, rotar o modificar la forma del ícono. |
| Acompañar con texto los símbolos poco conocidos. | Asumir que todas las personas interpretarán el ícono del mismo modo. |
| Verificar el contraste en todos los estados. | Usar íconos decorativos que distraigan del contenido. |
Accesibilidad
Los íconos decorativos deben ocultarse de las tecnologías de asistencia. Cuando un ícono comunica información o funciona como control, debe contar con una etiqueta accesible que describa su propósito, no su apariencia.
Por ejemplo, un botón con un ícono de papelera debería anunciarse como “Eliminar documento” y no como “Ícono de papelera”.
Recursos
Consulta la biblioteca de íconos para conocer los recursos disponibles, sus nombres y las indicaciones de implementación.