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"
Sets the color for the SVG fill
sourceRequired
SVGSource | "placeholder" | "add" | "alert" | "arrowDown" | "arrowLeft" | "arrowRight" | "arrowUp" | "arrowUpDown" | "calendar" | "cancel" | "cancelSmall" | "caretDown" | "caretUp" | "checkmark" | "chevronDown" | "chevronLeft" | "chevronRight" | "chevronUp" | "circleCancel" | "circleChevronDown" | "circleChevronLeft" | "circleChevronRight" | "circleChevronUp" | "circlePlus" | "conversation" | "delete" | "disable" | "dispute" | "duplicate" | "embed" | "export" | "external" | "help" | "horizontalDots" | "import" | "notes" | "notification" | "print" | "refresh" | "risk" | "save" | "search" | "subtract" | "view"
The SVG contents to display in the icon

Best practices

  • Icons should be accessible: remember that people with limited vision may not be able to see icons. Review our alternative text guidelines to make sure your use of icon works for all merchants.

Content guidelines

Alternative text (alt text)

Screen readers read alt text for icons on hover. Use alt text (accessibilityLabel prop or aria-label attribute) to communicate icon meaning.

Alt text should be written in plain language:

  • Keep it short by excluding unnecessary words
  • Write in the active voice
  • Use words and language that our merchants use (avoid technical jargon)