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.

Usage guidelines

When to use

To visualize information and make it memorable for the user
To highlight a message or important aspect
To make messages easier to understand
To draw attention to areas of interest

Accessibility

Accessibility considerations

Pictograms must have appropriate contrast against the surrounding background.

Specifications

Anatomy

Illustration
Background in circle shape: available in dark or light mode

Sizes

Our pictograms are designed as rounded 140x140 px elements. You can scale them to your needs, if necessary.

Styling

In many situations, a simple icon falls short to illustrate a certain context. This is where pictograms become useful as they have a more complex design, include more colors and give a more detailed visualization of the context they represent.

They are available in two different color sets:

dark (with light-blue background)
light (with Zurich-white background)

When you choose a theme, make sure the pictogram stands out from the background and complies with accessibility guidelines.

Brand palette colors must be used unless there are specific requirements. You can use an accent color from the secondary palette to replace Sandstone (dark theme) or Light Blue (light theme).