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

Icon sets

  • Material Design icons

    With over 900 different icons, recognized worldwide by Android, Chrome, and many other Google product users the Material Design icon font is the recommended iconic font to use in all openSUSE products. It uses ligatures, is open source on github, and provides a state of the art design guide. Material Design provides a cheatsheet to easily find and select icons with its ligature for later implementation.

    When using .png or .svg files instead of using the recommended web icon font provided by Material Design, you must use the Filled theme as this is the baseline theme included in the iconic font and is compliant with the EOS icon set.

  • EOS icons

    openSUSE products contain features and options that go beyond the scope of Material Design. The EOS icons are a handcrafted iconic font designed using the Material Design guidelines. They are 100% compliant with the MD icons, also use ligatures, and are downloadable as an open source project on gitlab.

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.