Skip to content

Icons

Our icon library is built on the principles of balance, clarity, and inclusivity. The icons are used in everything from navigation, components, and on their own.
Figma logo

Usage

In Figma, you can find a list of available icons in the Workbench UI Kit, or search the Workbench Design system within a Figma file.

In code, icons are individually exported as React components from the @gusto/workbench-icons package.

See the full Icon component documentation for more details.

import { ArrowSync } from '@gusto/workbench-icons';

Icons in Workbench are sized 16×16. We don’t recommend changing their size.

The default color for Workbench icons is salt-800. Icons in Link, IconButton, or Button components should match the text color. In cases where salt-800 does not meet accessible contrast requirements, icons should match the text/foreground color of its associated element.

For questions about updating or adding icons, please reach out to Design Systems directly on Slack in #design-systems.

Icons follow the same contrast guidelines as text.