Module 19: Iconography — Design & Code Foundations

09

undefined

Format

Print

EPS / PDF

Vector at 300+ DPI

Rasterize at print resolution; embed fonts

Web

SVG

Infinitely scalable

CSS-styleable; PNG fallback for legacy

Color

Print

CMYK / Spot

Single color common

Must work in grayscale for photocopies

Web

RGB / currentColor

CSS-controlled

Hover states, dark mode variants

Size

Print

Fixed

12-24pt typical

Optimized for viewing distance

Web

Responsive

16, 24, 32px common

44px minimum touch target

Accessibility

Print

👆

Tactile

Paired with text; high contrast

Web

♿

ARIA

aria-label, keyboard focus, screen readers

10

undefined

Recognition Science

undefined

Silhouette First

undefined

Processing Fluency

undefined

11

Icon Systems in the Wild

How leading products approach iconography.

4,000+ Symbols

9 weights, 3 scales

Principles Identified:

Hierarchy Outlined for inactive, filled for active

Weights Match icon weight to text weight

Accessibility Scales for different contexts

Key insight: SF Symbols shows how systematic thinking creates flexibility without sacrificing consistency.

Variable Font

Weight, fill, size axes

Principles Identified:

Variable One file, infinite variations

Optical size Detail adjusts to display size

Animation Smooth transitions between states

Key insight: Material's variable approach enables dynamic icon states without loading multiple files.

Simply Beautiful

Consistent 24×24, 2px stroke

Principles Identified:

Consistency Same stroke weight throughout

Simplicity Reduced to essential forms

Open source Free for any project

Key insight: Feather proves that strict constraints (2px stroke, 24px grid) can produce a cohesive system.

12

Icon Design Mistakes

Common errors that hurt usability and recognition.

Failure: Inconsistent Stroke Width

1px and 3px mixed

Fix: Use uniform stroke weight across set

Consistent 2px

Rule: Choose one stroke width and scale proportionally for all sizes.

Failure: Over-Detailed Icons

Camera with every button and dial

Illegible at 16px

Fix: Remove non-essential details

Camera silhouette + lens circle

Clear at any size

Rule: If detail doesn't aid recognition at 16px, remove it.

Failure: Icon Without Label

What does this do?

Fix: Always provide text or ARIA label

Settings

Clear purpose

Rule: Icons alone are ambiguous. Labels ensure accessibility and clarity.

Failure: Pixel Misalignment

1px stroke at 0.5px position

Blurry on non-retina

Fix: Align strokes to pixel grid

Stroke aligned to full pixels

Crisp rendering

Rule: Design at target sizes with paths snapped to pixel grid.

13

Icon Quality Tests

Validate your icons meet professional standards.

01

Silhouette Test

Tests: Shape recognition

Fill icon completely black. If meaning is lost without interior details, the silhouette isn't distinctive enough.

Recognizable as solid shape?

02

Size Reduction Test

Tests: Small size clarity

Scale to 16×16 pixels. Details should remain clear, strokes shouldn't merge. If it's muddy, simplify.

32px

16px

03

5-Second Guess Test

Tests: Metaphor clarity

Show icon to 5 people for 5 seconds without label. 4+ should guess meaning correctly. If not, metaphor needs work.

❓ → 💡

80%+ correct = good metaphor

04

Accessibility Audit

Tests: ARIA and touch targets

Check aria-label on icon-only buttons, 44px touch targets, 3:1 contrast ratio for UI icons, keyboard focus states.

✓ aria-label present

✓ 44×44px touch target

✓ 3:1 contrast ratio

✓ :focus-visible style

14

CSS Icon Implementation

Best practices for implementing icons in web projects.



.icon-btn svg {
  width: 1.25em;
  height: 1.25em;
  fill: currentColor;
}

Inline SVG via CSS

currentColor - Inherits text color automatically
em units - Scales with font size
aria-hidden - Hidden from screen readers (has label)

Tip: Use fill: currentColor and em sizing for icons that adapt to any context.







.icon {
  width: 24px;
  height: 24px;
}

SVG Sprite via CSS

Single request - All icons in one file
Cacheable - Browser caches sprite
element - References symbol by ID

Tip: Build sprite during build process. Inline critical icons, external sprite for large sets.

.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;  /* touch target */
  height: 44px;
  padding: 10px;
  border: none;
  background: transparent;
  cursor: pointer;
}

.icon-button:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.icon-button svg {
  width: 24px;
  height: 24px;
}

Icon Button Pattern via CSS

44px touch target - Meets accessibility guidelines
focus-visible - Keyboard focus only
24px icon in 44px button - Visual vs interactive size

Tip: Visible icon can be 24px while clickable area is 44px for mobile accessibility.

15

Self-Assessment

Test your understanding of iconography principles.

Q1

Why do outlined icons work well for unselected states?

Click to reveal

Q2

What is optical correction and why is it necessary?

Click to reveal

Q3

Why should icons always have labels?

Click to reveal

Q4

What makes SVG the preferred icon format for web?

Click to reveal

Q5

What is the minimum touch target size for icons?

Click to reveal

Iconography

Print vs Web

undefined

Science & Psychology

undefined

Real-World Examples

Icon Systems in the Wild

Common Failures

Icon Design Mistakes

Visual Tests

Icon Quality Tests

Silhouette Test

Size Reduction Test

5-Second Guess Test

Accessibility Audit

CSS Implementation

CSS Icon Implementation

Self-Assessment

Self-Assessment

Key Takeaways