Iconography

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.

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

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.

Jungle is our Primary color
The primary color of the icons is our jungle green.      
Using secondary colors for highlights
We can apply up to two of our secondary colors to create highlights. We never use pine as an icon color.  
Color choice should work on light and dark backgrounds
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
Closed shapes
three-dimensional icons
Three-dimensional icons
thin lines and dots
Thin line weight or dotted lines
too many colors
Too many colors

Icons

Product Icons

Product Icons

Download

Webicons

Webicons

Download