Icon (U.S. Web Design System)
The U.S. Web Design System’s icon component page: when to use an icon, when to choose something else, usability rules for meaning and labeling, and accessibility guidance for decorative versus meaningful icons. Most of the page is the browsable icon set itself.
License: Public domain / CC0 — U.S. federal government work, the same basis as USWDS Components: Date Picker, Memorable Date, Character Count, Input Mask, Text Input, Validation and Design Tokens (U.S. Web Design System).
Key points
- Icons are framed as functional cues for meaning, actions, status, or feedback, with three appropriate uses: drawing attention to an action when paired with text that the icon directly relates to; helping readers find key information (a phone number, an email address); and enlarging a target for a common action, like opening a menu or sharing an article.
- Three cases where something else is the better choice:
- when the meaning is ambiguous, because an icon only helps if people recognize it quickly;
- when the icon would be compensating for page structure, since icons don’t fix an unclear hierarchy or confusing organization;
- when illustration is what’s needed, as in not using the “visibility” eye icon to depict an actual eye.
- Only a few icons are consistently understood across the digital-using public, among them home, print, and search. The page recommends combining icons with text and testing icons for recognition and memorability with the specific audience.
- An icon used more than once in a site must mean the same thing, with the same text description, every time. If a blank page means “new document,” a different icon has to represent “reformat document.” Consistency particularly helps people with some cognitive disabilities and people who are distracted or scanning.
- An interactive icon belongs inside another functional component, such as a button or a list, rather than acting as a control on its own.
- Decorative icons, usually ones accompanied by text, should be hidden from screen readers, since announcing them is redundant. An icon that carries information or function the surrounding text doesn’t must instead be given an accessible text alternative.