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 Heinen. I'm the manager of the Cocoa Graphics Assets and Text team, and my team works on 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. designer focusing on iconography and the visual language of our software. I am Liam, also a designer on the team working closely on app icons. So you can see here we 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 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 Liam to take us through that. ALI ROGERS: Cheers. Yeah, so essentially, for those who don't know Icon Composer, it's essentially a tool that we debuted last year, which allows 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 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 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 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 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, 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 color properties are things typical of design tools-- opacity, blend modes, fill-- you can even override the SVG with that-- and things like composition. So the 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 opts 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 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. It 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. Yeah, exactly. So you can see right here. There you go. There you go, the inside and outside there. I'm going to switch back to automatic, because it's looking pretty good already. And then people who have used Icon Composer in the past, you'll be familiar with Blur. This essentially blurs the layers, gives you that frosted glass feeling. If I select all of these there, you can kind of see how that works with all of the layers. And then the 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. 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. 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, bringing in more of the artwork into the shape. And we've been given the ability to do inverse refraction. So you kind of see on the edges of the photos icon how it's kind of wrapping around the other way. It looks kind of a bit like a sunflower, which is 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. They're working magic here behind the scenes. And, you know, 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 inset like this. But maybe Patrick. I think you'd be more into a soft side to you, right? That's me, baby. 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 they're ring shadows. Let me bump this up a little bit more. And then 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 dramatizing the material effect and makes it feel really realistic and life like glass. And maybe zoom in again, too, just to really show that one. Please, yeah. So there you go. I'm going to go too far, but just to really emphasize what's happening there. And like last year, you got the chromatic shadows, which picks up on the light spill. So you can kind of see how the color from the layers are spilling onto the background. But we also have neutral shadows, which are desaturated versions of those. Alongside that, I mean, a 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 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 the background. Because sometimes when you do something for a light background versus a dark background, 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 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 maybe show the-- Exactly. Yeah, so I was about to head up there next. So up here is actually the preview panel. So we have all our preview controls. You can choose a solid colored background, or you could even choose a custom background here and even add your own background to see how the refraction works on the chiclet and see how contrast works. We also have the ability to overlay our app icon grid-- super useful to have it in this-- and also different sizing controls 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 would 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 Abhishek3075. 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 color is applied 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 powerful but simple vector shapes. Exactly. Right? And think in terms of 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 crazy thing about an icon is it shows up as a tiny little rectangle in system settings or maybe even inside of a menu on a Mac, all the way to some huge billboard down the highway. 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. And then one of the things you probably want to save from your design tool is the geometry and relative positioning of all 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. 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. 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, we have templates for four 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, SVGs, for what you import. So I think we have time for one more question now. No, it was great. There's a lot of thoughts on that particular one. So the next one I'd love to look at is from Jodo Tree, I suppose, which is when using Icon Composer, what are the most common mistakes developers make that results 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 take this one? Yeah, I think the complexity that Patrick was saying is a really important thing, especially with introducing these glass features. These can be very delicate, but also very powerful. For example, refractive quality here, the reason why it looks so great is that it scales really well because we're indexing on that within the icon artwork itself. So making sure it's not too complex is going to work well with the glass rendering that we have. Yeah, I think I'd add to that. Obviously, I'm a software engineer, so I take a software look at it, but it's just like any code. You have to build it, design it, and then test it. 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. Look at the icon at its smallest size. Look at the biggest size. I think there's a waterfall feature in Icon Composer that shows you them all at the same, you know, all the different common presentation sizes and cycle through it and stare at it and try different backgrounds, right? That's the number one tip, right, or at least my number one tip because 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 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 Icon Composer. A lot of the guidance that we would 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 your arm is moving in daylight conditions. and then relative to dozens of other app icons, like kind of random selection. And does it have a presence there? Is it really standing out? And then, yeah, what could you do to fine-tune, to accentuate the color or the form to really make it unique? That simplicity part is really important as well with the new refraction controls. 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, you know, the workflow of using other tools in combination with Icon Composer. This is from someone named Jason Chung. 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 made Apple believe a dedicated tool was necessary? That's a good question. Anyone could take this? Can I take a piece of this, and I'm sure Lance will have something to say? Yeah. Look, icons are such an interesting thing, right? because they're sort of owned by so many different people. They're touched on by so many different audiences, right? There's 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. It's its visual identity. And it's the marketing identity 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 two to three years, honestly, is to make sure that the user is the other stakeholder, right? He's using the device, using your icons on the springboard home screen or whatnot. And we're trying to make sure that the icon is alive and can adapt and live in the rest of the device's ecosystem, whether it's a Mac, a phone, or a watch. And to bring features like light mode, dark mode, clear adaptation, 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 while there are other approaches where you can maybe produce a big wheelbarrow full of different individually executed bitmaps, that's really not very much fun either, 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 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 conditions on the device adapt, which is hard for the application to be involved in. Sorry. I love that answer. It'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 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 that are all different sizes and colors 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. I think one other point on that is that previously you had to make your watch icon and your iOS icon and your macOS icon. And then we introduced the dark mode and clear mode and tint modes and all of that. And imagine having to supply individual PNGs for all of the different modes. 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 ping, to a resolution-independent representation. 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 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 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 applications. But 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 so that it looks good in all these different contexts. 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 systems-level programming, right? It's nice to have those high-level abstractions because more interesting things can come from it and adapt over time. Sorry, that's an engineering take on a very designer-focused topic. It's okay. Engineers are welcome here. I'll add actually a couple more things, which is there's certainly going to be some cases where an icon, maybe a lot of game icons, where they have character artwork and want to have that illustration style come through. That's totally reasonable. There's even some of our app icons. This came up yesterday in the lab that we did around the camera app icon and sort of the lens and the effects 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. If you're really comfortable with 3D tools and you're looking for something very specific, 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 while I love the glass effects that are in Figma and Sketch, the recipes are a bit different. And so you're not going to be able to have a one-to-one sort of match with the visual appearance of glass in 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 showed it a little bit here that you can preview an icon composer. But 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 benefit of the new look. It's just that's the way we design it, is that 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 iconcomposeredveloper.apple.com slash iconcomposer, I think. Don't quote me. Something like that. The link will be on the video feed somewhere, I'm sure. Yes. 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 the relationship is between what you get for free and what you get if you invest a little bit of extra time into optimizing for this new look. 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. That's true. 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 reduced the amount of translucency to have icons feel sharper, 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. That actually reminds me, for those of you who have not yet created an icon composer icon and are still having your existing legacy icon in your app, that's the thing you're going to notice the most when running iOS 27, is some of the elements that we used to, because we automatically segment even legacy icons and then turn them into, basic mini Icon Composer documents and then render them. The translucency choices last year in IS26 were a lot more, so they're going to be a lot more prominent and less translucent, those foreground elements you may have in your legacy icons. And if you don't like that choice and you like the previous way it looked with more translucency, now's the time to invest in Icon Composer version of 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 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, 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 like the tool. I mean, it's really, it's very expressive. You can be very creative with it. And I hope everyone kind of brings that attitude towards using the app because it's really enjoyable. So kudos to you all for making that. The next question is from Kyle at the Icon Composer session yesterday. We had mentioned this before, but as part of WWDC, we had a little event at the Developer Center, and we were doing some pretty hands-on work. So this is what that 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 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 anyone. Liam, do you want to-- Yeah, I mean, I can also bring some stuff up as well on screen. I think that's the best for sure. 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, 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're probably familiar with that from Photoshop. Multiply is, it kind of multiplies on top of it. And plus L, or 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, 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 three all make the object in front lighter than the background. So lighten, again, these two are very familiar 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, Plus L is 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, you can have a play around with these. In terms of our own app icons, we basically use whatever is 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 the different effects. But for podcasts, for example, we're using Plus Out so that we can retain this ultra-vibrant poppy colors that feels like transparent glass on top of the glass background. DAVID BROAD: If I may-- I mean, I don't know how helpful this will be, but 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. 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? 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 take any contribution from you. I don't really care what you have to say. I'm just going to be me. That's normal blending. Yeah, 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 let your brightness shine through me, but only your brightness. Or maybe I care about your hue or your color, your vibrancy we allude to a lot. It's really a trick to allow the basic color relationship of the bottom pixel to get intuitively and elegantly blended in to the foreground pixel that you're about to present. And they're not really, the names for these things come from geeks like me who designed things back in the 80s and came up with 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 multiplier plus darker might help you achieve with maybe some opacity, playing around with opacity. And then, you know, as a mathematical, I feel like we should have a whiteboard, but, you know, if you like in like, you know, red is 25500 and green is 02550. And if you combine those with screen, it would be 255. Except in HDR when it's not. This is Icon Composer for beginners. And I've already gone off the deep end here a little bit. So 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. 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 the glass controls that we have and you know it's it's really used extensively and while you know 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 this deep integration, I think, between how app icons are rendered in 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 default fails at a user's extreme? So this is maybe a bit of a trick question. I want to comment on this because the glass, it was a deliberate choice to have the glass in clear mode, does not respond to the slider. It does not behave like system glass. It stays constant. And 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 contents can be on that icons. It can be anything you, 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 So 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 an iOS device, 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 adaptation that you have to design for, make sure that your icon 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 brand marks. 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 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 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 paper form, on a business card or on a letterhead. It might appear in a physical way, like on a product, in maybe even a pseudo-3D way. I'm thinking of some of the classic little things that would be stuck in front of cases. Think about car logos. 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 an advertisement. In 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 then you have your executives say yes. I think there are some opportunities as well. When you design logos, you might have eraser paths or subtracted elements from that to be the most simplest 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 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, I think, I don't know. This is going to stretch a metaphor way too far, which is something I often do. But 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. But it's still recognizable as being the representation of the brand, and it can adapt. 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 AndyZoom01 is, is there a change in how to include an 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 settings in Xcode to set. I'd be happy to talk about this one. So when you finish designing your app, your icon in 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. Xcode's going to suggest the correct target membership by default, but you can verify it or check something different, 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 the whole integration process. This is adjacent to the asset catalog inside of it. And if you have an existing icon in your asset catalog, you probably want to remove it. 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. It's in place, asset update. That's what you have to do. Great. The next question, a very different topic here, but from Macverse. 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 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. Imported layers are rendered as glass layers by default. But again, back to some of those icons 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 meant to maybe represent a watermark or something. That wouldn't make sense to be glossy. 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 that verbal description, what we speculate might be happening here, or just ways of optimizing, basically, for different modes. Yeah, I think we allow people to pick the color of the tint mode. So you can pick a very desaturated color, or you could pick a very vibrant color. And we expose that within Icon Composer. So one way could be just 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 there will be some colors that are just naturally lighter in luminance. So someone might be able to put it on a yellow. And so you have to optimize for those situations. So always having a foreground elements being white or close to white, or at least 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 in the ability. Also, I will state the obvious. Please take a look at the iOS 27 and I can compose the latest running 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 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, too, if they're too fine of a detail or there's too many things around them. Also pay attention to the background layer. Like, if you're supplying your own background layer with your own gradient, you want to be really careful about, like, what your light luminance values are, especially in mono mode, right? Right, yeah. Because you can really, you know, ideally, you just use one of our system-provided backgrounds, you know, to provide the maximum, you know, 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 brights and dark darks in your mono mode will help with that. Yeah. I'm realizing we're 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, 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 a hold of the app. Go to that cool website I mentioned earlier. At the bottom is a big, fat button. Click on it. Software comes down. It gives you a mini tour of the app right on the website. It gives you a brief version of Liam's demo from earlier. 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? rather than sort of building and running on their device or anything along those lines. Well, you definitely can. It's helpful, especially, you know, in Watch and other areas. Especially the new Device Hub is really great for showing the different light-dark mode and the different appearance variants that the system can go in. Yeah. Yeah. Yeah. Cool. And it's just a great app. I'm going to log and roll, Device Hub. Totally unrelated. Icon Composer. We need to do another session for Device Hub. Are you getting feedback on that one? Yeah, I get a cut at one point. It's free, though, right? So I'm not going to have any money. All right. This next question, 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. 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 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 some clever trickery to make the kind of MCS, Hesher-esque icon. Yeah, I was about to say, 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 plan view from above. I don't think it would be this way. Okay. This next question is a great question. It ties into accessibility, and it's about colorblind users. This is from R.D. Singh, who asks, how are icons handled for colorblind users? Which I think is a great question. How do we think about colorblindness when designing app icons? If I may offer potential. I mean, I think something that all of our icons do is there's a form which is recognizable to it. There's highlights and shading and 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 certainly with red-green colorblindness or something, you wouldn't want to depend on people's ability to be able to see color, to get meaning out of the icon. It goes back to what we were saying before, having a really good fundamental, good shape algebra or design language for your form of what you're trying to communicate, even before you start to get fancy with colors and gradients and even glass effects, that's really essential. So it's recognizable right away for everybody. That's the number one rule of brand design, right? Yeah. I think that mono annotation is really doing what you're talking about. It's like you have to adjust it for the contrast to work really well well so that if someone picked a super clear version of it, it's going to have legibility. But you could equally pick the dark clear variant. And then all of these artworks have to meet certain contrast requirements to work if it's annotation mode. So I think people even going through this process of using Icon Composer will learn a lot about 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 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 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 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 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 your app, and then beginning to draw that. 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 app? Yeah. If I could make a completely radical suggestion, feel free to ignore. But my advice would be, if you're especially starting out, close the laptop lid, close the computer, shut it out, grab a little deck of paper, a little notebook and a pencil. That's all you need. And just start drawing. 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 That's what a picture is, right? And do a bunch of those and just spread them all around. Paste them up. Look at them. See how they feel. Ask your friends what they feel. That's the design process. That's how you arrive at it. And only when you get locked onto that basic zone of what you think you want to communicate and how you're liking how that thin. Just like if you think about how 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 that they start lighting them and putting them in all the fancy software to make them photorealistic. That's the finishing. That's the fun stuff at the end. The hard creative process in the beginning when you have to actually figure out what you're trying to say. I mean, writing is no different, right? It's just a different format. Potentially writing is the place to start too. Describe, write it out for yourself. What does your app do? What's unique about your app, right? Yeah, what's unique? Like start talking to someone, have a conversation about the app and then record that and then play it back and think, was there any objects or metaphors I used or something that 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 the metaphor should be. because then it's just so obvious, right? As you said, 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, well, 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 icon, right? Not advised. But maybe one is too few. 87? We have 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. What are Apple's recommendations or best practices for balancing one's shared liquid glass icon with platform-specific tweaks while keeping the brand consistent across iOS, macOS, watchOS, and legacy OS versions? That's a good question. I can address one thing and one aspect. I mean, across platforms, of course, we hope we've made it as easy as possible to just adapt to the different icon shape of, say, watchOS versus iOS and macOS and by unifying the sort of design algebra around that. I want to address 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. That means it includes your App Store product page presence. And also, we make sure that we render something that is reasonable and reflects the full rendering quality of what you landed on, but is delivered with, say, the right corner radius, you know, on the earlier iOS 17 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, you know, iOS 15 or something like that. But we feel that 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 my technical, semi-technical answer. Yeah. There's also just some things that-- I've got up here the Maps icon. And this is a very asymmetric layout, where it really uses the rounded rectangle that it sits within. But when you design for watch, you might want to reconsider how that layout works for a circle. For example, then we have the puck sit within the middle of that because the circle doesn't have the same layout possibilities or asymmetry. And it makes sense for a circle to sit nicely centered within another circle. So there might be some consideration from a design perspective that when you're adapting your icons, 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 280 right now? But no, this is a great-- what is the most important part of this? There's multiple elements. There's the indication of your location and your bearing. There's the Rhodes, 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 gonna do a quick, just around the room. This is telling John, what was their favorite new feature in Icon Composer this year? What is your favorite new feature in Icon Composer, that John? And what is your top radar 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 cool refraction inspector. I really love the fun factor that that brings into the design exploration question. Since last year, we did all sorts of usability enhancements to Icon Composer from the one that we shipped with iOS and Mac OS 26 for showing selection annotations in the UI 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 and not necessarily how much fun you all have from building them. I do love the refraction control. 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 the attributes from one icon to another i mean oh my goodness you're gonna say hdr geek expert also the new automatic uh the automatic gradients uh looking really really nice yeah that's something else that you know you can just stick your brand color in there and it'll it'll create a beautiful gradient as a background so yeah yeah really uh love those also just want to call it the 2d uh custom there works with modifier keys so you can lock in one of the values too nice nice subtlety so we're at time I want to thank you all for joining us I thought this is 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, going out to Figma and Sketch and accessing the templates that we've shipped for both of those. So thank you again, and have a great WWDC. See you soon.