Icons should be used in a purposeful manner to maximize comprehension and reduce cognitive load when you need to call attention to a particular action, command, or section. Use them infrequently if you’re questioning an icon’s use, it probably doesn’t need to be used at all.
As a general rule, icons should be used in combination with meaningful text to support users progressing through the product in an accessible manner. However, avoid labels if you are rendering the icon with visible text to prevent label duplication.
There are few widely recognized icons, so whenever possible, use a label or supporting text to ensure its meaning is understood. In this case, an label will be used for the icon.
Combining unfamiliar icons with text could confuse users depending on how they recognize the supporting icon, so make sure the icon and text label are coupled. To help enhance usability further, ensure the icon color has at least color contrast.
Avoid using icons solely for decoration or visual interest as it detracts from their intention elsewhere. Consider the surrounding context of icons too; if icons are cluttered and not spaced well, it can lead to more visual noise and confusion.
Do
Make sure the icon color has at least one color contrast.
Don't
If the icons are cluttered, not well spaced, and have no contrast with the background, it can generate more visual noise.
Icons can represent a single concept such as + which always represents ‘add’, or be thematic in concept such as ☆ which might represent "favorite", "like", "star" etc. Using an icon appropriately allows our users to create a connection to a concept, so don’t over-extend what an icon represents.
Do
Don't
Use a single icon per concept.
Multiple icon variations should not be used for the same concept.
Our icons have variations to work within a given context. There will be a line version, which can be accompanied by a filled version. Use the line version of our icon in most cases as they are visually balanced, so more than one can be used when close together.