Alternate app icons: a set of looks from one brand

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.

What stays fixed across the set

Treat the set like a family of logo variations. The signature is the symbol: one letter, or one filled shape. The 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.

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

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.

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

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. Brand consistency is the point of the list: people learn an icon by seeing it again.

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

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

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). 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 shows Gradiently Marks worn as icon sets before you claim one. Try on your brand 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.