Member-only story
Foundations of iconography
Definition, purpose, and benefits
More in the iconography series:• 7 Principles of Icon Design• 5 Ways to Create a Settings Icon• Icon Grids & Keylines Demystified• Pixel-Snapping in Icon Design• 3 Classic Icon Families
An icon is a compact symbol that represents a discrete object, action, or idea. Icons are meant to be read at a glance and are typically created on a square (1:1) canvas.
Meaning Through Metaphor
Icons employ visual metaphors to speed comprehension, by transferring properties from something we already understand.
In some cases, the metaphor is literal. Material’s alarm icon represents a classic mechanical alarm clock with bells, carrying over functionality we’d expect — it rings to wake us up in time.
Sometimes the metaphor is a little outdated, but understandable through repeated use. In the early days of personal computing the floppy disk saved our files to a thin, square disk — a whole 1.44 megabytes worth! Though we don’t use this object anymore, we still use a floppy disk icon to indicate a save action.
Other times the metaphor is a little more abstract. The shuffle icon and refresh icon communicate their meaning through the movement of the arrows. Switch up the order, do the action again.
Yet other times the original referent has been lost. The command icon helps us access shortcuts from a Mac keyboard. The metaphor isn’t readily apparent; does it reference anything?
