With iOS 26, Apple introduced the Liquid Glass design language and Icon Composer, a tool for building layered app icons that the system renders with depth, lighting, and translucency. One layered design can produce default, dark, clear, and tinted appearances across iPhone, iPad, Mac, and Apple Watch. Design a simple foreground on a clean background, check every appearance at small sizes, keep the silhouette recognizable, and test changes before shipping widely.
What changed with Liquid Glass
Apple's Liquid Glass design language, introduced at WWDC in 2025 across iOS 26, iPadOS 26, macOS 26, watchOS 26, and visionOS 26, brings translucent, glass-like materials to system interfaces and app icons. Icons can now be built from layers that the system lights and blurs dynamically, giving them depth and responsiveness.
Users can choose icon appearances, including default, dark, clear, and tinted styles. If an icon is not designed for these appearances, the system adapts it automatically, often with less control over the result. Our app icon sizes guide covers the underlying technical requirements.
Icon Composer and layers
Icon Composer, provided alongside Xcode, lets designers import layered artwork, typically a background and one or more foreground layers, and preview how the system renders them in each appearance and platform. You can adjust properties such as translucency, shadows, and specular highlights per layer.
Start with vector artwork on a 1024 x 1024 canvas, separating the main symbol from the background. Simple, bold shapes work best because glass effects add visual complexity of their own.
Design for every appearance
Check the icon in default, dark, clear, and tinted appearances. In tinted mode, the system applies a single color, so the icon must remain recognizable through shape alone. In clear mode, translucency reduces contrast, so thin details may disappear.
Design the foreground silhouette to be distinctive. Our app icon design tips explain why simple shapes and strong contrast hold up at small sizes, which matters even more with glass effects.
Mac, iPad, and Watch
One layered design can serve multiple platforms, with platform-specific adjustments. On macOS 26, icons follow a standard rounded-rectangle shape; icons that do not conform may be displayed inside a system container, which can look out of place. Update Mac icons to the standard shape.
Apple Watch icons are circular, so check that the composition works in a circle. Our Mac App Store optimization guide covers Mac listing creative more broadly.
Brand recognition and ASO
Your icon appears in search results, charts, and on users' home screens. A redesign for Liquid Glass should preserve recognizability so existing users can find the app and searchers associate it with your brand. Keep core colors and shapes consistent where possible.
Icons affect conversion. A glass treatment that looks elegant in a mockup may reduce contrast in search results. Evaluate the store icon separately from home screen appearances. Our first three screenshots strategy explains how the icon works with screenshots in search.
Testing icon changes
On iOS, product page optimization lets you test alternate icons, which must be included in the app binary. On Google Play, store listing experiments test icons quickly. Test before committing to a major redesign.
Our app icon A/B testing guide explains what to test and how to read results.
Android consistency
Android uses adaptive icons with foreground and background layers, plus monochrome layers for themed icons. If you redesign for Liquid Glass, keep Android icons consistent with your brand, adapting to Android's own guidelines rather than copying glass effects.
Consistency across platforms helps users recognize your app wherever they see it.
Production workflow
Keep layered source files organized, document which layers and settings produce each appearance, and include icon review in your release checklist. Small changes to colors or layers can significantly change how glass effects render.
Coordinate with marketing so screenshots, website, and ads use the updated icon consistently after release.
Common Liquid Glass icon mistakes
Relying on automatic adaptations instead of designing appearances is a common mistake, leading to muddy tinted or clear versions. Another is adding too much detail, which glass effects make harder to read. Teams also forget to update Mac icons to the standard shape.
Redesigning without testing can lower conversion or confuse existing users.
A worked example: refreshing a productivity icon
A note-taking app's icon uses a detailed paper texture and thin lines. In tinted mode, it becomes an unrecognizable blob. The team rebuilds it in Icon Composer with a bold folded-note shape as the foreground layer on a solid background, previews all appearances, and adjusts contrast for clear mode.
It tests the new icon with product page optimization, sees stable conversion, and ships it with a Mac version in the standard shape. Users report that the app is easier to spot on customized home screens.
How to do it, step by step
- Separate icon layersSplit the design into a simple background and a bold foreground symbol.
- Build in Icon ComposerImport layers and preview default, dark, clear, and tinted appearances.
- Adjust for each platformCheck iPhone, iPad, Mac, and Watch, updating Mac icons to the standard shape.
- Preserve brand recognitionKeep core colors and silhouette consistent with your existing icon.
- Test before shipping widelyUse product page optimization or store experiments to check conversion.
Before and after examples
Illustrative examples written for a generic app in this category, not client results. Swap in your own product, audience, and data.
Detailed illustration with fine lines.
Bold, simple symbol with strong silhouette.
Why it works: Simple shapes survive glass effects and tinting.
Rely on automatic tinted version.
Design and preview tinted and clear appearances in Icon Composer.
Why it works: Designed appearances stay recognizable.
Custom shape that the system places in a container.
Standard rounded-rectangle shape for macOS 26.
Why it works: Conforming icons look native.
Action plan
- Design layered icons in Icon Composer
- Check every appearance
- Keep silhouettes bold and simple
- Update Mac icons to the standard shape
- Preserve brand recognition
- Test icon changes
Metrics to monitor
- Product page conversion
- Search tap-through rate
- Icon test results
- Branded search trend after redesign
Record the baseline, release date, audience, markets, and external changes before interpreting movement. Rankings and conversion are useful signals, but a decision is stronger when activation, retention, and business value confirm that the page attracted the right users.
Frequently asked questions
What is Liquid Glass?
Apple's design language introduced with iOS 26 and related releases, featuring translucent, glass-like materials in interfaces and app icons.
What is Icon Composer?
An Apple tool for building layered app icons and previewing how they render across appearances and platforms.
Do I need to redesign my icon for iOS 26?
Not strictly, but designing layered appearances gives you control over how the icon looks in dark, clear, and tinted modes.
Do Liquid Glass icons affect ASO?
Icons affect conversion and recognition. Test redesigns to make sure the store icon still performs well.
Should Android icons copy Liquid Glass?
No. Keep brand consistency but follow Android's adaptive and themed icon guidelines.
Keep reading
More in Creative Optimization
Browse all 15 Creative Optimization guides
Work with ASOWin
Primary sources
Platform capabilities and limits can change. Verify current requirements in these official resources:
