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 accepts the five VCC UI foreground colors or an arbitrary CSS color string.

Most interactive icons would use the IconButton component or other existing compositions. If you need a reference to the icon file you can use the getIcon method exposed on the theme.

<Click
  extend={({ theme }) => ({
    ':hover': {
      '> img': {
        content: `url(${theme.getIcon('alert-32', 'action')})`,
      },
    },
  })}
>
  Alert
  <Icon type="alert-32" />
</Click>

All Icons

Click any icon to copy the required code to your clipboard

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