Liquid Glass App Icons: What an Icon Composer .icon File Is (and How to Make One)

With iOS 26 and macOS Tahoe, Apple added a second way to ship an app icon. Next to the familiar AppIcon.appiconset full of PNGs there’s now the Icon Composer .icon file: a layered icon that the system renders as Liquid Glass, with real highlights, depth, and automatic dark, tinted, and clear looks. One file covers iPhone, iPad, Mac, and Apple Watch.

This post explains what’s actually in a .icon file, when it’s worth switching to one, and how to add it to Xcode. If you just want the file, our App Icon Generator now builds one from a single image: tick Liquid Glass (.icon) before you download.

PNG icon set vs. .icon file

A classic icon set is a finished picture. The system can mask it and lay a glass sheen over it, but it can’t see inside it, so the result reads as one flat slab.

A .icon file keeps the pieces apart. The background and each piece of artwork are separate layers, and the system draws the glass itself, every time, at every size and in every appearance. That’s how a layered icon gets specular highlights on the edges of the artwork, a soft shadow under it, and a convincing “clear” version where the background shows through.

	PNG icon set (.appiconset)	Icon Composer file (.icon)
What it holds	Finished 1024 px images	A background fill + artwork layers + glass settings
Liquid Glass	Basic treatment applied over a flat image	Rendered per layer: highlights, depth, translucency
Dark / tinted / clear	Dark and tinted are separate PNGs you supply; no clear slot	Generated by the system from the layers
Platforms	One set per platform	One file for iOS, iPadOS, macOS, and watchOS
Older OS versions	Works everywhere	Xcode generates fallback icons at build time
Made with	Any image tool	Icon Composer (or a generator that writes the format)

The short version: a PNG icon set is still valid and still passes App Store review. A .icon file is how you get the full Liquid Glass look.

What’s inside a .icon file

Despite the special icon in Finder, a .icon is just a folder (a macOS package) with two things in it:

AppIcon.icon/
  icon.json
  Assets/
    foreground.png

Assets/ holds the layer artwork as PNG or SVG files. Apple recommends SVG where possible, and 1024 × 1024 for iPhone, iPad, and Mac artwork. icon.json describes how to put it together. Here’s the one our generator writes for an icon with a solid blue background:

{
  "fill-specializations": [
    { "value": { "solid": "srgb:0.00000,0.53333,1.00000,1.00000" } },
    { "appearance": "dark", "value": "automatic" }
  ],
  "groups": [
    {
      "layers": [
        { "name": "Foreground", "glass": true, "image-name": "foreground.png" }
      ],
      "shadow": { "kind": "neutral", "opacity": 0.5 },
      "translucency": { "enabled": true, "value": 0.5 }
    }
  ],
  "supported-platforms": { "circles": ["watchOS"], "squares": "shared" }
}

Reading it top to bottom:

• The fill is the background. It isn’t an image. It’s a color (solid) or a two-stop linear-gradient, and colors are written as srgb: or display-p3: values from 0 to 1. Apple’s guidance is to leave backgrounds out of your exported artwork and set them in Icon Composer, for exactly this reason. Here the dark appearance is set to automatic, so the system picks the dark backdrop.
• Groups hold the glass. Shadow, translucency, specular highlights, and blur are set per group. Layers in the same group are lit as one piece of glass. Apple suggests at most four groups.
• Layers are the artwork. Each points at a file in Assets/. glass: true means the layer takes part in the glass effect. A layer can swap in different images, fills, or visibility per appearance through -specializations arrays, which is how you give dark mode its own artwork.
• supported-platforms says which shapes the icon is designed for: squares for iPhone, iPad, and Mac, and circles for Apple Watch.

Apple doesn’t publish a formal schema for icon.json. The structure above matches files saved by Icon Composer, as collected in two open-source projects: apple-icon-composer-skill, which includes a JSON Schema and a validator, and icon-composer-template, which documents each attribute. The files our generator writes pass that validator.

How to add a .icon file to Xcode

Apple’s steps in Creating your app icon using Icon Composer come down to two moves:

1. Drag AppIcon.icon from Finder into the Project navigator. Put it next to Assets.xcassets, not inside it.
2. Check the App Icon name. Select your target, open the General tab, and under App Icons and Launch Screen make sure the App Icon field matches the file name without the extension: AppIcon.

That’s it. Xcode uses the .icon file in place of the AppIcon set in your asset catalog. If your app supports releases before iOS 26 or macOS Tahoe, Xcode generates look-alike icons for those releases from the same file at build time.

Two things that trip people up:

• Older OS rendering isn’t perfect. Apple has acknowledged that back-deployed Icon Composer icons can render inconsistently on older releases, with the background missing on some. Apple’s suggested workaround is to keep your previous asset-catalog icon in the project until that’s fixed. If older iOS versions matter to you, test there before you ship. See Use Your Loaf’s write-up for details.
• “Could not locate icontool.” Some developers hit this build error with a .icon file. One fix reported on the Apple Developer Forums was restoring the Icon Composer app inside Xcode’s own Applications folder, where Xcode looks for its developer tools.

Making a .icon file without Icon Composer

Icon Composer is the full tool: you import layers from Figma, Sketch, or Illustrator, arrange them into groups, and adjust the glass per appearance. You get it from Xcode (Xcode > Open Developer Tool > Icon Composer) or Apple’s Icon Composer page, and it runs on a Mac.

If you have one logo and a background color, you don’t need any of that to get started. The App Icon Generator turns one image into a working .icon file:

1. Upload your icon (PNG, JPEG, WebP, or HEIC, ideally 1024 px).
2. Pick a background in the Refine panel. Solid or gradient. This becomes the .icon fill, and your image becomes the glass layer on top of it. Scale the artwork so it sits comfortably inside the tile; glass highlights look best with some breathing room.
3. Tick Liquid Glass (.icon) in the platforms list. It’s on by default.
4. Optional: dark artwork. If you upload a dark-variant override or turn on the light-background knockout, the .icon gets a separate dark-appearance layer.
5. Download and find liquid-glass/AppIcon.icon in the zip.

A note on step 2: if you leave the background set to none, the whole image goes in as one plain, non-glass layer. That’s deliberate. A full-bleed photo or a finished icon with its own background has nothing to separate, so glassing the whole square would only blur it. Pick a background color and keep the artwork itself transparent to get the real effect.

The generated file is a good starting point, not a ceiling. Double-click it to open it in Icon Composer, where you can split the artwork into more layers, change the shadow and translucency, or tune the dark and mono appearances. Everything runs in your browser, and your artwork is never uploaded.

Should you switch?

• New app targeting iOS 26 / macOS Tahoe and later: yes. The .icon file is less work (one file instead of light, dark, and tinted PNGs for each platform), and it’s the only way to get the full Liquid Glass look and a proper clear appearance.
• Existing app that supports old iOS versions: a .icon is still worth adding, but check the back-deployed icons on an older device or simulator first, and keep the asset-catalog set in the project if they look wrong.
• Cross-platform builds (Expo, Flutter, Electron): check whether your tool can bundle a .icon file before relying on it. The PNG and .icns files still work everywhere.

The App Icon Generator’s zip includes both the classic sets and the .icon file, so you can try one and fall back to the other. For the full list of what each platform needs, see App Icon Sizes in 2026.