---
title: How Do I Design App Icons That Work in Both Light and Dark Mode?
description: Design app icons that hold up in light and dark mode. Covers colour, contrast, silhouette, backgrounds and exporting assets for iOS and Android.
image: https://weareaffective.com/hubfs/learning-centre-images/how-do-i-design-app-icons-that-work-in-both-light-and-dark-mode.webp
---

[Skip to content](https://weareaffective.com/learning-centre/how-do-i-design-app-icons-that-work-in-both-light-and-dark-mode#main-content)

[![we\_are\_affective\_logo\_200](https://weareaffective.com/hs-fs/hubfs/we_are_affective_logo_200.png?width=175&height=48&name=we_are_affective_logo_200.png "we_are_affective_logo_200")](https://weareaffective.com)

- [Home](https://weareaffective.com)
- About Us 
  
    - [Our Story](https://weareaffective.com/about)
    - [How We Work](https://weareaffective.com/how-we-work)
- Our Services 
  
    - [App Planning & Strategy](https://weareaffective.com/app-planning-strategy)
    - [App Design](https://weareaffective.com/app-design-agency)
    - [App UX Design](https://weareaffective.com/app-ux-design)
    - [App UI Design](https://weareaffective.com/app-ui-design)
    - [App Technical Architecture](https://weareaffective.com/app-architecture)
    - [Existing App Audits](https://weareaffective.com/app-audit)
- [Case Studies](https://weareaffective.com/case-studies)
- [Pricing](https://weareaffective.com/pricing)
- [Learning Centre](https://weareaffective.com/learning-centre)

- [Get Started](https://weareaffective.com/get-started)

Expert Guide Series

# How Do I Design App Icons That Work in Both Light and Dark Mode?

 Table of Contents

Switch your phone to dark mode and look at the home screen for ten seconds. A few icons will have quietly stopped working. The white-box logo that looked crisp against a pale wallpaper now glows like a small torch. The navy monogram that felt confident in light mode has sunk into the background and become a dark square with something vague floating in it. Dark mode app icons fail in fairly predictable ways, and nearly all of those failures were decided months earlier, in a design file where the artboard happened to be white.

> An icon that only works on white has been tested on half a phone.

The icon is the first thing your product says to someone, and it says it before any copy, any onboarding and any feature. It sits in a grid of fifty competitors for attention, at about the size of a thumbnail, and it has to hold its shape and its feeling in two completely different lighting conditions. That's a challenge that sits at the heart of [app UI design](https://weareaffective.com/app-ui-design), equal parts technical and emotional.

So this is a practical walk through how we approach it. Silhouette first, then backgrounds and platform rules, then colour and contrast, then what the icon makes people feel, and finally the export and the checks that catch the things a design file hides.

## What Actually Changes When Someone Switches Mode

The obvious change is the background. Light mode gives your icon a pale wallpaper, often with a bright overlay behind the grid, and dark mode drops that to something near black with a dimmed wallpaper behind it. Less obvious is what happens to the eye. In a dark room the pupil opens up, so a bright white shape stops reading as clean and starts reading as glare.

Then there's what the operating system does on top of that. On recent versions of iOS, people can set icons to a tinted appearance, which strips your artwork back to a single hue the system chooses. Android's themed icons do something similar, pulling colour from the wallpaper and rendering your mark as a flat monochrome shape. In both cases, colour stops carrying any of the recognition and the silhouette carries all of it.

This isn't a small audience either. PCloudy puts the share of smartphone users who turn dark mode on at least some of the time at [82%](https://www.pcloudy.com/blogs/test-dark-mode-across-devices/), though they don't name a source for it, so treat it as a rough shape rather than a precise count.

Your icon also turns up in settings lists, share sheets, notifications and search results, at sizes far smaller than the home screen. Every one of those surfaces flips with the mode.

## Start With the Silhouette, Not the Palette

Colour is the first thing clients want to talk about and the last thing we lock. A mark that works in both modes nearly always works because of its shape, its weight and the space inside it. Get that right and the colour decisions become much smaller, because you're adjusting something that already reads.

Here's the order we work in when we're drawing a new mark for an app.

1. Draw it in one solid colour on a mid-grey square.
2. Flip it to white on near-black, then black on near-white, and compare.
3. Shrink it to the size it appears at in a settings list.
4. Show it to someone who knows the brand and ask what they see.
5. Only then start adding colour back in.

Thin strokes are the usual casualty. A hairline that looks refined at full size disappears on light backgrounds and blooms into a smear on dark ones. Counters and gaps go the same way, because a tight gap between two shapes closes up when the lighter shape is the one doing the work.

Set your artboard background to mid grey while you draw. White artboards quietly flatter everything, and you won't see the problem until the icon is on a phone.

## UX/UI design built around *real* psychology

We design app interfaces around how people actually think and behave. User research, psychology-driven UX/UI design and technical specs delivered as one complete package.

[See how we work](https://weareaffective.com/how-we-work) [Get started](https://weareaffective.com/get-started)

No commitment

## The Background Problem: Transparency, Fills and Platform Rules

The two platforms handle the icon's background in almost opposite ways, and that's where a lot of the trouble starts. iOS wants a full, opaque square at 1024 pixels with no transparency, and it applies the rounded corner mask itself. Android wants layers, a foreground and a background that it can mask, animate and crop to whatever shape the device maker has chosen.

So a single flat PNG can't serve both. Bake the corner radius into your artwork and iOS will round it again, leaving a thin ghost edge. Ship a transparent PNG to iOS and you get a black box.

> The system decides the shape and the shadow, so your job is the mark inside it.

Recent iOS versions have made this friendlier by letting you supply separate light, dark and tinted versions of the icon, where the dark version can use transparency because the system puts its own dark background behind it. Android's equivalent is the monochrome layer, a single-colour version of your foreground that themed icons use. Skip that layer and Android falls back to your full-colour icon inside a flat plate, which rarely looks deliberate.

Keep the mark inside a generous safe area in both cases. Android masks vary by manufacturer, so anything sitting near the edge of your 108dp canvas is at risk of being clipped on somebody's phone.

## Choosing Colours That Survive Both Backgrounds

Mid-tone colours are the ones that survive. A colour sitting roughly halfway between white and black has somewhere to go in both directions, so it reads against a pale wallpaper and still holds against near-black. Colours parked at either extreme can only ever work on one side.

Colour is also doing emotional work before anyone taps anything. Green reads calm and medical, blue reads clinical and ordered, red reads passionate and driven, and people pick that up without consciously registering it. That's why we chose green undertones for a healthcare and health insurance product we designed for African markets, and it's why the icon for a product like that can't borrow the alarm-red palette of a fitness tracker.

| Colour family | Risk in light mode | Risk in dark mode | What we do |
| --- | --- | --- | --- |
| Near-white | Dissolves into wallpaper | Glares and blooms | Drop to a warm off-white |
| Navy or near-black | Reads well | Disappears entirely | Lift the dark variant |
| Pastels | Weak, washed out | Reads well | Deepen for light mode |
| Saturated mid-tones | Reads well | Reads well | Small tweaks only |

If the brand colour genuinely can't flex, the honest answer is two tuned variants of the same hue rather than one compromise that half-works twice.

## Contrast, Luminance and the Maths Behind Visibility

Contrast is a ratio between how much light two surfaces give off, and the calculation doesn't weight the three channels equally. Green contributes most of the perceived brightness, red a fair amount, and blue very little. That's the reason a rich blue mark looks fine on white and then vanishes on black. Its luminance was always low, and the white background was doing the work.

The same maths explains halation. A bright shape on a dark field spreads slightly in the eye, so fine detail fills in and thin strokes thicken. Pure white on pure black is the worst version of this, which is why dark interfaces generally use a soft off-white and a charcoal rather than the extremes.

People choose dark mode largely for comfort. In a 2026 mobile interface study reported by [Browserstack](https://www.browserstack.com/guide/how-to-test-apps-in-dark-mode), 68.4% of 215 participants said they preferred dark mode in apps, with [visual comfort and reduced eye strain](https://weareaffective.com/learning-centre/dark-mode-done-right-a-step-by-step-guide-for-app-developers) in low light among the reasons given. An icon that glares undoes the thing they switched for.

Convert your icon to greyscale and look at it on both backgrounds at your phone's lowest brightness. If it stops reading in either direction, the problem is luminance, not hue.

## What the Icon Should Make People Feel Before They Tap It

An icon has maybe half a second of attention, and in that time it either sets an expectation or it doesn't. Headspace is the clearest working example of this. Its opening screen puts a simple orange sun-like character above a single call to action, with no login wall and no goal-picking step, and the implicit promise is that the experience is light and non-clinical. You're starting a friendly habit rather than entering a therapy session.

The character isn't telling you to be calm. It's being calm at you, and you mirror that. The same logic applies to an icon, which is the very first frame of that same promise and sits on the home screen long before anyone opens the app.

So the useful question while you're drawing is how you want someone to feel in the moment they see it, rather than what you want them to do. A rounded, warm, low-contrast mark sets a different expectation to a sharp geometric one, and in dark mode that difference gets louder, because the icon is now a lit object in a dim field.

[Emotion-led choices make the whole thing more purposeful](https://weareaffective.com/learning-centre/what-features-must-your-social-media-app-include-to-succeed). Each colour and each curve has a reason behind it instead of just looking good in the file.

## Keeping Brand Meaning Intact Across Two Versions

Two variants of an icon can easily become two brands. The dark version gets lightened, then the mark gets simplified because the detail was blooming, then somebody swaps the accent colour because the original looked muddy, and six weeks later the two versions no longer feel related.

The guard against that is having a character to measure against. We ask clients to picture the product as a person, how they'd talk, how they'd dress, how they'd enter a room, and then judge every piece of the experience against that individual. For icons, the question becomes whether the dark variant is the same person in a dimmer room or a different person altogether.

> Judge the dark variant against the same character, and if it behaves differently, throw it out.

It's a far more usable test than abstract adjectives. "Warm" and "considered" don't tell you whether to lift a green by eight percent, but "would this person suddenly get louder when the lights go down?" does.

We also keep [brand personality and emotional arc documents](https://weareaffective.com/learning-centre/thought-leader-series-turn-empty-states-in-your-mobile-app-design-into-bold-bran) alongside the design files for exactly this reason, so decisions made months apart still line up with how the brand talks to people.

## Icons Built for Calm: Lessons From a Healthcare Product

We worked on a healthcare and health insurance product built for African markets, where people often arrive in [a heightened emotional state](https://weareaffective.com/learning-centre/what-film-industry-document-portal-users-taught-us-about-designing-for-people-wh). Someone opening a health insurance app has usually had something happen first. That shaped the whole surface of the product.

We went for a dark UI with green undertones, because green induces feelings of calm, safety and medical support, while deliberately avoiding a sterile clinical look. The language was simplified and specific, with the medical jargon stripped out, so the product destressed people rather than raising their anxiety further. Both decisions came from the emotional state the user was arriving in rather than from what made sense on a feature list.

For icon work the lesson carries directly. A product whose interface is dark by default has an icon that spends most of its life next to a dark system, so the mark needs to belong to that world rather than fight it. A bright white plate on the home screen followed by a quiet dark interface is a small broken promise, made in the first second of the relationship.

Match the icon's temperature to the emotional state the product is designed for. Calm products should look calm from the home screen onwards.

## How iOS and Android Let You Change App Icon Appearance

Both platforms now give you real control over how the icon appears in each mode, and both let the user change app icon appearance in ways you don't fully control. Knowing which parts are yours saves a lot of arguing.

On iOS you supply light, dark and tinted versions in the asset catalogue. The tinted one is rendered as a greyscale image that the system colours, so it has to work as a pure light-and-dark composition. You can also ship alternate icons the user picks from inside your app, which is a separate feature and a nice touch for seasonal or subscriber variants.

On Android, adaptive icons need a foreground, a background and a monochrome layer, with the system handling masking and the themed icon colouring.

| Dimension | iOS | Android |
| --- | --- | --- |
| Mode variants | Light, dark, tinted | Standard and themed |
| Transparency | Dark and tinted only | Foreground layer |
| Shape | System mask | Varies by manufacturer |
| User choice | Appearance and alternate icons | Themed icons toggle |

Design the monochrome and tinted versions first. If the mark holds up stripped of all colour, the coloured versions are the easy part.

## Preparing and Exporting Your Icon Assets

Exporting is where good icons get quietly damaged. Rounded corners get baked in, alpha channels sneak into files that can't have them, and the dark variant gets exported from an older layer. A short, repeatable sequence stops most of it.

1. Keep one vector master with the mark, the light background and the dark background as separate layers.
2. Export the iOS light and dark icons as flat square images with square corners and no transparency on the light one.
3. Build the tinted version in greyscale and check it against the system's own tint range.
4. Export the Android foreground, background and monochrome layers on the full canvas, keeping the mark inside the safe area.
5. Name every file by platform, mode and size, then put them somewhere developers can find without asking.

Gradients deserve particular care. A soft gradient that looks smooth at full size can band badly once the system compresses it for smaller slots, and the banding shows up far more against dark backgrounds than light ones.

Re-export every variant from the same master whenever the mark changes, even the ones you think are unaffected. [Mismatched variants are the most common bug](https://weareaffective.com/learning-centre/is-dirty-data-ruining-your-mobile-apps-purpose-what-app-developers-need-to-know) we see in icon handovers.

## Checking Your Icon on a Real Home Screen

Design files and preview grids are generous. They give your icon space, perfect contrast and no neighbours. Real home screens are crowded, often sitting over a photograph of somebody's dog, with brightness at the lowest setting at eleven at night.

So put it on a phone. Install it, drag it into a folder with similar apps, swap the wallpaper from a pale one to a dark one, then look at it in a sunny window and again in a dim room.

> Put it on a real phone, in a crowded folder, next to the apps it has to sit beside.

Then ask people how it feels. Everyone is a user of these products, so when we play a change back to a client and ask how that feels to them, the response is immediate and genuinely useful. It's a natural first check before any wider study.

Worth remembering the store listing too. ASOMobile notes that over [50%](https://asomobile.net/en/blog/screenshots-for-app-store-and-google-play-in-2025-a-complete-guide/) of users regularly use dark mode, which makes it a standing consideration for screenshots as well as the icon itself, though they don't give a sample or method for that number.

## Mistakes That Only Show Up in Dark Mode

Some problems are invisible until the background flips, which is why they survive all the way to launch. These are the ones we come across most often when auditing app icons in dark mode.

- White plates that turn into glowing rectangles at low brightness.
- Dark navy or charcoal marks that merge with the background and read as empty.
- Drop shadows designed for light mode that leave a grey halo on dark.
- Thin strokes and tight counters that bloom and fill in.
- No monochrome layer, so Android themed icons fall back to a flat plate.
- A wordmark or tagline that was already hard to read and now isn't legible at all.

There's a pattern underneath all of these. Each one comes from treating dark mode as a filter applied at the end rather than a second condition the icon has to live in from the first sketch.

The fix is nearly always the same. Go back to the silhouette, make the shape carry the recognition, then tune luminance for each background separately. Working the other way round, starting from a finished colour icon and trying to rescue it, usually costs more time than redrawing.

## Conclusion

Dark mode app icons come down to a few decisions made early. Draw the mark so the shape alone carries it, choose mid-tone colours with room to move in both directions, respect what each platform does to your artwork, and tune luminance for the dark version rather than hoping the original holds up.

Underneath the technical side there's a simpler question. Your icon is the first thing your product says, and it says it to someone standing in a queue or lying in a dark room at midnight. What they feel in that half second sets the tone for everything after it. On the healthcare product we built for African markets, choosing a dark interface with green undertones and plain, jargon-free language came from thinking about the state people arrive in, and the same thinking belongs in the icon.

Get the shape right, get the feeling right, and the two modes stop being two problems.

If you're redesigning an app icon, or your current one is disappearing on half your users' phones, we're happy to look at it with you. [Let's talk about your app icon design](https://weareaffective.com/get-started).

## Frequently Asked Questions

Why do some app icons look fine in light mode but fail in dark mode?

Most of these failures are baked in early, because the icon was designed on a white artboard that flatters bright shapes and hides weak ones. In a dark room the pupil opens up, so a white-box logo reads as glare while a dark monogram sinks into the near-black background.

Should I start with colour or shape when designing an app icon?

Start with the silhouette. A mark that survives both modes almost always does so because of its shape, weight and internal spacing, and once that reads properly the colour decisions become much smaller and easier.

What is the quickest way to test whether a mark will hold up in both modes?

Draw it in one solid colour on a mid-grey square, then flip it to white on near-black and black on near-white and compare the two. Shrink it to settings-list size and show it to someone who knows the brand to check they still recognise it.

Why does the article recommend a mid-grey artboard?

White artboards quietly flatter everything you draw on them, so problems only surface later when the icon hits a dark background. A mid-grey canvas gives you a neutral starting point that does not favour either mode.

What do iOS tinted icons and Android themed icons mean for my design?

Both strip your artwork back to a flat single-hue or monochrome shape, with iOS using a system-chosen tint and Android pulling colour from the wallpaper. In those states colour carries none of the recognition, so the silhouette has to do all the work on its own.

Which design details are most likely to break at small sizes?

Thin strokes are the usual casualty, as a hairline that looks refined at full size disappears on light backgrounds and smears on dark ones. Tight counters and gaps are the next problem, because they close up when the lighter shape is the one doing the work.

How many people actually use dark mode?

PCloudy puts the figure at around 82% of smartphone users switching it on at least some of the time, although they do not name a source. Treat that as a rough indication rather than a precise number, but it is clearly a large enough group to design for.

Where else does my icon appear beyond the home screen?

It also turns up in settings lists, share sheets, notifications and search results, often at much smaller sizes than the home screen grid. Every one of those surfaces flips with the mode, so each needs checking rather than just the main app grid.

## Related Articles

[![How Do I Connect My Mobile App to Smart Home Devices?](https://weareaffective.com/hubfs/learning-centre-images/how-do-i-connect-my-mobile-app-to-smart-home-devices.webp)](https://weareaffective.com/learning-centre/how-do-i-connect-my-mobile-app-to-smart-home-devices)

### [How Do I Connect My Mobile App to Smart Home Devices?](https://weareaffective.com/learning-centre/how-do-i-connect-my-mobile-app-to-smart-home-devices)

Smart home devices are now a fixture in a meaningful number of households. According to [Market.us](https://market.us/report/smart-homes-market/),...

by [Simon Lee](https://weareaffective.com/learning-centre/author/simon-lee)

[![Which Criteria Determine if Your App Idea Is Technically and Financially Feasible](https://weareaffective.com/hubfs/learning-centre-images/which-criteria-determine-if-your-app-idea-is-technically-and-financially-feasible.webp)](https://weareaffective.com/learning-centre/which-criteria-determine-if-your-app-idea-is-feasible)

### [Which Criteria Determine if Your App Idea Is Technically and Financially Feasible](https://weareaffective.com/learning-centre/which-criteria-determine-if-your-app-idea-is-feasible)

We worked on a product aimed at African communities living abroad, built to help people keep a...

by [Simon Lee](https://weareaffective.com/learning-centre/author/simon-lee)

[![How Do I Design Apps That Kids Can Use Safely?](https://weareaffective.com/hubfs/learning-centre-images/how-do-i-design-apps-that-kids-can-use-safely.webp)](https://weareaffective.com/learning-centre/how-do-i-design-apps-that-kids-can-use-safely)

### [How Do I Design Apps That Kids Can Use Safely?](https://weareaffective.com/learning-centre/how-do-i-design-apps-that-kids-can-use-safely)

A child of six doesn't read onboarding copy. They tap the biggest, brightest thing on the screen...

by [Simon Lee](https://weareaffective.com/learning-centre/author/simon-lee)

[![We Are Affective](https://weareaffective.com/hubfs/we_are_affective_logo_mark.svg)](https://weareaffective.com)

20-22 Wenlock Road  
London, N1 7GU  
United Kingdom

+44 20 4572 8062  
[hello@weareaffective.com](mailto:hello@weareaffective.com)

<https://linkedin.com/company/weareaffective> <https://instagram.com/weareaffective> <https://facebook.com/weareaffective>

Services

[App planning & strategy](https://weareaffective.com/app-planning-strategy) [App design](https://weareaffective.com/app-design-agency) [App UX design](https://weareaffective.com/app-ux-design) [App UI design](https://weareaffective.com/app-ui-design) [App technical architecture](https://weareaffective.com/app-architecture) [Existing app audits](https://weareaffective.com/app-audit)

Legal

[Privacy policy](https://app.termly.io/policy-viewer/policy.html?policyUUID=b8fa9921-7518-4fb5-8ddd-9dc7f5977ed2) [Terms](https://app.termly.io/policy-viewer/policy.html?policyUUID=8b6a6ad5-91bd-4176-a5f7-6d36b0398f70)

Case studies

[TravAI](https://weareaffective.com/case-studies/travai) [Meditech](https://weareaffective.com/case-studies/harley) [WorkingWeight](https://weareaffective.com/case-studies/workingweight) [SkinSync](https://weareaffective.com/case-studies/skinsync) [Three Lochs](https://weareaffective.com/case-studies/three-lochs) [Drift](https://weareaffective.com/case-studies/drift)

About us

[Our Story](https://weareaffective.com/about) [How We Work](https://weareaffective.com/how-we-work)

Guides

[Creating an app](https://weareaffective.com/how-to-create-an-app) [Building an MVP](https://weareaffective.com/building-an-mvp) [Cost and budgeting](https://weareaffective.com/app-development-cost) [App technology](https://weareaffective.com/app-development) [Planning and strategy](https://weareaffective.com/app-planning-strategy) [User research](https://weareaffective.com/app-user-research) [Onboarding design](https://weareaffective.com/app-onboarding-design) [User psychology](https://weareaffective.com/user-psychology-app-design) [Launch and growth](https://weareaffective.com/app-launch-growth)

 Copyright © 2026, weareaffective.com. All rights reserved.