UX Encyclopedia

Iconography & Imagery

Icons and images carry meaning faster than words — when they work. When they don't, they're decoration users must decode or ignore.

Try it — guess what each unlabeled icon does. Five icons, three answers each — and every answer is a real meaning that glyph carries in some shipped product, so there is no trick. NN/g’s icon research finds truly universal icons rare; this is what that looks like.

    Icons need labels

    • NN/g's icon-usability research: universal icons are rare (roughly: magnifying glass, house, gear are near-universal; almost everything else is ambiguous). Default to icon + text label; icon-only is earned by testing, not assumed.
    • Labels beside/below icons beat tooltips — hover isn't discoverable and doesn't exist on touch. If space forces icon-only, keep the icon in a consistent position and test recognition ("what would you tap to…").
    • The same glyph means different things across apps (heart: like? save? favorite? health?), so in-product consistency matters more than matching some imagined global standard.

    Icon style consistency

    A 24-pixel icon grid magnified: outer bounding square, dashed 20-pixel live area, and four overlaid keyline shapes — circle, square, portrait and landscape rectangles — that share one optical size. live area 20, padding 2 keylines fit every glyph shape
    The keyline grid — Material draws system icons on a 24 dp grid with a 2 dp stroke; keyline shapes give a circle, square, and rectangles the same apparent size. Draw to a shared grid and mixed glyphs read as one set.
    Optical correction: a square drawn at 20 units next to a circle drawn at 22 units — the circle overflows the dashed 20-unit reference box, yet both shapes look the same size. 20 22 both read the same size the circle cheats by two units
    Optical, not mathematical — a circle drawn to the same bounding box as a square looks smaller, so the circle keyline is drawn larger. Geometry lies to the eye; keylines exist to compensate.
    Two rows of the same five icons. Top row: uniform stroke weight, corner rounding, and size — reads as one family. Bottom row: mixed thick and thin strokes, a randomly filled shape, mismatched sizes and sharp corners — reads as five unrelated sources. one stroke, one grid, one fill five sources — reads as sloppiness
    Consistency is the system — same five metaphors both rows; only the top row shares stroke weight, corner logic, fill philosophy, and optical size. Users can't articulate what's wrong with the bottom row, but they feel it.
    • One family = one stroke weight, one corner radius logic, one fill philosophy, drawn on one optical grid. Mixed-source icons read as sloppiness even when users can't articulate why.
    • Material system icons: 24×24 dp grid with keyline shapes (circle, square, rectangles, diagonals) and a 2 dp stroke convention so differently-shaped glyphs feel the same visual size; Material Symbols is a variable font across seven weights and three styles (outlined, rounded, sharp).
    • SF Symbols (7, as of 2025–26): 6,900+ glyphs in nine weights and three scales, designed to align with the San Francisco type ramp — symbols track the weight and optical size of adjacent text automatically. If you draw custom symbols, match these axes.
    • Optical, not mathematical, sizing: a circle drawn to the same bounding box as a square looks smaller; keylines exist to correct for this.

    Filled vs. outlined semantics

    A navigation bar with four destinations: Home, Search, and Settings are outlined and muted; Saved is the selected tab, shown with a filled heart inside a soft pill indicator. Home Search Saved Settings filled = selected, a learned convention
    Fill means selected — outlined = inactive, filled = active is a Material convention, not physics. It works because it's widely learned; pick one meaning, never mix, and never let fill be the only state cue — pair it with color, an indicator, or a label.
    • Material 3 convention: outlined = inactive, filled = selected/active (navigation bar/rail destinations, toggle icon buttons); if no filled variant exists, use a heavier weight or other cue. This is a platform convention, not a universal law — but it's widely learned, so contradicting it (filled for inactive) confuses.
    • Never let filled-vs-outlined be the only state signal — pair with color, an indicator shape, or a label (color-blind and low-vision users; WCAG "not color alone" logic applies to weight too).

    Target vs. glyph

    Left: a 24-pixel heart glyph centered in a dashed 48-pixel touch target — plenty of padded hit area. Right: two 24-pixel glyphs packed edge to edge, with a fingertip-sized circle overlapping both targets at once. 24 glyph 48 target one fingertip, two targets room to miss no padding — mistaps
    Pad the target, not the artwork — the glyph can stay 16–24 px, but the hit area must still be ≥ 44×44 pt / 48×48 dp. Blowing up the glyph to make the target big is the common miscue; invisible padding does the job.
    • The glyph can be 16–24 px; the target must still be ≥44×44 pt / 48×48 dp. Pad the hit area, not the artwork — giant glyphs to make targets big is a common miscue.

    Icon fonts vs. SVG

    • Prefer inline SVG: sharp at any scale, styleable, animatable, and accessible (role="img" + <title>/aria-label for meaningful icons, aria-hidden="true" for decorative ones).
    • Icon fonts fail when custom fonts don't load (ligature/PUA characters render as tofu or, worse, wrong glyphs) and can be mangled by screen readers and user font overrides. Legacy technique; avoid for new work.

    Metaphor selection & cultural risk

    • Prefer metaphors from the user's domain, not the implementation. Test with the actual audience: gestures (thumbs-up, OK sign), animals, body parts, and religious/flag imagery carry different or offensive meanings across cultures; mailbox-with-flag and other US-centric objects don't travel. Dated metaphors (floppy disk, handset) survive as learned conventions — fine to keep, risky to invent anew. (Cross-ref: Inclusive Design for internationalization.)

    Illustration systems

    • An illustration system fixes character proportions, perspective, line weight, and a constrained palette so pieces by different hands feel like one product.
    • Illustration helps when it explains (diagrams, empty-state guidance, onboarding concepts) or softens difficult moments (errors); it decorates when it pads screens users are trying to get through — decoration slows task-focused flows and bloats payloads.

    Photography direction

    • Authenticity beats stock clichés (handshakes, headset-woman, laughing-at-salad): users discount generic stock as filler; NN/g and eye-tracking work suggest people ignore obviously decorative stock photos but attend to real, information-bearing ones.
    • Faces attract attention strongly, and gaze cues where people look next — point gaze toward your content (Attention, Scanning & Perception).
    • Direct photography like a system: consistent lighting, crop, color grade, and subject diversity that reflects your actual users.

    Image accessibility

    Three-step alt-text decision flow. Purely decorative: yes leads to empty alt attribute. Informative: yes leads to describing the information. Functional, in a link or button: yes leads to naming the action, not the picture. Purely decorative? yes alt="" — never omit it no Informative? yes describe the information no Functional (link/button)? yes name the action, not the picture
    The W3C alt decision tree, shortened — purpose decides the text: decorative gets an empty alt="", informative gets the same information in words, functional gets the action ("Search", not "magnifying glass"). The same photo can be informative on one page and decorative on another.
    • Use the W3C WAI alt decision tree (w3.org/WAI/tutorials/images/): informative images get a short alt conveying the same information; functional images (in links/buttons) get alt describing the action, not the picture; decorative images get alt="" (never omit the attribute); images of text should be real text instead; complex images (charts) need a longer text alternative nearby.
    • Alt text describes purpose in context — the same photo can be informative on one page and decorative on another.

    Performance

    • Serve responsive images (srcset/sizes, <picture>); use modern formats (AVIF/WebP with fallbacks); lazy-load below-the-fold; set width/height or aspect-ratio to prevent layout shift. Images are usually the largest share of page weight — the cheapest big win.

    Favicons & app icons (platform rules move — verify current specs)

    • Design app icons as one simple shape recognizable at 16–29 px; no fine text, no photographic detail.
    • iOS (26-era): icons are layered artwork built in Apple's Icon Composer; the system applies the mask, Liquid Glass material, and generates default / dark / clear / tinted variants from one source. Never pre-round corners or bake in shadows.
    • Android adaptive icons: 108×108 dp canvas, launchers mask to arbitrary shapes — keep critical content inside the 66 dp-diameter safe zone; supply a monochrome layer for Android 13+ themed icons.
    • Web favicons: an SVG favicon plus fallback PNG sizes and a 180 px apple-touch-icon covers current browsers (convention; size lists churn — verify).

    Sources

    ↑↓ to navigate · Enter to open · Esc to close