Skip to content 
Pictogram
Zurich Pictograms are characterized by a consistent look using brand colors and contained within a circle. They are often used to highlight and emphasize an important aspect, making some information more compelling and memorable for the user.
UX/UI Guidelines
Check the design documentation of the component in ZeroHeight.
From Figma to code
...
Customization
INFO
Check everything about the customization mechanics in the "How it works" documentation.
| CSS Variable | Type | Description |
|---|---|---|
--z-pictogram--size | distance | Total size of the pictogram |
--z-pictogram--bg | color |
The size of the pictogram can be customized using the --z-pictogram--size CSS custom property or the custom attribute.