App icon composer

App Icon Composer

Produce a layered Liquid Glass app icon that follows Apple's Human Interface Guidelines and drops straight into Icon Composer — authored as SVG the model writes directly, no SnapAI, no paid icon SaaS. The brand decision (silhouette, signature color, what the icon means) lives in app-brand-identity; App Store listing use lives in asc-aso. This skill is the HIG-correct production pipeline: concept → layer stack → appearances → an Icon Composer-ready bundle.

Since iOS/iPadOS/macOS/watchOS 26, app icons are layered, not flat. You hand Icon Composer (bundled with Xcode 26) a small set of flat, opaque source layers; the system renders Liquid Glass — specular highlights, refraction, translucency, shadow, blur, and corners — and derives the appearance variants. A baked 1024 PNG fights that renderer and looks dead next to native icons. SVG is Apple's recommended input format, which is exactly what a code-capable model can produce directly.

---

When to use vs. when not to

Use this skill	Use instead
Turning an approved concept into HIG-correct Icon Composer layers	app-brand-identity — to pick the concept, silhouette, signature color
Authoring the layer art (SVG-first) and the Default/Dark/Mono appearances	—
Assembling a .icon import bundle + asset-catalog fallback	asc-submission — to upload the built app
Multi-size legacy AppIcon.appiconset discipline	app-brand-identity (its "All Sizes" section)

If there's no agreed concept yet, stop and run app-brand-identity first. This skill assumes you know what the icon is.

---

HIG foundations (get these right before any pixels)

Apple's app-icon guidance, current for the layered system:

• One concept, instantly understood. A single focus point, centered. If you can't name the idea in three words, simplify.
• Flat, opaque, simple source art. No photos, no realistic imagery, no text or words, no UI screenshots/chrome. These fail at small sizes and read as amateur.
• Bold weights, rounder corners. Use bold line weights so detail survives at Home Screen size; avoid sharp edges and thin lines — rounded corners let light travel cleanly across edges under Liquid Glass. Fine linework disappears below ~64px.
• Legibility is the gate, especially for the Mono appearance. Test the art at 32pt and 64pt before committing.
• Design in layers so color and material can be tuned per appearance — that's the whole point of the new system.
• Consistent personality across platforms, tuned per platform shape. Same icon, not five different ones.

Anti-slop (from app-brand-identity): no gradient blobs, no purple-blue "AI aesthetic," no fake 3D, no stock templates. If it smells generated, redo it as clean vector.

---

The layered model

Icon Composer organizes art into a background plus one or more foreground layers (it groups layers; a group holds up to 4 layers). Minimum viable icon = one background + one foreground.

Layer role	What goes here	Rules
Background	Full-bleed ground — solid, gradient, or material	Fills the whole canvas edge-to-edge
Foreground (1+)	The hero glyph/mark, plus optional supporting shapes for depth	Lives in the safe area; this is what reads at a glance

What the system owns — never bake these into source art:

• Specular highlights (edge definition; alignment configurable in Icon Composer)
• Refraction (lens-like light bending; layers pick up color from layers beneath — this is why you separate layers)
• Translucency / frostiness
• Shadow and blur
• Corners — for iOS/iPadOS (squircle) and watchOS (circle), draw with 90° corners and let the system mask. Exception — macOS: you draw the rounded rectangle yourself (the system does not auto-mask macOS).

Separation = depth. Each layer is its own transparent element so the renderer can offset, shadow, and refract them. Source layers may carry alpha (refraction needs it); the exported Home Screen icon is flattened and opaque.

---

Appearances: author three, the system derives the rest

You configure three appearances; the system generates the translucent and tinted variants from them.

You author	What it is	Key rule
Default	Standard light look	Hero reads against the background; good contrast
Dark	Dark Home Screen	Adjust fills/colors for legibility; a transparent/darker ground is allowed (unlike pre-26 flat icons)
Mono	Monochrome / accessibility / tint base	Set the most prominent element to white; map everything else to grays. If the glyph dissolves here, simplify the foreground.

System derives	From
Clear Light / Clear Dark (translucent glass)	your layers
Tinted Light / Tinted Dark (user color-infused)	the Mono appearance

The fastest way to a bad iOS 26 icon is designing only Default. Mono is the stress test — if the idea survives as a white-on-gray silhouette, the tinted and clear variants will too. Render all three before you commit.

Apple Watch supports the light/updated look only — if your iOS Mono needed simplification, the watch art does too.

---

Canvas & geometry

Platform	Canvas	Shape	Corners
iPhone / iPad / Mac	1024×1024 (unified)	iOS squircle · macOS rounded-rect	iOS: draw 90°, system masks · macOS: you draw the rounded rect (~824×824 content area, 185.4pt radius in the 1024 canvas)
Apple Watch	1088×1088 (intentional overshoot)	Circle	Draw 90°/full-bleed, system applies the circular mask

Keep the hero glyph generously inside the safe area — the mask and glass eat the edges. Apple publishes exact grid templates (Figma/Sketch/PSD/AI) on Apple Design Resources; use them when precision matters.

---

Production pipeline — a capability ladder

Pick the lowest rung that fits; it's the most portable and the cleanest.

Rung 1 (default): the model authors the layers as SVG

For geometric, symbolic, glyph, or lettermark icons — which is most app icons — the best path is to write the SVG directly. It needs no MCP, runs in every CLI and model (including Kimi/Codex/Antigravity where image MCPs may not exist), is native vector (perfect for Mono silhouettes and small-size crispness), and each <g> maps cleanly to an Icon Composer layer.

Author one SVG per layer (or one grouped SVG), flat and opaque, per the geometry above. Then run the feedback loop — without it the model is drawing blind:

write SVG → rasterize to PNG (rsvg-convert, resvg, cairosvg, headless Chrome --screenshot, or qlmanage -t) → Read the PNG back (the Read tool shows images to the model) → critique against the HIG rules + the three-appearance test → adjust → repeat until it holds at 1024, 64, and 32px.

A purely geometric mark may never need anything else.

Rung 2: image generation for illustrative/organic art

When the concept is illustrative (a rendered object, mascot, organic scene) raw SVG is weak. Use an image-gen tool for the generation slot only, then bring it back to vector:

Slot	Default (wired here)	Drop-in alternatives
Generate flat hero art	mcp__recraft__generate_image (use the icon/vector style)	OpenAI gpt-image-1, Gemini "Nano Banana" — if the user has them wired
Isolate the subject	mcp__recraft__remove_background	any bg-removal
Vectorize → SVG	mcp__recraft__vectorize_image	Illustrator Image Trace, potrace
Sharp upscale of master	mcp__recraft__crisp_upscale	—

Recraft is the recommended default because it covers generate + bg-remove + vectorize + upscale natively and is already an MCP here — no API key, no external CLI (the dependency we deliberately dropped from the SnapAI approach). OpenAI/Gemini are fine for the generation step if preferred, but they're raster-only — always route their output through a vectorizer before it becomes a layer, or the Mono/Clear appearances and small sizes will mush. Treat any generated art as a draft of the silhouette and run it past the anti-slop rules.

Rung 3 (optional): preview / compose surface

To eyeball the layer stack or render a preview grid, the pencil or figma MCP (get_screenshot, export_nodes) can help — but they're UI-oriented design tools, not icon authoring tools. The plain SVG→PNG→Read loop in Rung 1 covers the feedback need more portably; reach for Pencil/Figma only if you're already composing there.

---

Export: what "Icon Composer-ready" means

Deliver a folder the user drags into Icon Composer (or hands to a designer), plus a fallback:

<AppName>Icon/
├─ background.svg          full-bleed ground (or .png), opaque
├─ foreground.svg          hero glyph, transparent, centered in safe area
├─ foreground-extra.svg    (optional) supporting foreground layer(s)
├─ dark/                   Dark-appearance versions of the layers
├─ mono/                   Mono-appearance versions (white hero + grays)
├─ macos-rounded.svg       (macOS only) art on the designer-drawn rounded rect
└─ NOTES.md               layer order, signature hex, canvas size, safe-area, appearance checks

Rules for every exported layer:

• SVG preferred (Icon Composer's recommended input); if raster, 1024×1024 (1088 for watch), sRGB.
• Flat and opaque source — no baked corners (except macOS), shadow, gloss, blur, or specular. The renderer owns those.
• Author Default, Dark, and Mono; let Icon Composer derive Clear/Tinted.
• In NOTES.md, record layer order, signature hex, canvas size, the safe-area assumption, and the three-appearance check results so the import is reproducible.

Asset-catalog fallback (pre-26 targets)

Icon Composer also exports a flattened AppIcon.appiconset. If you must support OS versions before the layered system, produce a single flattened opaque 1024 master and follow the multi-size "All Sizes" discipline in app-brand-identity (bolder art in the small slots; alpha stripped to avoid ITMS rejection). The .icon layers serve OS 26+; the raster catalog serves older OS.

---

Output checklist (/icon-composer)

• Concept confirmed (from app-brand-identity, or flagged as missing).
• HIG pass — single concept, flat/opaque, no text/photo/UI, bold weights, no sharp thin lines.
• Rung chosen — SVG-authored (geometric) or image-gen→vectorize (illustrative), with the render→Read→critique loop run.
• Layers separated — background + foreground(s), each its own file.
• No baked corners/shadow/gloss/blur/specular (except the macOS rounded rect).
• Canvas & geometry correct — 1024 (1088 watch); iOS 90° corners, macOS rounded rect drawn.
• Three appearances authored — Default, Dark, Mono; Mono hero is white on grays.
• Mono silhouette holds at 64px and 32px.
• Export bundle assembled with NOTES.md; SVG sources included.
• Fallback raster produced if pre-26 support is needed (+ multi-size per app-brand-identity).
• Anti-slop pass — no gradient blob / AI-gradient / fake 3D.

Smell test before you ship: render the foreground as a flat white-on-gray silhouette at 32px (the Mono/tinted worst case). If you can't tell what the app does, the layered appearances will fail taste even when they pass App Review. Simplify the foreground until the silhouette alone carries the idea.

---

References

• App icons — Apple HIG: https://developer.apple.com/design/human-interface-guidelines/app-icons
• Creating your app icon using Icon Composer (Xcode 26): https://developer.apple.com/documentation/Xcode/creating-your-app-icon-using-icon-composer
• Icon Composer: https://developer.apple.com/icon-composer/
• WWDC25 — "Say hello to the new look of app icons" (220), "Create icons with Icon Composer" (361), "Meet Liquid Glass" (219)
• Apple Design Resources (grid templates): https://developer.apple.com/design/resources/