The short version
- A good app icon gradient uses one symbol on a ground of two or three colour stops that change clearly in lightness.
- App icons are designed at 1024 by 1024 pixels but are mostly seen at about 60 points on a Home Screen, so every decision should be judged at the small size.
- A gradient that runs from lighter at the top to deeper at the bottom reads as a lit surface and keeps a white or dark glyph legible across the whole tile.
- Muddy midpoints come from blending opposite hues in plain sRGB, and banding comes from long, low contrast blends exported at low bit depth.
- Test the icon on light, dark and tinted Home Screens and next to other apps before you ship it.
On this page
An app icon gradient holds up at Home Screen size when it does four things: one bold symbol, a ground of two or three colour stops, one clear direction of light, and strong contrast between the glyph and every part of the ground. You design the icon as a 1024 × 1024 square, but people meet it at roughly 60 points, wedged between other apps. Judge every choice at that small size and the gradient becomes a strength instead of noise.
Why gradient app icons fail at small sizes
A 1024 pixel canvas flatters everything. Shrink the same icon to 180 pixels for a phone at 3x, or 120 pixels at 2x, and the subtlety averages out into one flat, slightly dirty colour. The full list of sizes the stores generate lives in our app icon size guide; here is what the shrink looks like.
Store master
1024 × 1024
iPhone 3x
180 × 180
iPhone 2x
120 × 120
1x reference
60 × 60
One symbol, two or three stops, one direction
The icons people find instantly on a crowded screen share a simple structure. One glyph, centred, filling roughly 50 to 65 percent of the tile width. Behind it, a ground that moves from one colour to a neighbour, with a clear step in lightness so the eye reads it as light falling on a surface. Two stops are enough for most icons; a third works when it sits between neighbours on the colour wheel, never as a surprise accent.
A single heavy letter on a full bleed ground. It still reads when the phone shrinks it to 60 points.
The same glyph on a different ground. The symbol stays fixed; the ground is what makes the icon yours.
Direction matters more than angle. Light from the top, lighter at the top left and deeper at the bottom right, matches how people read a lit object and how most system icons are shaded. Pick one direction and keep it for every icon in the family, including any in app badges and your gradient logo, so the set feels like one brand.
Copyable app icon gradients that read
Each ground below has a lightness change you can see at a glance, neighbouring hues so the midpoint stays clean, and room for a white glyph. Paste one behind a symbol in your design tool or into CSS.
If you need two hues far apart on the wheel, such as blue and orange, mix them in a perceptual space so the middle does not collapse to grey. Our guide to muddy gradients shows why that happens and how oklch interpolation fixes it.
.app-icon {
width: 1024px;
aspect-ratio: 1;
background: linear-gradient(160deg in oklch, #38bdf8 0%, #2563eb 55%, #1e1b4b 100%);
display: grid;
place-items: center;
}
.app-icon svg {
width: 58%;
fill: #ffffff;
}Glyph contrast on a moving ground
A glyph on a gradient has to win against the lightest and the darkest part of the ground, not the average. Check the contrast of your symbol colour against the lightest stop it overlaps; if it drops below about 3:1, the edge of the symbol fades on that side. The WebAIM contrast checker gives you the ratio in seconds. When a white glyph fails at the top, deepen the first stop rather than adding a shadow, and see logo on gradient background for more fixes.
Avoid
- Opposite hues mixed in sRGB, with a grey middle
- Four or more stops that cancel each other out
- Pale stops with almost no lightness change
- Hairline strokes or a full wordmark
- Rounded corners baked into the artwork
- Fine grain or noise that shimmers at 60 points
Do
- Neighbouring hues, or opposites mixed in oklch
- Two or three stops with one clear direction
- A visible step from light to deep
- One heavy symbol at 50 to 65 percent of the width
- A full bleed square that the system masks
- Smooth colour, exported as a 24 bit PNG
How to avoid banding in an app icon gradient
Banding shows up as visible stripes where a smooth blend should be. It is worst in long, dark, low contrast blends, exactly the deep bottom stop many icons use. Export your 1024 master as a full colour PNG, never an 8 bit indexed one, keep the darkest stop from sitting too close to black, and if you add texture, keep it so fine that it disappears at small sizes. The gradient banding guide covers the causes in detail.
Light, dark and tinted Home Screens
Your icon no longer lives on one background. Since iOS 18, people can switch their Home Screen to dark or tinted icons, and Android can recolour icons to match the wallpaper when you supply a monochrome layer. A gradient icon that relies on a bright ground can look washed out next to darkened neighbours, and a tinted mode keeps only the shape. That is one more reason the symbol has to carry the brand on its own.
What happens to your gradient
What to prepare
What to prepare
What to prepare
What happens to your gradient
What to prepare
Steps to design and test your gradient app icon
- 1
Draw the symbol first, in black on white
If it is not recognisable as a flat 60 pixel silhouette, no gradient will save it.
- 2
Pick a ground of two or three stops
Neighbouring hues, light at the top, deep at the bottom. Start from one of the grounds above if you are stuck.
- 3
Set it as a 1024 × 1024 full bleed square
No rounded corners, no transparency. The stores and the system add the mask.
- 4
Check glyph contrast at both ends
Measure the symbol against the lightest and the darkest stop it touches; deepen the ground until both pass.
- 5
Shrink it and look
View the icon at 180, 120 and 60 pixels on a real phone or a screenshot of your Home Screen, next to other apps.
- 6
Make the dark and tinted versions
A deeper ground for dark mode and a clean monochrome glyph for tinted and Android themed icons.
- 7
Export and ship
A 24 bit PNG for the master, then compare it once more against the rest of your brand.
See your brand worn as an app icon first
Choosing a ground is easier when you can see it as an icon rather than a swatch. Explore shows Gradiently Marks, living gradient grounds, worn as app icons and other brand surfaces, and Try on your brand puts your own name and logo on them for free so you can shuffle grounds and compare them side by side. When one fits, set it as a 1024 × 1024 square in the Studio and export the master.
Most gradient icons look alike because everyone reaches for the same two famous blends. A claimed Mark has exactly one owner, so no other app can wear the same ground, and your icon, store screenshots and exclusive brand assets all share a look that is only yours.
Questions people ask
How many colours should an app icon gradient have?
Two or three stops is the sweet spot. More stops tend to cancel each other out at Home Screen size and leave a muddy tile.
Which direction should an app icon gradient go?
Lighter at the top and deeper at the bottom reads as light falling on the icon and keeps a glyph legible. Keep the same direction across every icon in your family.
Should I round the corners of my app icon?
No. Supply a full bleed square at 1024 × 1024 pixels; iOS and Android apply their own mask, and baked in corners can leave odd edges.
Why does my gradient icon look muddy when it is small?
Usually the stops are opposite hues mixed in sRGB, or there is too little lightness change. Use neighbouring hues, or mix in oklch, and make the light to deep step clearly visible.
How do I make a gradient app icon work in dark mode?
Prepare a deeper version of the ground for dark Home Screens and a clean monochrome glyph for tinted and themed icons, so the symbol carries the brand on its own.
Written by Gradiently
The team behind Gradiently, a design tool built around Marks: living gradients that make everything you design look like yours.
See our profile