Spot icons reinforce messaging in product experiences that are seen more than once.Download this premium 13000+ Mega Big Bundle Iconset template published on TemplateMonster. Used inline to add clarity to an action.Used to help promote, reinforce, or draw special attention to a specific area or metaphor.Primarily used in navigation to support wayfinding.They should represent a specific action, object, or concept. 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. System icons help merchants find their way around and shouldn’t be ornamental. To browse a list of all available icons, visit the polaris-icons site. To direct attention to something the merchant can take action on.In banners to bring attention to a specific theme, such as an announcement or an error.
Overuse quickly results in user interfaces that are visually overwhelming or distracting. Icons are powerful visual helpers and should be used with care. When deciding what symbol should be used, check that it will be understood at a glance by people from different cultures and backgrounds. However, there will be times where only a locally understood icon will work to communicate a concept. Whenever possible, use a universally recognized icon. 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. In general, icons should be placed near a label or title. The purpose of an icon is to clarify the content by providing a visual cue and improve legibility and scannability of the user interface. 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. Shipping settings, store settings, account settings, and any new settings should use the cog icon. Use a single icon to represent variations of the same concept. There are global, established conventions for concepts like “delete,” “settings,” and “search.” These symbols are effective, and don’t need to be redefined. Don’t reinvent an icon that’s already been accepted as the convention. Icons that have been used for a long time worldwide have a higher chance of being recognized and understood quickly.
In other words, prioritize representing the function, rather than how nice it looks. Focus on the effectiveness of the message instead of its ability to delight. The design of an icon communicates tone, much like the content it’s paired with. If the concept can’t be conveyed literally (an activity like gardening, a profession like doctor), pick a logically related symbol (shovel, stethoscope). When possible, use symbols that represent the most basic idea or concept instead of a metaphorical one. Literal symbols are easier to understand than abstract symbols. Focus on simplicity to help merchants understand the concept the icon represents and recognize icons on smaller screens. They’re simple, informative, and build on the visual language of the design system.ĭetailed icons increase cognitive load. Icons in the Shopify admin act as visual aids to help merchants complete tasks.