Icon and Illustration Systems

Mental model

An icon is a compression of meaning, and compression only works when the reader already has the key. Most icon failures are the designer assuming a metaphor is universal when it is learned.

• Universal metaphors are a short list. Home, search, close, play, plus, trash, settings, back. Everything else is learned, and learned means a label.
• If you have to debate whether an icon is self-explanatory, add a label. The debate is the evidence. Icon-only navigation measurably reduces discoverability; icon-plus-label costs a few pixels and removes the problem.
• Optical alignment beats mathematical alignment. A triangle centred by bounding box looks off-centre. Centre by visual mass, which for a play glyph means nudging right.
• One grid, one stroke weight, one corner radius. Mixing icon sets is the fastest way to make an interface look assembled rather than designed.
• Decorative icons are invisible to screen readers, meaningful ones are not. That distinction is a decision you make per icon, not a default.