Icons

Shopify uses a precise iconographic system to communicate visually and directly with merchants.

This section will help you understand how we approach iconography.


Principles

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 base sizes: 16px and 20px, referred to as minor and major icons respectively. Polaris icons should not be rescaled or used at any other size.

  • Use major icons at 20px

  • Use minor icons at 16px

  • Use major icons at any size other than 20px

  • Use minor icons 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 (<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

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 colour for minor icons

  • Use any other colors for major icons