slice icon Context Slice

Iconography Philosophy

Great icons communicate instantly and endure. The original Macintosh icons proved that constraints breed creativity—working within a 32x32 pixel grid, designers created images that have lasted for decades. This is the standard we're aiming for.

The Locked Aesthetic

This skill produces pixel art icons in the classic Macintosh tradition. Most settings are fixed by design—that's what makes the icons work. Users choose only mood and accent color.

Fixed settings (non-negotiable):

  • weight: medium — The classic 2-pixel stroke, balanced and confident
  • corners: soft — Friendly precision, slight rounding, never harsh
  • metaphor: literal — Clear, recognizable objects reduced to essential pixels
  • size: medium — Optimized for 32-64px grid, the sweet spot
  • palette.primary: monochrome — Form over color, maximum contrast

User choices:

  • mood — Serious/utilitarian OR friendly/approachable
  • palette.accent — None (pure B&W) OR one signature color

Core Principles

1. Metaphorical Clarity

The best icons are visual metaphors so perfect they feel inevitable. A trash can IS delete. A floppy disk IS save. A magnifying glass IS search. Find the physical object that carries the meaning without explanation.

Don't illustrate the action—embody the concept. "Settings" isn't a screenshot of a settings panel. It's a gear, because adjustment is mechanical, precise, controllable.

2. Every Pixel Earns Its Place

Classic icons worked in 1024 pixels total. Nothing decorative survived. Every mark either communicated meaning or created necessary structure. Apply this discipline: if you can remove a pixel without losing clarity, remove it.

No drop shadows. No gradients. No anti-aliasing. Each pixel must answer: "What would be lost if I deleted this?"

3. The Squint Test

Great icons work at every size. Squint until the image blurs—can you still identify it? The silhouette should be distinctive. The essential gesture should survive. If your icon needs to be large to be understood, it's not an icon—it's an illustration.

4. Visual Grammar

Icons in a set are words in a visual language. They must share:

  • Weight: Consistent 2-pixel strokes across all icons
  • Corners: Same slight rounding on all elements
  • Spacing: Uniform padding and optical alignment
  • Color logic: Same monochrome + optional accent everywhere

An icon that breaks the grammar looks like a typo.

5. Timelessness Over Trend

Classic icons from the 1980s still work today. Avoid:

  • Gradients, shadows, 3D effects
  • Smooth bezier curves (use pixel-stepped curves)
  • Modern illustration aesthetics
  • Decorative complexity

Chase the essence. A well-drawn circle with a line through it will always mean "prohibited."

6. Friendly Precision

Great icons are precise but never cold. They have personality without being cartoonish. This comes from:

  • Soft corners that invite interaction
  • Balanced proportions that feel "right"
  • Confident strokes that don't hesitate
  • Occasional wit in the metaphor choice

Distilling Complex Input into Icons

Icons can represent anything—a word, a paragraph, a document, a conversation. The skill is distillation: finding the visual essence of any input.

The Distillation Process

Step 1: Absorb the full input. Read everything. Don't skim. The nuance matters.

Step 2: Ask "What is this REALLY about?" Strip away specifics until you find the core:

  • A 500-word feature spec might be about "discovery" or "organization" or "connection"
  • A conversation transcript might be about "conflict" or "collaboration" or "decision"
  • A company description might be about "growth" or "trust" or "innovation"

Step 3: Express the core in 1-3 words. This is your target concept. Examples:

Input Core concept
"A feature that lets users set medication reminders with custom schedules" Remembering / Care
"Our Q3 strategy meeting notes discussing market expansion" Growth / Ambition
"The error message users see when payment fails" Obstacle / Warning
"A social feature where users can share playlists with friends" Sharing / Connection

Step 4: Find the physical metaphor. What real-world object embodies this concept?

  • Remembering → Alarm clock, calendar, bell
  • Growth → Plant sprouting, arrow ascending
  • Obstacle → Roadblock, warning sign
  • Connection → Chain links, handshake

Step 5: Reduce to geometric primitives. How can this metaphor be rendered with:

  • Rectangles, squares, circles, triangles
  • Pixel-stepped diagonals (45° only)
  • 2-pixel strokes
  • No curves that can't be pixel-stepped

Setup Question Translation

The setup asks two simple questions:

Mood Question

Answer Settings
Serious and utilitarian mood: professional — purely functional, tool-like, no-nonsense
Friendly with personality mood: friendly — approachable, slight warmth, inviting but disciplined

Color Question

Answer Settings
Pure black and white palette.primary: monochrome, palette.accent: null — maximum contrast, timeless, classic 1-bit
Small color palette palette.primary: full-color, palette.accent: null — 2-4 flat colors, indexed color feel
Single accent color palette.primary: monochrome, palette.accent: [their color] — B&W with one signature color

Generating the Styleguide

The identity Section

Write 3-4 sentences capturing this style. Since the aesthetic is locked, vary only by mood:

Serious mood, black and white:

These icons are tools, not decorations. Pure black on white, every pixel deliberate, nothing wasted. They communicate function instantly and get out of the way. Classic Macintosh discipline: if it doesn't serve clarity, it doesn't exist.

Serious mood, small palette:

Disciplined pixel art with a limited color vocabulary. 2-4 flat colors, each chosen with purpose. These icons are functional first but use color strategically to aid recognition. Indexed color aesthetic, hard pixel boundaries.

Serious mood, accent color:

Disciplined pixel art with a [color] signature. These icons are functional first—clear, precise, no-nonsense—but the accent color creates a subtle thread tying the family together. Professional tools with just enough identity.

Friendly mood, black and white:

Approachable pixel art that invites interaction. Still disciplined, still precise, but with soft corners and balanced proportions that feel warm rather than cold. These icons have quiet personality without sacrificing clarity.

Friendly mood, small palette:

Warm pixel art with a curated color palette. 2-4 flat colors bring life to the icons while maintaining discipline. Friendly but never garish—each color earns its place. Indexed color feel with personality.

Friendly mood, accent color:

Warm, inviting pixel art with a [color] accent for personality. Friendly but never cartoonish—every pixel still earns its place. The accent color adds life; the soft corners add approachability. Icons you want to click.

The consistency_rules Section

These are fixed for the pixel art aesthetic:

always:

  • Use exactly 2-pixel stroke weight throughout
  • Align all elements to pixel grid
  • Use 45° angles for diagonals (pixel-stepped)
  • Keep soft corner radius consistent (1-2 pixels)
  • Center icons optically in their frame
  • Maintain uniform padding around edges

never:

  • Use gradients, shadows, or glow effects
  • Use smooth bezier curves (pixel-step everything)
  • Vary stroke weight within or across icons
  • Add decorative elements that don't aid recognition
  • Use anti-aliasing or smooth edges
  • Mix the accent color with other colors

The examples Section

Write 3 complete prompts using the locked aesthetic + user's mood/accent choices.

Choosing Metaphors

When given a concept to iconify:

  1. Name the action — What does this feature DO? (Search, delete, share, configure)
  2. Find the physical equivalent — What real-world action maps to this? (Looking, discarding, handing over, adjusting)
  3. Identify the object — What tool performs that action? (Magnifying glass, trash can, hand/arrow, gear/wrench)
  4. Reduce to primitives — How do you draw this with rectangles, circles, triangles, and 45° lines?
  5. Test the metaphor — Would someone unfamiliar guess the meaning? If not, try again.

Avoid abstract symbols unless the concept is truly abstract. A plus sign works for "add" because addition is already symbolic. But "export" shouldn't be an arrow pointing at nothing—it should suggest documents leaving, packages shipping, data flowing out.