How to pick the right icon
Icons can make an interface easier to scan. They work best when people already understand the symbol or when the icon appears with a clear text label.
Use text instead of an icon when the meaning is complex, abstract, or easy to misunderstand.
Match the interface style
Use icons with the same visual language in the same interface. Mixed styles can make related controls look unrelated.
Use one icon style for related controls.
Don't mix unrelated icon styles in the same interface.
Use familiar icons for familiar actions
Icons work well for common actions and destinations that people already recognize from other interfaces.
Use icons for common actions with widely understood symbols.
Don't use icons alone for abstract concepts with no common symbol.
Use icons as visual anchors
Icons can help people scan lists, menus, cards, and repeated controls. The icon needs to support the text, not compete with it.
Use icons to make associated options easier to scan.
Don't add icons to every line when they only create visual clutter.
Use icons in compact interfaces
Icons can help in tight spaces, such as mobile navigation, toolbars, tables, and compact controls. Keep labels when the icon is not obvious.
Keep labels in all layout variants when space allows.
Use icon-only controls only when a visible label does not fit.
In these cases, make sure that the label is accessible via hover, focus, or tap.
Keep text labels next to icons in compact layouts, even when space is sparse.
Don't remove labels in compact layouts when the meaning without them is unclear.
Use icon-only controls only when the icon represents a widely understood action.
Use icon-only controls only when the label is available on hover, focus, or tap.
Choose the clearest symbol
Use a familiar symbol when one exists. Novel symbols make people stop and interpret the interface.
trashfor deleting an image
Use a familiar symbol for a familiar action.
image-offfor deleting an image
Don't make people learn a new symbol for a common action.
Match the context, not every detail
Choose the icon that makes the action clearest in context. A more specific icon is better only when the extra detail helps people understand the action.
Use clear action icons when the surrounding interface already provides the object context.
Don't add object details when the context already makes the object clear.
Keep icon meaning consistent
Use the same icon for the same meaning, and use different icons for different meanings.
Use different icons for distinct purposes or meanings.
Don't use the same icon for multiple distinct purposes or meanings.
Use the same icon for the same purpose or function.
Don't use different icons for the same purpose or function.
Do not iconize repeated status decoration
Avoid adding an icon to every repeated status marker when color, weight, text, or layout already communicates the state. Repeated status icons can turn useful list structure into visual noise.
Use the lightest cue that makes the status clear.
Don't add repeated status icons when they only restate what the list already shows.
Do not replace built-in control cues
Do not add icons to controls that already show people how they work. Native controls are easier to recognize when they behave and look familiar.
Use the built-in visual cue when the control already communicates its behavior.
Don't replace native controls with similarly themed interactive icons.