Brand Style Guide: Iconography

Iconography

To save time and make icons consistent, our brand uses Google Material icons which consist with over 2,500 icons with a wide range of design variants. Symbols are available in three styles and four adjustable variable styles (fill, weight, grade, and optical size).

Google Icon Library

First steps

Google Material Symbols

Use Material Symbols & Icons

https://fonts.google.com/icons

Fill 0 and Weight 300 settings

Use correct setting

Settings can be changed if needed. Just use them consistently

Adjust and fine tune

Use Material Symbols & Icons

Adjust stroke width, corners & other details

Adjusting & Fine Tune

Most Material icons will have to be adjusted, use these examples to make a consistent and cohesive shape library.

Fills to outlines

In some cases it's suggested to change filled shapes to outlined strokes, to achieve more consistent look.

Before
Filled padlock icon
After
Outlined padlock icon

Same width outlines

Adjust various size shapes and outlines to same uniform width.

Before
Monitor icon with uneven outlines
After
Monitor icon with uniform outlines

Sharp corners

Use sharp corners to achieve more consistent look and add a contrast between rounded shapes and sharp corners.

Before
Plug icon with rounded corners
After
Plug icon with sharp corners

Fixing & adjusting

Some icons are clumsy and inconsistent, fix and adjust them to achieve uniform look.

Before
Clumsy hand icon
After
Adjusted hand icon
Adjusted Material icon set

Summary

  1. 01

    Use Google Material icons

  2. 02

    Adjust icons and save them for later use

  3. 03

    Make all icons compatible with each other in weight and size