iOS Dark & Tinted App Icons
Last updated
Since iOS 18, people can change how every Home Screen icon looks: dark, tinted to a colour of their choice, and since iOS 26 also clear. Your icon is shown in all of these whether or not you design for them. This guide explains each appearance, what to supply, and how to keep your icon recognisable in every one.
Why appearances exist
For years an iOS app icon was a single opaque square. iOS 18 changed that by letting people customise the Home Screen: icons could switch to a dark look that matches Dark Mode, or be tinted so the whole grid shares one colour. iOS 26 brought the Liquid Glass design language and added a clear appearance, where icons become translucent glass that lets the wallpaper show through. Apple's Human Interface Guidelines now describe four appearances for iOS, iPadOS and macOS: default, dark, clear and tinted, with clear and tinted each available in a light and a dark form.
The important detail for developers is that the system automatically generates any variant you don't provide. If you ship only a default icon, iOS still produces a dark and a tinted version from it. That automatic treatment is designed to preserve your design intent, but it can only work with the pixels it is given. A busy icon, or one whose meaning relies on colour, can lose contrast or detail. Supplying your own variants gives you control over the result.
The appearances at a glance
| Appearance | Introduced | What the system shows | What you supply |
|---|---|---|---|
| Default (Any / Light) | Always | Your full-colour icon | Opaque 1024×1024 square, no rounded corners |
| Dark | iOS 18 | Your artwork over a dark system background | 1024×1024 image with a transparent background |
| Tinted | iOS 18 | A monochrome icon coloured with the hue the user picks | 1024×1024 grayscale image; the system adds the colour |
| Clear (light and dark) | iOS 26 | Translucent Liquid Glass version of your icon | Generated from your layers; previewed as “Mono” in Icon Composer |
Option 1: an asset catalog with Any, Dark and Tinted
If you still use an AppIcon set in Assets.xcassets, Xcode lets you add the iOS 18 variants directly. Select the icon, open the Attributes inspector, make sure the iOS pop-up is set to Single Size, then set Appearance to Any, Dark, Tinted. Two extra image wells appear next to the existing 1024×1024 slot.
The dark variant
Apple's Xcode documentation asks for the dark icon to be supplied with a transparent background so the system-provided dark background can show through. This is the opposite of the default icon, where transparency is not allowed. In practice you export your foreground artwork on its own, usually recoloured so it reads well on near-black: brighter accent colours, no pure black shapes, and no large white areas that would glare against the surrounding icons.
The tinted variant
The tinted icon is supplied as a grayscale image. iOS uses its brightness values to apply the person's chosen tint, so lighter areas become a stronger version of that hue and darker areas recede. Think of it as a luminance map: the parts of the icon that matter most should be the lightest, and secondary details should be mid-grey. A flat white silhouette works, but a few levels of grey give the result more depth.
Option 2: Icon Composer and Liquid Glass
Since Xcode 26, Apple's recommended route is Icon Composer, a design tool included with Xcode. Instead of separate flat images you import layered artwork, ideally as SVG, define a solid or gradient background inside the tool, and organise the layers into up to four groups. Icon Composer then previews the icon as Default, Dark and Mono for iOS and macOS, and the Mono options let you check the clear and tinted variants in both light and dark forms.
Every appearance comes from that single .icon file. You adjust colours, fills and opacity per appearance in the Style inspector rather than exporting separate images. If your app also supports releases before iOS 26, Xcode generates older-style icon images from the same file at build time. Adding an Icon Composer file replaces the asset catalog icon, so if you want your existing artwork to keep appearing unchanged on older releases, Apple suggests continuing to use an asset catalog.
Design tips that hold up in every appearance
- Keep the same features in every variant. Apple advises against swapping elements in and out between appearances. People find apps by shape as much as colour, so the silhouette should not change when someone switches to dark or tinted.
- Build the dark icon from the default one. Use complementary colours drawn from your default design and avoid overly bright imagery. Dark icons are meant to feel more subdued, and clear and tinted icons more so.
- Let shape carry the meaning, not colour. In tinted and clear modes your palette is gone. If two parts of the icon differ only in hue, they will merge. Check that the design still reads in pure grayscale.
- Avoid hairlines and tiny details. Thin strokes that survive on a bright background often vanish once the system adds glass, highlights or a tint.
- Don't bake in effects. Shadows, glows and bevels fight the dynamic effects the system now applies. Leave them out and let iOS render depth.
- Remember alternate icons. If your app offers alternate icons, each one needs its own dark, clear and tinted variants too, and all of them go through App Review.
Common mistakes
Shipping a dark icon with a solid background
If you paint your own black square behind the dark artwork, the result often looks slightly off next to icons that use the system background, and the corners can show a visible seam. Use transparency as Xcode asks.
Supplying a coloured image in the tinted slot
The tinted variant is meant to be grayscale. Colour information is either discarded or produces muddy results once the tint is applied. Convert to grayscale yourself so you can control the contrast.
Relying only on the automatic treatment
The generated variants are a reasonable default, and many apps ship with them. But if your icon is mostly white, mostly black, or built around a photograph, check the generated versions in the Simulator or on a device. A few minutes of adjustment usually makes a visible difference.
A practical workflow
- Design the default icon at 1024×1024 with the artwork on its own layer. The app icon generator can produce the full default icon set from it.
- Duplicate the artwork, recolour it for a dark backdrop, and export it on a transparent background.
- Duplicate it again, convert to grayscale, and tune the levels so the key shape is the lightest element.
- Add both to the asset catalog, or import the layers into Icon Composer and set per-appearance colours there.
- Preview on a device with Home Screen customisation set to Dark, Tinted and Clear before you submit.
For the base sizes and formats every iOS icon needs, see the iOS app icon sizes guide and the summary on the app icon guidelines page. If your app also ships on the Mac or Apple Watch, the macOS, watchOS and visionOS guide covers how those platforms shape and layer icons.
More guides
- iOS App Icon Sizes – Every iPhone, iPad and App Store icon size, what each one is used for, and how Xcode’s single-size asset works.
- Android Adaptive Icons – Foreground and background layers, the 108dp canvas, the 66dp safe zone and Android 13 themed icons.
- PWA Manifest Icons – Which icons a web app manifest needs, how maskable icons work and how browsers choose between them.
- macOS, watchOS & visionOS Icons – Icon shapes, sizes and layering for Apple platforms beyond iPhone and iPad.
- App Icon Rejections – The icon problems that get builds rejected on the App Store and Google Play, and how to avoid them.