05
Iconografía
Los íconos diseñados en el sistema de diseño del Banco Popular, están diseñados para ser simples, intuitivos, accesibles
Variantes
Existen dos tipos de iconos:
•
Iconos sin contenedor
Se deben usar cuando es un elemento clickable dentro de otro componente (ejemplo: Input). El icono seleccionado, debe ir semánticamente conforme a la acción a la cual se esta invitando al usuario a realizar.
•
Iconos con contenedor
Se deben usar como elementos decorativos e informativos dentro de cards, o elementos de navegación como headers y footers. Siempre deben complementar la información de los textos.
Uso del color
Con el fin de garantizar la legibilidad y accesibilidad de los iconos, el uso del color debe ser el siguiente:
•
Icono sin contenedor
- Icono izquierda: Debe complementar la información del texto
- Texto: Debe ser un texto corto que vaya acorde a la acción que realiza
- Icono derecho: Debe complementar la información del texto
- Borde radio: Todas las esquinas de los botones deben tener un radio de 8px, a excepción del tamaño xs, el cual deberá ir con un borde radio de 4px
- Background: Debe tener el color Primary 600
•
Icono verde con contenedor
El contenedor debe ser del color Brand 100, mientras que el color del icono debe ser Brand 900. De esta manera el icono será accesible.
This is fine 🔥 | All Rights Reserved
05
Iconografía
Los íconos diseñados en el sistema de diseño del Banco Popular, están diseñados para ser simples, intuitivos, accesibles
Variantes
Existen dos tipos de iconos:
•
Iconos sin contenedor
Se deben usar cuando es un elemento clickable dentro de otro componente (ejemplo: Input). El icono seleccionado, debe ir semánticamente conforme a la acción a la cual se esta invitando al usuario a realizar.
•
Iconos con contenedor
Se deben usar como elementos decorativos e informativos dentro de cards, o elementos de navegación como headers y footers. Siempre deben complementar la información de los textos.
Uso del color
Con el fin de garantizar la legibilidad y accesibilidad de los iconos, el uso del color debe ser el siguiente:
•
Icono sin contenedor
El color del icono debe ser Secondary-900. De esta manera el icono será accesible.
El tamaño mínimo de este ícono es de 24px
•
Icono verde con contenedor
El contenedor debe ser del color Brand 100, mientras que el color del icono debe ser Brand 900. De esta manera el icono será accesible.
This is fine 🔥 | All Rights Reserved
05
Iconografía
Los iconos diseñados en el sistema de diseño del Banco Popular, están diseñados para ser simples, intuitivos, accesibles y comunicativos.
Variantes
Existen dos tipos de iconos:
•
Iconos sin contenedor
Se deben usar cuando es un elemento clickable dentro de otro componente (ejemplo: Input). El icono seleccionado, debe ir semánticamente conforme a la acción a la cual se esta invitando al usuario a realizar.
•
Iconos con contenedor
Se deben usar como elementos decorativos e informativos dentro de cards, o elementos de navegación como headers y footers. Siempre deben complementar la información de los textos.
Uso del color
Con el fin de garantizar la legibilidad y accesibilidad de los iconos, el uso del color debe ser el siguiente:
•
Icono sin contenedor
El color del icono debe ser Secondary-900. De esta manera el icono será accesible.
El tamaño mínimo de este ícono es de 24px
•
Icono verde con contenedor
El contenedor debe ser del color Brand 100, mientras que el color del icono debe ser Brand 900. De esta manera el icono será accesible.
This is fine 🔥 | All Rights Reserved