Skip to contentShopify logoPolaris

Icons → Creating icons

Icons enhance an experience by providing intuitive and efficient navigation, conveying information concisely, and making it more visually appealing.

Grid and keylines

The icon grid and keylines ensure consistent sizing of icons in the Shopify admin.

A 20 pixels square grid with an icon in a 16 px square.

The icon container is 20 × 20 px. The content of an icon should be confined within a safe space of 16 × 16 px.

A 20 pixels square grid with an icon in a 16 pixels square, with an element sticking out slightly.

No part of an icon can go beyond the 16 × 16 px safe area. Anything outside it will get clipped when resized for mobile experiences.

Four icons that fit inside the following grids: 13x13 pixels square, 14x14 pixels circle, 14x12 pixels rectangles, horizontal and vertical.

The overall shape of an icon can vary from a circle to a square, or from a tall rectangle to a wide one. Always start with the following keylines, so that all icons have the same visual weight.

Four icons that stick our slightly from the the following grids: 13x13 pixels square, 14x14 pixels circle, 14x12 pixels rectangles, horizontal and vertical.

These guidelines are a starting point, not a hard constraint. If it makes the concept stronger or keeps the icon optically aligned, it’s ok to deviate.

Design guidelines

Consistent use of stroke widths, style and metaphor is necessary for icons to feel streamlined in the admin.

An archive box and a building represented in two dimensions.
Do

Ensure that icons are two-dimensional, and objects face forward.

An archive box and a building represented with a perspective.
Don't

Use perspective and 3D objects

A package and a globe represented with slight hints of a third dimension.
Caution

Subtle hints of a third dimension are acceptable when necessary for conceptual clarity.

A presentation board icon centered in a 20 pixel square.
Do

Center icons in their container. Adjust optically if needed.

Three simple icons made with simple geometric shapes representing a smile, a scroll and a page
Do

Use simple geometric shapes, angles, and rounded corners.

Three icons made with organic shapes and small details representing a pin, a bell and a christmas tree.
Don't

Use excessive details or organic shapes.

A shopping cart with solid speed lines behind.
Do

Use a consistent visual style, stroke weight and only one color.

A shopping cart with semi-transparent speed lines behind.
Don't

Use transparency.

Filled vs Outlined

The default style of icons used throughout the admin is outlined. Usage of filled icons is strictly reserved for the main admin navigation and specific, semi-permanent states.

Shopify’s admin interface with search open, showing a few results that use different icons like a person, a tag, or an inbox, to differentiate the types of results.
A settings navigation menu with icons differentiating each item in the menu. All icons are filled expect for the one selected that is outlined.
Do

Only use filled icons in the main navigation.

A filled icons with a pin.
Do

Use filled icons for semi-permanent selected states, like pinning an app.

A filled icon within a blue badge.
Don't

Use filled icons to create emphasis.

Designing outlined icons

An inbox icon where the outline stroke is highlighted.

Stroke weight is 1.5px

An inbox icon where the alignment with the pixel grid is highlighted.

Since the stroke has half a pixel, one side of the stroke should always be aligned with the pixel grid.

A clock icon highlighting the alignment with 0.25 pixels increments.

Exceptions are allowed for optical adjustments, as long as they fall on 0.25 px increments.

A Shopping card icons with the stroke terminals highlighted.

Terminals are round, even when a shape cuts out into another.

A calendar, an inbox and a shop icon with the corner radius highlighted. 3 pixels for the calendar, 2 pixels for the inbox and 1 pixel for the inbox.

Corner radius can go from 1 px to 3 px, depending on the object roundness. Joints and terminals must be rounded. Sharp corners are not allowed, except for intersections and cutouts.

Six outline icons with small filled object highlighted, like a credit card that is made out of outlines and an icon that is filled.

Filled shapes can be used, only in really small objects, like in the dot of an exclamation point.

An icons with a hand pressing a button, where the gaps between the button and the hand.

The minimum gap between strokes should never be less than 1px.

Designing filled icons

A filled icon overlapping an outlined icon.

Filled icons should align closely to their outline pairs. They don’t need to be a pixel perfect match, but they must have a similar visual weight, and the transition from one to the other must feel smooth.

A tag, a person and a flower icons made of simple shapes.

Icons are made out of contiguous shapes. Ideally one, but it’s possible to go up to three when required for clarity.

Two icons with the stroke weight being highlighted.

Stroke weight is 1.5 px, but is reduced to 1.25 px when used inside a shape as a cut-out. Shapes must align with the pixel grid.

Exceptions are allowed for optical adjustments, as long as they fall on 0.25 px increments.

A shopping cart icon with the stroke terminals being highlighted, and a wallet icon with cutouts and intersection angles highlighted.

Terminals are round.

Corner radius can vary from 1 px to 3 px, depending on the object's roundness. Terminals and joints are rounded. Sharp corners are not allowed, except in intersections and knockouts.

Two arrow icons with the stroke being highlighted.

If it’s not possible to fill the outline icon, a 2px stroke can be used as a filled version.

An icon with a person and a key, where the gap between the two elements is highlighted.

The minimum gap between strokes should never be less than 1px.

    On this page