Dark Mode iOS 18 App Icons and Home Screen Personalization

Apple:

People can customize the appearance of their app icons to be light, dark, or tinted. You can create your own variations to ensure that each one looks exactly the way you way you want. See Apple Design Resources for icon templates.

Design your dark and tinted icons to feel at home next to system app icons and widgets. You can preserve the color palette of your default icon, but be mindful that dark icons are more subdued, and tinted icons are even more so. A great app icon is visible, legible, and recognizable, even with a different tint and background.

Louie Mantia:

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.

[…]

Now, let’s walk through some icons I adapted into dark mode to see how we might tackle this new challenge.

Nick Heer:

I think it is safe to say a quality app from a developer that cares about design will want to supply a specific dark mode icon instead of relying upon the system-generated one. Any icon with more detail than a glyph on a background will benefit.

Also, now that there are two distinct appearances, I also think it would be great if icons which are very dark also had lighter alternates, where appropriate.

Ryan Jones:

These tinted icons are… something.

Includes a Large icon option. 🫣

Matt Birchler:

On Android, app developers need to submit their icons in a specific way to make them available for theming like this. If an app developer doesn’t do this and just has an image file for an icon, then they won’t get themed. What this ends up meaning is that icons that are set up for theming look great and those that are not stick out like a sore thumb.

[…]

iOS 18 takes a different approach, in that it will change every single icon for you, no matter what. This removes the case above where apps like Letterboxd and Readwise Reader don’t support theming, but in my view, also makes it so that every icon looks pretty bad.

Previously:

• iOS 18 Announced

Update (2024-06-18): United States Graphics Company:

Icons as they are supposed to be.

The whole point of icons is to identify and differentiate using semiotics, not assimilate as a sleek monochromatic slop of washed out minimalism.

See also: Eli Schiff.

Update (2024-06-19): Craig Grannell:

Still floored that the new iOS 18 iPhone Home Screen gives you four different options for how your icons can look, at two different sizes, but no sorting options. Apple execs must like busywork and fiddling around, rather than efficiency.

At least it will be easier to rearrange them using a mouse with iPhone Mirroring.

Remo_Pr0:

Wait if every app icon must have a dark mode and tintable icon then what would happen to additional app icons? Now in apps like for example @marvis_app there must be two extra icons for every additional style?

Via Eli Schiff:

Apple in their new theming paradigm makes redundant the functionality they made available a few years ago to allow devs to include custom icons. Oh, they still let you supply them. But they’ll just stick out.

Eli Schiff:

There is a reason designers have never done monotone blend modes/maps on top of their icons. They don’t look good. We can see here in this example. Just look at the two on the left. But now that Apple’s forced the matter somehow people say mono looks good.

Update (2024-06-24): John Brayton:

If an app has several icon options that vary only by color combination, it seems natural to let the user choose one option for light mode and another for dark mode. But there is no way to do this without providing n² app icon entries in the asset catalog. It also seems like the tinted icon should be the same for each option when they only vary by color combination. But the only way for several icon options to use the same tinted variant is to copy the same PNG into each app icon asset catalog entry.

My ideal solution to this would be a new setAlternateIconName method on UIApplication that accepted 3 different parameters: a light mode icon name, a dark mode icon name, and a tinted icon name.

Update (2024-07-09): Sebastiaan de With:

iOS 18 beta 3 seems to be doing an intelligent auto-dark tint on some third party app icons. It’s reliably triggered by being a clearly delineated shape on a white background. Other icons just get a slight ‘darkening’ effect applied.

BUT! check out that Facebook icon invert. Some kind of computational icon design happening here. Wild.

Sebastiaan de With:

it’s super interesting to me how iOS 18b3 inverts colored icons: it seems to grab icons with a flat color or 90° gradient and somehow turns the main shape into a mask to cut out its previous background gradient?

Android Dark Mode Design Icons iOS iOS 18 Springboard.app

4 Comments RSS · Twitter · Mastodon

---

---

---

---

Leave a Comment

Name

E-mail (will not be published)

Web site

Δ