Icons and pictograms

Icons and pictograms are a visual extension of our typeface Aino Headline.

Both our typeface and illustrations are distinguished by an airy, broken line.

1

Icons

Small, simple graphic symbol used mainly in user interfaces to represent an action, object, or function.

1 2

Pictograms

More illustrative symbol used to communicate information or concepts.

When and how to use icons

Icons are primarily used in user interfaces to support navigation and improve the user experience.

  • The default icon size is 24 px and their stroke width is 2 px.
Navigation and buttons

Navigation and buttons

Open the icon library in FigmaOpen the icon library in toolbox

Graphic design

View guidelines and examples in the design system

When and how to use pictograms

Pictograms are a clear and effective way to convey a topic, action or feeling.

  • The default size of pictograms is 64 px, and their stroke width is 2 px.
  • The minimum size of pictograms is 48 px.
Animatsion

Web design

View guidelines in the digital design system (DDS 2.0)

Graphic design

View guidelines and examples in the design system

Creating icons and pictograms

Didn’t find a suitable icon or pictogram? Create one and share it with the community.

  • Reduce the depicted form to simple geometric shapes.
  • Represent the resulting form using outlines only, adding details where necessary.
  • Keep in mind that in the Estonian brand design system, lines are dashed.
Animatsion

Web design

View guidelines in the digital design system (DDS 2.0)

Pictograms as illustrations

Pictograms can also be used as illustrative elements in social media, printed materials and environmental graphics.

When using pictograms, ensure that the stroke width matches the letterforms of Aino Headline.

Aino Headline and the pictogram use the same stroke width.

Aino Headline and the pictogram use the same stroke width.

Aino Headline has a thicker stroke than the pictogram.

Aino Headline has a thicker stroke than the pictogram.

The pictogram has a thicker stroke than Aino Headline.

The pictogram has a thicker stroke than Aino Headline.

The height of the pictogram extends slightly above the letter height of Aino Headline.

The height of the pictogram extends slightly above the letter height of Aino Headline.

Web design

View guidelines in the digital design system (DDS 2.0)