# Alternate app icons: a set of looks from one brand

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

People choose an alternate app icon to make a Home Screen feel personal. The set still has to read as one app: one symbol, one colour family, and a name for every look.

## The short version

- Alternate app icons are extra Home Screen icons people choose in your app's settings, and each one has to stay recognisable as the same app.
- Keep the symbol, the colour family and the direction of light fixed, and let each icon change only its crop, its scale or its plate.
- Dark, clear and tinted modes restyle the selected icon. They should not swap its symbol.
- Design every file as a 1024 by 1024 square with square corners, and judge the whole row at Home Screen size.
- Name each look before you draw it, including any seasonal icon and the date it comes down.

Alternate app icons are extra Home Screen looks for one app. They stay one brand when the symbol, the colour family and the direction of light stay put, and each icon changes only one thing: the crop, the scale of the symbol, or a darker plate in the same hues. People choose one in the app's settings. The store listing keeps the primary icon.

## What alternate app icons are for

An alternate is another face for an app someone already has. On iOS and iPadOS, on Apple TV, and on compatible visionOS apps, a person opens your settings and chooses it. Apple asks that each icon stay closely related to the app, and that none be easy to mistake for another product. A quieter crop, a darker plate or a seasonal accent is fine when the symbol stays.

Appearances are a separate control. People can set icons to default, dark, clear or tinted, and the system can fill in one you did not draw. Keep the same features across those modes. Original, Drift, Night and Season are files someone chooses.

> **Two different jobs** Appearances restyle the icon already selected. Alternates are named files a person picks in settings. Do not introduce a new symbol in the dark appearance.

## What stays fixed across the set

Treat the set like a family of [logo variations](https://gradiently.design/guide/logo-variations). The signature is the symbol: one letter, or one filled shape. The [app icon gradient](https://gradiently.design/guide/app-icon-gradient) guide covers the single tile: a heavy shape, two or three colour stops, light from one direction, and contrast at both ends of the ground. Use that rule on every file in the set.

A square 1024 pixel app icon with a single letter R centred on a gradient ground

Original, for the fictional app Orry: one letter at a normal scale. This file is the store icon.

A square 1024 pixel app icon with a much larger letter R on the same gradient ground

Bold: the same letter, larger, on the same ground. One change, so it is still the same app.

Cover the captions. If the two tiles could be different apps, the symbol has drifted. If you cannot tell them apart at Home Screen size, you have one icon, not two. A [signature look](https://gradiently.design/guide/brand-signature-look) is those few decisions, held until a thumbnail is enough.

## Four grounds from one colour family

Use neighbouring hues and one step from light to deep, then make app icon variants by moving the composition, not the palette. These four are one rose family for the fictional app Orry. Original lights from the top, Drift moves that light, Close crops one region, and Night is a darker plate in the same hues. Night is an alternate someone chooses, not the system's dark appearance.

- Original: `linear-gradient(160deg, #fbcfe8 0%, #db2777 52%, #500724 100%)`
- Drift: `linear-gradient(20deg, #f9a8d4 0%, #be185d 50%, #4c0519 100%)`
- Close: `radial-gradient(circle at 32% 28%, #fce7f3 0%, #e11d48 46%, #4c0519 100%)`
- Night: `linear-gradient(160deg, #9f1239 0%, #4c0519 58%, #1a050c 100%)`

One rose family. The angle, the crop and the value change. The hues do not.

Listings want a PNG, so use the CSS as a check before you export. If a light symbol vanishes on the lightest stop, deepen that stop. Leave glow, shadow and bevel to the system: a painted glow turns muddy at Home Screen size.

```css
.icon {
  width: 1024px;
  aspect-ratio: 1;
  background: var(--ground);
  display: grid;
  place-items: center;
}

.icon svg {
  width: 56%;
  height: 56%;
  fill: #fff7fb;
}

.original {
  --ground: linear-gradient(160deg, #fbcfe8 0%, #db2777 52%, #500724 100%);
}

.drift {
  --ground: linear-gradient(20deg, #f9a8d4 0%, #be185d 50%, #4c0519 100%);
}

.close {
  --ground: radial-gradient(circle at 32% 28%, #fce7f3 0%, #e11d48 46%, #4c0519 100%);
}

.bold svg {
  width: 78%;
  height: 78%;
}

.quiet svg {
  width: 34%;
  height: 34%;
}

.night {
  --ground: linear-gradient(160deg, #9f1239 0%, #4c0519 58%, #1a050c 100%);
}

.night svg {
  fill: #fbcfe8;
}
```

The same four grounds, plus a larger symbol and a smaller one. Keep the symbol clear of the corners the mask will cut.

## Name the app icon set before you draw it

Copy this table into the file names before you draw. What may move, and what stays frozen, is the same split as a [dynamic brand identity](https://gradiently.design/guide/dynamic-brand-identity). [Brand consistency](https://gradiently.design/guide/brand-consistency) is the point of the list: people learn an icon by seeing it again.

| Name | What changes | What stays | Ship it as |
| --- | --- | --- | --- |
| Original | The reference icon | Symbol, family, light | Store icon and default |
| Drift | Where the light sits | Symbol and palette | Everyday alternate |
| Close | A tighter crop | Symbol and palette | When the ground looks busy |
| Bold | A larger symbol | Ground and palette | When the symbol leads |
| Quiet | A smaller symbol | Symbol and palette | When the ground leads |
| Night | A darker plate | Symbol and hues | Chosen, not dark mode |
| Season | One stop or a small motif | Symbol, light, family | Dated, then removed |

A naming sheet for Orry. One row per file, and one change per row. Your names can differ.

A seasonal stop or a small motif can use the Season row if the symbol and the colour list stay. Date that row and remove the file when the date arrives. It never replaces the store icon.

## How to design the set

1. **Lock the symbol** Draw it once, as a filled shape with no hairline strokes. Centre it, and leave a margin the mask will not clip.
2. **Lock the family** Two or three neighbouring stops, one direction of light, hex values written down. Later icons mix from this list only.
3. **Draw the primary at 1024** A full-bleed 1024 × 1024 square, opaque background, corners left square. This is the store icon and the default. Store and web file rules are in the [app icon size](https://gradiently.design/guide/app-icon-size) guide.
4. **Branch one change at a time** Duplicate the primary and change the crop, the scale or the plate. Change only one of those, or you will not know which decision helped.
5. **Judge the row together** Shrink the row to about Home Screen size and view it on a light wallpaper, a dark one and a tinted one. The symbol should survive all three.
6. **Export one PNG per name** Name each file from the table. The primary goes to the store. The alternates ship inside the app, behind the settings control. Do not round any corners.

Keep the symbol in the middle so the mask does not clip it, and skip taglines. On iOS and iPadOS the system scales the 1024 square for Settings, search and notifications.

## What to change, and what splits the brand

### Avoid

- A new symbol for a season
- A hue the primary never uses
- Corners drawn into the file
- A painted glow, shadow or bevel
- A wordmark or a badge
- An icon easy to mistake for another app
- A new symbol in dark or tinted mode
- A file named final or dark-new

### Do

- The same symbol on every icon
- One family and one light direction
- A full-bleed square, corners left square
- A plain ground, effects left to the system
- A letter only if it is the brand
- A row that matches at Home Screen size
- The same features in every appearance
- File names taken from the table

On Android, add rows rather than a new symbol. The Play listing icon is its own file: a 512 × 512, 32-bit PNG with alpha, at most 1024 KB ([Google Play's listing rules](https://support.google.com/googleplay/android-developer/answer/9866151)). A themed icon is that same symbol in one colour, tinted by the system.

## One ground for the whole set

Judge the ground as a row of tiles. A Mark keeps one set of colours and materials, and each variant is another composition of that ground. [Explore](/explore) shows Gradiently Marks worn as icon sets before you claim one. [Try on your brand](/try) puts your name and logo on a ground, with no account needed. Previews are not the files you upload.

Claim the Mark when it fits. Only you, and people you assign, can then design and export with it. In the Studio, start blank or from the Designer, set each named icon to 1024 × 1024, and export PNG. A free export is PNG or JPG at 720p with a small watermark, and the Mark must be yours. Pro exports full size with no watermark. The store gets the primary. The other names stay inside the app.

## FAQ

### What are alternate app icons?

Extra Home Screen icons inside the app. On iOS and iPadOS a person picks one in settings. The store keeps one primary, and every alternate should still read as your app.

### How is an iOS alternate app icon different from a dark icon?

Dark, clear and tinted restyle the selected icon, and the system can generate one you did not draw. An iOS alternate app icon is a separate file someone chooses. Keep the symbol the same across appearances.

### How many icons should an app icon set include?

Only as many as stay recognisable together. Primary, one other composition, a closer crop and one seasonal file is plenty. If two differ only at full size, ship one.

### What size should each alternate app icon be?

Design each file as a 1024 × 1024 pixel square, the layout size on iOS and iPadOS, with the corners left square. The system scales it for Settings, search and notifications.

### Can a seasonal app icon still look like the brand?

Yes, if it changes one thing inside the family: a stop, a small motif or a crop. Keep the symbol and the colour list, date the file, and remove it when the season ends.

### Should I draw the rounded corners into the icon file?

No. Ship a full-bleed square. The system masks the corners, and corners you draw tend to look jagged against the highlight it adds. Use that same square for every alternate.