Ficha
- Categoría
- Foundations · Icons
- Nivel
- átomo
- Estado
- en revisión
- Radix
- no
- Actualizado
- 2026-10-26
- Figma
- 369:814
- Fuente
design-system/componentes/Icon.md
Cuándo usarlo
- Dentro de Button, IconButton, Objective, StepItem, Avatar (Kind=icon) y RailItem, siempre decorativo.
- Como imagen con significado propio solo con
label(role=img).
Cuándo NO usarlo
- El isotipo del coach → IsotipoCoach (DV-19).
- Ilustraciones o fotos → Imagery / Placeholder.
Anatomía
<svg data-icon viewBox="0 0 24 24"> con N <path> de trazo redondeado; vector-effect: non-scaling-stroke mantiene 1.5 en 16, 20 y 24.
Props
| Prop | Figma | Valores | Por defecto |
|---|---|---|---|
name | componente Icon/<name> | 55 nombres (componentes/iconos.generado.ts) | — |
size | Icon/icon-4x · 5x · 6x | 4 (16) · 5 (20) · 6 (24) | 5 |
label | — (solo código) | texto | — (decorativo) |
Estados
Sin estados propios. El color viene de currentColor o de --icon-tone (utilidades icon-tone-neutral · muted · mid · action · on-primary · positive · disabled).
Accesibilidad
aria-hiddenpor defecto; conlabel,role="img"+aria-label.- El trazo no escala: 1.5 en todos los tamaños, igual que en Figma.
Contenido
Nombres en kebab-case iguales a Figma (arrow-up, mic, x). Un ícono nuevo se crea en Figma y se regenera con pnpm iconos.
Errores conocidos
- Ninguno medido. El generador falla si un ícono no mide 24×24, no es trazo 1.5 o lleva relleno.
Changelog
- 2026-10-26 · nace (T-02), generado desde los 55 SVG de Figma.