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.

Be clear

Icons aren’t ornamental. They should bring clarity to a subject, or indicate important actions or sections.

Be consistent

Icons should be consistent, not only in their look and feel but in their use throughout Shopify.

Be specific

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.

Be paired

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 styles: minor and major.

  • Minor icons are designed within a 16px square but are always given a 20 × 20px bounding box. Minor icons mainly use solid shapes and have a single color variant.
  • Major icons are designed within a 20px 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 20px square bounding box and should not be used at any other size.

  • Use minor and major icons at 20px

  • 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>, etc.)

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.


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


  • #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