The SUSE Design System uses cookies to help us learn more about how we can improve the design system.
Learn more about our cookie policy

info
Didn’t find the component you were looking for? Take a look on what’s coming next or contact us.
Looking for components? what’s next or contact us.
close

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

linkEOS icons

EOS icons is a handcrafted iconic font designed using the Material 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 Gitlab. There is a comprehensive cheatsheet available to easily find and select icons with its ligature for later implementation.

linkIcon sizes

master48px
master36px
master24px
master18px

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.

facefacefaceface
content_copy
content_copylaunch

linkIcon colors

#FFFFFFcontent_copy
critical_bug
critical_bug
#141823content_copy

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.

faceDark icon
face
Light icon
face
Light inactive
faceDark inactive
content_copy

* 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.