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

Edit preferences

Icon guides

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


3 simple rules to live by:

2 icon sets made to coexist

miscellaneousmiscellaneous
miscellaneousmiscellaneous

4 icon sizes

miscellaneous
miscellaneous

2 icon colors

EOS icons

EOS icons is an open source 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 icons cheatsheet available to easily find and select icons with its ligature for later implementation.

Icon sizes

Both MD icons and 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 openSUSE UIs.

In order to be compliant, follow MD icons class names to size both MD icons and EOS icons:

/* Rules for sizing the icon. */
.md-18 { font-size: 18px; }
.md-24 { font-size: 24px; }
.md-36 { font-size: 36px; }
.md-48 { font-size: 48px; }
Implementation example with MD icon
facefacefaceface
<i class='material-icons md-18'>face</i>
<i class='material-icons md-24'>face</i>
<i class='material-icons md-36'>face</i>
<i class='material-icons md-48'>face</i>
Implementation example with EOS icon
miscellaneousmiscellaneousmiscellaneousmiscellaneous
<i class='eos-icons md-18'>miscellaneous</i>
<i class='eos-icons md-24'>miscellaneous</i>
<i class='eos-icons md-36'>miscellaneous</i>
<i class='eos-icons md-48'>miscellaneous</i>

Icon colors

Icon usage in openSUSE 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.

In order to be compliant, use MD class names as required below:

/* Rules for using icons as black on a light background. */
.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }

/* Rules for using icons as white on a dark background. */
.material-icons.md-light { color: rgba(255, 255, 255, 1); } // or $sb-white from brand color variables
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }
faceface
<i class='material-icons md-dark'>face</i>
<i class='material-icons md-dark md-inactive'>face</i>
faceface
<i class='material-icons md-light'>face</i>
<i class='material-icons md-light md-inactive'>face</i>
miscellaneousmiscellaneous
<i class='eos-icons md-dark'>miscellaneous</i>
<i class='eos-icons md-dark md-inactive'>miscellaneous</i>
miscellaneousmiscellaneous
<i class='eos-icons md-light'>miscellaneous</i>
<i class='eos-icons md-light md-inactive'>miscellaneous</i>

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

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