# Liquid glass icon button: spec and references

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

Single-icon actions: undo/redo chips, floating action, search button next to a tab bar. Layer: controls.

Also called: fab, round button, circle button.

| Property | Value |
|---|---|
| Material | lens |
| Profile | convex (circle) or squircle (capsule chip) |
| Geometry | circle 32–44 (touch 44), or capsule chip 28–32 tall × 40–48 wide; icon 16–20. A search or action lens beside a floating bar takes the bar's height (56–64), as the tab-bar spec says |
| Bezel (px) | radius |
| Displacement (px) | ≤ 0.5 × radius |
| Blur (px) | 0–1 |

## Anatomy

- glass circle/capsule
- flat centred glyph

## States

- rest
- press: grow 1.06 + brighter glow
- active: tint

## Rules

- Space siblings ≥ 8 px so they read as separate lenses (or deliberately merge them with morph).
- Tooltips open 6–8 px above, never overlapping the button.

## References

![Round icon buttons and shorter capsule variants, including a selected heart over a procedural backdrop.](https://meniscus.site/gallery/icon-button-light-studio.webp)

![Round icon buttons and shorter capsule variants, including a selected heart over a procedural backdrop.](https://meniscus.site/gallery/icon-button-dark-studio.webp)

## Use it with your assistant

This spec is what the Meniscus MCP server's `get_component_spec` tool returns for `icon-button`. 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