# Liquid glass app icon: spec and references

Source: https://meniscus.site/components/app-icon · Updated 2026-09-27

App or feature icon in the glass style. Layer: content.

Also called: app tile.

| Property | Value |
|---|---|
| Material | layered glass (Icon Composer style): translucent foreground shapes over a colour or clear background |
| Profile | convex |
| Geometry | squircle icon grid (iOS 1024 master, continuous corners); 2–3 layers |
| Bezel (px) | 8–12 % of size |
| Displacement (px) | light |
| Blur (px) | 0–2 |

## Anatomy

- background layer
- glass foreground layers with specular edges
- optional dark/clear/tinted variants

## States

- default
- dark
- clear
- tinted

## Rules

- 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).

## References

![A row of generic app icons followed by one icon in default, dark, clear and tinted material variants over a procedural backdrop.](https://meniscus.site/gallery/app-icon-light-studio.webp)

![A row of generic app icons followed by one icon in default, dark, clear and tinted material variants over a procedural backdrop.](https://meniscus.site/gallery/app-icon-dark-studio.webp)

## Use it with your assistant

This spec is what the Meniscus MCP server's `get_component_spec` tool returns for `app-icon`. Materials, colours, light and composition rules that apply to every component are in the [liquid glass guide](https://meniscus.site/liquid-glass). Connect: `claude mcp add --transport http meniscus https://meniscus.site/mcp` — setup for every client: https://meniscus.site/docs