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

arrow-down-medium

arrow-drop-down

arrow-drop-up

arrow-left-medium

arrow-left-small

arrow-long-left

arrow-long-right

arrow-right-small

arrow-to-top

arrow-up-medium

arrow-up-small

basket

book

bookmark

bullet-list

chat

close-fullscreen

comment

double-arrow-backward

double-arrow-down

double-arrow-forward

double-arrow-up

download

facebook

feed

google

heart

instagram

layout-2x2

layout-3x2

layout-3x3

layout-list

left-right

location-pin

log-in

log-out

minus

pause

play

plus

reload

replay

scale-down

scale-up

shopping-cart

snippet

text-check

twitter

upload

user

video-hd

video-skip-backward

video-skip-forward

video-stop

view-carousel

youtube

bell

filter

settings

moon

sun

nine-dots

dots-ellipsis-vertical

dots-ellipsis-horizontal

smiley-positive

smiley-neutral

smiley-negative

360-grad

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