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.
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.
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).
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.
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.
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.
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.
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
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.
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
Minor system icons are:
- Used inline to add clarity to an action
- Used in form elements (
- 16×16 in size
- Within a 20×20 bounding box
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