Glass Icons

Icon tiles with a colored backplate behind a frosted glass front that lifts and tilts toward the pointer on hover.

size72

tilt18

showLabels

Installation

npx shadcn@latest add @glint-ui/glass-icons

First time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/glass-icons.json

Usage

import { GlassIcons } from "@/components/ui/glass-icons";

<GlassIcons
  items={[
    { icon: <FileText />, label: "Files", color: "#3b82f6" },
    { icon: <Heart />, label: "Likes", color: "#f43f5e" },
  ]}
/>

Props

Prop	Type	Default	Description
items	ReactNode	—	Array of { icon, label, color?, onClick? }.
size	number	72	Tile size in px.
tilt	number	18	Max pointer tilt of the glass in degrees.
showLabels	boolean	true	Show the label under a hovered tile.
className	string	—	Extra classes for the root element.