Icons
Using icons consistently across products reduces the learning curve and reinforces brand awareness.
3 simple rules to live by
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
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.
face
face
face
face/* Sizing variables */
$eos-18: 18px;
$eos-24: 24px;
$eos-36: 36px;
$eos-48: 48px;
/* Rules for sizing the icon. */
.eos-18 { font-size: $eos-18; }
.eos-24 { font-size: $eos-24; }
.eos-36 { font-size: $eos-36; }
.eos-48 { font-size: $eos-48; }Icon colors
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.
face
face
face
face* 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.
