20 · Set de 24 px
Iconografía
Trazo, no relleno. Cada ícono se dibuja en una cuadrícula de 24 px con el mismo trazo y las mismas esquinas, para que una pantalla llena de íconos se vea como una sola mano.
Set base
Toca un ícono para copiar su SVG. Usa el control para ver cómo cambia el trazo. El valor oficial es 1,75.
Reglas de dibujo
- Cuadrícula
- 24 × 24, con 2 px de margen interno. La forma cabe en 20 × 20.
- Trazo
- 1,75 px, color
currentColor. Sin relleno, salvo puntos de 1 px. - Terminaciones
- Redondeadas. Uniones redondeadas.
- Esquinas
- Exteriores con radio 2 en contenedores; ángulos vivos solo en flechas y marcas.
- Metáfora
- Objetos reales y simples: un sobre para correo, un reloj para hora. Sin personajes ni caras.
- Tamaños
- 16 px en texto compacto, 20 px por defecto en botones, 24 px en navegación. Objetivo táctil de 44 px con espacio alrededor.
- Color
- Hereda el del texto. No se colorean los íconos: el color es de los productos.
- Texto asociado
- Un ícono solo lleva
aria-label; junto a texto es decorativo (aria-hidden).
Sí
- Un ícono por acción, siempre el mismo
- Íconos con texto en acciones nuevas
- Mismo trazo en toda la pantalla
No
- Mezclar trazo y relleno
- Íconos de otra librería junto a estos
- Usar un ícono como único aviso de un estado