14 · Un set propio de 24 px
Iconografía
Los íconos de Heliodore se dibujan con el mismo trazo redondeado que invita a tocar: sin relleno, de 2 px, con esquinas suaves. Cada estado tiene una forma única para no depender del color.
Haz clic en un ícono para ver su código y copiarlo. Cambia tamaño y grosor del trazo para ver cómo responde el set.
Descargar el sprite SVG (28 íconos)
Construcción
- Cuadrícula
- 24 × 24 px. Zona activa de 20 × 20 px con 2 px de margen.
- Trazo
- 2 px, siempre. Nunca 1 px ni rellenos sólidos.
- Extremos y uniones
- Redondos. Los vértices agudos solo en la punta de un triángulo de aviso.
- Esquinas
- Radio de 2 px en rectángulos; los círculos de 18 px de diámetro (radio 9).
- Peso óptico
- Cada ícono llena un 60 a 85 % de la zona activa: los más angostos se centran, no se agrandan.
- Color
- Hereda el del texto (
currentColor). Sobre Solar es Cristal. - Tamaños
- 16 px (en línea con texto), 24 px (estándar), 32 y 48 px (vacíos y portadas).
Íconos y estados
Cinco formas distintas, una por estado. Ningún estado comparte silueta con otro.
Reglas de uso
Sí
- Un ícono con significado lleva siempre una etiqueta visible o un nombre accesible
- Usar el mismo ícono para la misma idea en toda la app
- Alinear el ícono con la primera línea de texto, con 8 px de separación
- Íconos decorativos con
aria-hidden="true"
No
- Íconos solos para acciones no obvias (¿qué hace «⋯»?)
- Cruces rojas, cruces de farmacia o caduceos como adorno
- Mezclar este set con íconos de otro estilo
- Cambiar el grosor de un ícono para «destacarlo»