Icon

Icons serve as visual shortcuts and should ease wayfinding through a system. They are used to illustrate simple, usually single ideas such as search, help or forward. They are essential for navigation within digital media online or within iOS or Android applications.

Usage guidelines

When to use

• To attract attention and create a visual hierarchy
• Inside links or buttons, for system actions, success or error states etc.
• If possible, icons should be accompanied by text as this conveys the meaning better than icons alone

When not to use

• Use icons not only for decorative purposes!

Accessibility guidelines

Accessibility considerations

• Use icons in combination with text to ensure accessibility.
• For icons without accompanying UI text, you should also use an Aria label for the icon.

Specifications

Anatomy

1. Icon
2. Canvas area: The complete frame/boundary 24x24Px of an exported icon including grid area and icon.
3. Grid area: The frame within an icon can be placed.

Sizes

The Icons are available in 24x24 Pixels. They can be scaled to 16x16 Pixels and 12x12 Pixels if needed.

Styling

Variants

Every icon has two variants available: “outline” and “solid”.

Zurich Blue must be used unless there are specific requirements, than you can use different colors from the Zurich color palette.

Outline

Solid

Colors

Icons should exclusively use colors from our brand palette to help maintain a consistent and cohesive visual identity across all Zurich's user interfaces and applications.

Use only brand palette colors in icons.

Do not use colors from other palettes.

Sets

Icons are organized in 17 different sets. Check the icons section of the foundations to have a look to all the available icons.

Spacing

When used in components, such as buttons, the spacing is based on the attributes specified for the component. When icons are used next to text, the spacing should be at least 8px.

Usage Example

Don't use more than one icon in a button

Don't alter or distort the icon

Related components

• Buttons
• Input fields
• Navigation
• ShareBar
• Breadcrumbs