Iconography is the design and systematic use of a coherent family of icons, small simplified pictograms that represent objects, actions, states and ideas. In graphic design, the term covers both individual icons and the shared visual rules that make a set consistent: grid, stroke weight, corner treatment, perspective, level of detail and meaning.
Good iconography lets people recognize meaning faster than they can read a word, and it works across languages on signs, packaging, maps and digital interfaces. Its value comes less from any single icon than from the consistency of the whole system.
How icons communicate meaning
Icons communicate through simplification and convention. An effective icon reduces an object to the few features that identify it, so a magnifying glass, a house or an envelope remains recognizable at 16 pixels. Semiotics distinguishes three ways a sign can carry meaning, and icon sets use all of them.
| Sign type | Basis of meaning | Example | Learnability |
|---|---|---|---|
| Resemblance icon | Looks like the object | Camera for photos | Understood immediately |
| Indexical icon | Shows a cause, trace or association | Magnifying glass for search | Quick with context |
| Symbolic icon | Learned convention | Floppy disk for save | Must be learned |
| Abstract mark | Arbitrary shape given meaning | Hamburger menu lines | Depends on familiarity |
Recognition depends on culture and prior exposure. A mailbox, a hand gesture or a color can mean different things in different regions, so iconography intended for international audiences favors widely shared metaphors and tests them with real users.
Building a consistent icon system
A professional icon set is built on a shared construction grid and a small number of fixed rules. Without them, icons drawn by different designers or at different times look like a collection of borrowed parts rather than one visual language.
| Property | Typical specification | Why it matters |
|---|---|---|
| Canvas and grid | 24 by 24 px with about 2 px padding | Common base for alignment and scaling |
| Keylines | Circle, square and rectangle templates | Gives different shapes equal visual weight |
| Stroke weight | Typically 1.5 to 2 px at 24 px | Uniform line weight unifies the set |
| Corner radius | One fixed value for all corners | Consistent softness or sharpness |
| Perspective | Usually flat, front-facing | Avoids mixing 2D and 3D views |
| Pixel alignment | Strokes snapped to whole pixels | Crisp rendering at small sizes |
Keyline shapes solve an optical problem: a circle and a square of the same width do not look the same size, because the circle covers less area. Templates make circular icons slightly larger than square ones so that all icons appear equally heavy.
Icons are usually produced as vector graphics, most often SVG, so they scale cleanly. However, vector scaling alone is not enough for very small sizes, which is why mature systems draw separate optical versions, for example at 16, 24 and 48 pixels, with simplified detail at the smallest size.
Icon styles and when to use them
Icon style should match the surrounding typography and brand. The table below compares common styles and their typical roles.
| Style | Visual character | Best suited to |
|---|---|---|
| Outline | Open shapes drawn with strokes | Light interfaces and inactive states |
| Filled or solid | Closed shapes with solid areas | Small sizes and active states |
| Duotone | Two tones or opacities | Marketing pages and illustrations |
| Glyph | Single-color silhouette | Wayfinding signs and system symbols |
| Illustrative | Detailed, often colored | Empty states and onboarding |
Many interfaces pair outline icons for the default state with filled icons for the selected state, as in navigation bars. Mixing styles within one context without such a rule makes an interface look unfinished.
Iconography compared with related visual elements
Iconography overlaps with logos, illustration and pictograms, but each has a different purpose. The distinctions help a designer decide which discipline a task belongs to.
| Element | Primary purpose | Level of detail |
|---|---|---|
| Icon | Represent a function or idea quickly | Minimal, built for small sizes |
| Pictogram | Public information and wayfinding | Minimal and highly standardized |
| Logo | Identify a brand | Unique and ownable |
| Illustration | Explain, decorate or evoke mood | Rich and expressive |
| Emoji | Express emotion in text | Varies by platform rendering |
Public pictograms are often governed by standards. Safety signs follow ISO 7010, and public information symbols are collected in ISO 7001, which makes pictograms such as exits or toilets recognizable across countries.
Accessibility and common mistakes
Icons improve usability only when they are understood, visible and reachable. In digital products, accessibility requirements apply to icons just as they apply to text.
- Icons without labels are often misread; ambiguous actions should show a visible text label, and icon-only buttons need an accessible name for screen readers.
- Low contrast fails users with low vision; WCAG 2.1 asks for at least 3:1 contrast for meaningful graphical objects.
- Small touch targets cause errors; interactive icons need a tappable area of roughly 44 by 44 points or 48 by 48 density-independent pixels, even when the icon is drawn at 24.
- One icon with several meanings, such as a star for both favorite and rating, confuses users.
- Mixing icon sets with different strokes and grids breaks the visual system.
A non-technical view
Iconography is the craft of making small pictures that stand for things, like a trash can for delete or a little house for home, and making sure they all look like they belong to the same family.
Good icons work like road signs. People understand them in a split second, even without reading. When every icon follows the same style and means only one thing, using a product or finding a way through a building becomes much easier.
A concrete example
A regional hospital redesigns its patient app and its building signage at the same time. The old app used icons collected from three different free sets, with mismatched line weights, and patients often confused the symbols for appointments and test results.
The design team creates a single set of about 60 icons on a 24-pixel grid with a 2-pixel stroke, rounded corners and outline and filled variants. Each icon gets a text label in the app, contrast is checked against the 3:1 requirement, and the same shapes are adapted as large glyphs for corridor signs.
In follow-up usability tests, patients find appointments and results faster, and visitors report that the signs in the building now match what they see on their phones.