How to Design App Icons with Claude Code - No Figma Required
How to Design App Icons with Claude Code - No Figma Required
Claude is surprisingly good at icon design when you give it the right constraints. The trick is treating icon design as a constraint satisfaction problem rather than an open-ended creative task.
The Constraints That Matter
App icons need to work at every size from 16x16 in the menu bar to 1024x1024 in the App Store. That single requirement eliminates most design ideas. You need:
- A single recognizable glyph (not a scene or illustration)
- Two to three colors maximum
- No fine details that disappear at small sizes
- Strong contrast between foreground and background
- A shape that reads clearly as a silhouette
Give Claude these constraints explicitly. "Design an app icon with a single glyph, two colors, readable at 16x16" produces dramatically better results than "design me a cool app icon."
The SVG Workflow
Start with SVG because it is text - Claude can read, write, and iterate on it directly. The workflow looks like this:
- Describe the concept and constraints to Claude
- Claude generates an SVG
- Open it in a browser to preview
- Describe what needs to change
- Claude edits the SVG code directly
- Repeat until it looks right
This iterative loop is fast because Claude understands the SVG structure. "Make the glyph 20% larger" or "shift the color toward a darker blue" translates directly to code changes.
Exporting for macOS
Once the SVG looks right, export it at the required sizes. macOS apps need an asset catalog with icons at 16, 32, 64, 128, 256, 512, and 1024 pixels. A simple script using rsvg-convert or cairosvg handles the batch export.
The whole process takes maybe 30 minutes and produces production-quality icons. Not every icon will be a masterpiece, but for indie apps and side projects, it is more than good enough - and you never have to open Figma.
Fazm is an open source macOS AI agent. Open source on GitHub.