Hero Image

Foundation

Iconography

The main purpose is to make things easier. But for us, they are equally important proof that we are in the entertainment industry. Our iconography has a twinkle in the eye.

They have a fairly simple manner that fits both us and our products brand expressions. In terms of motifs, we choose unexpected motifs that will make the viewer smile.

The icons are mainly developed for our digital channels, but can also be used in other communication.

We share icon manners with Svenska Spel Tur and Svenska Spel Sport & Casino - but the motives may differ.

Function icons

The function icons are a bit simpler in nature and will in some cases appear without any descriptive text. They therefore need to be self-explanatory and clear to the customer. They are drawn in a 48x48 px grid to work in small sizes.

icons

Our navigation icons will often be in a slightly larger size and always with a descriptive text. This means that the choice of motif can be even more expressive and unexpected. They are drawn in a 48x48 px grid to work in small sizes.

Navigation icons

Creating new icons

Icon with measurements

When we develop new icons, we start from a grid template with the dimensions 48x48 px.

Thickness, corners and ends for lines

To create a cohesive expression, we draw our icons at certain specific angles and always use hard corners and hard ends on lines.

Approve angles for icons

Style

Our icons are stylized and based on geometric shapes. This makes them clear and well-functioning even in small sizes.

Do: consistent shapes

Do

Use geometric and consistent shapes.
Don´t: realistic or organic shapes

Don't

Avoid realistic or organic shapes

Pixel perfect

Pixel perfect icon next to broken one

We avoid distorting the icons, by drawing them "pixel-perfect" on the grid.

Perceived size

Our icons often appear next to each other, which means that they need to be perceived as being the same size. This means that some of the motifs should not use the entire grid, as in that case they will be perceived as larger than other motifs.

Perceived size of two icons

Lines and filling

Do: equally thick lines

Do

Use equally thick lines.
Don´t: Fill icon

Don't

Avoid filling icons.

Resources