Apple’s announcement of “dark mode” icons has me thinking about how I would approach adapting “light mode” icons for dark mode. I grabbed 12 icons we made at Parakeet for our clients to illustrate some ways of going about it.
(If you need a beautiful app icon, you can hire us!)
Before that though, let’s take some inventory. Of the 28 icons in Apple’s preview image of this feature, only nine have white backgrounds in light mode. However, all icons in dark mode have black backgrounds.
Actually, it’s worth noting that five “light mode” icons have black backgrounds, which Apple slightly adjusted to have a consistent subtle black gradient found on all of their new dark mode icons. Four of these—Stocks, Wallet, TV, and Watch—all seem to be the same in both modes. However, no other (visible) icons are.
It appears to me that all white-glyph icons in dark mode use their background color as their foreground color. Mail’s white envelope becomes blue. The blue background becomes black. A blue envelope is a little weird, but it’s rendered as a symbol, unlike Wallet or Files, which have minor shading.
The white-background icons simply become black-background icons. Maps utilizes a dark mode color palette from the app itself, Weather turns the sky black, but oddly keeps the sun rather than switching to the moon. This could be a rule Apple enforces only for themselves, where their app icons won’t change shape, only coloration. The Photos petals are now additive color rather than subtractive.
Unfortunately, some icons appear to have lost or gained weight in dark mode. For example, the Settings gear didn’t change size in dark mode, but it appears to occupy less space because the dark circle around it blends with its background. That makes it appear smaller than the Find My icon, which now looks enormous next to FaceTime. This is a remnant of some questionable design choices in iOS 7 that have lingered now for the last decade.
Apple’s Human Interface Guidelines recommend providing the foreground object from your icon with a transparent background to be programmatically set above their standard black gradient below. However, it does not seem that this is required, and we’re able to drop a fully-opaque image in there if we want our own background.
Now, let’s walk through some icons I adapted into dark mode to see how we might tackle this new challenge.
The first example is a colorful glyph on white. Per Apple’s recommendation, we can simply provide the foreground layer to utilize their standard black gradient behind it. I’ve brightened the flower a little bit, and I think that solution is mostly suitable, but I think we can do better.
While Apple uses only grayscale black for their backgrounds, I think introducing color at the same brightness value is quite nice. I can brighten the flower a little more, which makes this feel more synonymous with the original.
Next, let’s look at a white glyph on a dark blue background. In this situation, Apple advises using the dominant color from the normal app icon in the glyph, but that won’t work well here since the background is too dark. A lighter version of that gradient is fine for the luggage, but not ideal on the black background. An even-darker blue background than the original coupled with that lighter gradient for the luggage is much better.
Here’s another icon with a dark background, but it’s not a glyph. Also, the brightest part of the gradient is on the bottom. This is kinda important given the downward pointing lights. The standard black gradient that is lighter on top kills the atmosphere, so the best option here is probably a slightly darker background than the original. In a case like this, I might advise using this modification for light mode too, just because they’re so similar.
In this icon, the flame needs to remain the brightest shape, so swapping the red and black components is sufficient. However, because the flame is now on a red background, it needs to be a little brighter to increase contrast. Once again, the standard black is fine, but the original icon had a little red in the black shape, which I think is important to keep this icon looking properly warm and akin to the original.
Icons that have dimension will likely need some contrast adjustments when swapping light colors for black, so in this example, the green vines have been brightened, and a dirt-brown is used for the background.
Some icons have a background that isn’t just a gradient or solid color. For this, the segmented background is a brand attribute, so if we use Apple’s standard black gradient, we’ll want to include translucent shapes to manipulate the background in the result.
Also, if you choose a black background, you may need to desaturate silver objects like this. However, if you simply use a darker version of the background you already have, you may not need to adjust the foreground object at all.
This one is a little frustrating because the black in the original icon is used to represent a real-world object that needs to be black. If we use a black background, users won’t be able to easily identify this as a calligraphy brush resting atop an inkwell. By reintroducing the half-blue background for the dark mode icon, we can brighten the slightly blue highlight in the ink which helps distinguish it from the background better. Still, tricky!
A lot of apps utilize a border. That border is likely a bright color, and that’s going to stand out (in a bad way) in dark mode. Dimming it as far as you can without the appearance of shrinking the icon is your best bet.
Now this is ridiculous. This icon has a component that wants to be black (the ink), and also a component that wants to be white (the envelope). Putting this black ink blot on a dark gray background is not a viable option, with or without a white envelope. And I’m here to tell you that making the ink any other color—especially white—is similarly not an option. We’re left in a difficult place, but color might help. We can reduce the white point and brighten the background a little with the help of a dark purple that isn’t too dissimilar from the value of the standard background.
Here were are again, with an icon of something that can’t change in color very easily. Beluga whales are kinda ...really white. Darkening a little is maybe okay, but desaturated on black makes this image a little grim. A deep sea variation is—I think—a great way to make a dark mode version and also keep it on theme.
Sometimes an app icon might not have a foreground object at all, like this one. There’s nothing really to separate, and grayscaling it makes a very energetic icon into a very bland one. The right solution is probably to reduce the brightness while keeping the saturation. Dark enough that it fits in, but bright enough to have equal weight with other icons.
Lastly, this icon has a background object we don’t want to remove. We can recolor the clipboard to the same shades of dark gray that other dark mode icons have, though. Funnily enough, we had already created a “dark mode” version of the butterfly. But gray-black doesn’t match with the original icon. By making the board a darker brown, the metal clip a darker metal, and the sheet a dark purple, this icon feels more like the light mode icon.
Designing a proper dark mode app icon is important for you and your users, because if it’s too bright amongst the rest, it will stand out (in a bad way). A likely result is your app being removed from home screens.
If you need help designing your app icons, including dark mode icons, please contact us at Parakeet. We’re happy to help.