Iconos

Los iconos son assets SVG del sistema, optimizados para uso en interfaz. Se incluyen como imágenes independientes mediante <img> o embebidos directamente como SVG inline cuando se necesite control de color con CSS.

Los archivos fuente están en public/assets/icons/ del repositorio.

Catálogo

add

article

attach-file

back

check

credit-card

delete

description

dots

edit

error

file

filter

filter-list

filter-arrow-down

filter-arrow-up

forward

keyboard-arrow-down

keyboard-arrow-up

keyboard-arrow-left

keyboard-arrow-right

logout

person

person-add

sync

tune

unfold

visibility

visibility-off

warning

Tamaños recomendados

El sistema no define tokens de tamaño de icono, pero sigue estas convenciones:

16 px — contextos compactos: dentro de badges, etiquetas o texto de formulario.
20 px — uso estándar en botones y controles.
24 px — icono destacado o con área de toque amplia.

16 px

20 px

24 px

Accesibilidad

Icono decorativo (acompañado de texto visible): alt="" para que los lectores de pantalla lo ignoren.
Icono significativo (único elemento comunicativo): alt="Descripción de la acción".
Cuando el icono está dentro de un <button>, el texto accesible viene del aria-label del botón.

<!-- Decorativo: el texto del botón ya lo describe -->
<button type="button">
  <img src="../assets/public/icons/search.svg" width="20" height="20" alt="">
  Buscar
</button>

<!-- Significativo: el icono es el único contenido del botón -->
<button type="button" aria-label="Buscar">
  <img src="../assets/public/icons/search.svg" width="20" height="20" alt="">
</button>