# App icon gradient: design one that holds up at 60 px

[Canonical HTML page](https://gradiently.design/guide/app-icon-gradient)

A gradient makes an app icon feel lit and alive at 1024 pixels. At Home Screen size it either reads as a confident tile or turns into a smudge. Here is how to land on the right side.

## 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.

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](https://gradiently.design/guide/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

The same icon drawn to scale. Whatever survives the 60 pixel square is your real design; the rest is decoration.

## 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 square app icon with one bold letter K on a gradient ground

A single heavy letter on a full bleed ground. It still reads when the phone shrinks it to 60 points.

The same letter K icon on a second, differently coloured gradient ground

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](https://gradiently.design/guide/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.

- Violet dusk: `linear-gradient(160deg, #a78bfa 0%, #7c3aed 50%, #3b0764 100%)`
- Deep sky: `linear-gradient(160deg, #38bdf8 0%, #2563eb 55%, #1e1b4b 100%)`
- Ember: `linear-gradient(160deg, #fdba74 0%, #f43f5e 55%, #9f1239 100%)`
- Lagoon: `linear-gradient(160deg, #6ee7b7 0%, #0d9488 55%, #134e4a 100%)`
- Honey: `linear-gradient(160deg, #fde68a 0%, #f59e0b 50%, #b45309 100%)`
- Orchid: `linear-gradient(160deg, #f9a8d4 0%, #db2777 55%, #500724 100%)`

Three stops, light at the top, deep at the bottom, all neighbouring hues. Each holds a white glyph from corner to corner.

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](https://gradiently.design/guide/muddy-gradients) shows why that happens and how `oklch` interpolation fixes it.

```css
.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;
}
```

A square, full bleed icon ground for a web app or a mockup. No border radius: iOS and Android apply their own mask.

## 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](https://webaim.org/resources/contrastchecker/) 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](https://gradiently.design/guide/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](https://gradiently.design/guide/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.

| Home Screen | What happens to your gradient | What to prepare |
| --- | --- | --- |
| Light (default) | Shown as designed | The full colour 1024 master |
| Dark | Surrounded by dark icons and wallpaper | A deeper version of the ground, or the glyph in colour on a dark ground |
| Tinted | Colour replaced by one tint | A clean monochrome glyph with no inner gradient |
| Android themed | Recoloured to match the wallpaper | A monochrome layer inside the adaptive icon |

One symbol, several grounds. Plan the variants before the first release so they feel related.

## 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](/explore) shows Gradiently Marks, living gradient grounds, worn as app icons and other brand surfaces, and [Try on your brand](/try) 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](https://gradiently.design/guide/exclusive-brand-assets) all share a look that is only yours.

## FAQ

### 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.