WWDC26: Icon Composer for Beginners Group - Q&A
Direct answers from Apple Engineers during WWDC26
Icon Composer is the final authoring step for app icons that use the Liquid Glass rendering system. The main idea from the lab: design the icon clearly first, then use Icon Composer to annotate layers, tune glass behavior, and verify the icon across appearances, sizes, and backgrounds.
As usual, the goal is simple: make the questions easier to scan, easier to revisit, and easier to connect with real app development problems.
I tried to preserve the original wording and combine related answers where appropriate. However, some inaccuracies or mismatches are still possible.
Enjoy! And subscribe so you don’t miss the next Lab.
If you’re designing an icon from scratch today, what would your step-by-step workflow in Icon Composer look like?
Start before Icon Composer. First, decide on the visual metaphor for the app: what the icon should communicate, whether it references the app’s purpose directly, or whether it borrows from a distinctive part of the app’s interface.
Then draw the icon in a design tool. The panel recommended thinking carefully about composition, layer organization, and how the artwork will scale. Simple, elegant vector shapes are usually a better foundation than very complex detail, because icons need to work from very small system UI sizes all the way up to large marketing uses.
After that, export the layers from the design tool as individual files and bring them into Icon Composer. If you export layers at the full canvas size, their relative positions are preserved when imported, which saves time and avoids surprises.
Icon Composer then becomes the second step: annotate the layers, tune color behavior, choose which layers use Liquid Glass, adjust specular/refraction/shadow behavior, and check the icon in light, dark, clear, mono, and tinted modes.
Apple provides templates for common design tools, including Figma, Sketch, Illustrator, and Photoshop. The Illustrator template includes a script that helps preserve positioning relative to the canvas.
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?
The big mistake is not testing the icon in the contexts where it will actually appear.
An icon can look beautiful on the Icon Composer canvas and still fail at small sizes, in dark mode, in clear mode, in tint mode, or over a busy background. The panel emphasized checking the icon at its smallest and largest common presentation sizes, and using the preview tools rather than judging only the default canvas view.
Complexity is another common problem. Liquid Glass effects can be subtle and powerful, but they work best when the underlying shape language is clear. Too much fine detail can make the icon weaker once rendered on device.
Use Icon Composer’s waterfall-style size preview, appearance previews, background previews, and grid overlays to verify the result. The goal is not only to make the icon attractive, but to make it legible and recognizable across the whole system.
The old advice still applies: put the icon on a Home Screen, inside a folder, and check it on a real device in daylight. If it does not hold up there, keep simplifying or tuning.
Many developers already have mature workflows in Figma, Sketch, or 3D tools. What problem was Apple trying to solve with Icon Composer?
Icon Composer was created because app icons are not just static images anymore.
An icon is part brand identity, part product identity, part system UI, and part user-facing object that appears across many Apple devices. It needs to work on iPhone, iPad, Mac, Apple Watch, dark mode, clear mode, tint mode, different backgrounds, different sizes, and future rendering conditions.
A static bitmap cannot adapt well to all of that. You could ship many separate PNGs, but that creates a large, brittle set of assets that does not evolve with the system.
Icon Composer gives developers a resolution-independent representation. You provide clear artwork and layer structure, and the system can render it with high quality across device contexts and design modes.
It also brings the material language of the system into app icons. Liquid Glass can be applied in a way that interacts with individual layers, rather than being a superficial effect placed over the whole icon.
The broader vision is consistency and adaptability: one source file that can produce a polished icon across many environments while still letting designers tune the result.
What concrete recommendations should developers follow to upgrade icons built for the iOS 26 Liquid Glass design system to iOS 27?
If you already have an Icon Composer file from last year, open it in the updated Icon Composer first. The new rendering is applied automatically, so you can see how your existing icon looks without changing artwork or annotations.
From there, review specular highlights, especially if you have overlapping layers. Check what automatic does, then decide whether inside or outside specular works better for the colors and layer structure.
Review shadows and refraction as well. iOS 27’s rendering can produce a sharper look, and refraction can be tuned more precisely.
One major design change the team made in Apple’s own icons was reducing translucency. This does not happen automatically, so developers should review their own icons and decide whether translucency should be reduced to make the icon sharper and more legible.
If you still use a legacy bitmap icon, iOS 27 will do its best to segment and adapt it, but you may see choices you do not like. If you want full control, now is the time to invest in an Icon Composer version of the icon.
Can you explain blend modes in Icon Composer, and when should developers use them?
Blend modes define how one layer’s pixels interact with the pixels beneath them.
The simplest mode is normal blending: the foreground layer replaces what is underneath. Other blend modes let brightness, hue, color, vibrancy, or darker/lighter relationships from the underlying layers contribute to the final result.
In Icon Composer, blend modes are useful because glass is not just a flat opaque object. Real glass lets color, brightness, and depth interact. Blend modes help layers feel like transparent or refractive material instead of simple stacked artwork.
For example, plusL can retain more vibrancy than a standard screen-like blend, which can help an icon feel like colorful glass. plusDarker can help darker relationships preserve color intensity. Multiply, screen, lighten, darken, and the other modes each create different foreground/background relationships.
There is no single correct blend mode. The panel’s advice was to try them in context and choose the one that makes the icon’s layers communicate the right material effect while preserving legibility.
iOS 27 lets users adjust Liquid Glass transparency systemwide. Does Icon Composer let us preview across that slider range, and what should we do if a clear mode icon fails contrast at an extreme?
For app icons, clear mode glass does not respond to the systemwide Liquid Glass transparency slider.
That was a deliberate choice. System glass often knows more about foreground and background content, but app icons can contain almost anything. To keep icons consistent and legible, the glass behavior for clear mode icons is pinned instead of varying with the slider.
That means developers do not need to design across that slider range for icons. You still need to test against wallpapers, clear mode, dark clear, light clear, and tint modes, but not against every possible system glass transparency value.
There is one mono mode annotation that supports light clear, dark clear, and tinted modes, so focus on making that mono representation strong.
Most app icons start as flat 2D brand marks. How should we think about giving something flat a convincing physical appearance in Liquid Glass?
This is exactly the kind of transformation Icon Composer is built for.
When you bring in a layer, Icon Composer applies a default set of glass properties, and then you can tune them based on the shape, size, color, and structure of the artwork.
The panel compared this to how brands already adapt logos across media. A logo may appear on paper, on a product, in a motion graphic, or as a physical badge. It is still the same identity, but each medium may require a different treatment.
For app icons, that may mean exposing layers that were flattened or cut out in the original vector artwork. If a mark has eyes, counters, or cutouts, you may decide those should become separate layers instead of negative space. That can make the icon feel constructed from real materials rather than printed flat.
The key is to preserve recognizability while adapting the construction for the medium. If the icon still clearly reads as the same brand, adding physicality through layers, glass, refraction, and shadows can make it feel at home in the system.
Has anything changed in how updated Icon Composer icons are included in an app in Xcode?
No. The integration process is the same as before.
When you finish designing the icon in Icon Composer, drag the .icon file into your Xcode project as a normal resource, next to your Swift files.
Xcode should suggest the correct target membership by default, but you can verify it during import.
Then open the target editor and make sure the app icon name matches the file name you dragged in. Usually that means AppIcon, without the .icon extension.
This is adjacent to the asset catalog, not inside it. If you already have an app icon in the asset catalog, you likely want to remove it to avoid confusion.
Do imported layers inside Icon Composer automatically become glassy in the iOS 27 style?
Yes. Imported layers are rendered as glass layers by default.
However, you can control this. If a layer should remain flat, or if you already prerendered a specific treatment into a raster image, you can turn off Liquid Glass for that layer.
If your icon has multiple layers, consider organizing them into groups. Glass properties are applied at the group level, so grouping gives you more control over how different pieces of the icon render.
This is useful for icons that combine vector layers, raster artwork, watermarks, or other elements where not everything should receive the same glass treatment.
In tint mode, my icon background colors look washed out and lack contrast, while clear mode looks better. What settings can I tweak for better vibrancy?
First, test in the latest iOS 27 Icon Composer rendering, because the team made tweaks to improve some of these cases.
Then check the mono mode annotations. The panel recommended maximizing dynamic range: use real darks and bright highlights so the system has enough contrast to work with when transforming the icon into tinted modes.
Pay attention to your background layer as well. If you supply your own gradient or background, be careful with luminance values, especially in mono mode. In many cases, using the system-provided backgrounds gives you better baseline contrast.
Foreground elements should usually include white or near-white areas, or at least some strong highlight component, so they remain legible across user-selected tint colors. Some tint colors, such as yellow, are naturally high in luminance, so your icon needs to survive those extremes.
Finally, inspect the shape detail. Very fine elements or too many small shapes can become weak in tint mode even if the colors are technically correct.
For the Apple Developer app icon, what are the main layers? Is it just a border, a background, and the hammer logo?
Yes, the Apple Developer icon is relatively simple structurally.
The panel described it as essentially three major parts: the background, the hammer mark, and a border or rim treatment. The strength comes from the clarity of the metaphor and how those few pieces are tuned, not from a large number of layers.
This is a useful reminder that Liquid Glass does not require a complicated layer stack. A simple icon can work very well when the core shape is strong and the layers are organized cleanly.
How should I design icons for color-blind users?
Do not rely on color alone.
The panel recommended thinking in terms of contrast, shape, and clear visual structure. Color can help make an icon feel distinctive, but the icon should still be recognizable when color differences are reduced or transformed by system appearance modes.
For Icon Composer specifically, mono mode is important. Strong darks, bright highlights, and clear shapes help the icon survive tinted and monochrome transformations. If the icon only works because two colors are different, it may fail for color-blind users or in system modes that reduce or remap color.
The practical test is to preview the icon in mono, tinted, light, dark, and clear modes, and make sure the key shape still reads.
I am a newbie with no design know-how. How can I make a good-looking app icon in Icon Composer?
Start with the app’s purpose, not with the glass effects.
The panel’s advice was to find one clear metaphor that represents the app. A simple mark is easier to make recognizable, easier to test at small sizes, and easier for Icon Composer’s rendering to adapt across light, dark, clear, and tint modes.
Use Apple’s templates and sample files as a learning tool. Open them, inspect the layer structure, see how groups are organized, and try changing one variable at a time. That is a much better way to learn than starting with a very complex icon.
Do not try to make the first version perfect. Build a simple icon, preview it at the smallest size, check it on a real Home Screen, and ask whether the idea is still recognizable. Then tune the glass, refraction, shadows, and color.
If design is not your strength, keep the icon intentionally simple. A clear symbol with strong contrast will usually work better than a detailed illustration with lots of effects.
What are Apple’s recommendations for balancing one shared Liquid Glass icon with platform-specific tweaks while keeping the brand consistent across iOS, macOS, watchOS, and legacy OS versions?
Use Icon Composer as the source of truth where possible.
The tool is designed to help one icon adapt across platform shapes and system appearances. For example, watchOS has a circular icon shape, while iOS and macOS use different rounded-square presentations. Icon Composer gives you a unified visual system while still letting the renderer adapt the icon to those different destinations.
For older OS versions, Apple has gone to significant lengths to render a reasonable version of the same icon identity. The goal is that the icon you land on in Icon Composer can still be represented naturally on legacy systems, App Store product pages, and earlier visual contexts, even when those systems do not support the newest Liquid Glass rendering.
That does not mean the icon will look identical everywhere. Older systems have different design languages and rendering capabilities. But the goal is to preserve the same recognizable brand identity across versions.
The practical advice is to design one strong, simple icon first, then use Icon Composer’s platform and back-deployment previews to check where platform-specific tweaks are needed. Preserve the core metaphor and silhouette; tune the rendering details around it.
What are the team’s favorite new Icon Composer features this year?
The panel called out several favorites.
The updated specular treatment was a big one. It gives glass layers sharper definition, including darker edge details that help describe the shape.
Refraction also stood out because it gives designers a more direct way to tune the physical feel of glass. You can control the height and strength of the refraction, and even use inverse refraction for different effects.
The updated shadows were another highlight. Ring shadows and chromatic or neutral shadow options help give icons more realistic material presence.
Finally, the improved previews matter a lot: checking different appearances, clear mode backgrounds, platform shapes, icon grids, sizes, and back-deployed rendering makes the tool more useful for real shipping work.
🏆 Acknowledgments
A huge thank-you to everyone who joined and shared practical Icon Composer questions throughout the session. Your questions made the discussion useful for developers and designers working on app icon concepts, SVG layer preparation, Liquid Glass tuning, iOS 27 migration, blend modes, Xcode integration, tint mode, clear mode, dark mode, accessibility, cross-platform consistency, and device previews.
Question acknowledgments: Abashek 3075, Jodor Tree, Jason Chung, Jordan, Kyle, Thomas, SJK27, Andy Zoom01, Macverse, and the online WWDC audience who submitted and upvoted the remaining Icon Composer questions.
Finally, a heartfelt thank-you to Mike Stern, Patrick Heinen, John Hes, Lance, Liam, and the teams behind the scenes for leading the session and explaining how to move from icon idea to polished system-ready asset.