Skip to content 
SmilingZ
The Isotype or Smiling Z it's a Logo variant that may be used on its own in certain cases, but the Zurich logo is only complete with the wordmark accompanied by the Isotype.
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-smiling-z--fill | color | Fill color |
--z-smiling-z--size | distance | Size of the Smiling Z |
Both the color and the size of the z-smiling-z can be customized using the --z-smiling-z--fill and --z-smiling-z--size CSS custom properties respectively.