Level 2 · Lesson 1

Iconography and Visual Language

Choose icons that support recognition instead of making people decode the interface.

18 min Product UIVisual language

Lesson steps

IdeaExampleMistakesQuizExercise

Core idea

An icon is a visual label. Use familiar symbols for common actions, pair unclear icons with text, and keep one consistent icon style.

  • Most icons are learned conventions, not universal images. If the meaning is not obvious, add a visible label.
  • Match stroke, corner style, optical size, and spacing so icons feel like one family.
  • Use outline and filled states only when the change communicates selection or emphasis.
  • Decorative icons should stay quiet. Action and status icons need enough contrast and an accessible name.

Visual example

A toolbar works when the symbols do not ask users to guess.

Before and after

Replace icon guessing with recognition.

Before: symbols without anchors

Several abstract glyphs have equal weight and no labels, so the user must remember or guess what each button does.

After: icon plus label

Common actions keep simple icons, unclear actions get labels, and the set uses one stroke weight and size.

Worked example

Why the improved version works

The improved toolbar treats icons as cues, not puzzles. Search and add are familiar enough to scan quickly, while Review and Archive get visible labels because their symbols are easier to confuse.

The set also uses one visual language: same stroke weight, same bounding size, and similar corner softness. That consistency makes the toolbar feel calmer before the user reads a word.

Common mistakes

Watch for these patterns

Assuming an icon is universal because the design team recognizes it.
Mixing filled, outlined, sharp, and rounded icons in one small toolbar.
Using color alone to show success, warning, or selected state.
Hiding essential actions behind icon-only buttons with no visible text or accessible name.

Visual comparison

Which toolbar is easier to understand?

One toolbar uses icon-only abstract actions. The other pairs uncertain symbols with labels and keeps one visual style.

Wähle eine Option, um die Design-Logik zu sehen.

Small exercise

Diagnose icon clarity

Compare two toolbars, then identify which icon needs a label because its meaning depends on memory instead of recognition.

Kurze Übung starten Zur nächsten Lektion springen