High quality icons for your apps

Create icons

by semih · CC0-1.0 license · updated Sep 9

High quality icons for your apps.

Overview

High quality icons for your apps.

The prompt

261 lines · 7,896 characters · makes an image — paste it into an image model

1	A premium iOS app icon for a running and fitness app, featuring
2	a stylized abstract runner figure in motion, composed of flowing
3	gradient ribbons in energetic coral transitioning to vibrant
4	magenta. The figure suggests speed and forward momentum with
5	trailing motion elements. Background is a deep navy blue with
6	subtle radial gradient lighter behind the figure. Dynamic,
7	energetic, aspirational. Soft lighting with subtle glow around
8	figure. Rounded square format, 1024x1024px.
9
10	follow the specs below and the example icon designs attached:
11
12	These 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	```
62	Navy/Deep Blue: #0A1628, #1A2744, #2D4A7C
63	Electric Blue: #007AFF, #5AC8FA, #64D2FF
64	Purple/Violet: #5E5CE6, #BF5AF2, #AF52DE
65	Teal/Cyan: #30D5C8, #5AC8FA, #32ADE6
66	```
67
68	#### Warm Spectrum
69	```
70	Orange: #FF9500, #FF6B35, #FF3B30
71	Pink/Coral: #FF6B8A, #FF2D55, #FF375F
72	Peach/Salmon: #FFACA8, #FF8A80, #FFB199
73	```
74
75	#### Neutrals
76	```
77	True Black: #000000
78	Soft Black: #1C1C1E, #2C2C2E
79	White: #FFFFFF
80	Off-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