Icons provide visual aid through a reduced, graphical representation.
Icons highlight actions or take their place. They are also used to represent frequently performed interactions such as deleting, editing, or adding to your watch list.
Our icon design is simple, modern and user-friendly. Therefore, each icon is reduced to its minimal form, intended to ensure high readability and comprehensibility for the user.
#Usage
#Icons as actions
Some actions may be displayed to the user as icon-only.
Only use this if it is a global pattern or it is a universally recognized pattern, like searching (loupe) or deleting items (trash bin). Otherwise, this is to be avoided.
#Reinforcement of actions or links
When there’s a need to reinforce a text action with a visual hint, an icon may be the best option.
They use the same color as the text they reinforce, and behave the same way. Their states are described in the Buttons section of the Guidelines.
#Display of availability
Some information types are summarized in the form of icons to inform the user about the system or product status.
#Icons in Buttons
The most important actions in the online shop are product-related: “Add to cart”, “Compare”, “Add to wishlist” actions. For these buttons, the icons help link their actions with the features that appear in the Header-Bar.
Try to avoid using icons in other buttons.
#Display of availability
The icon placement for external links is after the text. That is because it does not describe the action, but describes what happens to the browser when clicking on it.
#Spacing
The distances of the icons to other elements are variable and depend on the context in which they are placed.
The following distances are always calculated from the touch target of the icons. The distances and touch targets are the same for mobile and desktop
#Click target
Use Icon Buttons instead of placing icons directly on the canvas.
On desktop, the click target should be at least 32×32dp. On Mobile, it should be at least 44×44dp, with 48dp preferred.
#Combined icons
Use Icon Buttons when displaying icons next to each other.
#Link spacing
In combination with text, icons should have a 8dp distance from their accompanying copy.
#Anatomy
Icons should be drawn in two sizes. Also, the icons should optically adapted to the font size of the copy text.
When creating new icons, it is important to make sure that lines are positioned exactly on the pixels in the grid. This process guarantees clear contours and the icons remain legible even in small sizes.
#How to build new icons
Line icons with black contours are drawn. For very small areas in the icon, for example when the contours would no longer be visible the area can be filled with black.
Do
Icons should be created as 1 dp contours. Their corners should be sharp and square.
Don't
Don't use rounded corners. Watch out for mismatched paths.
Do
The abstraction level should be kept high. That means keeping the level of detail low. The objective is to distill the significance of the form to its essential.
Don't
This icon uses a detail level that is not needed to signify telephonic communication.
Do
Stay flat. The idea of a printer is here still transmitted without using perspective.
Don't
This icon uses perspective to communicate the form of the printer.
Do
Icons should only be shown in body copy before their respective keyword as a means of reinforcing their significance.
Don't
Don't explain icons, if they're not being understood, they need either a redesign, or you're using them wrong.
Do
Avoid using icons on buttons.
Don't
This dilutes the meaning of icons. Ideally, just the "Comparison", "Add to wishlist" and "Add to cart" use-cases would use icons in buttons, because we want couple their functionality with the lists in the header-bar.
