Icons
The approved set of icons is provided as an included icon font.
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
360-degrees
apps
arrow-down-large-light
arrow-down-large
arrow-down-medium-light
arrow-down-medium
arrow-down-small-light
arrow-down-small
arrow-left-large-light
arrow-left-large
arrow-left-medium-light
arrow-left-medium
arrow-left-small-light
arrow-left-small
arrow-long-left
arrow-long-right
arrow-right-large-light
arrow-right-large
arrow-right-medium-light
arrow-right-medium
arrow-right-small-light
arrow-right-small
arrow-to-top-light
arrow-to-top
arrow-up-large-light
arrow-up-large
arrow-up-medium-light
arrow-up-medium
arrow-up-small-light
arrow-up-small
arrow
at
bell
book
bookmark
bullet-list
calculate
calendar
chat
check
close-fullscreen
close
comment
delete
department
document
dots-ellipsis-horizontal
dots-ellipsis-vertical
double-arrow-backward
double-arrow-down-light
double-arrow-down
double-arrow-forward
double-arrow-up-light
double-arrow-up
download
duration
edit
email
equipment-name
facebook
favorite
favorite-off
feed
filter
fullscreen
google
heart
help
hide
home
hospital
id-card
information
instagram
label
layout-2x2
layout-3x2
layout-3x3
layout-list
level-up
like
linkedin
location-pin
locked
log-in
log-out
menu
minus
movie
pause
phone
play
plus
podcast
portfolio
print
private
qr-bar-code
question
reload
scale-down
scale-up
search
send-message
settings
share
shopping-cart
show
slider-drag-drop
snippet
speakers-off
speakers-on
start-video-call
support
text-check
time
tool
twitter
upload
user
video-hd
video-skip-backward
video-skip-forward
video-stop
view-carousel
warning
world
youtube
<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.