Icons

Icons in the Shopify admin act as visual aids to help merchants complete tasks. They’re simple, informative, and build on the visual language of the design system.

A collection of various icons used in the Shopify Admin.

Principles

Simple over detailed

Detailed icons increase cognitive load. Focus on simplicity to help merchants understand the concept the icon represents and recognize icons on smaller screens.

Literally literal

Literal symbols are easier to understand than abstract symbols. When possible, use symbols that represent the most basic idea or concept instead of a metaphorical one. If the concept can’t be conveyed literally (an activity like gardening, a profession like doctor), pick a logically related symbol (shovel, stethoscope).

Stay professional

The design of an icon communicates 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.

Creating icons

Five icons in order: a trash can to represent a delete action, a cogwheel to represent settings, a spyglass to represent search, a pin to represent location and a bell to represent notifications.

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. There are global, established conventions for concepts like “delete,” “settings,” and “search.” These symbols are effective, and don’t need to be redefined.

An icon of a cogwheel that represents Store, Product, and global settings.

Limit variations

Use a single icon to represent variations of the same concept. 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.

Various icons paired with text, notably the icon of a house with the word "Home", the icon of a computer with the word "Desktop" and an icon of an arrow pointing up and another pointing down with the word "Sort".

Pair icons with text

The purpose of 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—the rare exception being an icon that’s a universally understood action, like the trash can icon that represents deletions.

Five icons representing the currency of different countries: a dollar, a euro, a british pound, an indian rupee and a japanese yen.

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.

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 attention to something the merchant can take action on

To browse all available icons, visit the Icons library.

System icons

System icons help merchants find their way around and shouldn’t be ornamental. They’re smaller than spot icons because they’re always applied in product experiences where it’s important that they complement the user experience and not overpower it. They should represent a specific action, object, or concept.

Icons in a navigation menu.

Major icons—20×20

Major system icons are:

Primarily used in navigation to support wayfinding
Used to help promote, reinforce, or draw special attention to a specific area or metaphor
20×20 in size
Within a 20×20 bounding box

Smaller icons in a drop-down menu

Minor icons—16×16

Minor system icons are:

Used inline to add clarity to an action
Used in form elements (<input>, <button>, etc.)
16×16 in size
Within a 20×20 bounding box

Spot icons

Larger, spot icons of a spyglass for a "results not found" error, an upwards arrow for a file upload card, and an exclamation point for a "page not found" error.

Spot icons reinforce messaging in product experiences that are seen more than once. Spot icons are:

Bigger than system icons and have a stronger stroke weight to add visual balance to the layout
60×60 in size
Within a 60×60 bounding box