ios-app-icon-generator
iOS App Icon Generator
Create beautiful, production-ready iOS app icons through a two-phase creative process.
Phase 1: Visual Philosophy
Before drawing anything, develop a 2-3 paragraph Icon Philosophy that articulates:
- Core concept: What single idea or feeling should the icon convey?
- Visual metaphor: What shape, object, or abstraction represents the app's purpose?
- Color psychology: What palette evokes the right emotional response?
- Silhouette test: Will it be recognizable as a tiny black shape?
Write this philosophy out. It guides every design decision.
Design Principles
Icons that work follow these rules:
- Simplicity: One focal element. No more than 2-3 colors. No text (illegible at small sizes).
- Distinctiveness: Must stand out in a grid of 30 other icons. Avoid generic symbols (gears, checkmarks, clouds).
- Scalability: The 16x16 notification icon must read as clearly as the 1024x1024 App Store version.
- No photography: Apple's guidelines discourage photos. Use illustration, geometry, or abstract forms.
- Optical balance: Center of visual weight, not geometric center. Curves feel heavier than straight lines.
Phase 2: Icon Generation
Generate the icon as a self-contained HTML file with embedded SVG that:
- Renders the icon design at 1024x1024 (the master size)
- Includes iOS-style rounded corners (superellipse, not CSS border-radius)
- Shows a preview grid of all sizes to verify readability
- Provides a download mechanism for each size
Required Sizes
Generate all iOS app icon sizes:
| Size | Purpose |
|---|---|
| 1024x1024 | App Store |
| 180x180 | iPhone (@3x) |
| 167x167 | iPad Pro (@2x) |
| 152x152 | iPad (@2x) |
| 120x120 | iPhone (@2x) |
| 87x87 | Spotlight (@3x) |
| 80x80 | Spotlight (@2x) |
| 76x76 | iPad (@1x) |
| 60x60 | iPhone (@1x) |
| 58x58 | Settings (@2x) |
| 40x40 | Spotlight (@1x) |
| 29x29 | Settings (@1x) |
| 20x20 | Notification (@1x) |
HTML Artifact Structure
<!DOCTYPE html>
<html>
<head>
<title>App Icon: [Name]</title>
<style>
/* Dark interface, icon grid layout, download buttons */
</style>
</head>
<body>
<!-- Philosophy statement -->
<!-- Master SVG at 1024x1024 -->
<!-- Preview grid showing all sizes -->
<!-- Download buttons (use canvas to convert SVG → PNG) -->
<script>
// SVG → Canvas → PNG download logic
</script>
</body>
</html>
SVG Guidelines
- Use
viewBox="0 0 1024 1024"for the master - Apply the iOS squircle mask (superellipse with n≈5)
- Use gradients sparingly but effectively
- Ensure googd stroke widths scale proportionally
- Test: zoom browser to 25% - is the icon still clear?
iOS Squircle Mask
The iOS icon shape is NOT a rounded rectangle. Use this superellipse path or approximate with:
<clipPath id="ios-squircle">
<path d="M512,1024 C252,1024 0,772 0,512 C0,252 252,0 512,0 C772,0 1024,252 1024,512 C1024,772 772,1024 512,1024 Z" />
</clipPath>
Or generate programmatically with the superellipse formula: |x/a|^n + |y/b|^n = 1 where n ≈ 5.
Process
- Ask about the app's purpose, name, and any existing brand colors
- Write the Icon Philosophy
- Describe 2-3 concept directions with rationale
- Get user approval on a direction
- Generate the HTML artifact with full icon set
- Iterate based on feedback
Quality Bar
The output should look like it belongs on a top-10 App Store chart. Every icon in that grid was crafted by a professional designer - yours should be indistinguishable from theirs.
Avoid:
- Glossy/skeuomorphic styles (outdated since iOS 7)
- Thin hairline details (disappear at small sizes)
- Overly complex illustrations
- Generic clip-art aesthetics
- Centered-circle-on-gradient laziness
More from ghostscientist/skills
paper-to-intuition
Transforms an academic paper into deep, multi-layered understanding. Use when asked to explain a paper, break down a research paper, understand an arXiv paper, or build intuition for a technical concept from a paper. Generates explanations at multiple levels plus visual intuition diagrams.
48research-question-refiner
Helps transform a vague research interest into a concrete, tractable research question. Use when asked to refine a research idea, develop a research question, scope a research project, or figure out what to work on. Walks through systematic refinement with feasibility analysis.
14create-watchos-version
Analyzes existing iOS/macOS/Apple platform projects to create a comprehensive, phased plan for building a watchOS companion or standalone app. Use when users want to add watchOS support to an existing Apple platform app, create a Watch app version of their iOS app, or build watchOS features. The skill digests project architecture, identifies patterns, analyzes API compatibility, searches for current watchOS documentation, and produces a detailed implementation plan with API availability warnings before any code generation.
9implement-paper-from-scratch
Guides you through implementing a research paper step-by-step from scratch. Use when asked to implement a paper, code up a paper, reproduce research results, or build a model from a paper. Focuses on building understanding through implementation with checkpoint questions.
8turn-this-feature-into-a-blog-post
Generates a technical blog post from code implementation. Use when asked to write a blog post about a feature, explain an implementation for a blog, document code as a blog article, or create technical content from source code. Triggers on phrases like "write a blog post about", "turn this into a blog", "create a technical article", or "explain this for a blog".
5experiment-design-checklist
Generates a rigorous experiment design given a hypothesis. Use when asked to design experiments, plan experiments, create an experimental setup, or figure out how to test a research hypothesis. Covers controls, baselines, ablations, metrics, statistical tests, and compute estimates.
5