Polaris icons act as visual aids to help merchants complete tasks. They should be used purposefully.
Polaris icons are simple and informative. Each icon builds on the visual language of the design system.
Simple over detailed
Detailed icons increase cognitive load. Focus on simplicity to help merchants:
- understand the concept the icon represents
- recognize the icon on smaller screens
Literal over abstract
Literal symbols are easier to understand than abstract symbols. Whenever possible, use symbols that represent the most basic idea or concept instead of a metaphorical one.
Sometimes concepts can’t be represented literally, for example:
- activities and actions, like gardening or eating
- professions, like an artist or doctor
- outcomes of an action, like right-aligned lines of text for a text alignment tool
When designing abstract concepts:
- follow the simple over detailed principle
- pick a logically related symbol, like a stethoscope for a doctor, or a shovel for gardening
Professional over fun
The design of an icon assists in communicating tone, much like the content it’s paired with. Focus on the effectiveness of the message instead of its ability to delight. In other words, prioritize representing the function, rather than how nice it looks.
Use established icons
Icons that have been used for a long time worldwide have a higher chance of being recognized and understood quickly. Don’t reinvent an icon that’s already been accepted as the convention.
For example, there are global, established conventions for concepts like “delete”, “settings”, and “search”. These symbols are effective, and don’t need to be redefined.
Limit icon variations
Use a single icon to represent variations of the same concept. For example, shipping settings, store settings, account settings, and any new settings should use the cog icon. Don’t create a custom icon for each of these concepts—it bloats the icon library and makes it difficult for merchants to create strong connections around a concept.
Pair icons with text
The purpose on an icon is to clarify the content by providing a visual cue and improve legibility and scannability of the user interface. In general, icons should be placed near a label or title. Never use an icon to replace a name of a product or feature.
There are rare exceptions where icons are universally understood actions, like with the trash can icon that represents deletions, and pin icons for pinning items like products. Whenever using an icon to represent an action, make sure to check that it’s commonly understood in other countries.
Keep internationalization in mind
Whenever possible, use a universally recognized icon. However, there will be times where only a locally understood icon will work to communicate a concept. When deciding what symbol should be used, check that it will be understood at a glance by people from different cultures and backgrounds. For example, the $ (dollar sign) would only symbolize money in certain locations like North America, so a more general symbol should be used for global currency. However, when using an icon for currency conversion it’s better to use the local currency symbols that are being converted.
To represent global currency in spot icons:
When to use icons
Icons are powerful visual helpers and should be used with care. Overuse quickly results in user interfaces 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 (such as an announcement or an error)
- 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
System icons are meant to help merchants wayfind and shouldn’t be ornamental. System icons:
- are 16 × 16 or 20 × 20 pixels (px) in size
- are within a 20 × 20 px bounding box
- use a 2 px stroke weight
They’re smaller than spot icons because they’re always applied in product experiences where it’s important that they compliment the user experience and not overpower it. They should represent a specific action, object, or concept.
For example, we wouldn’t use a discounts system icon to decorate a promotional announcement about discounts, but we would use the discounts icon in the Shopify admin’s sidebar to help identify where to configure store discounts.
Spot icons are rarely used in product experiences since they have a marketing purpose. One instance where it might show up is on a sell page in product.
- are 41 × 41 px in size
- are within a 45 × 45 px bounding box
- use a 3 px stroke weight
Spot icons are bigger than system icons and have a stronger stroke weight to add visual balance to the layout of marketing focused pages. They help with wayfinding and sentiment.
Spot icons can help with wayfinding by:
- helping merchants make quicker decisions when there are options available in front of them
- being paired with instructional text
Spot icons can help with defining sentiment by:
- piquing interest in the concept they’re representing
- tieing a selling point/feature to a visual concept or emotion
- optimizing for engagement by being slightly more aspirational
The paper with the graph does a good job of being professional over fun and literal over abstract. It would fit well as a system icon. But with spot icons in a marketing experience, being aspirational and abstract sparks emotion and engagement. In a marketing experience, the boost arrow does a better job of expressing the excitement of generating more sales.
Using systems icons in your designs
Polaris system icons come in two styles: minor and major.
- Minor icons are designed within a 16 px square but are always given a 20 × 20 px bounding box. Minor icons mainly use solid shapes and have a single color variant.
- Major icons are designed within a 20 px square. They mainly use strokes and have a 2-tone variant that includes white highlights.
Both major and minor icons are always displayed within a 20 px square bounding box and should not be used at any other size.
Use minor and major icons at 20 px
Use minor and major icons at other sizes, including at even multiples
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 (
<button>, and so on)
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 color for minor icons
Use any other colors for major icons
Download the Sketch UI kit or explore Polaris icons.