🎯 Design
App Icon Set Spec: Grid, Sizes, Platform Rules, and Don'ts
Specify an app icon set: grid, sizes, platform masks, safe zone, and don'ts so a designer can export without guessing.
0Reviews
Prompt
Act as a product designer writing an app icon production spec. One family of icons (app icon + simple system derivatives), not a 400-icon product set, not a logo brand book. Inputs: - App name: [Name] - Platforms: [iOS / Android / macOS / web favicon / all] - Master metaphor: [Metaphor] - Colors: [Colors] - Background: [Background] - Masks I must survive: [Masks] - Existing logo notes: [Logo] - Where it sits: [Context] - Forbidden: [Forbidden] Generate: 1. Concept: 5 lines. What reads at 16px vs 1024px. What is not in the icon (wordmark, screenshot of the UI). 2. Grid: Describe a 24-unit (or 100%) grid: key shapes, corner radius as a fraction, safe zone percent. Squircle vs circle vs rounded-rect. Optical adjustments (make the glyph 2-4% heavier at 16px). 3. Size list: Exact pixel sizes for requested Platforms (iOS 1024, Android adaptive 432 foreground in 108dp canvas, Play 512, favicon 16/32/48, apple-touch 180). If a platform is not in Inputs, skip it. 4. Adaptive / mask rules: Foreground vs background layers. Safe zone (~18% per side typical for Android adaptive). What gets cropped on a circle vs squircles. Test silhouettes. 5. Color and effects: From Colors only. No mystery gradients unless specified. Flatten vs layered. Dark mode: iOS does not recolor app icons; Android themed icons if requested. State the limit. 6. Don'ts: 10 (thin 1px lines, photos, text over 3 letters, badges baked in, notifications drawn on the icon, OS UI chrome, AI sparkle unless it is the product). 7. Export checklist: file names, PNG vs SVG vs App Store 1024 no alpha (iOS), padding. A table: filename | size | notes. 8. QA: 6 tests (blur at 16px, yellow icon next to it, screenshot on a busy wallpaper, print at 10mm, invert, grayscale). Constraints: - Honor Forbidden and Colors. - Do not invent Apple/Google policy dates; describe durable rules (no alpha on iOS 1024, adaptive safe zone). - Not a full icon library for in-app actions. - No fake "Human Interface Guideline section 4.2" citations.
Instructions
Replace every [bracket] with your details before running. Works on ChatGPT, Claude, and Gemini.
Examples
Example Input
App name: BatchNotes Platforms: all Master metaphor: navy rounded rectangle like a notebook cover with a single paper notch / dog-ear, no letters if they fail at 16px; a small B is OK if it holds Colors: navy #1B2A4A, paper #F6F1E8 Background: navy fill Masks I must survive: iOS squircle, Android circle and squircles, macOS rounded rect Existing logo notes: logo brief wants B+notebook; icon may drop the wordmark Where it sits: next to Slack, Notion, Harvest on a phone home screen Forbidden: chat bubble, sparkle, red notification badge baked in, screenshots of the editor, white background that disappears on light wallpaper
Example Output
1. Concept Notebook cover: full-bleed navy, one paper dog-ear top-right, optional B in paper if it holds at 16px. If B muddies, drop letters. Not the wordmark. Not a UI screenshot. Not Slack-like chat. 2. Grid 1024 master on a 24-unit grid. Safe zone: 20% inset for the dog-ear tip and B. Corner radius of the content is irrelevant on iOS (OS masks). Draw square canvas. Dog-ear occupies ~1/5 of top-right. At 16px, thicken the ear 1 grid unit so it does not vanish. 3. Sizes iOS App Store: 1024x1024 PNG, no alpha, no rounding. iOS: 180 apple-touch, 120, 80, etc. from 1024. Android adaptive: 108x108 dp canvas, 72dp safe foreground (~432px master layer). Play store 512. macOS: 1024 with OS rounding; keep content inside ~80%. Favicon: 32 (primary), 16, 48. 16 may be ear-only navy square if B fails. 4. Masks Foreground: ear + optional B, paper color. Background layer: navy. Circle crop must not clip the ear into a random triangle; keep ear fully inside 72dp. Squircle: slightly more room. Test silhouette vs Notion (white/black N) and Slack (hash). Ours is a cover, not a glyph-on-white. 5. Color and effects Navy field, paper ear. Flat, no drop shadow, no gradient. iOS will not restyle this in dark mode; do not ship a second "dark icon" expecting OS swap. Android themed icons: provide a monochrome foreground (paper ear) if you want themed; else expect the navy plate. 6. Don'ts Chat bubble. Sparkle. Baked red badge. Editor screenshot. White canvas. Thin 1px rules. "BN" two letters at 16px. Fake iOS notification overlay. Transparency on the 1024 iOS file. Rainbow. 7. Export batchnotes-icon-1024.png | 1024 | iOS, no alpha fg-432.png + bg-432.png | Android adaptive play-512.png favicon-32.png, favicon-16.png macos-1024.png SVG master optional for the ear geometry only. 8. QA 16px: still a notch, not a speck. Next to Slack/Notion: not a bubble. Busy wallpaper: navy still reads. 10mm print: ear visible. Grayscale: cover still a cover. Invert: do not invert; keep navy.