Create icons with Icon Composer

Hey, welcome to Create icons with Icon Composer. I’m Lyam, a designer here on the Design Team, and in this session, I’m going to show you how you can use our new tool, Icon Composer, to help you prepare your own app icons to look and feel at home across iPhone, iPad, Mac, and Watch.

First off, if you haven’t already watched our other session, “Say hello to the new look of app icons”, it covers all our icon design language updates across Apple platforms, as well as some pretty cool additional modes on iOS and macOS that give people even more customizability at their fingertips. I highly recommend you start there, then dive into this session afterwards, to find out how you can achieve all this for yourself. All right, before I jump straight in, I'd love to talk a little about how icons have changed over time. You might remember, for many years, Mac app icons were created at all sorts of sizes so that each artwork could be optimized for every place it showed up. This was before retina screens, when it was important that elements snap to the pixel grid to maximize contrast and legibility.

Then came along iOS and watchOS, and 2 X displays with double the pixel density, and then 3 X, and that made for a lot of icons to create. So a few years back, with all the advancements in screen resolution and auto scaling, we added the option to deliver just one image per platform and let our system handle the rest, which really simplified things.

Roll on, 2025.

And with dark and tinted modes expanding even more this year on iOS, plus macOS also adopting these appearances and Watch getting the new look, we found ourselves at a similar turning point. So we figured, since we’re bringing consistency to our app icon language, we’d use the opportunity to make the process a lot simpler again.

Now all this can be achieved in one single file using Icon Composer.

Now, if your icon is very complex or illustrative, you might still prefer to upload individual images to Xcode. And without doing anything more on your part, they'll still get the new beautiful edge treatment on device. The technical term for this being a specular highlight. However, if your artwork is a little more translatable to the design language, like this more graphic version, take it into Icon Composer, and you'll be able to bring it to life with all the new possibilities that come with Liquid Glass.

Icon Composer pairs with your existing design tools, giving you full control over our materials. And it'll streamline making app icons across our different platforms and appearances too. It's the same tool we used this year to update all our own icons and it definitely saved us some time. From one artwork, from today, you can produce designs for iPhone, iPad, Mac, and Watch, giving your app a consistent identity wherever it shows up. Take full advantage of all the exclusive dynamic glass properties, previewing how it’ll look realtime, and testing all six of our new appearances: Default, Dark, Clear light, Clear dark, Tinted light, and Tinted dark.

Once you’re happy with your artwork, you can even export out the images for any marketing or other needs you might have. Oh, and there’s no need to worry about creating all those different sizes anymore. We’ve designed the materials to adapt and scale to your icon.

So let’s take a look at what the new workflow looks like with Icon Composer. Start in your preferred design tool, then export out layers, bring those into Icon Composer where you can begin tuning for glass, appearance modes, and platforms. And you’re ready to save the file out and deliver to Xcode. Let’s dig into each of these a bit more. OK, first, the design process. If you’re working with flat graphics it’s best to use a tool that can draw in vectors since having the ability to export SVGs will give you the most scalability later down the line. Once you have that open, we want to set up the right canvas size. The simplest way to do this I find is by using one of our app icon templates. We’ve made these available for Figma, Sketch, Photoshop, and Illustrator, all found on the Apple Design Resources website. If designing for iPhone, iPad or Mac, these now use the same 1024px canvas, which makes things a lot simpler, and have a new grid, and rounded-rectangle shape.

And Watch is now 1088px so it overshoots our rounded rectangle and uses the same grid, which makes designs more easily translate between platforms.

Next, you’re ready to start designing your icon with layers. If you’re familiar with making app icons for tvOS or visionOS, you already have a good understanding of layering. Essentially, each layer represents a step in Z depth, where the bottom is the background and the other stack on top.

For a lot of cases, this is as simple as one foreground and one background – say Messages. In other instances, your artwork might look a little more layered – like Home.

Alongside layering by Z, splitting different colors out by layers will give you the most control later in Icon Composer. Take this Translate example. The speech bubbles use two separate layers, use two separate layers, which is a pretty good start. If I also separate the type from the bubbles, this is going to give me even more control, so that when I go to make my dark mode variant in Icon Composer, all I have to do now is change one fill, and I’m done.

One other thing to think about when designing is what creative decisions can be made once you’re in Icon Composer. So back to translate. I actually think it could be quite cool to give it a bit of blur in the overlap, maybe even a subtle shadow to give it some lift.

But because I’m gonna make these layers out of liquid glass, these are all dynamic properties that could be added directly in Icon Composer, along with specular, opacity, and translucency.

So instead of trying to bake these into my file, it's best for me to still my source art down to its graphic essence, so that it’s flat, opaque, and easy to control later.

Once the artwork is in a good place, next we want to export the layers as SVGs. For every tool, this can look a bit different. For those using Illustrator, we've created a layer to SVG script that will automate this for you, which you can download. Exporting out the canvas size ensures everything drops right into position in Icon Composer.

Number them in order of Z, and it’ll automatically follow that same order. Otherwise, you can always reorder them later.

And simple background colors and gradients get added directly in Icon Composer, so don’t need to be exported.

If I was to use any text too, since the SVG format doesn’t preserve fonts, it will need converting to outlines before exporting.

And whenever using custom gradients, raster images, or any elements or software that can’t be expressed through SVG, we export these layers as PNG, since this is a lossless format that can retain a transparent background. And one final tip to remember is that we never include the rounded rectangle or circle mask in our exports. So for this Siri example, we don’t want to be exporting it like this, since this mask is automatically applied later, ensuring the perfect crop. Ah, that’s better.

Once you’ve exported your layers, you’re ready to open up Icon Composer. Let’s take a look around an existing project.

On the left, we have our sidebar with the canvas, groups and layers. Centered, the preview panel with all the different artworks and preview controls. And right, the inspector, where we’ll find the appearance properties and document options.

When you first open Icon Composer though, it will look a little more like this, with just the canvas on show.

But you’re probably not going to want to use this exact shade of blue. So to set the background color, all you need to do is head over to the sidebar and select the canvas, head to the inspector and pick a color or gradient. I’m going to use one of these system presets, they’re ready-made light and dark backgrounds that we’ve optimized for our new materials, and watch it update in the preview panel like so.

You can start to see how each of these sections come together. Let’s take a closer look at each area, starting with the sidebar. Drag and drop your layers in and they’ll alphabetically organize here into a group.

In Icon Composer, groups control how elements stack and receive glass properties. By default, it’ll always be one, but you can go all the way up to four. We found this number provides the right bounds for how much visual complexity an icon should have. For home I’ve used all four, so that I can make each layer its own unique piece of glass.

At the bottom, we have our platforms and appearance modes, the same three appearance annotations you may already be familiar with for designing, for light, dark and tinted.

This year we renamed these to default, dark and mono, with the artwork producing all the appearances for clear and for tinted.

And all these previewable with a click of the thumbnail.

In the inspector, here we have all the controls for appearance properties and our document settings. Helpful for choosing which platforms to design for.

Let’s take a look back at the appearance controls.

When you drag a layer into Icon Composer you’ll see it will automatically get our liquid glass.

On the layer level, you can choose whether to toggle this off or on. Plus, there are a number of other useful controls you'll recognize from design tools.

Color controls are especially helpful when creating variants for dark and mono mode, and composition controls, great for reworking artwork for different platforms.

Then, if we now go to the group level, we’ll see the controls look a little different. Here you’ll find all the options for Liquid Glass. Some are set automatically, but we recommend you continue to dial these in to get the look you want.

And as you start tailoring these properties, it's important to note that some are pre-configured to apply per appearance, like opacity, blend mode, and fill, and others to all, since the attributes are more commonly consistent across modes. If you're looking for even more control, click the plus on the hover over and you can create an individual variant of a property.

Here are some tips when using these properties, some things I usually like to keep an eye out for.

Take the day on the Calendar icon. It gets a little bit complex and pillowy in the narrow areas for my liking. We can either solve this by switching off the specular on the group or switching off liquid glass entirely on the layer.

Shadows. Neutral shadows are the preset shadows. They're nuanced, versatile, and look great on any background. When using color against white though, this is a great opportunity to test out chromatic shadows. The color from the artwork spills onto the background, creating a nice look that emphasizes the lighting and physicality of the material.

And we can still keep our neutral shadows for dark and mono by creating a variant.

Speaking of dark appearance, there’s also some common considerations here.

For example, fills. I always use these to help optimize artworks. So take dictionary. If I was to do nothing for dark, it would look like this, which is a great example because it highlights two things. One, the maroon bookmark gets lost against black. And two, I'm kind of missing that distinctive coral red now.

So we should change the fill. This logic can also apply to other color related properties like opacity and blend mode.

Say I’ve imported a PNG though, and can’t use a fill. Well, the same principle can be achieved by creating another image in our design software and importing it as a variant.

Legibility is also key for mono appearances. Setting at least one element of your icon to be white, usually the most prominent or recognizable part, make sure it shows up strong. and the other colors can be mapped to tones of gray.

Icon Composer will do an automatic conversion for this, but it’s important to tune it to get the best contrast. And when designing between rounded rectangle and circle platforms, for a lot of cases, you won’t have to do anything since the new watch canvas is optically larger and built on the same grid. One thing to look out for though is the composition.

Consider optical adjustments for the circle shape. And if you have any elements touching the edge of the canvas, Scale them up so they touch the edges again for Watch.

Alternatively, if you’re familiar with the concept of designing with bleed, you can integrate this into your source art. With all that said, let’s take a final look at the preview panel.

The controls in the top right allow you to change the background while offering your icon. Great for seeing it in a different context. And trying out some wallpapers or images behind the new modes, to test legibility.

You can also overlay our icon grids, see how light moves, as well as look up close and down small.

Once you’re done in Icon Composer, to deliver, all you have to do is save the .icon file out, drag it into Xcode, and choose your icon in the Project Editor. When you build and run your app, you’ll be able to see how it adjusts to platforms and appearances.

To wrap up, it used to be that the design process started and finished in traditional design tools. With Icon Composer, we’re providing an extra touchpoint where people can further bring designs to life in new, dynamic ways across our products, spend less time generating assets, and less time in Photoshop trying to recreate a load of glass effects. We've all been there. Icon Design is moving from a past of simply static images to a future of expressive, multi-layered artworks that respond to user input and adapt between appearances. They've become a much richer and more integrated experience on device.

If you want to take advantage of this, Icon Composer is available in beta and will continue to introduce new features and improve based on your feedback. We encourage you to download, use Feedback Assistant to request enhancements, and explore the resources we’ve made available for this new tool. Thank you for watching.