Iconografía e imágenes
Sistema de iconos Solar, tamaños por contexto de uso y reglas de aplicación.
Sistema de iconos
El área de desarrollo de sistemas define un conjunto de iconos base de uso recomendado para garantizar coherencia visual entre sistemas. Se utilizará la biblioteca Solar, disponible en formato SVG y como componentes de framework.
| Tamaño | Dimensión | Contexto de uso |
|---|---|---|
| Extra pequeño | 16 × 16 px | Inline con texto, badges |
| Pequeño (sm) | 20 × 20 px | Dentro de botones compactos |
| Estándar (md) | 24 × 24 px | Íconos de navegación, acciones |
| Grande (lg) | 32 × 32 px | Encabezados de sección, ilustrativo |
| Extra grande (xl) | 48 × 48 px | Pantallas vacías, ilustraciones |
Solar Icon Set en su variante Linear como default. La variante Bold se reserva para el ítem activo de la navegación.
Tamaños
Sets representativos
home-2
users-group
book-2
calendar
card
medal-ribbons-star
chart-2
settings
magnifer
bell
check-circle
danger-triangle
info-circle
document-text
inbox
user-circle
Variantes
Reglas de uso de iconos
- Siempre acompañar los íconos con texto descriptivo, excepto en casos donde el contexto hace el significado inequívoco (ej.: lupa de búsqueda en un campo de búsqueda).
- Los íconos funcionales deben tener un
aria-labeldescriptivo. - No usar más de un ícono para representar el mismo concepto en el mismo sistema.
- Los íconos animados solo se usan para indicar estados de carga o transiciones, nunca decorativos.