Dark Mode & Tinted App Icons in iOS 18 (and iOS 26) — The Complete Guide

When Apple shipped iOS 18, the home screen stopped being one-icon-fits-all. Users can now switch their entire layout to dark or apply a system-wide tint, and your app icon is expected to come along for the ride. If you ignore it, iOS will improvise — usually with a result that looks washed out or muddy next to apps that did the work. With iOS 26 adding the Liquid Glass material and a fourth "Clear" treatment, getting the appearance-variant fundamentals right now pays off across two OS generations.

This guide covers what each mode actually does, how to design assets that survive the system's recoloring, the exact Xcode steps, and a pre-submission checklist. Throughout, the source of truth is Apple's Human Interface Guidelines for App Icons.

The Three (Soon Four) Appearance Modes

It helps to be precise about what the system is doing in each mode, because each one places a different demand on your artwork.

Mode	What the system does	What you supply
Default (light)	Shows your icon as-is	Full-color 1024×1024, opaque
Dark	Swaps in your dark asset on a dark home screen	Full-color 1024×1024 tuned for dark
Tinted	Recolors a grayscale image with the user's accent	Grayscale 1024×1024 on transparency
Clear (iOS 26)	Applies the Liquid Glass material over your layers	Layered/luminance-aware artwork

The crucial mental shift: dark mode preserves your brand color while tinted mode deliberately discards it. In tinted mode the user is choosing a unified home-screen accent, and your icon becomes a luminance map onto that single hue. Fighting this — for example, by submitting a saturated tinted asset — produces a worse result, because the system flattens your colors to grayscale before applying the tint anyway.

How the Tinting Algorithm Reads Your Icon

Tinted mode is the one that trips people up, so it's worth understanding mechanically. iOS takes your tinted asset, interprets it as a grayscale luminance mask, and maps that luminance onto the user's accent color over the system's dark gradient background. Bright pixels become bright tinted pixels; dark or transparent pixels recede. The practical consequences:

• Contrast is everything. If your logo is mid-gray on mid-gray, it disappears once tinted. Push the foreground toward white and let the background fall away to transparent.
• Transparency is your background. The tinted asset should sit on a transparent canvas so the system gradient shows through. Don't bake in a solid fill.
• Thin strokes vanish. Hairline details that read fine in full color can drop below the legibility threshold once they're a single tinted hue. Thicken them.
• No color information survives. A red-vs-green distinction in your default icon is invisible in tinted mode. If meaning depends on color, encode it as shape or value instead.

Designing the Dark Variant

Dark mode is more forgiving because you keep full color, but a naive "just darken the background" rarely looks intentional. A few principles that consistently hold up:

1. Don't invert — re-tune. Inverting light and dark values usually destroys your brand recognition. Instead, keep the same hues and adjust their luminance so the icon sits comfortably on a dark home screen.
2. Drop the heavy background. Light-mode icons often use a bright gradient field. For dark mode, deepen that field so the icon doesn't glow like a flashlight in a dim layout.
3. Preserve the silhouette. Whatever shape makes your icon recognizable at 60×60 pt must survive the dark treatment unchanged. Recognizability is the whole point of the variant.
4. Mind the edges. A dark icon on a dark wallpaper can blur into the background. A subtle rim or a slightly lighter inner field keeps it defined without a hard border (which Apple discourages).

Adding Dark & Tinted Icons in Xcode

Since Xcode 15, appearance variants live right in the asset catalog. The flow is short:

1. Open Assets.xcassets and select your AppIcon set.
2. In the Attributes Inspector, find Appearances and choose Any, Dark, Tinted.
3. Three image wells appear: Any Appearance, Dark, and Tinted.
4. Drag a 1024×1024 image into each. Use a full-color opaque PNG for Any and Dark; use a grayscale PNG on transparency for Tinted.
5. Build and run. Xcode generates the smaller sizes for each variant automatically (the single-size approach from Apple's asset-catalog docs).

To verify, switch your simulator or device to dark mode (Settings → Display & Brightness) and to a tinted home screen (long-press the home screen → Edit → Customize → Tinted). Confirm each variant renders the way you intended. For the full per-platform size matrix, keep our iOS app icon sizes guide open in another tab, or use the interactive icon size calculator.

iOS 26, Liquid Glass & the Clear Mode

iOS 26 introduces the Liquid Glass material (WWDC 2025) and a fourth treatment, Clear, where icons take on a translucent, glassy appearance that refracts the wallpaper behind them. The good news: the discipline that makes a strong tinted icon — clean luminance separation, generous contrast, no reliance on color alone — is exactly what makes a strong Clear-mode icon. If you build your artwork as distinct value layers rather than a single flattened raster, you give the system the depth information it needs for both tinted and Liquid Glass rendering. Apple's Icon Composer tool in Xcode 26 is designed around this layered model. See our deep dive on iOS 26 Liquid Glass app icons for the migration specifics.

Pre-Submission Checklist

• ☐ Default icon is a 1024×1024 opaque PNG, no alpha, no baked corners.
• ☐ Dark variant keeps the brand silhouette and isn't a naive inversion.
• ☐ Tinted variant is grayscale on transparency with strong foreground-to-background contrast.
• ☐ No meaning depends on color alone (works in monochrome).
• ☐ Thin strokes thickened so they survive tinting.
• ☐ All three tested in the simulator across light, dark, and tinted home screens.
• ☐ Icon remains recognizable at 60×60 pt and legible at 29×29 pt.
• ☐ (iOS 26) Artwork built in value layers for Liquid Glass / Clear mode.

Worked Example: Adapting a Two-Color Icon

To make this concrete, walk through a common case: an icon that's a white symbol on a vivid blue gradient field — say, a messaging app's speech bubble.

1. Default. Keep it exactly as designed: white bubble, blue gradient, full-bleed, opaque. This is your brand statement and the reference everything else derives from.
2. Dark. Don't invert to a blue bubble on white — that reads as a different app. Instead deepen the blue field toward a near-navy so it settles into a dark home screen, and keep the bubble white (or a hair off-white) so the silhouette is untouched. The result looks like the same icon, dimmed for the room.
3. Tinted. Discard the blue entirely. Export a grayscale asset on transparency: a bright white bubble shape with the surrounding field fully transparent. iOS maps the white to the user's accent and lets its dark gradient fill the rest. Because the bubble was already the high-luminance element, it tints cleanly and stays legible.

The pattern generalizes: identify the one high-luminance shape that carries recognition, preserve it across all three variants, and let everything else adapt around it. Icons that fail in dark or tinted mode almost always fail because that anchor shape got muddied — its contrast collapsed, or color was doing work that value should have been doing.

Testing Across Modes Efficiently

Manually toggling settings for every build is slow. A faster routine: keep one simulator on a dark, tinted home screen with a busy colorful wallpaper — the most punishing combination — and glance at it after each icon change. If your icon survives that, the gentler default and light-mode cases are essentially free. Add a quick small-size check (drag the icon into a folder, where iOS renders it tiny) to confirm the anchor shape still reads at folder scale. Two looks, ten seconds, and you've covered the cases that actually generate one-star "the icon looks broken in dark mode" reviews.

Common Mistakes

• Submitting a colored tinted asset — the system grayscales it anyway; you lose control over the result.
• Solid background on the tinted variant — blocks the system gradient and breaks the tint.
• Inverting the dark variant — destroys recognizability; re-tune luminance instead.
• Skipping the variants entirely — your app looks unfinished next to competitors that adapted.
• Color-dependent meaning — invisible in tinted and Clear modes.

Summary

iOS 18 made the app icon a multi-state asset, and iOS 26 raised the bar again with Liquid Glass. Treat the default icon as your brand statement, the dark variant as the same brand re-tuned for a dim home screen, and the tinted variant as a high-contrast luminance map that the system will recolor. Build in value layers, test across every mode, and the same artwork will carry you cleanly into Clear mode. Let Xcode — or a purpose-built tool like IconBundlr — handle the resizing so you can focus on getting those three states right.

Sources

• Apple Human Interface Guidelines — App Icons
• Apple Developer Documentation — Configuring Your App Icon
• Apple Developer Documentation — Icon Composer
• WWDC 2025 — Liquid Glass Design Sessions