glasscn
Glass Icon

A circular glass chip that wraps any icon, iOS-control-center style. Preset sizes scale the circle and icon together so grids of icons stay uniform.

import { GlassIcon } from "@/components/ui/glasscn/glass-icon"

// Any icon works — lucide, custom SVGs, etc. The size preset
// scales the icon for you, so don't set size classes on it.

Installation

$ npx shadcn add @glasscn/glass-icon

Variants

clear
frosted
subtle
liquid
liquid-refract

API

Prop
Type
Default
Description
GlassIconglassVariant
"clear" | "frosted" | "subtle" | "liquid" | "liquid-refract""liquid-refract"
Controls the glass surface treatment.
GlassIconsize
"sm" | "md" | "lg" | "xl""md"
Preset that drives both the circle and the icon size together.
GlassIconliquidProps
Omit<LiquidGlassProps, "children">-
Props forwarded to the underlying LiquidGlass surface (blur, refraction, bezel, saturation).
GlassIconsurfaceClassName
string-
Classes applied to the outer LiquidGlass surface.
GlassIcon...props
React.ComponentProps<"button">-
Props from the underlying shadcn/ui primitive.