Workflow Icons

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

Example#

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).

Coloring#

Icons support four Spectrum semantic colors: negative, notice, positive, and informative. Icons within React Spectrum components typically have their colors styled appropriately, but you can use the color prop to adjust the color of any standalone icons.

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.

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.