3 simple rules to live by
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
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; }linkIcon 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.
