Shopify uses a precise iconographic system to communicate visually and directly with merchants.
This section will help you understand how we approach iconography.
Polaris icons are simple and informative. Each icon builds on the visual language of the design system, and represents the simplest version of the idea.
Icons aren’t ornamental. They should bring clarity to a subject, or indicate important actions or sections.
Icons should be consistent, not only in their look and feel but in their use throughout Shopify.
Most Polaris icons have been designed for a specific use. Using multiple icons to represent the same concept not only increases cognitive load, but dilutes the efficacy of the icon and the relationship between the icon and the idea.
Icons are at their strongest when combined with text. Whenever an icon is used, it should be used in conjunction with a label or title.
When to use icons
Icons are powerful visual helpers, and should be used with care. Overuse quickly results in UIs that are visually overwhelming or distracting.
Icons are commonly used:
- In primary navigation
- In page headers and section titles
- In banners to bring attention to a specific theme (an announcement, an error, etc.)
- Inline with text to add clarity
- To direct a user’s attention to something they can take action on, or which results in an action
Using icons in your designs
Polaris icons come in two base sizes: 16px and 20px, referred to as
major icons respectively. Polaris icons should not be rescaled or used at any other size.
majoricons at 20px
minoricons at 16px
majoricons at any size other than 20px
minoricons at any size other than 16px
Major and minor usage examples
When using Polaris icons, it’s important to identify their use case first, as this dictates the type of icon to be used.
Minor icons are used:
- Inline, usually accompanying text, to add clarity to an action
- In form elements (
Major icons are used:
- In main navigation in apps, mobile web and web
- To help promote, reinforce, or draw special attention to a specific area or metaphor
Apart from their use in main navigation, major icons are not actionable or clickable.
Use minor icons in buttons
Use minor icons in main navigation
Polaris icons have two predefined color styles: monotone and duotone. The monotone variant is the default style.
#31373Dfor fills and strokes
- Major icons don’t have fills in the monotone style
- Use for both major and minor icons
#919EABfor strokes, and
- Use for major icons only
In some instances, major icons may require an active state. When this is necessary, use:
#5C6AC4for strokes, and
#5C6AC4(50% opacity) for fills
In most cases, both major and minor icons should be used on a light background. In instances where a dark background is required, use:
- Monotone color style using
Use the monotone style for minor icons
Use the monotone style for major icons
Use duotone, or any other single colour for minor icons
Use any other colors for major icons