Home · Skills · Image Generation

Create Icons

High quality icons for your apps.

No install, no account.

Paste into Claude, ChatGPT or Cursor.

People have run this

Result posted by highgroundbkk
highgroundbkk
Result posted by highgroundbkk
highgroundbkk
Result posted by Rafael Lemos
Rafael Lemos

Posted by people who ran this prompt themselves, not by the author.

Read the source261 lines
create-icons/SKILL.md261 lines7.7 KBRawView on GitHub
1A premium iOS app icon for a running and fitness app, featuring
2a stylized abstract runner figure in motion, composed of flowing
3gradient ribbons in energetic coral transitioning to vibrant
4magenta. The figure suggests speed and forward momentum with
5trailing motion elements. Background is a deep navy blue with
6subtle radial gradient lighter behind the figure. Dynamic,
7energetic, aspirational. Soft lighting with subtle glow around
8figure. Rounded square format, 1024x1024px.
9 
10follow the specs below and the example icon designs attached:
11 
12These specifications define the visual language of premium, modern app icons as seen in top-tier iOS/macOS applications. The goal is to produce icons that feel polished, memorable, and worthy of a flagship product.
13 
14---
15 
16## 1. Canvas & Shape
17 
18### Base Shape
19- **Format:** Square with continuous rounded corners (iOS "squircle")
20- **Corner Radius:** Approximately 22-24% of icon width (mimics Apple's superellipse)
21- **Aspect Ratio:** 1:1
22- **Recommended Resolution:** 1024×1024px (scales down cleanly)
23 
24### Safe Zone
25- Keep primary elements within the center 80% of the canvas
26- Allow subtle effects (glows, shadows) to approach edges but not clip
27 
28---
29 
30## 2. Background Treatments
31 
32### Solid Backgrounds
33- **Dark/Black:** Pure black (#000000) to deep charcoal (#1C1C1E) — creates drama, makes elements pop
34- **Vibrant Solids:** Saturated single-color fills (electric blue #007AFF, warm orange #FF9500)
35- **Gradient Backgrounds:** Subtle top-to-bottom or radial gradients adding depth
36 
37### Gradient Types (when used)
38| Type | Description | Example |
39|------|-------------|---------|
40| Linear | Soft transition, typically lighter at top | Blue sky gradient |
41| Radial | Center glow effect, darker edges | Spotlight effect |
42| Angular | Sweeping color transition | Iridescent surfaces |
43 
44### Texture (Subtle)
45- Fine vertical/horizontal lines for metallic or fabric feel
46- Noise grain at 1-3% opacity for organic warmth
47- Avoid heavy textures that compete with the main symbol
48 
49---
50 
51## 3. Color Palette
52 
53### Primary Palette Characteristics
54- **High Saturation:** Colors are vivid but not neon
55- **Rich Darks:** Blacks and navy blues feature prominently
56- **Selective Brights:** Accent colors used sparingly for impact
57 
58### Recommended Color Families
59 
60#### Cool Spectrum
61```
62Navy/Deep Blue: #0A1628, #1A2744, #2D4A7C
63Electric Blue: #007AFF, #5AC8FA, #64D2FF
64Purple/Violet: #5E5CE6, #BF5AF2, #AF52DE
65Teal/Cyan: #30D5C8, #5AC8FA, #32ADE6
66```
67 
68#### Warm Spectrum
69```
70Orange: #FF9500, #FF6B35, #FF3B30
71Pink/Coral: #FF6B8A, #FF2D55, #FF375F
72Peach/Salmon: #FFACA8, #FF8A80, #FFB199
73```
74 
75#### Neutrals
76```
77True Black: #000000
78Soft Black: #1C1C1E, #2C2C2E
79White: #FFFFFF
80Off-White: #F5F5F7, #E5E5EA
81```
82 
83### Color Harmony Rules
84- Limit to 2-3 dominant colors per icon
85- Use complementary or analogous relationships
86- One color should dominate (60%), secondary (30%), accent (10%)
87 
88---
89 
90## 4. Lighting & Depth
91 
92### Light Source
93- **Position:** Top-left or directly above (consistent 45° angle)
94- **Quality:** Soft, diffused — no harsh shadows
95- **Creates:** Subtle highlights on upper surfaces, shadows below
96 
97### Depth Techniques
98 
99#### Highlights
100- Soft white/light gradient on top edges of 3D forms
101- Specular reflections as small, bright spots (not overpowering)
102- Rim lighting on edges facing the light
103 
104#### Shadows
105- **Drop Shadows:** Soft, diffused, 10-20% opacity, slight Y offset
106- **Inner Shadows:** Very subtle, adds recessed effect
107- **Contact Shadows:** Darker, tighter shadows directly beneath objects
108 
109#### Layering
110- Elements should appear to float above the background
111- Use atmospheric perspective (distant elements slightly hazier)
112- Overlapping shapes create natural hierarchy
113 
114---
115 
116## 5. Symbol & Iconography
117 
118### Style Approaches
119 
120#### A. Dimensional/3D Objects
121- Soft, rounded forms with clear volume
122- Subtle gradients suggesting curvature
123- Examples: Paper airplane, open book, spheres
124 
125#### B. Flat with Depth Cues
126- Simplified shapes with strategic shadows/highlights
127- Clean geometry with slight gradients
128- Examples: Flame icon, compass dial
129 
130#### C. Abstract/Geometric
131- Overlapping translucent shapes
132- Interlocking forms creating visual interest
133- Examples: Overlapping diamonds, triangular compositions
134 
135#### D. Glassmorphic/Translucent
136- Frosted glass effect with blur
137- Shapes that appear to have transparency
138- Subtle refraction and color bleeding
139 
140### Symbol Characteristics
141- **Simplicity:** Recognizable at 16×16px
142- **Balance:** Visual weight centered or intentionally dynamic
143- **Originality:** Avoid generic clip-art feeling
144- **Metaphor:** Symbol clearly relates to app function
145 
146### Recommended Symbol Scale
147- Primary symbol: 50-70% of icon canvas
148- Leave breathing room around edges
149- Optical centering (may differ from mathematical center)
150 
151---
152 
153## 6. Material & Surface Qualities
154 
155### Matte Surfaces
156- Soft gradients without sharp highlights
157- Subtle texture possible
158- Colors appear solid and grounded
159 
160### Glossy/Reflective Surfaces
161- Pronounced highlights and reflections
162- Increased contrast between light and dark areas
163- Suggests glass, plastic, or polished metal
164 
165### Metallic Surfaces
166- Linear or radial gradients mimicking metal sheen
167- Cool tones for silver/chrome, warm for gold/bronze
168- Fine texture lines optional
169 
170### Glass/Translucent
171- Reduced opacity (60-85%)
172- Blur effect on elements behind
173- Colored tint with light edges
174- Subtle inner glow
175 
176### Paper/Fabric
177- Soft, muted colors
178- Very subtle texture
179- Gentle shadows suggesting flexibility
180 
181---
182 
183## 7. Effects & Polish
184 
185### Glow Effects
186- **Outer Glow:** Soft halo around bright elements, 5-15% opacity
187- **Inner Glow:** Subtle edge lighting, creates volumetric feel
188- **Color Glow:** Tinted glow matching element color (creates ambiance)
189 
190### Reflections
191- Subtle floor reflection beneath floating objects (very faint)
192- Environmental reflections on glossy surfaces
193- Specular highlights suggesting light source
194 
195### Gradients Within Shapes
196- Multi-stop gradients for complex color transitions
197- Radial gradients for spherical appearance
198- Mesh gradients for organic, fluid coloring
199 
200### Blur & Depth of Field
201- Background blur for layered compositions
202- Gaussian blur at 5-20px for atmospheric effect
203- Motion blur only if suggesting movement
204 
205---
206 
207## 8. Composition Principles
208 
209### Visual Balance
210- **Centered:** Symbol sits in optical center (classical, stable)
211- **Dynamic:** Slight offset creates energy and movement
212- **Asymmetric:** Intentional imbalance with visual counterweight
213 
214### Negative Space
215- Generous whitespace/breathing room
216- Background is part of the design, not just empty
217- Negative space can form secondary shapes
218 
219### Focal Point
220- One clear area of highest contrast/detail
221- Eye should land on most important element first
222- Supporting elements recede visually
223 
224### Scale Contrast
225- Mix of large and small elements creates interest
226- Primary symbol dominates, details are subtle
227- Avoid cluttering with equal-sized elements
228 
229---
230 
231## 9. Style Variations
232 
233### Minimal Dark
234- Black or very dark background
235- Single bright element or monochromatic symbol
236- High contrast, dramatic feel
237- Examples: Flame icon, stocks chart
238 
239### Vibrant Gradient
240- Multi-color gradient backgrounds
241- White or light symbols on top
242- Energetic, modern feel
243- Examples: Telegram, Books app
244 
245### Soft & Light
246- Light, airy backgrounds (white, pastels)
247- Colorful symbols with soft shadows
248- Friendly, approachable feel
249- Examples: Altitude app, gesture icons
250 
251### Glassmorphic
252- Translucent, frosted elements
253- Layered shapes with varying opacity
254- Contemporary, sophisticated feel
255- Examples: Shortcuts icon, overlapping shapes
256 
257### 3D Rendered
258- Realistic 3D objects
259- Complex lighting and materials
260- Premium, tangible feel
261- Examples: Sphere, airplane, book

Alternatives

Also in Image Generation