Icons

VUD icons serve as metaphors that allow you to perform specific actions or navigate through an interface.

CSS tokens

The following is a list of CSS tokens used to overwrite the standard/classic or dynamic action icons and worksurface icons. These tokens control the following aspects of the icons:

  • --ref-icon-default: controls the default icon colour
  • --ref-icon-emphasis: controls the hover icon colour state
  • --ref-icon-disabled: controls the disabled icon state

 

 

 

Colour tokens

The following design tokens define the colours for the icons:

ref / icon
#494a4a
default
Default icon refers to the standard or pre-set icon. Suitable for operating systems or software programs as a generic placeholder.
#ffffff
inverse
Inverse icon serves as the opposite of the default icon, specifically designed to contrast with the background.
#1482cc
emphasis
emphasis icon refers to an icon that is designed to draw attention and clearly indicates its interactive nature.
#d44f64
error
The error indicates the occurrence of an error or problem. Suitable for destructive icons.
#ca7900
warning
Warning icon serves as a visual cue to alert about potential issues, risks, or important information that requires attention.
#4e9c54
success
Success icon serves as a visual cue to convey that a task, action, or process has been completed successfully.
#8a8a8a
disabled
Disabled icon indicates that a particular function, feature, or control is currently disabled or unavailable.