Oh no, I need to design a tinted iOS 18 app icon
Tinted app icons in iOS 18 were met with plenty of concerns over visual hierarchy and brand identity. Here are a few tricks we used to make ours look good and feel right at home.
In June 2024, Apple announced some much-anticipated options to further customize Home Screens. From placing app icons anywhere and personalizing Control Center, to setting up dark …and tinted app icons. Yeah. You know. I feel it too.
I’m not here to mourn, though. Instead, I want to share a few tips I learned while crafting a tinted variant for our iOS app. I barely see anyone else mentioning or making use of these: alternate brand marks and alpha gradients (done the right way).
I believe that if you take these two tips into consideration, they’ll make your tinted icons look better on Apple’s platforms.
Reworking our app icon for iOS 18
Most app icons today are made out of a simple and a single flat glyph (Facebook, Instagram, Slack, and YouTube, for example). Whether that’s a good thing or not is another blog post! Either way, these icons should (mostly) look fine in light, dark or tinted environments.
Simple, flat glyphs make for the easiest transition to tinted icons in iOS 18.
Unfortunately for us, this wasn’t our case. We care so deeply about our shiny and colorful yellow diamond that, since we first released our iOS app, its icon had to fully embody its beautiful macOS counterpart — showcasing its depth and elegance.
A simple, flat glyph this ain’t.
Our choices to make a deeper, richer iOS app icon became our dilemma. Complex icons simply don’t translate easily into tinted icons. We don’t get anything for free here, so it was time to make some necessary adjustments.
None of these approaches would meet our high bar and do the original icon justice.
Alternative brand marks save the day
Alternate brand marks are not a new concept. In fact, if you look in any established brand’s brand guidelines, you’ll find them. Adapting logos for different applications based on factors like background color or material is a standard practice in brand design.
Now, with this new level of customization that both iOS and iPadOS offer, why should we treat app icons any different? An app icon should get the same treatment as a brand’s logo, with the context it’s used in dictating the rules.
With our app icon, it became clear that going the extra mile was not only necessary, but essential. The lack of clarity and contrast was problematic, and that pushed us to come up with an alternative.
Our solution was to rely on a glyph-based shape. One that, on one hand is very different from what you’re familiar with, but still very much Sketch. That’s no accident. In fact, you’ll have seen us use this in marketing applications and emails already. This was good, but we weren’t quite done yet.
Matching the design language of stock iOS app icons
Remember I said most single-glyph icons should mostly look fine? Well, they should, but sadly many I’ve seen so far do not.
A common oversight I noticed is people rely on automatic conversion way too much. What Xcode seems to do with the provided image is to isolate your glyph so it can be tinted, but it can’t do magic — and the result can be a bit tragic and inconsistent.
If you look at Apple’s stock app icons, you’ll notice there’s a clear difference between light, dark and tinted icons. While most light mode glyphs are made of a flat color, dark and tinted icons make use of gradients and opacity.
Apple’s own icons employ gradients and opacity.
For what it’s worth, Apple does mention this in their recommended practices — but I don’t think many developers and designers have picked up on it. If you provide a flat color glyph, you get a tinted icon that doesn’t fit very well within the ecosystem.
In their documentation they suggest a grayscale image — and that should do the trick — but I personally found that using a gradient, from 100% to 60% of opacity worked best because when I grouped the shape and applied a Tint in Sketch, I was able to try out levels of opacity that worked for us when picking the most difficult colors.
Just a footnote here: You don’t need to use gradients, some icons like Home and Watch are good examples of other ways you can make use of depth through plain shapes but at different opacities, but no matter what you do, always try to add depth to your icon in both dark and tinted versions.
Putting it all together
I’m sure even after these tips we will still have mixed feelings about tinted app icons, but I hope at least, with these tips, you can create one that not only complies with iOS and iPadOS 18 standards, but also effectively represents your brand and enhances user experience as best as it can.
Without further ado, let’s take a look at Sketch’s new app icons. We hope you like them as much as we do!
The end result — our light, dark, and tinted iOS app icons.
