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

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