iOS Dark Mode App Icon: How to Design Dark and Tinted Icons

Quick answer: Since iOS 18, people can show Home Screen icons in a dark or tinted appearance, and the Liquid Glass design in iOS 26 added a clear look. You can supply your own variants: in an Xcode asset catalog, a 1024 × 1024 dark icon with a transparent background and a grayscale tinted icon; or a layered Icon Composer file. Anything you don't provide, the system generates automatically.

iOS 18 let people restyle their Home Screen: icons can appear in the default look, in a dark appearance, or tinted with a color the user picks. With iOS 26, Apple introduced Liquid Glass, layered icons with specular highlights and translucency, and a clear appearance. Apple's Human Interface Guidelines now list default, dark, clear and tinted appearances for iOS, iPadOS and macOS icons.

Apple states that the system automatically generates any variant you don't provide. That's the safety net, not the goal: the automatic treatment works well for some icons and poorly for others, and you won't know which group yours is in until you look.

You're not required to ship one. Apple's documentation describes the automatic treatment as designed to preserve intent and legibility. Check your icon on a real device before you decide: touch and hold an empty spot on the Home Screen, tap Edit, then Customize, and switch between the appearances.

Icons that usually benefit from a custom dark variant:

• Light, mostly white backgrounds. A bright square stays glaring among dark icons, or loses its character when darkened.
• Thin dark linework. Fine black strokes can disappear against a dark background.
• Multi-color illustrations. The tinted version flattens everything to one hue, so overlapping shapes can merge into a blob.
• Logos built on negative space. A cutout that relies on a white background may vanish once that background is gone.

If your icon is a bold, centered symbol on a solid brand color, the generated versions are often acceptable, and spending a day on variants may not be worth it. Most app icons, though, carry at least one of the four traits above. If you're redesigning anyway, the app icon design tips help you pick a shape that survives every appearance.

Apple's guidance is to use your light icon as the basis for the dark one, choose complementary colors that reflect the default design, and avoid excessively bright images. In an asset catalog, Apple asks you to provide the dark icon with a transparent background so the system-provided dark background shows through.

A before-and-after example:

• Default: white background, blue checkmark, small orange dot.
• Dark: transparent background, the same checkmark in a slightly lighter blue so it holds contrast on near-black, and the orange dot kept but toned down.

Rules that keep the variant recognizable:

1. Keep the same core shapes and positions. Apple warns against swapping elements between variants, because people find apps by shape.
2. Lighten foreground colors slightly instead of inverting them.
3. Drop the background color, not the brand color.
4. Test at Home Screen size, not at 1024 px. Details that look elegant on your canvas often disappear at small sizes.

For the tinted appearance, Apple asks for a grayscale image. The system applies the user's chosen tint, so your job is to define hierarchy with lightness alone:

• Brightest areas become the strongest tint. Use them for the primary symbol.
• Mid grays work for secondary shapes, such as the orange dot from the example above.
• Dark areas recede into the background.

Convert your icon to grayscale and look at it at small size. If two shapes that differ only by hue (a red and a green of similar lightness) turn into the same gray, separate them by brightness. This is the same discipline Android requires for themed icons, which use a single monochrome layer; see the Android adaptive icon guide for that side.

For an asset catalog icon, Apple documents these steps:

1. In the Project navigator, select your asset catalog.
2. Select the app icon in the asset catalog.
3. Open View > Inspectors > Attributes.
4. Choose Single Size from the iOS pop-up menu.
5. Choose Any, Dark, Tinted from the Appearance pop-up menu.
6. Drag your 1024 × 1024 dark and tinted images into the new image wells.

Keep three files straight: the default (Any) icon must stay opaque with no alpha channel, because App Store Connect rejects an App Store icon with transparency; the dark icon has a transparent background; and the tinted icon is grayscale. The iOS app icon requirements list the other rules for the default icon.

For iOS 26 and later, Apple recommends the Icon Composer format. Instead of flat images, you provide layers: a background layer and one or more foreground layers. The system adds Liquid Glass effects such as specular highlights, refraction and translucency.

The workflow Apple describes:

1. Design the layers in your vector tool and export them as SVG where possible, or PNG for effects SVG can't hold. Don't export the canvas mask; the system applies it.
2. Open Icon Composer from Xcode > Open Developer Tool > Icon Composer, and import the layers on a 1024 × 1024 canvas for iPhone, iPad and Mac.
3. Set the background with a solid color or gradient, adjust layers, and annotate the default, dark and mono appearances. Preview clear and tinted from mono.
4. Drag the .icon file into your Xcode project, and make sure the App Icon field in the target's General tab matches the file name without the extension.

Two points that matter for older devices: an Icon Composer file replaces the asset catalog icon, and Xcode generates icon images for earlier OS versions from it at build time. If you want your existing flat icon to keep showing on older releases, Apple says to keep using the asset catalog. Bitmap icons are still accepted; the system tries to split them into a foreground and a background layer, which gives you less control.

• Baked-in rounded corners or shadows. The system masks every layer; your own corners create double edges.
• A colored tinted variant. Tinted expects grayscale; color information is thrown away.
• Changing the symbol per appearance. It breaks recognition when people switch modes.
• An opaque white square as the dark icon. It defeats the point and glares on a dark Home Screen.
• Forgetting the store. Your product page and screenshots still show the default icon, so keep it strong. A consistent icon across screenshots and store visuals also helps your first screenshot feel like the same product.