01 Fundamentos · 06
Iconografía
Los iconos son etiquetas, no ilustraciones. Heredan el color y desaparecen en el trabajo.
Dos niveles
Los iconos de producto vienen de la biblioteca Glass en Nucleo — la fuente oficial. Cada glifo tiene dos capas: una forma sólida más una capa translúcida superpuesta. Profundidad sin sombras, consistente con la regla de elevación. Se exportan a 24px; se usan a 20–24px. Glass vive en la navegación de módulos, iconos de features, estados vacíos y onboarding. La licencia es por asiento — pide acceso al equipo de diseño.
Los glifos utilitarios dentro de controles — cerrar, flecha, buscar, más — usan el set de trazo del código, abajo. Nunca se mezclan los dos estilos en la misma fila o grupo.
Construcción — el set utilitario
- Retícula de 16×16, trazo de 1.5px.
- Remates y uniones redondeados,
fill="none". - Primero contorno. Rellenos sólidos solo para estados activos.
- Dos tamaños: 16px dentro de controles y navegación, 20px independiente.
Color
Siempre currentColor. En reposo: tinta atenuada. Hover: tinta. Activo o seleccionado: tinta de acento — o blanco sobre el riel oscuro. Nunca colores decorativos en los iconos.
El isotipo no es un icono
Nunca uses la marca dentro de espacios de icono, filas de glifos de navegación ni iconos de botón. Es la marca — reservada para momentos de marca: lockups del logotipo, el avatar del agente, sellos.