Iconography

Icons are a simple, easily graspable way to add visual emphasis or interest, signal an action, or indicate a feedback state — all while reducing a user’s cognitive load.

Using a consistent set of icons helps establish a familiar look and feel across a site or service, while using individual icons consistently establishes a reliable relationship between the image and a specific concept or action. For example, don’t use an envelope icon to indicate email on one page and mailing address on another. Users should be able to trust that a certain icon always means the same thing, no matter where it’s used on your site. It’s important that icons always serve a single functional purpose throughout a site or service.

• Meaning is ambiguous. Use icons in a common or conventional way only. If the meaning of an icon is ambiguous by itself, it needs accompanying text.
• Compensating for page structure. Icons don’t fix unclear page hierarchy or confusing content organization. Don’t rely on an icon to help draw attention to something important that’s hard to find. Fix the content’s placement first.
• You need illustrative artwork. Icons have a specific, functional meaning. Avoid using icons outside their intended usage for illustrative purposes (like using the “visibility” eye icon to illustrate an actual eye). If you want to use a graphic to enhance your content or explain a more in-depth concept, consider using an illustration instead of an icon.

• Combine with text. Users will not always understand the meaning of icons alone. Use icons combined with text to improve usability.
• Be consistent with icon meaning. Icons that are used a number of times throughout an application or site must have a consistent meaning and text description throughout. For example, if an icon of a blank piece of paper means “new document” on most screens, the same icon shouldn’t be used elsewhere to mean “reformat document.” Consistency aids users with cognitive disabilities and creates a better user experience for all users.
• When interactive, combine with other components. If the icon is part of an interactive element, it should be implemented within another functional component, like as part of a button or list.

Hide decorative icons from screen readers. Use the aria-hidden="true" and role="img" attributes if the icon is redundant and used solely as visual progressive enhancement as in the following code: