Icon

Ver la demo

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

Un ícono del set Icon/* de Figma: 55 íconos de trazo 1.5 sobre caja 24 (página Icons). Hereda el color del texto o el modo de «Icon tone» del contenedor.

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

PropFigmaValoresPor defecto
namecomponente Icon/<name>55 nombres (componentes/iconos.generado.ts)—
sizeIcon/icon-4x · 5x · 6x4 (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-hidden por defecto; con label, 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.

Tokens que consume