Icon

Icons are used to visually communicate core parts of the product and available actions. They can act as wayfinding tools to help merchants more easily understand where they are in the product, and common interaction patterns that are available.

Examples

Use to visually communicate core parts of the product and available actions.

Drag to resize example

Props

accessibilityLabel
string
Descriptive text to be read to screenreaders
backdrop
boolean
Show a backdrop behind the icon
color
"white" | "black" | "skyLighter" | "skyLight" | "sky" | "skyDark" | "inkLightest" | "inkLighter" | "inkLight" | "ink" | "blueLighter" | "blueLight" | "blue" | "blueDark" | "blueDarker" | "indigoLighter" | "indigoLight" | "indigo" | "indigoDark" | "indigoDarker" | "tealLighter" | "tealLight" | "teal" | "tealDark" | "tealDarker" | "greenLighter" | "green" | "greenDark" | "yellowLighter" | "yellow" | "yellowDark" | "orange" | "redLighter" | "red" | "redDark" | "purple"
Set the color for the SVG fill
sourceRequired
React.ReactNode | React.SFC | SVGSource | "placeholder" | BundledIcon | UntrustedSVG
The SVG contents to display in the icon (icons should fit in a 20 × 20 pixel viewBox)
untrusted
boolean
Render the icon in an img element instead of an svg to prevent cross-site scripting

Accessibility

Using icons can be a great help to merchants who have difficulties with reading, language, attention, and low vision.

If the icon appears without text, then use the accessibilityLabel prop to give the icon a text alternative. This adds an aria-label that’s conveyed to screen reader users.

Do

  • Pair text and icons for clarity
  • Give the icon a text equivalent if its purpose isn’t conveyed in another way
  • Review our alternative text guidelines to make sure your use of icon works for all merchants
<Icon source={OrdersMajorTwotone} />
<p>No orders yet</p>
<Button icon={CirclePlusMinor}>Add a product</Button>

Don’t

  • Describe what the icon looks like
  • Include “icon” in the text equivalent
  • Duplicate adjacent text in the alternative text
  • Duplicate information provided programmatically
<Icon source={CirclePlusMinor} accessibilityLabel="Circle plus icon" />