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.
Use to visually communicate core parts of the product and available actions.
<Icon source="circlePlus" />
Put the merchant first by identifying the problem they face and the component that helps them solve it.
Merchants are pressed for time. They need visual ways to identify what’s happening in Shopify.
Icons can alert merchants to changes in status and make the interface easier to scan.
- Icons should be accessible: remember that people with 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.
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)