Componentes Índice de páginas
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.
-
10x10 px
-
14x14 px
-
16x16 px
-
24x24 px
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.
-
32x32 px
-
36x36 px
-
64x64 px
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 parametrosrole=img
yaria-label=[descripción de la acción]
. - Cuando utilices un icono de apoyo al contenido, asegúrate de que el elemento
svg
tiene los parametrosrole=presentation
yaria-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.