Icon Composer for Beginners Group Lab

Transcript

The panel — design evangelism, Cocoa graphics and rendering, and the Icon Composer engineering and design teams — introduce themselves and give a hands-on tour of Icon Composer: layers and groups, background options, and the Liquid Glass properties (specular, blur, refraction, translucency, shadows), plus previewing across platforms, dark/clear/tint modes, and back-deployment to OS 26.

Start with an idea or visual metaphor, then draw it in a vector tool, keeping shapes simple and elegant rather than finely detailed so they adapt across sizes. Export layers at full canvas size (templates exist for Figma, Sketch, Illustrator, and Photoshop) so positioning carries over, then drag them into Icon Composer to annotate color and Liquid Glass per layer. Prefer scalable SVGs over bitmaps.

The most common mistake is excessive complexity — Liquid Glass effects like refraction are sensitive to the number, size, and overlap of shapes, and small moves have a large effect. Evaluate the icon at every size and presentation, especially the smallest: group it on a Home Screen, view it outdoors and alongside other icons. Simplicity is what lets an icon scale and hold presence.

App icons live across a whole ecosystem — devices, sizes, and light/dark/clear/tint modes — which a static set of bitmaps can't adapt to gracefully. Icon Composer moves to a resolution-independent representation so a single, simple source can be rendered and adapted at high quality by the system, giving designers control over how the material interacts with each layer while keeping icons consistent across the platform.

Open last year's file in the new Icon Composer to see the updated rendering applied automatically — no artwork changes or recompile required. From there, review specular highlights (automatic vs. inside/outside depending on layer colors), fine-tune shadows, and configure refraction on overlapping layers. Apple also reduced translucency this year for sharper, more legible icons; that change isn't automatic, so review it per icon.

Blend modes control how a foreground pixel combines with what's behind it. Darkening modes (darken, multiply, plus darker) and lightening modes (lighten, screen, plus lighter) each suit different foreground/background relationships; plus lighter and plus darker mirror the system glass math used across the OS. There's no single right choice — pick what best sells the glass and retains color vibrancy for your artwork (Podcasts uses plus lighter on a dark background).

By design, icon glass in clear mode is pinned and does not follow the system transparency slider, so it stays consistent and legible regardless of the user's setting. Because icon content is highly variable, Apple fixed the glass rather than expose it to the slider, removing one adaptation to design for. Use the single mono (grayscale) annotation to support light/dark clear and all tinted modes.

Importing a layer applies Liquid Glass by default, which you fine-tune per each element's shape and complexity. This mirrors long-standing brand practice — a logo adapts across print, physical, and motion media while staying recognizable. Consider reconstructing the artwork for depth: expose layers you'd normally subtract (use solid overlapping shapes instead of eraser paths) so elements feel physically layered.

No change from last year. Drag the .icon file into your Xcode project alongside your Swift files as a normal resource, confirm target membership, and set the app icon name in the target editor to match the file. It sits adjacent to — not inside — the asset catalog, so remove any existing asset-catalog icon.

Yes — imported layers render as glass by default. Separate layers into groups, since Liquid Glass properties apply at the group level, so each can be configured independently. For pre-rendered raster artwork (as in Camera or Preview) or elements like watermarks, you can opt individual layers out of the glass treatment.

Pick a more vibrant tint color and preview it, but design for the full range a user might choose, including lighter colors like yellow. Keep at least part of the foreground white or near-white to guarantee contrast, and be careful with custom background gradients — prefer the system-provided backgrounds. Maximize dynamic range in the mono annotation (deep darks, bright highlights), and check the latest iOS 27 rendering, which improved several of these cases.

Slice what looks like a few elements into many separate layers, then reassemble them so shapes appear to weave over and under one another. Shadows help sell one element passing beneath another; viewed in elevation, the construction differs from the flat top-down appearance.

Don't rely on color to convey meaning — start with a strong, recognizable form and real contrast so the icon reads for everyone, including red-green color blindness. Because icons must work in clear and tinted modes, designing a high-contrast mono annotation naturally enforces this, and the process teaches contrast habits that can improve the default icon too.

Start with intent, not software — decide what your app is and how you want it remembered, then capture that essence in a simple, memorable image. Sketch ideas on paper first, or talk through the app to surface an object or metaphor worth drawing (as Podcasts uses a resonating microphone). Move to vector tools once the idea is clear, and simplify relentlessly without losing meaning.

A single Icon Composer source adapts to each platform's icon shape, so the same design language carries across iOS, macOS, and watchOS — though you may rework layout for a circle (centering elements) versus a rounded rectangle. For legacy OS versions, the system faithfully renders your current design with the appropriate corner radius rather than reverting to older styles, keeping one visual brand identity everywhere. This segment also answers the older-device (iOS 18) optimization question.

The panel's favorites included the refraction control for how easily it explores the design space, automatic specular highlights that choose inside/outside based on layer and background color, copy-and-paste of attributes across icons, HDR export, and the new automatic gradient backgrounds generated from a brand color.