System icons

The System icons helps the user to easily identify features and functions.

Icon search

You can click any icon identifier/name to copy it's markup into your clipboard.

Regular

add
addCircle
agent
alarm
analysis
announcement
applyFilter
apps
archive
areaSelect
areaZoom
arrowDoubleDown
arrowDoubleRight
arrowDoubleLeft
arrowDoubleUp
arrowFirstLeft
arrowFirstTop
arrowHierarchy
arrowLastBottom
arrowLastRight
arrowSingleDown
arrowSingleLeft
arrowSingleRight
arrowSingleUp
arrowStemSingleDown
arrowStemSingleLeft
arrowStemSingleRight
arrowStemSingleUp
aspects
asset
assetNetwork
asterisk
attachment
attachment
attention
audit
backButtonNarrow
backward
bookmark
boxPlot
buildingBlock
calendar
calendarDay
calendarWeek
camera
cancel
cancelCircle
certificate
chart
chartBarHorizontal
chartBarStacked
chartBarVertical
chartDonut
chartDurationCurve
chartGantt
chartGauge
chartHeatmap
chartLine
chartMap
chartPie
chartPolar
chartRadar
chartSankey
chartTrend
chartValueHorizontal
chartValueVertical
check
clipboard
clipboardCheck
clipboardInvalid
clock
clone
code
coin
coinStack
collapse
comment
commentAlternative
compare
control
conversation
copy
counter
createWorkbook
cut
dashboard
dashboardAlternative
dashboardSmall
dashforward
dataManagement
dataMapping
dataSource
boolean
delete
desktop
double
download
dragDrop
draggable
dropzone
draw
duplicate
exclamationMark
edit
editDocument
electricity
element
email
emoteHappy
emoteNeutral
emoteSad
enum
enumList
errorAlert
exclamationDiamond
exit
expand
export
factory
factoryMagnifier
feedback
fileTree
filetypeApp
filetypeArchive
filetypeDefault
filetypeDrawing
filetypeEMail
filetypeImage
filetypeJSON
filetypeMisc
filetypePDF
filetypeSound
filetypeTable
filetypeText
filetypeVideo
filetypeXML
filter
filterAlternative
filterHide
filterList
filterShow
flagSmall
flash
flow
folder
forward
frames
fullscreen
fullscreenExit
gearBox
globalSettings
graph
hatMan
headline
headset
heart
help
hierarchy
home
image
import
indent
information
integer
italic
kpi
legal
length
limitsHidden
limitsShown
link
linkArrow
linkDissolve
listBullet
listBulletMinus
listBulletPlus
listSorted
listSortedAlternative
locationMarker
lockClosed
lockOpened
machineA
machineB
machineC
maintenance
map
mapAlternative
measure
menu
mobile
moon
moonSun
more
moreAlternative
move
moveToTop
mqtt
movie
navigateLeftSmall
navigateRightSmall
next
note
notification
notificationSquare
ok
outdent
outgoing
outgoingExtSmall
outgoingInApp
outgoingInMdsp
outgoingSmall
package
paperPlay
parameter
paste
pause
person
personMultiple
phone
play
plc
pressure
preview
previous
printer
provider
question
questionMark
quote
record
redo
reload
remove
removeCircle
reorder
restricted
robot
roles
rolesApp
rolesStandard
rules
save
scale
scope
scopeAlternative
search
selectAll
selectNone
separatorLine
serviceCredential
settings
settingsAlternative
share
shareAlternative
shift
shoppingCart
sidebar
sidebarHide
sidebarShow
sms
sort
sortAscending
sortDescending
speedometer
split
star
starHalf
statusOn
statusOff
stop
stopwatch
storage
strikethrough
string
stringList
strong
subtenant
subtenant2
subtenant3
subtenant4
subtenantSmall
sun
tableCreate
tag
tagAlternative
temperature
thermometer
thumbDown
thumbUp
ticket
tile
timeSeriesImport
timeZone
train
types
underline
undo
update
updateAvailable
updateGear
updateNotification
upload
variable
version
virtualHidden
virtualShown
visibilityHidden
visibilityShown
voltage
watch
weatherCloudy
weatherPartlyCloudy
weatherRain
weatherSnow
weatherStorm
weatherSunny
weatherSunrise
weatherSunset
weatherThunder
widget
widgetDetails
zoomIn
zoomOut

Bold

add
addCircle
agent
alarm
analysis
announcement
apps
archive
areaSelect
areaZoom
arrowDoubleDown
arrowDoubleLeft
arrowDoubleRight
arrowDoubleUp
arrowFirstLeft
arrowFirstTop
arrowHierarchy
arrowLastBottom
arrowLastRight
arrowSingleDown
arrowSingleLeft
arrowSingleRight
arrowSingleUp
arrowStemSingleDown
arrowStemSingleLeft
arrowStemSingleRight
arrowStemSingleUp
aspects
asset
assetNetwork
asterisk
attachment
attention
audit
backButtonNarrow
backward
bookmark
boxPlot
buildingBlock
calendar
calendarDay
calendarWeek
camera
cancel
cancelCircle
certificate
chart
chartBarHorizontal
chartBarStacked
chartBarVertical
chartDonut
chartDurationCurve
chartGantt
chartGauge
chartHeatmap
chartLine
chartMap
chartPie
chartPolar
chartRadar
chartSankey
chartTrend
chartValueHorizontal
chartValueVertical
check
clipboard
clipboardCheck
clipboardInvalid
clock
clone
code
coin
coinStack
comment
commentAlternative
compare
control
conversation
counter
createWorkbook
cut
dashboard
dashboardAlternative
dashboardSmall
dashforward
dataManagement
dataMapping
dataSource
boolean
delete
desktop
double
download
graph
headline
heart
dragDrop
draggable
dropzone
duplicate
edit
editDocument
electricity
element
email
emoteHappy
emoteNeutral
emoteSad
enum
enumList
errorAlert
exclamationDiamond
exclamationMark
exit
expand
export
factoryMagnifier
fileTree
filetypeApp
filetypeArchive
filetypeDefault
filetypeDrawing
filetypeEMail
filetypeImage
filetypeJSON
filetypeMisc
filetypePDF
filetypeSound
filetypeTable
filetypeText
filetypeVideo
filetypeXML
filter
filterAlternative
filterList
flow
folder
forward
frames
fullscreen
fullscreenExit
gearBox
globalSettings
goTo
hierarchy
home
image
import
indent
information
integer
italic
kpi
length
limitsHidden
limitsShown
link
listBullet
listSorted
listSortedAlternative
locationMarker
lockClosed
lockOpened
machineA
machineB
machineC
maintenance
map
mapAlternative
measure
menu
mobile
moon
moonSun
more
moreAlternative
move
moveToTop
movie
mqtt
navigateLeftSmall
navigateRightSmall
notification
notificationSquare
ok
outdent
outgoing
outgoingExtSmall
outgoingInApp
outgoingInMdsp
outgoingSmall
package
parameter
paste
pause
person
personMultiple
phone
play
plc
pressure
previous
printer
question
questionMark
quote
record
redo
reload
remove
removeCircle
reorder
restricted
roles
save
scope
search
separatorLine
settings
settingsAlternative
share
shareAlternative
shoppingCart
sidebar
sidebarHide
sidebarShow
sort
speedometer
split
star
statusOff
statusOn
stop
stopwatch
storage
subtenant
subtenant2
subtenant3
subtenantSmall
strikethrough
string
stringList
strong
sun
tableCreate
tag
tagAlternative
temperature
thermometer
thumbDown
thumbUp
ticket
tile
timeZone
train
types
underline
undo
update
updateGear
upload
variable
version
virtualHidden
virtualShown
visibilityHidden
visibilityShown
voltage
watch
weatherCloudy
weatherPartlyCloudy
weatherRain
weatherSnow
weatherStorm
weatherSunny
weatherSunrise
weatherSunset
weatherThunder
widget
zoomIn
zoomOut

Filled

add
addCircle
agent
alarm
analysis
announcement
apps
archive
areaSelect
areaZoom
arrowDownExtraSmall
arrowFirstLeft
arrowFirstTop
arrowHierarchy
arrowLastBottom
arrowLastRight
arrowLeftExtraSmall
arrowRightExtraSmall
arrowSingleDown
arrowSingleLeft
arrowSingleRight
arrowSingleUp
arrowStemSingleDown
arrowStemSingleLeft
arrowStemSingleRight
arrowStemSingleUp
arrowUpExtraSmall
aspects
asset
assetNetwork
asterisk
attachment
attention
audit
backward
bookmark
boxPlot
buildingBlock
calendar
calendarDay
calendarWeek
camera
cancel
cancelCircle
certificate
chart
chartBarHorizontal
chartBarStacked
chartBarVertical
chartDonut
chartDurationCurve
chartGantt
chartGauge
chartHeatmap
chartLine
chartMap
chartPie
chartPolar
chartRadar
chartSankey
chartTrend
chartValueHorizontal
chartValueVertical
check
clipboard
clipboardCheck
clipboardInvalid
clock
clone
code
comment
commentAlternative
compare
coin
coinStack
control
conversation
counter
createWorkbook
cut
dashboard
dashboardAlternative
dashboardSmall
dashforward
dataManagement
dataMapping
dataSource
boolean
delete
desktop
double
download
dragDrop
draggable
dropzone
duplicate
draw
edit
editDocument
electricity
element
email
emoteHappy
emoteNeutral
emoteSad
enum
enumList
errorAlert
exclamationDiamond
exit
expand
export
factory
factoryMagnifier
fileTree
filetypeApp
filetypeArchive
filetypeDefault
filetypeDrawing
filetypeEMail
filetypeImage
filetypeJSON
filetypeMisc
filetypePDF
filetypeSound
filetypeTable
filetypeText
filetypeVideo
filetypeXML
filter
filterAlternative
filterList
flagSmall
flash
flow
folder
forward
frames
fullscreen
fullscreenExit
gearBox
globalSettings
graph
hatMan
headset
heart
hierarchy
home
iconMissing
image
import
information
integer
kpi
legal
length
link
listBullet
listSortedAlternative
locationMarker
lockClosed
lockOpened
machineA
machineB
machineC
maintenance
map
mapAlternative
measure
menu
mobile
moon
moonSun
more
moreAlternative
move
moveToTop
movie
mqtt
next
note
notification
notificationSquare
ok
outgoing
outgoingInApp
outgoingInMdsp
outgoingSmall
package
paste
pause
person
personMultiple
phone
play
plc
pressure
previous
printer
question
record
redo
reload
remove
removeCircle
reorder
restricted
roles
rules
save
scale
scope
scopeAlternative
search
selectAll
selectNone
serviceCredential
settings
share
shareAlternative
shift
shoppingCart
sidebar
sidebarHide
sidebarShow
sort
speedometer
split
star
starHalf
statusOff
statusOn
stop
stopwatch
storage
string
stringList
subtenant
subtenant2
subtenantSmall
sun
tag
tagAlternative
temperature
thermometer
thumbDown
thumbUp
ticket
tile
timeZone
train
types
update
undo
updateGear
updateNotification
upload
variable
version
visibilityHidden
visibilityShown
voltage
watch
weatherCloudy
weatherPartlyCloudy
weatherRain
weatherSnow
weatherStorm
weatherSunny
weatherSunrise
weatherSunset
weatherThunder
widget
zoomIn
zoomOut

Usage

When to use

Use system icons in the following cases:

  • For buttons, to support the meaning of the label.
  • For other elements, to visually structure or help identify the elements.
  • To replace large text in minute spaces.

Types

The system icons are available in the following sizes:

  • 24x24px
  • 16x16px
  • 8x8px

These are scalable in a ratio @2x. It is recommended to have a minimum of 2x2 units for the smallest part of any icon. Since pixel perfection is preferred, do not use halftone dots.

system-icons-usage-types-sizes

1. 8x8px - caret in selects, 2. 16x16px - inline icons in texts, 3. 24x24px - all button icons

Categories

The following categories are available: action, alert, audiovisual, communication, content, device, editor, file, hardware, image, map, navigation, notification, places, social and toggle. Each icon shall be assigned to one specific category.

system-icons-usage-types-categories

Category examples: 1. Alert, 2. Navigation, 3. Types / Devices

General construction

1. Consistent visual language

Icons with related meaning should keep the primary image content consistent to make them easy to recognize.

system-icons-usage-general-construction

1. Asset, 2. Asset move, 3. Asset network

2. Grid

Maintain the grid accuracy and do not dismiss safety margin. Since the icons must also work for very small sizes, low resolution of icons must be handled carefully while designing.

system-icons-usage-general-construction2

Schematic representation in the scale 4:1 – 1. Overall image size (24px), 2. Maximum icon size (20px), 3. Preferred attribute position (12px)

Depending on the format, the icons differ in their perceived size. This difference should be considered when designing and should be balanced.

system-icons-usage-general-construction3

1. Square, 2. Circle, 3. Rectangle vertical (portrait), 4. Rectangle horizontal (landscape)

Options

Use the icons in regular style for standard use. Solid icons are used for active or pressed states. The bold variant is a supplement to the two basic versions. It is used additionally when the two standard versions are not sufficient.

system-icons-usage-options

1. Solid: active state, 2. Bold: only on request, 3. Regular: standard use

system-icons-options-example-filter

1. No filter active, 2. Filter active

Do’s & Don’ts

system-icons-usage-dodont

  • Maintain consistency with the font weights in the same context and state.
  • Do not use different font weights of icons within the same context and with the same state or importance.

Style

This chapter shows several system icon styles in the User Experience Toolkit.

Overview

Buttons

system-icons-style-button

1. Buttons with text, 2. Icon only buttons

Messages

system-icons-style-messages

Messages with different severity type

Color

As a rule, icons inherit their color from sibling or parent elements. However, depending on the state or context of the icon, the color can be chosen within a reasonable range of contrast.

Sizing and Spacing

Scaling

It is always recommended to scale icons by the factor of two.

system-icons-style-scaling

1. Scaled twice: Minimum object size: 8px, 2. Scaled once, 3. Actual size: Minimum object size: 2px

Actual sizes

system-icons-style-sizing

Sizing of images, icons and attributes: 1. Overall image size, 2. Maximum icon size, 3. Maximum attribute size

Visual equalization

Visual equalization is necessary to make the icons look the same size.

system-icons-style-size-compensation

1. Square (18x18px), 2. Circle (20x20px), 3. Rectangle portrait (16x20px), 4. Rectangle landscape (20x16px)

Please note that the icons delivered with this web-font only work when encapsulated / contained within an element with the .uxt .uxt-defaults classes.

Icon integration

<i aria-hidden="true" class="iconUxt grid"></i>
<i aria-hidden="true" class="iconUxt grid bold"></i>
<i aria-hidden="true" class="iconUxt grid filled"></i>

We offer some utility classes in order to rotate, flip, or mirror an icon:

Icon utility classes

<i aria-hidden="true" class="iconUxt image"></i>
<i aria-hidden="true" class="iconUxt image is-rotated-90"></i>
<i aria-hidden="true" class="iconUxt image is-rotated-180"></i>
<i aria-hidden="true" class="iconUxt image is-rotated-270"></i>
<i aria-hidden="true" class="iconUxt image is-flipped-vertical"></i>
<i aria-hidden="true" class="iconUxt image is-flipped-horizontal"></i>
<i aria-hidden="true" class="iconUxt image is-flipped"></i>
Except where otherwise noted, content on this site is licensed under the Development License Agreement.
Back to top