DESY

Sistema de Diseño del Gobierno de Aragón

Iconos

Información visual

Familias de iconos Streamline que mantienen una coherencia visual y que pueden servir como elementos de apoyo o para indicar una determinada acción.

Puedes consultar más información sobre los iconos e ilustraciones en estilos de imágenes.

Para accionables y apoyo a etiquetas

Tamaños menores o iguales a 24px.

Usos de los iconos grandes según sus dimensiones
10x10 px Accionables del árbol
14x14 px Botones de tamaño pequeño
16x16 px Accionables en general y apoyo a etiquetas de texto base
24x24 px

Como apoyo visual

Tamaños mayores a 24px.

Usos de los iconos grandes según sus dimensiones
32x32 px Item
36x36 px Cards
64x64 px Modales

Accesibilidad

  • Cuando utilices un accionable con icono sin etiqueta de texto, asegúrate de que el elemento svg tiene los parametros role=img y aria-label=[descripción de la acción].
  • Cuando utilices un icono de apoyo al contenido, asegúrate de que el elemento svg tiene los parametros role=presentation y aria-hidden=true.

Buenas prácticas

  • Por lo general no se recomienda usar accionables solo con icono, pero se pueden emplear en casos en los que el espacio sea muy reducido, sea imposible incluir la etiqueta y siempre que la acción que representa el icono sea inequívoca y clara. En tal caso se recomienda incluir un globo de ayuda o title en el componente.