Hey, everybody. Thank you for taking time to join us for the app icon for beginners Group lab. My name is Mike stern. I head up the design evangelism team here in Cupertino. I’m joined by some pretty amazing people who work covering all sorts of aspects of app icons, from design to how icons get drawn to screen, and then Icon Composer, which we’re going to be talking a lot about today. I figure we’ll go around the horn here and introduce ourselves. Let’s start with Patrick. Hi, I’m Patrick Hanan, I’m the manager of the Cocoa Graphics assets and text team.

And my team works on the the rendering and the construction and delivery of these icons. My name is John Hess. I’m a manager on the Xcode team and an engineer on the Icon Composer team. And I love working on this product. Hi, I’m Lance, I’m a designer focusing on iconography and the visual language of our software.

Hi, I’m Liam, also a designer on the team working closely on app icons. So you can see here we’ve got some pretty good breadth. Hopefully we’ll be able to answer any question that you have that comes in. We’re already starting to see a lot of questions popping up, so thank you for those. Please upvote other questions that you think are interesting and you’d love to hear an answer to. And we’re going to get to those in a few minutes.

But before we get get to the Q&A part of this, we thought it might be useful since this is a session for beginners. Many of you maybe haven’t had a chance yet to play around with Icon Composer. We figured we would do a quick demo of the app to just give you all a lay of the land of how it works, so I’m going to hand it over to to Liam to take us through that.

Cheers. Yeah. So essentially, for those of you who haven’t, don’t know, Icon Composer, it’s essentially a tool that we debuted last year, which allows you to customize and modify your app icons to receive the new liquid glass rendering, and this year we introduced some updates to the rendering, which are really cool, and also some updates to the tool as well, which has some pretty cool new features that you can play with. So it’s a good time to download.

Now if you if you haven’t and have a play around and I’ve got a new copy open on my machine and I can show you a little bit using this photos icon that we’ve, that we’ve got. So for those who aren’t familiar on the left hand side here, this is essentially where you can drag in your layers from existing design tools and configure the the in Z axis where they want to be. So if I click on this, this is the canvas.

So if you have a background color you want to configure, you can click on the right here. Choose from a solid or a gradient. I’m using this automatic which uses system light for default and dark for dark mode. Essentially system light and System dark are these backgrounds we’ve given given people to use, which are already optimized for our new glass rendering.

And then this on the right, on the left Here. You’ll be super familiar with this already if you’re used to using design tools, essentially groups and layers. What we have here are different SVG layers that we’ve dragged in from our design tool, and we’ve arranged them into groups. So the first group here being the top layer, you can kind of see how the petals are organized in the middle and the bottom right there.

And if I go over here and click a layer and go over to the right hand side here, you see all the appearance properties. So you can customize the color or the composition. So you know, color properties, things typical of design tools, opacity, blend modes fill. You can even override the SVG with that and things like composition. So ability to move these around. You can kind of see what it’s doing there and toggle the visibility. But one really important thing to do here is this is where you can choose what pops into liquid glass or not.

And when you drag in a layer automatically, you’ll get the liquid glass appearance. But if you want it to be more flat, flat graphic, you can just switch that off and then it will look a bit more like the vector SVG that you dropped in. If I move back over here to the left, what you’ll see is if I click a group, this is actually where you’re able to configure the liquid glass properties. So you can see in this panel here all the liquid glass properties, as well as some of the color and composition properties familiar from the layer panel.

So if I go through one of these one by one specular, if you’re not familiar with specular, this is the light that draws around the edge of the object, which really gives it the definition. And this year we’ve introduced a new specular treatment where it’s a lot sharper and a lot crisper and has much better definition and even has these dark parts, which helps define the shape.

By default, you’ll get automatic treatment, which most of the time will do what you want it to do, but you can actually go in and select whether inside or outside. Essentially, inside draws it on the inside of the shape, and it looks really great when you have the foreground that’s darker than the background, and outside is best when you have a background that’s darker than the foreground.

Liam. this feature is amazing. I think you need to zoom in a little bit and show people what’s really. Going on, right? Yeah, exactly. So you can see, you can see right here. There you go, there you go. Inside and outside there. I’m going to switch back to automatic because it’s looking pretty good already.

And then people have used Icon Composer in the past. You know, you’ll be familiar with blur. This essentially, you know, blurs the layers, gives you that glass, that refractive, that frosted glass feeling. If I select all of these there, you can kind of see how that works with, with all the layers. And then this super cool one. Let me just zoom in some more. Here you go. Super cool one, which is refraction. So let me click on these again and toggle this off and on. Right. That’s pretty cool, right?

This is picking up some of the new system glass properties of refraction that people are familiar with from the UI. Right. But in Icon Composer, we’re allowing people to customize this even further. So you can see here if you go up and down, this is actually controlling the height of the refraction. So you can see that the radius is getting a little bit more rounded as I go up.

And then if I go left and right, this is controlling the strength of the refraction, you know, bringing in more of the artwork into the shape. And we’ve even given the ability to do inverse refraction. So you can kind of see, see on the edges of the photos icon, how it’s kind of wrapping around the other way. It looks kind of bit like a sunflower. It’s kind of cool. It’s the beauty of math, ladies and gentlemen, just sort of does interesting things. Thanks to Patrick and John, the team that.

They’re working magic here behind the scenes. And you know, you can when you when you combine these things together, you can achieve some really cool effects, which is why we’ve got this super intuitive UI here. So if I was John, I might want super sharp refractive insert like this, but maybe. Patrick, I don’t know. I think you, you kind of, I think you’d be more into a bit more of a soft side to you. Right.

And I mean where we landed and what was looking good for this icon. Both big and small, was somewhere in the middle here. Alongside this, other things that people might be familiar with is translucency. So it’s kind of doing a bit like what the new Siri glass is doing, right? Where it’s a bit more transparent at the bottom, but retains the color at the top. I’m going to go back to flat for this. And then we also updated the shadows this year so that their ring shadows. Let me bump this up a little bit more.

And then you can see, okay, you can see what’s going on here. So you can see there’s a bit more definition around the edges of the shadows, which is, you know, dramatizing the, the kind of material effect and makes it feel really realistic and lifelike. Glass. Maybe zoom in again to just to like really show that one, please. Yeah.

So there you go. You can, I’m going to go too far, but just to really emphasize what’s happening there. And like last year, you know, you got the chromatic shadows, which picks up on the light spill. So you can kind of see how the color from the the layers are spilling onto the background.

But we also have neutral shadows, which are desaturated versions of those alongside that. I mean, quick overview of the bottom. So this is where you have your artworks. So iOS, macOS, watchOS if I click this actually didn’t have to do anything because it’s already working really well in the shape and size for the circle.

But you can also use this to at the bottom on the right to configure the dark mode, which is super popular on devices. And one thing you can do, which I like to do is just check the colors and see how, whether they’re working well with, with the background.

Because sometimes when you do something for a background versus a dark background, you know, there’s different contrasts you have to deal with. And then we could go to mono and also test it out in the different clear, clear modes and tint modes. And it’s just one artwork used to generate all of these. And again, tweaking the color fills here is really helpful so that you can optimize legibility.

Liam. For clear mode, I think it’s really kind of important to show the background. You may be right. Exactly. Yeah. So it’s about to head up there next. So up here is actually the, the preview panel. So we have all our preview controls. You can choose a solid colored background. Or you could even choose a, you know, a custom background here and even add your own background to see how the refraction works on the chick lit and see how contrast works.

We also have the ability to overlay our app icon grid. Super useful to have it in in this and also different sizing controls. So you can preview on device. And one super cool new control which we have is the ability to see how it will be back deployed to OS 26. So you can kind of see the difference in rendering here from last year to this year, but still looking pretty fresh.

That’s great. Thank you for taking us through it. So we’ve already got some really great questions. The one I’d love to start with, because it really speaks to sort of the beginning point of the workflow really before you even come into icon composer is a question from Abhishek 375. And the question is, if you’re designing an icon from scratch today, what would your step by step workflow in Icon Composer look like? Any apps? So maybe we could talk a little bit about how Icon Composer works in combination with other design tools.

Lance maybe this is one you want to take. Sure. Yeah. So first step is coming up with an idea, right? A visual metaphor that represents what it is you’re trying to communicate with your app. That might be a visual metaphor, or that could be referencing a part of your user interface in your app icon as well. And then there’s a range of design tools out in the world available to us. And the first step is drawing your icon in one of those design tools.

And when doing that, thinking about the composition and how those layers are both drawn and organized. But from there, exporting your layers from your source material into individual files, and then you drag and drop and bring those layers into Icon Composer. So Icon Composer really serves as a second step after your initial drawing, as a place to annotate your icon, to control how colors apply to the individual elements, which helps with the various appearance modes that Liam just showed, but also really lets you craft and control how liquid glass is applied to each of those individual layers.

Yeah. I was just about to say, I think that there are a range of things that you can do in those design tools before you export into Icon Composer, but I think in our experience, the thing that gives you the most flexibility in terms of doing the kinds of annotations and the kind of icon adaptation that Liam was showing is if you stick to really, you know, powerful but simple vector shapes.

Exactly right. And think, think in terms of, you know, simple and elegant geometries, not in terms of complex fine details, because those are going to be hard to adapt across the range of visual conditions that you see on device and different sizes. Right. The thing, the crazy thing about an icon is it shows up as a tiny little rectangle in like system settings, or maybe even inside of a menu on a Mac all the way to some huge billboard down the highway, right? Like so you really have to think about that carefully. And to do so in the long run. That’s why some of the best logos in the world are the ones that are constructed most simply, but still come across powerfully. Yeah.

And then one of the things you probably want to save from your design tool is the geometry and relative positioning of all of those layers. So if you export them at the full canvas size, then when you bring them into Icon Composer, they’ll all already be correctly positioned and you don’t need to rearrange anything.

Yeah, that’s a really like Designing at size is going to save you so much time when you drag it into Icon Composer, and also just not be surprised when you see it on device as well, because these things have to work very small, right? Yeah. And we have templates available where it makes it super easy to export the SVG assets or PNGs from those and just drag and drop it into Icon Composer.

Yeah, yeah. We have templates for, for applications, we have Figma, we have Sketch, Illustrator, and Photoshop and the Illustrator one, there’s a script for it, which I highly recommend because it’s going to allow you to position the vectors relative to the canvas and to maintain that relative position vis a vis the canvas.

And then another thing which I know has come up for folks is vectors versus bitmaps. You can use bitmaps, you can bring them into Icon Composer, but the recommendation is to use scalable vectors, SVG, for which you import. So I think we have time for one more question now.

No, that was great. Listen, there’s a lot a lot of thoughts on on that particular one. So the next one I’d love to look at is from tree, I suppose, which is when using Icon Composer, what are the most common mistakes developers make that result in icons looking great in Icon Composer, but weak on device?

It’s a really great question. This came up yesterday at the event that we did here at the Developer Center. This was maybe more of a design question, but really open to the floor. I don’t know. Liam, do you want to. Yeah, take this one. Yeah, I think I think the complexity that Patrick was saying is a really important thing, especially with introducing these like glass features is like, you know, these can be very delicate and also very powerful. And, you know, like, for example, refractive quality here. The reason why it looks so great is that it scales really well because, you know, we’re indexing on that within the icon artwork itself. So like making sure it’s not too complex.

It’s going to work well with the glass rendering that we have. Yeah. Yeah. I think add to that. I mean, I obviously I’m a software engineer, so I take sort of software look at it, but it’s just like, like any code you have to, you have to build it, design it and then test it. Right. And in the case of an icon, it’s really important to evaluate it at all the different sizes and presentations that it’s going to be. Don’t skip that step. Like look at the icon at its smallest size.

Look at the biggest size. I think there’s a waterfall feature in icon compose that shows you them all at the same, you know, at all the different common presentation sizes and cycle through it and stare at it and says and try different backgrounds, right? That’s the number one tip, right? Or at least my number one tip, because you, if you, the Icon Composer app is great. And if you’re on a nice Big Mac with a big display and designing it, you’re seeing it at very much larger than natural size, if you will.

And, and so it’s important to really make sure you see it the way the customer will. Yeah. Yeah. I mean, this goes back well before I couldn’t composer, but a lot of the guidance that we would, you know, provide to developers for app icons was put it into a group on your home screen because that’s going to be the smallest, it’s going to possibly be on your iPhone screen. And then take that iPhone, walk outside and look at it while you’re your arm is moving if you’re, you know, and in daylight conditions.

And then relative to dozens of other app icons, like kind of a random selection. And is it, does it have a presence there? Is it, is it really standing out? And then, yeah, what can you do to fine tune to accentuate the color or the form to really make it make it unique?

That simplicity part is really important as well with the new refraction, controls like glass can be very reflective and sensitive to the number of shapes in your icon and how big they are and how they overlap with one another. And so very small moves in the refraction control can make a really big difference. And so it’s really important to review your icon when it’s small and on device. Yeah.

The next question I’d love to take it kind of relates to what we were talking a little bit about earlier, the workflow of using other tools in combination with Icon Composer. This is from someone named Jason Cheung. And the question is, many developers already have mature icon design workflows using Figma Sketch or 3D tools.

What problem was Apple trying to solve with Icon Composer? And what is the broader vision for app icons? That was that made Apple believe a dedicated tool was necessary? So good. Good question. Yeah. Anyone can take. Can I take a piece of this? And I’m sure Lance will have something to say. Yeah.

Look, icons. The icons are such an interesting thing, right? Because they’re they’re they’re they’re sort of owned by so many different people. They’re touched on by so many different audiences. Right? There’s the, there’s the, the developer designer who’s crafting the thing originally. There’s the app and the engineering team or something or the product that it’s part of that’s it’s, it’s visual identity and it’s, and it’s the marketing identity of, of an app or a product. It has so many different things and it lives in an ecosystem. That’s the main point I’m trying to make.

And one of the things that we try to do is with the overall things that have been going on over the last 2 to 3 years, honestly, is to make sure that these that the user is the other stakeholder, right? He’s using the device, using your icons in the springboard home screen or whatnot. And we’re trying to make sure that the icon has, is alive and has can adapt and live in the rest of the devices ecosystem, whether it’s a Mac, a phone or a watch, and to give to bring features like light, light mode, dark mode, dark mode, clear adaptation to and to have it fit in somehow with the design language that’s going on in the applications and the UI. That’s a really hard thing to accomplish with a static set of pixels, right?

And it’s, and it’s, and while there are other approaches where you can maybe produce a, you know, big wheelbarrow full of different individual executed bitmaps. That’s really not very much fun either. And it doesn’t. And it’s still a static set of stuff that doesn’t evolve over time with the system and the ecosystem as it evolves.

So that’s why we really decided to go to that level of actually crafting and balancing it out. So we can factor that load between keeping a nice, elegant, simple expression that the designer and developer can, can, can, can provide. And then let us take that and do as high quality a job as we can to adapt it and render it in a really high quality way on device and adapt as the, as the conditions on the device adapt, which is hard to hard for the, the application to, to be involved in. Sorry. I love that answer. That’s great. Anything else to add?

Yeah. I mean, the big thing we did last year that we further refined and improved this year was we brought the design language, the material quality of the interface into the home screen, into the app icons themselves, and not in a superficial way, in a really integral way. That where the material really works with the individual elements of the app icons.

And that requires you having some control over that, right? We automatically apply that design language to your app icon. But we wanted to give you all tools to control precisely how that glass works with the various elements and that are all different sizes and colors within within your app icons. And then for customers, these app icons all sit alongside each other in a common space.

And so having some shared design language between them just creates a more harmonious user experience. Yeah. I think one other point on that is that previously you had to make your, you know, your watch icon and your iOS icon and your macOS icon and having and then we introduced the dark mode and, and clear mode and tint modes and all of that. And imagine having to supply individual PNGs for all of the different modes. And sometimes they don’t look good because your watch icon might not look good for the app icon and stuff like that.

So being able to just have it all in one single file just streamlined the process of actually deploying one icon that’s going to look good across all these places, across all these connected devices that people are going to see. I also want to touch on one thing. I sort of briefly mentioned it earlier, but super important is one of the main things we’ve done with Icon Composer is shifted from a raster world, from a bitmap execution out of your design tool export as PNG or, you know, to, to a resolution independent representation, right? That’s super important, right? Because of this problem that we talked about, about these icons being showing up really tiny all the way to super huge.

And, and also these effects and the compositing and the adaptation to these different rendering modes. That is a really, really, almost impossible thing to do with a pre delivered set of bitmaps. Now we, we still support those and we do the best possible job we can with those.

And for some use cases, that’s actually the appropriate choice for certain branding styles or certain kinds of kinds of applications. But, you know, to provide the maximum adaptation capability. That’s why we have this resolution, independent representation, so that you don’t have to worry about that. You can make that our problem to hopefully get right, you know, so that it looks good in all these different contexts. Yeah.

One more thing. Icon Composer really helps ensure consistency between various icons. And so with things like the dark background and dark mode, we were trying to achieve the consistent dark background across app icons. And so being able to specify that in a way that guarantees consistency between our own app icons, as well as third party app icons.

Icon Composer is great for that. It’s like having a high level abstraction API, like SwiftUI versus low level, you know, systems levels, programing, right? It’s, it’s nice to have those high level abstractions because more, more interesting things can come from it and adapt over time. Sorry, that’s an engineering take on a very designer focused topic, but it’s okay. Engineers are welcome here.

We I’ll add actually a couple more things, which is, you know, there’s certainly going to be some cases where an icon, you know, maybe a lot of game icons where they have character artwork and, you know, want to have that illustration style come through, you know, that’s totally reasonable.

There’s, there’s even some of our app icons that this came up yesterday in the lab that we did around the camera app icon and sort of the lens and the effect there. And it was a raster image that’s in there, but it’s also taking advantage of some of the specular highlighting from icon Composer or the loop from preview.

You know, there’s if, if you’re really comfortable with 3D tools and you’re looking for something very specific, you know, potentially there’s a combination there between some of the stylistic qualities that you could apply from Icon Composer and a mix of other things you might be able to achieve with other tools.

And then I would also say that, you know, while I love the, the, the glass effects that are in Figma and Sketch the, the recipes are a bit different. And so you’re not going to be able to have a 1 to 1 sort of match with the visual appearance of glass and Icon Composer.

All right, we’re going to switch topics a little bit here, which is. The next question is from Jordan. And the question is about what would you say are the concrete recommendations we should follow to upgrade app icons already built for the iOS 26 liquid glass design system to that of iOS 27?

It’s a really great question. We we showed it a little bit here that you can preview an Icon Composer, but are there, are there just techniques that were learned along the way that we could share? Lance, do you want to take that one? Yeah. So the first step is if you have an Icon Composer file from last year is just open it in the new updated Icon Composer and you’ll see what it looks like with the new rendering applied to it automatically. And that was represented in that toolbar control that Liam showed a minute ago. And so you’ll see sharper rendering a new look without having modified the annotations or your artwork at all. But from there, you can go in and review the specular highlights.

And particularly if you have multiple overlapping layers, see what automatic is doing with your icon, and then see if you need to configure that to inside or outside, depending on the colors of your layers. From there, you can fine tune the shadows. You can configure the refraction if you do have overlapping layers. And so yeah, there’s a variety of controls that you can interact with to optimize your icon for the new rendering.

It’s important to point out that you actually, if you’ve already invested in an iOS 26 Icon Composer icon, your application doesn’t even have to recompile to get the new benefit of the new, the new look. It’s just that’s that’s the way we designed it is that it’s it’s it adapts to the new look of iOS 27 automatically. You can further refine it. I urge you to take a look at the excellent website on the Icon Composer, developer.apple.com/composer, I think.

Don’t quote me something like that. The link will be on the on the video feed somewhere, I’m sure. Yes, yes it is. There’s a great little comparison where it shows the photos icon in its original form as it appeared on iOS 26, its unmodified form as it runs on iOS 27 and then its optimized form.

So you can get a real feel for what that, what the, what the what the relationship is between what you get for free and what, what, what you get. If you invest a little bit of extra time into optimizing for this new look. Yeah. One more design change that we implemented in many of our own app icons this year was we reduced the use of translucency.

And that part doesn’t happen automatically. So that’s something that you’ll want to review with your icon. And it’s very icon dependent. It depends on the color and size of the layer, how much you need to adjust it. But we generally reduce the amount of translucency to have icons feel sharper and more legible, but we still make use of it, which I think you can see in the podcast app icon so that you can see some of the refraction between those interacting layers. Yeah.

That’s actually reminds me, for those of you who have not yet, you know, created an icon, composer icon and are still, you know, having your existing legacy icon in your app. That’s the thing you’re going to notice the most. You know, when running iOS 27 is some of the elements that you that we used to, because we automatically segment, you know, even even legacy icons and then turn them into, you know, basic mini Icon Composer documents and then render them the translucency choices last year in iOS 26 were a lot more. So they’re going to be a lot more prominent, more less translucent, those, those foreground elements you may have in your in your legacy icons. And if you don’t like that choice and you like the previous way it looked with more translucency.

Now is the time to invest in an icon composer version of your your icon, and then you have full control over exactly how it will appear. Yeah. I mean, I want to take a moment to say like using Icon Composer and playing around with some of these attributes is really fun.

Like people are my, I found myself winding up losing some productivity over the last couple of weeks as, as I was playing around with some of the new parameters that we can modify because, you know, they, they sort of intersect and interact with each other in really interesting ways and sort of playing with the refractivity in particular. And like we were showing that before sort of dialing that in and getting that right. It’s very subjective. And then you go and change colors and you start to change your minds about other choices you’ve made. So I, I like the tool.

I mean, it’s really, you can, it’s very expressive. You can be very creative with it. And I hope everyone kind of brings that attitude towards towards using the app because it’s really enjoyable. So kudos to you all for that. The next question is from Kyle at the Icon Composer session yesterday. We mentioned this before, but as part of WWC, we had a little event at the developer center and we were doing some pretty hands on work.

So this is what I was referring to. It seems like nearly all of the app icons aren’t using the default blend mode. Can you talk about the various blend modes and when to use them? Especially curious about the App Store icon. So we may want to talk a little bit about blend modes just for a second and explain sort of what that what that’s in reference to, since this is for beginners, and I wouldn’t assume that everyone is familiar with blend modes. But yeah, this really could be for, for anyone.

Liam. Yeah. I mean, I can also bring some stuff up as well on screen if. I think that’s the best. For sure. Yeah. So I’ve got the podcast icon here that we were talking about earlier. And I mean, let me set everything to normal first. And so normal is, you know, you’re just, it’s just as you would expect.

And then this top panel here, these are all additive blend modes. So they essentially darken things. So, you know, darken is you probably familiar with that from Photoshop. Multiply is kind of multiplies on top on top of it. And plus L or plus plus D plus darker is basically it retains the vibrancy of the color underneath, and it helps sell the glass a bit more. But the thing is, is like, obviously we’re on a dark background already. So you can see plus darker is not really doing much. If I go to lighten, these are subtractive.

So these are these three all make the the object in front lighter than the background. So lighten again, these two are very familiar from from design tools Lighten screen and plus L, which essentially is a bit like the opposing ones at the top above here. These are. It’s like a plus hours, like a screen that retains the vibrancy in the background. So you can kind of see here screen is a bit more desaturated, whereas plus L it feels a lot more vibrant.

And then these bottom ones are various, various you can have a play around with these. In terms of our own app icons, we basically, we basically use whatever’s right for the artwork and depending on the color background and what we’re trying to achieve with how the colors interact, you can play around with each of these to achieve different effects. But for podcast, for example, we’re using plus L so that we can retain this ultra vibrant poppy colors that feels like transparent glass on top of the glass background.

Yeah, if I, if I may, I mean, this is, I don’t know how helpful this will be, but I, I’m, I’m a, I’m a graphics guy, right? So I wanted to give a little bit of a different angle on this explanation. Blend modes are really all about how, at the end of the day, it’s all a bunch of math, which I’m not going to get into because it’s not appropriate. But what it really is trying to do is really characterize. If you have one pixel and another pixel on top, right, how do those talk to each other and how are they going to communicate? And how are they going to decide how to form a final result?

Right? And the most simplest thing is like, I’m just going to replace you and you’re going to go away and I’m not going to give you take any contribution from you. I don’t really care what you have to say. I’m just going to be me. Right? That’s that’s normal blending. Yeah. The, the normal, but it’s also the most obvious one, right?

Because it’s the most intuitive one. All of the other ones are different kind of mathematical formulae that basically say, no, no, you know what? I’m going to just like I kind of want to I care about your brightness. I’m going to, I’m going to let your brightness shine through me, but only your brightness. Or maybe I care about your hue or your color, your, your vibrancy.

We allude to a lot. It’s like, it’s really a trick to sort of allow the sort of basic color relationship of, of the, of the bottom pixel to sort of get get intuitively and elegantly blended in to the to the foreground pixel that you’re about to about to present. Right. And you know, they’re not really, you know, these, the names for these things come from like, you know, geeks like me who design things back in the 80s, right? You know, and came up with, you know, math names.

But at the end of the day, I think it’s just something you need to try to play with and see which one works for the different kind of relationships of the foreground to background elements that you have. They’re helpful in making your icon feel more like glass. By default. You’re bringing in layers and they’re opaque, and so you’re not seeing a lot through. And you can adjust the opacity of those layers, but this just helps provide more color intensity and control over how those layers of glass blend together.

Yeah, I think right. Like if you had a piece of glass in the real world that was red and another one that was yellow and you overlapped them, it would probably lead to sort of a more amber, darker orange color, which is somewhat like multiply or plus darker might help you achieve with maybe some opacity.

Playing around with opacity and then as a mathematical, I feel like we should have a whiteboard, but you know, like in like, you know, red is 25500 and green is 02550. And if you combine those with screen, it would be except. In HDR when it’s not. This is like on composer for beginners. And I’ve already gone off the deep end here a little bit.

So and actually given the questions we’re getting, I’m assuming we have a lot of non beginners who are joining us. But this next question is really great. Oh actually sorry. Before we get to it, I did want to call out that for plus lighter and plus darker. We have the sort of glass appearance across our operating system outside of app icons, and a lot of the glass controls that we have. And you know, it’s really used extensively. And while some of the the math, there might be a little bit different than some of these blend modes that we have in the app, it’s really quite similar, if not pretty much the same.

And so it’s, it’s this deep integration, I think, between how app icons are rendered and controls and icons. So all right, switching to the next topic. This is a question from a user named Thomas. The question is iOS 27 lets users dial liquid glass transparency system wide. But our icons were tuned against fixed glass. Does the new Icon Composer let us preview across that slider range? And what’s the guidance when a clear mode icon that passes contrast at defaults fails at a users extreme?

So this is maybe a bit of a trick question. Comment on this because the the glass it was a deliberate choice to have the glass and clear mode is is does not respond to the slider. It does not behave like system glass. It stays constant. And the reason for that, I mean, I don’t know, I wasn’t the one who made the decision.

But like it is very much, you know, we, we can’t in system glass, we kind of we have some idea of what kind of the foreground content versus the background content, what that what, what kind of content is going to be on the icons. It can be anything you can have, you can design whatever you want on there, right? And we need to make sure that we have a consistent and legible experience in all, in all cases.

So in that case, so for, for that to achieve that, we decided to pin the glass for that. So you don’t really have to worry about that. And also on a, on an iOS device, you know, you’re mainly going to be having to deal with different wallpapers, not different system glass underneath you for the most part.

So for the most part, I think we sidestepped that problem and thankfully reduce yet another, you know, adaptation that you have to design for. Make sure that your icon doesn’t doesn’t fall off the cliff. Yeah, there’s a single mono mode for which you make grayscale annotations to support both light, clear, dark, clear, and all of the tinted modes. Yeah. That’s right. Great. So now for something completely different. This is a really great question. Most app icons start as flat 2D landmarks. How do you think about giving something that was designed to be flat? A convincing physical appearance in liquid glass?

Who wants to take this one? That’s what Liquid Glass and Icon Composer does really well is. You bring in a layer, and by default it has a certain set of properties enabled automatically, and you can fine tune and adjust from there based on, you know, the shape and size of the elements of whatever your imported artwork is.

A very simple shape might, you might want to use different properties than if you have a more complex, more typographic mark or thinner tick marks or details in your in your artwork. And I want to point out this is nothing new, right in the field of graphic design or whatnot.

If you think about like a company logo might appear on a, on paper form, on a, on a business card or on a letterhead, it might appear in a physical way, like on a product in a, maybe even a pseudo 3D way. I’m thinking of some of the, you know, classic little, you know, things that would be stuck on the front of cases, right?

Think about like car, car logos, right? They’re, they’re physical objects. They’re designed, it’s the same brand. It’s executed slightly differently sometimes with some three dimensionality to it. Maybe it’s a physical medium, maybe it’s a print medium, maybe it’s an online medium. Maybe it shows up in a motion graphic in a in an advertisement. Each one of those cases, you adapt your basic brand identity and shape into the most natural way for that medium so that it still comes across. And, and then you have your executives say, yes.

I think, I think I think there are some opportunities as well when when you design logos, you might have eraser paths or subtracted elements from that, you know, to be like the most simplest, you know, vector at the end. But when you go to Icon Composer, you might want to expose some of those layers that you might have had to draw it back in there so that you can simulate, you know, if it’s eyes on a face, should the eyes be above the face rather than cut out of the face?

Or even with this podcast example, you know, we had eraser paths, but then when we took it into Icon Composer, we, we moved it to solid shapes so that it felt like it was layering. So I think there is still some opportunities to like, dig into those vector files and see what is the right construction. If I was to make this, like you were saying, like, if I was to make this out of physical material, how would I then reconstruct this? Maybe there’s a slightly different layer order or different elements exposed.

Yeah, yeah, I think, I don’t know. This is going to stretch a metaphor way too far, which is something I often do. But you know, we’ll talk about app icons as being the face of the app. Well, sometimes the face has sunglasses and a hat on or whatever, like, you know, but it’s still, it’s recognizable as being the representation of the brand and it can adapt, but as long as it all connects in a clear way to other representations of the logo of the brand, then I think you’re in a good place.

Another question from Andy Zoom zero one is, is there a change in how to include an updated Icon Composer? Updated Icon Composer icons into an app in Xcode. There was a bit of confusion on how to properly do this when Icon Composer was originally released, and I actually had to rely on quite a lengthy thread on the forums to understand all of the the settings in Xcode to set. So I’d be happy to talk about.

Yeah. So when you finish designing your app, your icon and Icon Composer. Or maybe you’re the engineer and you receive it by email or message or something, you just drag it into your Xcode project, put it right next to your Swift files. As a normal resource in the project, X is going to suggest the correct target membership by default, but you can verify it or check something different. And the dialog when you import it.

And that’s going to cause your icon to build with your project. A last step would be to go to the target inspector or sorry, the target editor in Xcode, and make sure the app icon name matches the file that you dragged in. So usually it’s just app icon, no dot icon at the end. And that’s it. That’s the whole integration process. This is adjacent to the asset catalog, not inside of it. And if you have an existing icon in your asset catalog, you probably want to remove it.

Yeah. And just to very concretely answer the question, is there a change from last year to this year with how you incorporate Icon Composer documents? No, there is no change. It’s exactly the same way just in place asset update. You know, that’s all you have to do. Yeah. Great. The next question. Very different topic here. But from Mac verse the question is do the actual layers inside the Icon Composer app automatically become glassy in the iOS 27 style?

So I think, yeah, when you just drop them in, what happens by default perhaps is the question. Yes. Yeah, that’s the answer. Yeah. But again, if you’re thinking about multiple layers, you might want to separate those out by groups because then each each glass property is applied on the group level. So let’s say you have two layers. You drop those in. You might want to just separate those and configure them the way that you’d want them to appear. Okay.

Yeah. Imported layers are rendered as glass layers by default. But again, back to some of those icons like like camera or preview where you’re pre-rendering a raster image and importing that and maybe combining it with other vector layers or other raster layers. You can then choose which layers to use liquid glass on and which ones to maybe opt out of, because they don’t need the effects because you’ve already pre rendered some treatment into your artwork. Yeah.

Or it’s yeah, I meant to maybe represent like a watermark or something like that wouldn’t make sense to, to be glassy. I the next question is from SJK27 and it is when in tint mode alone for app icons, the background colors look washed up, maybe washed out, and lack contrast with the text clear mode though it is much, much better.

Any advice on what settings could be tweaked to achieve a better vibrancy? Hard to say. Maybe without looking at the icon itself, but based on the verbal description, would we speculate might be happening here or just ways of optimizing basically for different different modes. Yeah. I think we allow people to pick the color of, of the tint mode. So you can pick a very desaturated color or you could pick a very vibrant color.

So and we expose that within Icon Composer. So one way could be just to, if you personally want to see it on a more vibrant color, you could just look at it like that. But I think it’s worth bearing in mind that, you know, there will be some colors that, you know, like that are just naturally lighter in, in luminance, right?

So someone might be able to put it on a yellow. And so you have to optimize for, for those situations. So always having foreground elements, being white or close to white, or at least one, one part of that foreground element. That’s something we do in our own files.

And it really helps always make sure there’s contrast and legibility. Yeah. Also, you know, state the obvious. Please take a look at the iOS 27 and Icon Composer, the composer. The latest rendering, because we’ve made quite a few tweaks to exactly to solve some of those issues that were raised here.

We’re not saying we’re perfect yet, but like it’s it’s getting better all the time. And yeah. Yeah. Some of it also just may be the shape of the objects within the icon to if there are too fine of a detail and or there’s too many things around them. I mean, there’s also. Pay attention to the background layer.

Like if you have a, if you’re supplying your own background layer with your own gradient, you want to be really careful about like what your luminance values are, especially in mono mode. Right, right. Yeah. Because you can really, you know, ideally you just use one of our system system provided backgrounds, you know, to, to, to provide the maximum contrast.

Yeah. It’s really key to try to maximize the dynamic range in your mono mode annotations. So you have dark darks, you have bright highlights. And that is going to get transformed as the user picks which color that they want on their icons based on whatever wallpaper they have. But really having those bright, bright lights and dark, dark, dark darks in your mono mode will help with that. Yeah.

I’m realizing we’re I’m going to go to another pretty advanced question. It seems like we’re getting a lot of that. But before I do it, I feel like maybe we should just cover something really basic, which is how do people get started? How do people get Icon Composer?

I know there’s multiple paths. Maybe, John, you can speak to one that you know, how you would recommend people get Icon Composer. I mean that, so it comes with Xcode. It’s also available directly on apple.com. So you can download it. It’s just a standalone image. Those are the two primary ways that you can get Ahold of the app. Go to that cool website I mentioned earlier. At the bottom is a big fat button. Click on it, softer comes down.

It gives you a mini tour of the app right on the website, and it gives you a brief version of Liam’s demo from earlier. Yeah. And download those templates from the design resources as well. And inside of there, there’s a sample file which has some layers in it. So you can download an Icon Composer file and see what it looks like. Experiment with last year’s rendering, this year’s rendering, and then try moving shapes around and interacting with the liquid glass properties.

Yeah. I’m wondering, have we seen people internally using Device Hub, like our new app to simulate the appearance of icons and test things out, and rather than sort of building and running on their device or anything along those lines. Well, you definitely can. Yeah, it’s helpful, especially, you know, in watch and other areas or, you know, especially the new device hub is real devices app is really great for showing the different, you know, light dark mode and the different appearance variants that the system can, can go in. Yeah.

Yeah. Yeah. Cool. And it’s just a great app. I’m going to log role device hub. It’s totally unrelated. Icon Composer. Need to do another session. For Device Hub. Are you going to kick back on that one? Yeah, I get a cut. At one point. It’s free though right. So I’m. Not gonna get. Any money.

All right. This next question we’re going to we’re going to go into the deep end here a little bit. So how do you achieve items overlaying each other such as the Apple Developer app icon, where the pencil overlays the paintbrush, which overlays the ruler, which overlays the pencil. And this is from Mark Vienna. It’s a great, great question. It’s beyond my pay grade.

Yeah. It takes some time. You have to slice those elements up into individual layers. So what looks like three elements from a single finished design is actually comprised of of several more. And we often use shadows to help illustrate that one element is passing beneath another element. But yeah, it just requires cutting those layers into separate parts and then assembling them so that when they’re put back together, it looks like one shape is passing behind another.

Yeah, there’s, there’s some clever trickery to make the kind of mix M.C. Escher esque. Yeah, I was about to say. Yeah, yeah, yeah. We got quite a few questions about that. I received a couple yesterday, and, yeah, there’s some fancy stuff. If you were to look at the icon in Elevation View, it would tell a different story. Than plain view from above. Would be this way.

Okay. This next question is a great question that ties into accessibility. And it’s about colorblind users. This is from Arti Singh who asks how are icons handled for colorblind users, which I think is a is a great question. How do we think about color blindness when designing app icons?

If I may offer potential, I mean, I think something that we’ve all of our icons do is there’s a form which is recognizable to it, and there’s highlights and shading and like real contrast that’s given to every icon. And in a way, because our icons can appear in clear or tinted modes, they have to work and be recognizable across all of that.

So, you know, certainly with red, green color blindness or something, you wouldn’t want to depend on people’s ability to be able to see color, to get meaning out of out of the icon. Yeah. It goes back to what we were saying before having a really good fundamental good shape algebra or design language for your, for your form of what you’re trying to communicate, you know, even before you start to get fancy with colors and gradients and even glass effects, right?

That’s really essential. So it’s recognizable right away for everybody, right? That’s like the number one rule of brand design, right? Yeah. I think that that mono annotation is really doing what we’re, what you’re talking about, right? It’s like you have to adjust it to for the contrast to be, you know, work really well so that, you know, when if someone picked super like clear version of it, you know, it’s going to have legibility, but you could equally pick the dark clear variant. And then, you know, all of these artworks have to, you know, meet certain contrast requirements to work if this annotation mode.

So I think people even going through this process of using Icon Composer will learn a lot about, you know, how to adjust contrast so that the shapes work really well for dark and all these other appearance modes. And maybe it might inform their, you know, their, their default mode. Yeah. Yeah.

There’s a question from Das Lama, which I love because it is Explicitly for beginners. How to start from scratch as a newbie without any design know how. This is this is a tough question, I think, in some ways, but I think a really important one. I mean, there’s a lot of folks who maybe feel really uncomfortable in how they get started. So we could probably take that in different ways. But what would we recommend to someone who’s never made an icon before?

And starting with what do you how do you want to represent your app? How do you want people to remember your app? What are you trying to communicate in a very small space that can be very distilled, and you want to capture the essence of your app in an image that people are going to recognize, that they’re going to remember.

And there could be some relationship between your app icon and the app itself oftentimes, but not always the, the, the color of an app icon might be coordinated with a tint color inside of an app, but really starting with an idea of how do you want to express the identity of of your app? And then beginning to, to draw that right and drawing that we use vector graphics editing applications for that. But again, using any number of tools that are available, image making tools that are available, and then thinking through what is the layer, construction and composition of this.

Some app icons are quite simple. Look at the health app icon, the messages app icon. It’s one shape on a background, but others are much more complex and rendered using more sophisticated tools and 3D models. And so there’s a spectrum of possibilities there. And ultimately you just have to decide how do you want to represent your your app?

Yeah. If I could make a completely radical suggestion, please feel free to ignore. But my advice would be if you’re especially starting out, close the laptop lid. Close the computer, shut it off. Grab a little deck of paper, a little notebook, and a pencil. That’s all you need. And just start drawing some stuff. You don’t even have to be a great artist or anything. It’s all about trying to figure out how to put a line around an idea. That’s what a picture is, right? And, and do a bunch of those and just spread them all around, you know, paste them up, look at them, see how they feel, ask your friends what they feel like. That’s the design process. That’s, that’s how you arrive.

And only when you, when you get locked on to that basic zone of what you think you want to communicate and how you’re liking how that then, you know, just like if you think about how like a Pixar movies are made, right? They start with storyboards with really crude Sketches and just sort of put them up there and talk about that.

And it’s not until they get very far along, they start like lighting them and putting them in all the fancy software to make them photorealistic. That’s the finishing. That’s the that’s the fun stuff at the end. The hard creative process in the beginning when you have to actually like figure out what you’re trying to say. I mean, writing is no different, right? You know, it’s just in a different format, right?

Potentially writing is the place to start to like write it out for yourself. What is your app do or. Just talk. About your app, right? What’s unique? Like start talking to someone, have a conversation about the app and then, you know, record that and then play it back and think, was there any objects or metaphors I used or something that like, might actually sort of be the key way to represent visually what the app is about?

Yeah, this came up a lot with conversations we’ve had this week, and it’s been a really good exercise just to sit with people and talk about it. Like sometimes the name of your app might just be what, what, what the metaphor should be because then it’s just so obvious, right?

You know, or as you said, like, yeah, there might be a relevant metaphor that communicates what your app does. You know, podcasts is a kind of microphone resonating, like casting waves from it, right? So it doesn’t look like the app is, you know, album artwork and standard UI, but this metaphor communicates what you actually do there. Yeah.

And then, you know, eventually you’re going to get to the place where you’re starting to render and figure it out. And I think that’s where you start to realize how much can you simplify it without losing meaning? And you know, if it was an app about playing the piano or something, you don’t need 88 keyboard keys in your app like on. Right. But maybe one is too few. Right? 87 yeah. No.

I think. Prime numbers. Please. Yeah. We have. Questions for. Maybe it’s time for a couple more questions. This is from I’m going to try to skip saying the name. This one’s a little more tricky for me, but what are Apple’s recommendations or best practices for balancing one’s shared liquid glass icon with platform specific tweaks while keeping the brand And consistent across iOS, macOS, watchOS, and legacy OS versions. It’s a good question.

Maybe. Well, I can address one thing and one aspect. I mean, across platforms, of course. It’s we’ve, we hope we’ve done made it as easy as possible to just like adapt to the different icon shape of, say, watchOS versus versus iOS and macOS and by having unifying the sort of design algebra around that.

I want to address the, the legacy situation a little bit. We have gone to great lengths to try to make sure that the design you land with in Icon Composer is faithfully executed and distributed in a natural way across all endpoints. And that means it includes your App Store product page presence. And also we make sure that we render something that is reasonable, but and reflects the, the full rendering quality of what you’ve what you landed on and, but is delivered with, say, the right corner radius on the earlier.

017 and before presentation. Right. So we try our best to make sure that you can stay with a single visual identity across all OS versions. Now, that may obviously doesn’t fit in with what we thought was the, you know, design language du jour of iOS 15 or something like that. But we, we feel that, you know, your overall current visual brand identity is the most important one, while not compromising some of the things that are really important about how the app lives on a device like the fundamental shape of the icon.

So that’s, that’s my technical semi-technical answer. Yeah. There’s also just some things like that. You know, I’ve got up here the, the maps icon and this is like a very asymmetric layout where it really uses the rounded rectangle that it sits within. But you know, when you design for watch, you might want to reconsider how that layout works for a circle. So, you know, for For example.

Then we have the puck sit within the middle of that because the circle has a lot. It doesn’t have the same layout possibilities or symmetry, and it makes sense for a circle to sit nicely centered within another circle. So there might be some considerations from a design perspective that when you’re adapting your icons, that that might be informed by the shape in which it sits in. And this is super easy to do in Icon Composer because you can just take these elements and just move them around in the composition panel, scale them up, scale them down, and go from there. Can we drive over the bridge over to 80 right now?

But no, this is a great like what is the most important part of this, right? There’s multiple elements. There’s, you know, the, the, the indication of your location and your bearing. There’s the roads, there’s Apple Park, but one of those things drops out when it gets smaller. So, you know, something we were talking about earlier about simplification. We have time for one last question. I’m going to do a quick just around around the room. This is telling John what was their favorite new feature, an Icon Composer this year.

What is your favorite new. Feature in Icon Composer that John. And what is your top radar. Bug that you want to fix? Let’s just go around the room. Patrick. We’ll start with you. Not to put you on the spot. My favorite feature. Yeah. Oh, well, clearly it’s that that that cool refraction Inspector. Control. In two way. I really love the, the fun, the fun factor that that brings into the design exploration. Yeah.

Since last year we did all sorts of usability enhancements to Icon Composer from the one that we shipped with iOS and macOS 26 for, you know, showing selection annotations in the UI and, and snap to guides grids as you move around. It’s just fun to build all that stuff. So I’m picking from how much fun I had building them, not necessarily how much fun you all have for. Using. Them.

I do love the refraction control that it makes it very easy to navigate that whole design space and find what works for that icon that you’re working on pretty easily. But I would say the automatic specular highlight is just the defaults, like having great defaults that hopefully work well without you having to touch them for your app icon. Of course, you can configure them depending on the complexity and nature of your app icon, but having it be aware of the color of your layer, the color of the background of the app icon, and choosing inside or outside automatically. Yeah. I mean.

I would want to say what other people have said, but in the interest of saying something different, not to be boring. I mean, we have copy and paste someone working on a lot of icons. Yeah. I mean, being able to just copy and paste attributes from one icon to another. I mean. Oh my goodness. I. Thought you were going to say HDR export.

Also the new automatic the automatic gradients looking really, really nice. Yeah, that’s something else that you can just stick your brand color in there and it will create a beautiful gradient as a background. Yeah, yeah. Really. I love those also just want to call it the 2D custom control there. It works with modifier keys so you can lock in one of the. Values. To. Yes. Nice. Nice subtlety.

So we’re at time. I want to thank you all for joining us. I thought this was really informative for me. I learned a lot. Thank you everyone who’s dialed in to watch. If you have any questions, I highly recommend going to the Apple Human Interface Guidelines. We have a page dedicated to app icons, as well as going to our Design Resources page and downloading what we provide there, or going out to Figma and Sketch and accessing the templates that we’ve we’ve shipped for both of those. So thank you again and have a great Wwdc.