Icon guides

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:

• CSS code snippet
• Implementation examples

/* 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; }

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

<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:

• CSS code snippet
• Implementation examples

/* 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); }

<i class='material-icons md-dark'>face</i>
<i class='material-icons md-dark md-inactive'>face</i>

<i class='material-icons md-light'>face</i>
<i class='material-icons md-light md-inactive'>face</i>

<i class='eos-icons md-dark'>miscellaneous</i>
<i class='eos-icons md-dark md-inactive'>miscellaneous</i>

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