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.
Props
No props found for this component, run `yarn gen:docs` to generate component meta first.
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
html
<Icon :source="OrdersMajor" />
<p>No orders yet</p>
html
<Button :icon="CirclePlusMinor">Add a product</Button>
Related guidelines
- To learn about implementing Polaris icons with Polaris React in your projects, see the
@shopify/polaris-icons
documentation - To learn about the best practices for designing and using icons in your projects, see the icon design guidelines
- To learn how to name icons, see the icon naming guidelines