Icons Updated in 3.5
The next level icon set is provided as an included icon font. Alternativly an SVG sprite and single SVGs are available.
Icons should be used to reinforce the meaning of the text. They can also help structure content for a better grasp of information. The icon font includes a bunch of icons for many applications. Icons can be inserted easily by applying ‘icon-name’ as an elements class.
If you need icons that are not in the library, you must have them approved via the approval process.
Technically all icons are available in any size or color, since they are a vector-based icon font. The appropriate size and color are defined by the component that is using the icon.
As a general rule icons are displayed in SH Black(60) on light and SH Black(40) on dark background. See Colors for detail.
Icon list
<i class="icon-[name]"></i>Dos and don’ts
- Do use applicable colors defined by the component’s specification.
- Do use icons only for the meaning that is defined by their icon name.
- Do not combine icons to create new meanings.
- Do not use icons without text when their meaning is not unique.