Workflow Icons

Workflow icons are graphical metaphors or symbols that can be used to compliment existing experiences.

Example#

import Airplane from '@spectrum-icons/workflow/Airplane';

<Airplane />

import Airplane from '@spectrum-icons/workflow/Airplane';

<Airplane />

import Airplane from '@spectrum-icons/workflow/Airplane';

<Airplane />

Sizing#

Icons support t-shirt sizing. When used inside another React Spectrum component, they'll generally be sized automatically, but if you use icons standalone, you can use the size prop to control the sizing. The default size is "M" in medium scale (desktop), and "L" in large scale (mobile).

import Beaker from '@spectrum-icons/workflow/Beaker';

<Beaker size="XXS" />
<Beaker size="XS" />
<Beaker size="S" />
<Beaker size="M" />
<Beaker size="L" />
<Beaker size="XL" />
<Beaker size="XXL" />

import Beaker from '@spectrum-icons/workflow/Beaker';

<Beaker size="XXS" />
<Beaker size="XS" />
<Beaker size="S" />
<Beaker size="M" />
<Beaker size="L" />
<Beaker size="XL" />
<Beaker size="XXL" />

import Beaker from '@spectrum-icons/workflow/Beaker';

<Beaker size="XXS" />
<Beaker size="XS" />
<Beaker size="S" />
<Beaker size="M" />
<Beaker size="L" />
<Beaker size="XL" />
<Beaker size="XXL" />

Labeling#

By default, icons are considered decorative, and are hidden from assistive technology. When used within a component like a button that has no label, an aria-label should be provided to the parent component. If used standalone, an aria-label can be provided to the icon itself.

import LockClosed from '@spectrum-icons/workflow/LockClosed';

<LockClosed aria-label="Locked" />

import LockClosed from '@spectrum-icons/workflow/LockClosed';

<LockClosed aria-label="Locked" />

import LockClosed from '@spectrum-icons/workflow/LockClosed';

<LockClosed aria-label="Locked" />

Available Icons#

A searchable list of workflow icons is available on the Spectrum website. The name of the icon without any whitespace matches the import in React Spectrum.