Iconography

The line is an evolving design element; extending all the way down to our icons. To connect with our shared path concept, we always offer a line break, rarely closing the circuit.

Due to sizing limitations of icons, we always use a solid line, keep the design simple and use color to draw attention.

Download

UPDATED May 15, 2020

Principles

We have created 5 easy principles to ensure that our icons give the audience quick understanding of an issue and are always visually linked to SUSE.

Using a 100x100px grid as basis, a 10x10 network grid within it, and a line stroke of 2pt will give you the best result.
Complex shapes are not closed. If shapes overlap, we create a gap between these two elements.
The strokes have round edges and endings.
 
We can always find a circle as reference to our anchor point in our icons.
Parts of the icons can be symmetrical, but the overall composition should have asymmetry for balance.

Colors

Our icons are as colorful as our overall design system. To ensure that they are still one family, we have a few rules we need to stick to.

The primary color of the icons is our jungle green.
We can apply up to two of our secondary colors to create highlights. We never use pine as an icon color.
The choice of color should work over dark and light backgrounds. You might need to switch jungle and sea foam.

Dont’s

Our illustrations should be just as unconventional as we are. To be certain that they match our overall appearance, one thing we make sure of is that they aren’t too interchangeable.


Closed shapes
Three-dimensional icons
Thin line weight or dotted lines
Too many colors

Icons


Product Icons

Product Icons

Download

Webicons

Download