import { Meta } from '@storybook/addon-docs'; import image1 from './assets/iconos/iconos_globales.png' import image2 from './assets/iconos/pictogramas.png' # Iconos y pictogramas Los iconos y pictogramas del sistema de diseño de la Seguridad Social tienen como función principal reforzar la interfaz de usuario, facilitando la interacción con los servicios digitales de la Administración. Estos símbolos visuales también pueden ayudar a identificar información importante. ### Iconografía La iconografía requerida en un sistema de diseño es muy amplia y abundante. Esto supone un gran esfuerzo tanto en el diseño inicial como en el mantenimiento y la escalabilidad de la iconografía, dado que constantemente pueden surgir nuevas necesidades que requiriesen la creación de nuevos iconos para representar ideas o conceptos no incluidos. Teniendo en cuenta el principio de economía de diseño, la iconografía empleada por **Grafito** es la diseñada por [**IBM para Carbon**](https://href.li/?https://www.carbondesignsystem.com/guidelines/icons/library/). Se trata de una iconografía de código abierto que es mantenida frecuentemente y está siempre accesible. Al contrario que otras librerías de iconos que han sido creadas con un propósito general, estos iconos, aún partiendo de conceptos e ideas genéricos y de patrones que están presentes en el imaginario colectivo de una parte importante de la población, proporcionan un grupo de iconos más abundante y específico, y un lenguaje iconográfico especial, más exclusivo y empresarial, al estar específicamente diseñado para un sistema de diseño de ámbito profesional. Los componentes de **Grafito** usan típicamente iconos sobre paneles de 16px, aunque otros tamaños como 20px, 24px y 32px pueden ser utilizados siempre y cuando se empleen de manera consistente y coherente respecto al resto de los elementos. Los iconos de 16px y 20px están optimizados para que se acompañen con las tipografías Lato de 14pt y 16pt, los iconos mayores se pueden utilizar cuando se requieran según el diseño global.
Los iconos siempre se proporcionan en un color sólido y monocromático dado que necesitan cumplir los mismos ratios de contraste que las tipografías, y siempre de manera consistente con estas en cuanto al tamaño. Los iconos se presentan siempre centrados respecto a los textos que acompañan y en el mismo color que estos, sin variaciones de interacción, o con las mismas variaciones de interacción de estos si fuera necesario. ### Pictogramas Los pictogramas se utilizan para comunicar de un vistazo y simplificar ideas complejas. Hay muchos ejemplos de uso de pictogramas para websites, productos, señalización, material comercial… El uso correcto de estos supone una elegante adición a la experiencia global. Los pictogramas pueden ser productivos y expresivos y se han de usar en diferentes contextos, según la presencia de diseño requerida y la complejidad visual deseada. Los pictogramas se deben usar como ilustraciones, con un tamaño suficiente para su percepción y comprensión, se recomienda un tamaño mínimo de 48px aunque otros tamaños son aceptables.
Los pictogramas se deben usar como imágenes, y como tales su posición preferente es centrada, no asociados a un texto específico, y, habitualmente, dentro de otros elementos que actúen como contenedores (círculos, rectángulos…), siempre con los elementos de espaciado adecuados y cumpliendo los ratios de contraste adecuados con los fondos. **Grafito** empleará como referencia la amplia librería de pictogramas proporcionada por [**IBM para Carbon**](https://href.li/?https://www.carbondesignsystem.com/guidelines/pictograms/library), aunque dado que el requerimiento de los pictogramas suele ser la representación de conceptos específicos de cada producto, se requerirá la elaboración a medida de pictogramas que represente los conceptos requeridos por la Seguridad Social. Se recomienda que el diseño de los nuevos pictogramas sea coherente con los diseños proporcionados en Carbon.