Iconography

Icons in the design system are inline SVG. This provides the most flexibility for styling and prevents icons from loading slowly.

SVG icons

account
bolt
calendar
call
car
card
chat
circle
close
copy
currency-euro
dots
down
download
edit
elec
email
emergencies
error
euro
euro-raised
exit
facebook
footprint
fastclock
fees
fit
forward
france-map
gas
history
home
info
instagram
leaf
left
lightning
linkedin
lock
meter
minus
move
night
ok
= payments
plus
pocket
question
refer
right
rosette
scales
search
settings
smart-meter
space
spain-map
statement
success
texas-map
tick
top-up
top-up-online
turbine
twitter
uk-map
usage
warning
whatsapp
youtube
☝️ Research insight: During various testing sessions, such as for payments and dunning cycle, users noticed explanatory text more frequently when the content was highlighted by a hazard symbol. Use icons to bring attention to important text which users may otherwise miss.

title

Title allows you to insert invisible text for assistive software like screen readers. It's added as a title to the svg, has no effect on layout and is translatable by Google's translation service.

If the icon is purely decorative, it does not need to have a title.

<SvgIcon name="warning" title="Error" />

color

You can give the icon a specific fill color:

Avatar

Avatar shows a thumbnail representation of a person in the interface.

Size

Use the size prop to change the size of an icon. Size can be set by using space tokens, type tokens or a hardcoded size value.

Using space token

Using type token

Using a hardcoded size value