Menu

Component · content

Liquid glass app icon

App or feature icon in the glass style.

A row of generic app icons followed by one icon in default, dark, clear and tinted material variants over a procedural backdrop.

Copy the prompt

Free

The rules, the spec, the glass code for Web and the checks, in one text.

Works in any AI that can write code.

Or connect your AI once
Material
layered glass (Icon Composer style): translucent foreground shapes over a colour or clear background
Profile
convex
Bezel (px)
8–12 % of size
Displacement (px)
light
Blur (px)
0–2

Geometry. squircle icon grid (iOS 1024 master, continuous corners); 2–3 layers

Rules2
  • Specular highlight on top-left edges of each layer; keep shapes simple and bold.
  • Current generation: 2–4 glass layers, each may refract what is under it; design every appearance — default, dark, clear (light and dark) and tinted (light and dark).
Anatomy3
  • background layer
  • glass foreground layers with specular edges
  • optional dark/clear/tinted variants
States4
  • default
  • dark
  • clear
  • tinted

Questions

What material is a liquid glass app icon?

Layered glass (Icon Composer style): translucent foreground shapes over a colour or clear background material with a convex edge profile, in the content layer. App or feature icon in the glass style.

How big is a liquid glass app icon?

Squircle icon grid (iOS 1024 master, continuous corners); 2–3 layers.

What bezel, displacement and blur does it use?

Bezel 8–12 % of size; displacement light; blur 0–2 (px).

Which states does a liquid glass app icon need?

Default; dark; clear; tinted.