Image / App icons

Liquid Glass Icon Generator for Icon Composer

Turn a foreground PNG or SVG into a Liquid Glass .icon bundle for Icon Composer and Xcode 26. Choose background colour and padding, compare approximate light, dark, tinted and clear previews, and export a flattened 1024 × 1024 PNG.

Liquid Glass Icon Generator for Icon Composer: Keeps one foreground image separate from an automatic background gradient supplied by Icon Composer. It centres the artwork with your padding and packages a .icon bundle in a ZIP. Browser previews illustrate rounded squares and a watch circle, with approximate tinted and clear modes. The flattened PNG uses the selected solid base colour and has no glass materials. Preview shape and appearance controls do not change the bundle's settings. Runs 100% locally in your browser with zero server file uploads.

Category
Image tools
Runs
In your browser
Cost
Free · no sign-up
Availability
Ready to use
Liquid Glass icon studioLocal processing

Runs entirely in your browser

Liquid Glass is Apple’s design language introduced with iOS 26. App icons use layers and materials that adapt to their appearance and surroundings. Apple developer documentation · Human Interface Guidelines

Choose a foreground PNG or SVG

Drop artwork here or browse files. Transparent artwork works best. Up to 20 MB.

Icon Composer fills the background with an automatic gradient from your colour. These previews and the flattened PNG use a solid base colour; adjust the final gradient in Icon Composer.

Light home screen
Dark home screen

Approximate preview, the final look is rendered by iOS. Shapes, tinted and clear appearances are illustrations, not Apple’s material rendering.

Extract the ZIP, open AppIcon.icon in Icon Composer for Xcode 26, review the materials and appearances, then add the .icon bundle to your Xcode project. Use the flattened PNG in an asset catalogue for older targets. Apple’s Icon Composer guide

This generator keeps one foreground layer above the background fill. It does not edit layered depth, refraction, highlights or shadows. Add and tune further layers in Icon Composer. The preview controls do not change the bundle’s appearance settings.

Your image stays in your browser. Nothing is uploaded.

Liquid Glass and app icon design

Apple describes Liquid Glass and adaptable app icons in its developer documentation and Human Interface Guidelines. Follow its guidance for a recognisable icon across platforms and appearances. https://developer.apple.com/documentation/technologyoverviews/liquid-glass and https://developer.apple.com/design/human-interface-guidelines/app-icons

Icon Composer and Xcode

Icon Composer supports layered artwork and material adjustments. Open and review the extracted .icon bundle there before adding it to your Xcode project. This generator provides one foreground layer and an automatic background gradient based on your colour. https://developer.apple.com/icon-composer/ and https://developer.apple.com/documentation/Xcode/creating-your-app-icon-using-icon-composer

How to use it

  1. Choose foreground artwork, ideally a transparent PNG or SVG, and set its padding and background colour.
  2. Compare light and dark home screens, platform shapes and approximate tinted or clear appearances.
  3. Download and extract the .icon ZIP, open the bundle in Icon Composer, review the final appearance and add it to your Xcode project. Download a flattened PNG for older targets.

Privacy & limitations

Images are decoded and exported in your browser. Your artwork is not uploaded.

Related tools

Frequently asked questions

What is Liquid Glass?

Liquid Glass is Apple's design language introduced with iOS 26. App icons can use layers and materials that adapt across appearances. This page prepares a starting bundle; the operating system renders its final appearance.

How do I use the download in Xcode 26?

Extract the ZIP and open the AppIcon.icon bundle in Icon Composer. Review and save the icon there, then add the .icon bundle to your Xcode project and select it as the app icon. Apple's Icon Composer guide explains the project setup.

Does this editor support layered depth?

It supplies one foreground layer above the background fill. It does not edit multiple layers, depth, refraction, highlights or shadows. Add layers and tune materials in Icon Composer.

Are the previews the final iOS appearance?

No. Rounded-square and circle shapes, tinted and clear effects are approximate previews. The final look is rendered by iOS. The browser and flattened PNG use a solid background colour; Icon Composer supplies the automatic gradient.

Free tool · runs in your browser · no account required