Do app icons change with Liquid Glass in iOS 26?

App icons themselves don't automatically become translucent, but iOS 26's Liquid Glass UI affects how icons appear on the Home Screen. Icons now sit on a subtly glass-like dock and folder backgrounds, so designs that complement this aesthetic look more native and cohesive.

What size should iOS 26 app icons be?

iOS 26 uses the same icon sizes as previous versions: 1024x1024 pixels for the App Store, with the system generating smaller sizes. However, you should design with the Liquid Glass context in mind - icons appear on translucent surfaces, so ensure good contrast and visual clarity.

Should I use transparency in my iOS 26 app icon?

No, app icons should remain fully opaque. While the Liquid Glass UI around icons is translucent, Apple's guidelines still require solid, non-transparent app icons. The key is designing icons that visually complement the glass aesthetic without using actual transparency.

How do I make my app icon look good with Liquid Glass?

Focus on: 1) Light, airy color palettes that complement glass materials, 2) Subtle gradients that suggest depth and luminosity, 3) Simple, recognizable symbols without excessive detail, 4) Adequate contrast to stand out on translucent backgrounds, 5) Soft shadows or highlights that echo the glass aesthetic.

Can I use Apple's Icon Composer for iOS 26?

Yes, Apple's Icon Composer tool released with Xcode 26 supports the new design paradigm. It helps preview how your icon will appear in the Liquid Glass context and generates all required sizes automatically. The tool includes templates optimized for the iOS 26 aesthetic.

Liquid Glass App Icon Design for iOS 26: Complete Guide

iOS 26's Liquid Glass design language has transformed how apps look and feel - and your app icon is the first thing users see. While icons don't automatically become translucent, designing for the Liquid Glass context requires a fresh approach to color, depth, and visual harmony.

This guide covers everything you need to know about creating app icons that complement iOS 26's new aesthetic, from design principles to technical implementation in Xcode.

For a complete overview of Liquid Glass in SwiftUI, see our comprehensive Liquid Glass implementation guide.

Understanding the Liquid Glass Context

Before diving into icon design, it's important to understand how Liquid Glass changes the visual environment:

What Changed in iOS 26

Translucent dock: The Home Screen dock is now a glass surface that shows content beneath
Glass folders: App folders use the Liquid Glass material
Dynamic backgrounds: Wallpapers interact with glass elements in real-time
Depth and reflections: Glass surfaces create a sense of layered depth
Light interaction: The glass effect responds to device tilt and lighting

What Stays the Same

Icon format: Still PNG, 1024x1024 master size
Icon shape: Apple's rounded rectangle (squircle) mask
No transparency: Icons must remain fully opaque
Single asset: Xcode generates all required sizes

Design Principles for Liquid Glass Icons

Creating icons that feel at home in the Liquid Glass environment requires attention to these principles:

1. Embrace Luminosity

Liquid Glass is fundamentally about light - how it passes through, reflects off, and interacts with surfaces. Icons that convey a sense of inner light or glow complement this aesthetic beautifully.

Techniques:

Use subtle internal gradients that suggest light sources
Add soft highlights on upper edges
Consider brighter, more saturated colors than you might have used previously
Avoid flat, matte appearances

2. Simplify Your Symbol

The Liquid Glass environment is visually rich. Icons with too much detail compete with the dynamic background and glass effects. Simpler symbols stand out better.

Techniques:

Reduce your icon to its essential form
Remove fine details that won't be visible at small sizes
Use bold, clear shapes
Ensure instant recognizability

3. Consider Depth Without Heaviness

Liquid Glass creates depth through layering and translucency. Your icon can suggest depth through subtle means rather than heavy shadows or 3D effects.

Techniques:

Use soft shadows sparingly
Layer shapes with subtle opacity differences
Create depth through color temperature (cool recedes, warm advances)
Avoid harsh drop shadows or overly realistic 3D rendering

4. Choose a Harmonious Color Palette

Your icon will appear against various wallpapers and glass surfaces. Colors that work in this context share certain qualities:

Colors that work well:

Vibrant but not neon
Good saturation with controlled brightness
Colors that "glow" rather than appear flat
Complementary gradients (two related colors)

Colors to be careful with:

Pure white (can wash out on bright backgrounds)
Very dark colors (may appear as "holes" in the glass)
Low-saturation grays (feel out of place)
Neon or overly bright colors (clash with the subtle glass aesthetic)

Step-by-Step Icon Design Process

Step 1: Gather Inspiration

Study how Apple's own apps handle icons in iOS 26. Note the color choices, gradients, and overall feel of system apps like Photos, Music, and Health.

Step 2: Create Your Concept

Start with sketches focusing on the essential symbol that represents your app. Think about:

What single image instantly communicates your app's purpose?
Can it be recognized at 40x40 pixels?
Does it feel modern and fresh?

Step 3: Design in Your Preferred Tool

Use vector-based tools for maximum flexibility:

Recommended Design Tools:
- Figma (free, web-based)
- Sketch (Mac)
- Adobe Illustrator
- Affinity Designer

Canvas Size: 1024 x 1024 pixels
Color Mode: sRGB (for most icons) or Display P3 (for vibrant colors)
Format: Export as PNG with no transparency

Step 4: Build Your Icon Layer by Layer

A well-structured icon typically has these layers:

Icon Layer Structure:
1. Background gradient (subtle, 2-3 colors)
2. Main symbol/glyph (simplified, bold)
3. Highlights (soft white/light overlay on top edge)
4. Subtle shadow (if needed, very soft)

Example: Creating a Glass-Friendly Gradient Background

/* Figma/CSS Gradient Example */
background: linear-gradient(
    135deg,
    #4A90D9 0%,      /* Slightly lighter blue */
    #1E5FA8 50%,     /* Main brand blue */
    #0D3F7A 100%     /* Deeper blue for depth */
);

/* The 135-degree angle creates a natural
   light-source feeling from top-left */

Step 5: Test on Liquid Glass Backgrounds

Before finalizing, preview your icon against various backgrounds:

Light wallpapers (ensure adequate contrast)
Dark wallpapers (check that details remain visible)
Colorful wallpapers (verify your icon doesn't clash)
The iOS 26 dock specifically

In Figma or Sketch, create mockups with glass-like overlays to simulate the iOS 26 environment.

Step 6: Export and Implement in Xcode

Export your final icon at 1024x1024 pixels as a PNG file. Then add it to your Xcode project:

Adding Icon to Xcode Asset Catalog:

1. Open your project in Xcode 26
2. Select Assets.xcassets in the navigator
3. Click the + button → App Icon
4. Drag your 1024x1024 PNG to the "App Store" slot
   (or use "Single Size" mode for automatic scaling)
5. Build and test on device

Using Apple's Icon Composer

Xcode 26 includes an updated Icon Composer tool that helps you create and preview icons in the Liquid Glass context.

Accessing Icon Composer

Xcode Menu:
Developer Tools → Icon Composer

Or launch from Terminal:
open -a "Icon Composer"

Icon Composer Features

Liquid Glass Preview: See your icon in the iOS 26 Home Screen context
Automatic Size Generation: Creates all required sizes from one master
Dark/Light Mode Preview: Test appearance in both modes
Wallpaper Testing: Preview against various backgrounds
Export Validation: Checks for common issues

For more on Apple's Icon Composer, see our complete Icon Composer tutorial.

Technical Specifications

Required Icon Sizes (Generated Automatically)

Size (points)	Scale	Pixels	Usage
1024	1x	1024x1024	App Store
180	3x	180x180	iPhone (iOS 26)
120	2x	120x120	iPhone (older displays)
167	2x	167x167	iPad Pro
152	2x	152x152	iPad
76	1x	76x76	iPad (1x)

Format Requirements

File format: PNG
Color space: sRGB or Display P3
Transparency: Not allowed
Layers: Flattened
Bit depth: 8-bit per channel

Common Mistakes to Avoid

1. Using Actual Transparency

Don't try to make your icon itself translucent to "match" Liquid Glass. Icons must be fully opaque.

// Wrong: Trying to add transparency
icon.opacity = 0.8  // This won't work as expected

// Right: Design a solid icon that
// visually complements the glass aesthetic

2. Overly Complex Details

Small details disappear at Home Screen sizes and create visual noise against the dynamic Liquid Glass background.

3. Fighting the Environment

Icons that use very dark backgrounds or stark, flat colors can look out of place in the luminous Liquid Glass environment.

4. Ignoring Small Sizes

Always test your icon at actual Home Screen size (roughly 60x60 points). If it's not recognizable, simplify.

Alternative App Icons for Liquid Glass

iOS 26 continues to support alternative app icons, which can be a great way to offer variations that suit different wallpapers or user preferences.

// Setting an alternative icon in SwiftUI
Button("Switch Icon") {
    UIApplication.shared.setAlternateIconName("DarkModeIcon") { error in
        if let error = error {
            print("Error: \(error.localizedDescription)")
        }
    }
}

// In Info.plist, configure:
// CFBundleIcons → CFBundleAlternateIcons

Consider offering:

A lighter version for dark wallpapers
A darker version for light wallpapers
Seasonal or themed variations

Real-World Example: Skyscraper Icon

When updating the Skyscraper app icon for iOS 26, we applied these principles:

Simplified the symbol: Reduced to essential building shape
Added luminosity: Subtle gradient suggesting internal glow
Brightened the palette: Shifted to more vibrant Bluesky-inspired blues
Softened edges: Reduced hard shadows in favor of soft highlights
Tested extensively: Verified appearance on dozens of wallpaper combinations

The result is an icon that feels native to iOS 26 while maintaining brand recognition.

Accessibility Considerations

Ensure your icon works for all users:

Contrast: Icon should be distinguishable even with Reduce Transparency enabled
Color independence: Don't rely solely on color to convey meaning
Bold shapes: Users with low vision should be able to recognize the icon

// Preview with accessibility settings
#Preview("Reduce Transparency") {
    IconPreview()
        .environment(\.accessibilityReduceTransparency, true)
}

Tools and Resources

Design Tools

Figma - Free, collaborative design tool
Sketch - Mac-native design app
Affinity Designer - Professional vector design

Liquid Glass App Icon Design for iOS 26: Complete Guide

Understanding the Liquid Glass Context

What Changed in iOS 26

What Stays the Same

Design Principles for Liquid Glass Icons

1. Embrace Luminosity

2. Simplify Your Symbol

3. Consider Depth Without Heaviness

4. Choose a Harmonious Color Palette

Step-by-Step Icon Design Process

Step 1: Gather Inspiration

Step 2: Create Your Concept

Step 3: Design in Your Preferred Tool

Step 4: Build Your Icon Layer by Layer

Example: Creating a Glass-Friendly Gradient Background

Step 5: Test on Liquid Glass Backgrounds

Step 6: Export and Implement in Xcode

Using Apple's Icon Composer

Accessing Icon Composer

Icon Composer Features

Technical Specifications

Required Icon Sizes (Generated Automatically)

Format Requirements

Common Mistakes to Avoid

1. Using Actual Transparency

2. Overly Complex Details

3. Fighting the Environment

4. Ignoring Small Sizes

Alternative App Icons for Liquid Glass

Real-World Example: Skyscraper Icon

Accessibility Considerations

Tools and Resources

Design Tools

Apple Resources

Related Reading

About Skyscraper

See Our Liquid Glass Design in Action