Icons

Polaris icons act as visual aids to help merchants complete tasks. They should be used purposefully.


Icon principles

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

Do

Icon of a website wireframe with a mouse cursor

Don’t

Icon of a screw driver, hammer, and detailed background

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.

Do

Headset icon

Don’t

Life preserver icon

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.

Do

Clock icon

Don’t

Rabbit icon


Icon guidelines

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.

Do

Trash can icon for delete, cog icon for settings, and magnifying glass icon for search

Don’t

New, unique icons for delete, settings, and search

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.

Do

Cog icon

Don’t

Three unique icons for settings. One has a cog on a list to represent DNS settings, one has a cog in front of a storefront to represent store settings, and another is a cog with a shopping tag to represent product settings

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.

Do

Down arrow icon paired with the word import and up arrow icon paired with the word export

Don’t

Down arrow icon and up arrow icon without text

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:

Do

Paper money with two arrows on the outside border to represent a financial exchange

Don’t

A circle with the dollar symbol inside


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

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.

Do

Discounts icon of a division sign shown in side navigation next to the Discounts nav item

Don’t

Discounts icon of a division sign shown above a new discounts feature announcement


Spot icons

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.

Spot icons:

  • 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

Do

Two icons used in a sell page about web hosting: a globe with an arrow representing domains, and an infinite symbol representing unlimited bandwidth

Don’t

Spot icon representing a domain in the lower-right corner of an announcement in the admin

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.

Do

Upward arrow icon with a line on either side to give it a moving-upwards effect

Don’t

A chart icon with an upward graph line


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 (<input>, <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

Color

Polaris icons have two predefined color styles: monotone and duotone. The monotone variant is the default style.

Monotone:

  • #31373D for fills and strokes
  • Major icons don’t have fills in the monotone style
  • Use for both major and minor icons

Duotone:

  • #919EAB for strokes, and #FFF for fills
  • Use for major icons only

In some instances, major icons may require an active state. When this is necessary, use:

  • #5C6AC4 for 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 #FFF instead
  • 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


Resources