Icons

Using icons consistently across products reduces the learning curve and reinforces brand awareness.


3 simple rules to live by

1 set to fit all products
4 icon sizes
2 icon colors

EOS icons

EOS icons is a handcrafted iconic font designed using the open_in_new Opens in a new tabMaterial Design iconography guidelines. It has been designed to cover the needs of SUSE's cutting edge software solutions. It uses ligatures and is downloadable as an open source project in open_in_new Opens in a new tabGitlab. Have a look at the open_in_new Opens in a new tabEOS icons website and easily find and select icons with its ligature for later implementation.

Outlined icons

Using the outlined theme from EOS icons is of high importance to staying in line with SUSE's brand which uses art-line graphical elements to communicate a more modern look following the Infinity design principle.

Icon sizes

48px
36px
24px
18px

EOS icons have been designed to work and look perfect at: 18px, 24px, 36px, and 48px. These are the recommended sizes for icons in all SUSE UIs.

Icon colors

White icon over dark background
Dark icon over white background

Icon usage in SUSE UIs comes down to chosing between 2 colors, dark gray and white, when placed on a light or dark background, respectively.

For inactive states, icons are slightly transparent.

Dark icon
Light icon
Light inactive
Dark inactive

* Note that by default all icons will inherit the text color of its parent container ($eos-bc-gray-1000 being the default text color). More info at: color guide.

* The usage of .eos-dark and .eos-light is only relevant in special use cases.