Principios
- Propósito: Cada icono debe tener un propósito claramente entendible dentro del contexto.
- Entendible: El icono sin texto debe evitarse, salvo cuando su significado es universal (por ejemplo: cerrar).
Librería de iconos
Material Icons
Material Icons es la librería base principal para todas las interfaces GCBA y se debe cumplir con 2 características principales:
- Tienen que ser "rounded", es decir su morfología esta definida por tener bordes redondeados. Siempre van a estar compuestos por una class="material-icons-round".
- Siempre tienen que ser sólidos o rellenos.: No utilizar íconos "outline" o con borde.
Box Icons
Los iconos de redes sociales utilizan la librería Box icons, ya que Material Icons no incluye iconografía de marcas. Su uso debe limitarse exclusivamente a estos casos.
Iconos personalizados
Para items que no tienen equivalentes en Material/Boxicons , por ejemplo, íconos de bancos o marcas oficiales del GCBA, usaremos los iconos personalizados definidos por Obelisco V2.
Tamaño y escala
Los iconos siguen una base 24px que permite que los iconos se escalen de forma lineal (up/down) sin perder claridad.
| Ícono | Clase |
|---|---|
| 24 px | Tamaño estándar UI (botones, menús, listas). |
| 16 px | Sólo donde el espacio sea crítico y el símbolo sea comprensible. |
| ≥32 px | Para indicadores visuales grandes. |
| 64 px | Evitar, salvo ilustraciones/pictogramas especializadas. |
Color
Los iconos siguen una base 24px que permite que los iconos se escalen de forma lineal (up/down) sin perder claridad.
Por defecto, los iconos deben usar el color base de íconos de la UI (neutro).
No utilizar íconos de librerías que no estén en Obelisco.
Accesibilidad
Los iconos deben ser comprensibles y utilizables por todas las personas, incluyendo quienes utilizan tecnologías asistivas.
Lineamientos generales
- No deben transmitir información únicamente mediante el color.
- Deben mantener contraste suficiente con el fondo.
- El tamaño base recomendado es 24 px, asegurando buena legibilidad.
Iconos decorativos
Cuando el icono no aporta información ni acción, debe ocultarse a lectores de pantalla. No debe recibir foco ni interferir con la navegación.
Iconos informativos
Si el icono comunica un estado o significado, debe tener un nombre accesible (por ejemplo, mediantearia-label) o estar acompañado por texto visible que explique su propósito.
Iconos interactivos
Cuando el icono ejecuta una acción:
- Debe estar dentro de un elemento interactivo real (ej. <button>).
- Debe tener un nombre accesible claro.
- Debe contar con foco visible.
- Los iconos interactivos deben cumplir con WCAG 2.2. Success Criterion 2.5.8 Target Size (Minimum) (Level AA)asegurando un área mínima de 24 x 24 px.
- Se recomienda ampliar el área interactiva a 44 x 44 px en contextos táctiles para mejorar la usabilidad.Success Criterion 2.5.5 Target Size (Enhanced)(Level AAA).