Core Concepts
1. Theming & Design2. Design Tokens3. Media Queries4. Animation5. CSS in JS6. ConfigurationComponents
Content
CardPackages
Toggle theme
Icon🔗
Icons are used to visually communicate core parts of the product and available actions. They can act as wayfinding tools to help users more easily understand where they are in the product, and common interaction patterns that are available.
Every icon is carefully crafted for a specific size and only available sizes can be used.
Basic Example🔗
Size🔗
Coloring🔗
The Icon component only accepts the five foreground colors.
All Icons🔗
You can just click any Icon to copy the required code to your clipboard
core🔗
30daystrial
🔗360camera
🔗alarm
🔗avatar
🔗award
🔗blocked
🔗calendar
🔗checkmark
🔗citydriving
🔗coffee
🔗connectivity
🔗copy
🔗date
🔗delete
🔗designyourown
🔗device
🔗ecoleather
🔗edit
🔗electrification
🔗error
🔗extendedperiod
🔗externallink
🔗facemask
🔗fallbackimage
🔗favorite
🔗filter
🔗guardingservices
🔗highwaypilot
🔗incentives
🔗info
🔗insurance
🔗leaf
🔗link
🔗list
🔗locked
🔗mixeddriving
🔗more
🔗multipechoice
🔗multiplechoice
🔗nocosts
🔗nofilter
🔗offergeneric
🔗ownersmanual
🔗paperdownload
🔗papertemplate
🔗profile
🔗recycle
🔗refresh
🔗remote
🔗road
🔗sale
🔗salesforce
🔗save
🔗savings
🔗search
🔗settings
🔗shop
🔗smartphone
🔗speaker
🔗star
🔗support
🔗sustainablematerial
🔗taxes
🔗throwback
🔗time
🔗usflag
🔗warninghazard
🔗warranty
🔗wireless
🔗car🔗
alcolock
🔗aqi
🔗audio
🔗awd
🔗battery
🔗batterysoftware
🔗blis
🔗camera
🔗car
🔗carbattery
🔗carside
🔗ccs
🔗ccsdc
🔗charging
🔗citysafety
🔗cta
🔗driveralert
🔗electric
🔗engine
🔗fan
🔗features
🔗fuel
🔗fwd
🔗hud
🔗hybrid
🔗key
🔗moonroof
🔗performance
🔗road
🔗seats
🔗service
🔗size
🔗slipperyroad
🔗speedcap
🔗steeringwheel
🔗transmission
🔗trunkspace
🔗type2
🔗type2ac
🔗wheel
🔗navigation🔗
arrowback
🔗arrowdown
🔗arrowsort
🔗arrowup
🔗chevronback
🔗chevrondown
🔗chevronforward
🔗chevronup
🔗close
🔗minus
🔗plus
🔗search
🔗office🔗
avinstallation
🔗avinstallationrequest
🔗cleaning
🔗elevator
🔗furniture
🔗furniturerequest
🔗homework
🔗lawnmower
🔗meetingroom
🔗moving
🔗movingrequest
🔗newareainsysenv
🔗officearea
🔗officeconsumablesroom
🔗officesupplies
🔗otherfacilityfaults
🔗property
🔗propertyinside
🔗propertyoutside
🔗restaurantcafeteria
🔗restroom
🔗retailer
🔗securityequipment
🔗workdesk
🔗workplacelayout
🔗workplacelayoutrequest
🔗workshop
🔗other🔗
360view
🔗barchart
🔗chart
🔗circulareconomy
🔗cogwheels
🔗diamond
🔗emission
🔗envoymachine
🔗handshake
🔗massbalance
🔗screw
🔗traceablecobolt
🔗trophy
🔗Accessibility🔗
By default, Icons will render with a role of presentation.
If an icon is rendered standalone with no text context it needs to have a text describing it to screen reader users. Passing a label prop will render the Icon with an alt text.
Props - Icon🔗
Name | Description | Type | Default Value |
|---|---|---|---|
color | "primary" ｜ "secondary" ｜ "inverted" ｜ "alert" ｜ "action" ｜ undefined | primary | |
label | string ｜ undefined | `` | |
type | "30daystrial-40" ｜ "360camera-32" ｜ "360camera-40" ｜ "alarm-24" ｜ "alarm-32" ｜ "alarm-40" ｜ "avatar-24" ｜ "avatar-40" ｜ "award-24" ｜ "award-40" ｜ "blocked-16" ｜ "blocked-24" ｜ ... 413 more ... ｜ "wireless-40" | n/a |