Primitive / Atomstable

IconFrame

Consistent framed surface for icon glyphs and short initials.

@glinui/uiComponent: icon-frame

Installation$

Install from the package for shared ownership or from the registry for copy-paste control.

Package Manager$

pnpm add @glinui/ui @glinui/tokens

Registry$

pnpm dlx @glinui/cli@latest add icon-frame

Usage$

IconFrame wraps any children — a Lucide icon, a text initial, or an image — inside a fixed-size square with rounded-xl corners and shrink-0 to prevent layout squishing. It is the building block for feature lists, avatars, app icons, and notification items.

Basic$

TSX

1import { IconFrame } from "@glinui/ui"
2import { Sparkles } from "lucide-react"
3
4export function IconFrameBasicDemo() {
5return (
6  <IconFrame>
7    <Sparkles className="h-5 w-5" />
8  </IconFrame>
9)
10}

Examples$

Variants$

Choose a surface treatment to match the surrounding context — filled for feature highlights, glass for overlay panels, outline for list rows, ghost for minimal layouts.

TSX

1import { IconFrame } from "@glinui/ui"
2import { Sparkles } from "lucide-react"
3
4export function IconFrameVariantDemo() {
5return (
6  <div className="flex flex-wrap items-center gap-3">
7    <IconFrame variant="default">
8      <Sparkles className="h-5 w-5" />
9    </IconFrame>
10    <IconFrame variant="glass">
11      <Sparkles className="h-5 w-5" />
12    </IconFrame>
13    <IconFrame variant="outline">
14      <Sparkles className="h-5 w-5" />
15    </IconFrame>
16    <IconFrame variant="ghost">
17      <Sparkles className="h-5 w-5" />
18    </IconFrame>
19  </div>
20)
21}

Sizes$

The size prop controls fixed square dimensions. All three sizes use rounded-xl corners and auto-center children.

TSX

1import { IconFrame } from "@glinui/ui"
2import { Zap } from "lucide-react"
3
4export function IconFrameSizeDemo() {
5return (
6  <div className="flex flex-wrap items-center gap-3">
7    <IconFrame size="sm">
8      <Zap className="h-3.5 w-3.5" />
9    </IconFrame>
10    <IconFrame size="md">
11      <Zap className="h-5 w-5" />
12    </IconFrame>
13    <IconFrame size="lg">
14      <Zap className="h-7 w-7" />
15    </IconFrame>
16  </div>
17)
18}

With Initials$

Pass short text children instead of an icon for product logos, user avatars, or app abbreviations.

GUABJDMK

TSX

1import { IconFrame } from "@glinui/ui"
2
3export function IconFrameInitialsDemo() {
4return (
5  <div className="flex flex-wrap items-center gap-3">
6    <IconFrame variant="default" size="md">GU</IconFrame>
7    <IconFrame variant="glass" size="md">AB</IconFrame>
8    <IconFrame variant="outline" size="md">JD</IconFrame>
9    <IconFrame variant="ghost" size="md">MK</IconFrame>
10  </div>
11)
12}

Feature List Pattern$

Combine IconFrame with a heading and description to build a feature grid. The consistent square dimensions keep rows optically aligned.

Liquid Glass

SVG displacement refraction effects.

Fast by Default

Zero runtime overhead for static tokens.

TSX

1import { IconFrame } from "@glinui/ui"
2import { Sparkles, Zap } from "lucide-react"
3
4export function IconFrameFeatureDemo() {
5return (
6  <div className="space-y-4 max-w-sm">
7    <div className="flex items-start gap-3">
8      <IconFrame variant="glass" size="md">
9        <Sparkles className="h-5 w-5" />
10      </IconFrame>
11      <div>
12        <p className="text-sm font-medium">Liquid Glass</p>
13        <p className="text-xs text-neutral-500">SVG displacement refraction effects.</p>
14      </div>
15    </div>
16    <div className="flex items-start gap-3">
17      <IconFrame variant="glass" size="md">
18        <Zap className="h-5 w-5" />
19      </IconFrame>
20      <div>
21        <p className="text-sm font-medium">Fast by Default</p>
22        <p className="text-xs text-neutral-500">Zero runtime overhead for static tokens.</p>
23      </div>
24    </div>
25  </div>
26)
27}

Accessibility$

IconFrame is a decorative container. Icons inside it should have aria-hidden="true" when accompanied by visible text labels.
When used as a standalone icon button (e.g., wrapped in a <button>), provide an aria-label on the button element.
Text initials inside IconFrame should be supplemented with a surrounding aria-label or title for screen readers when used as an avatar.
The frame itself carries no interactive semantics — wrap it in a <button> or <a> when interaction is needed.

Reduced Motion$

IconFrame is a static layout primitive with no animation. No reduced-motion considerations apply.

API Reference$

Prop	Type	Required	Default	Description
`size`	`"sm" \| "md" \| "lg"`	No	`"md"`	Variant option from iconFrameVariants.
`variant`	`"default" \| "glass" \| "outline" \| "ghost"`	No	`"default"`	Variant option from iconFrameVariants.

Source$

TSX

1import { IconFrame } from "@glinui/ui"

packages/ui/src/components/icon-frame.tsx

Generated API Snapshot

Beta

Auto-extracted from TypeScript source in packages/ui/src/components/icon-frame.tsx. This section is in beta and may lag behind hand-curated docs. Regenerate with pnpm --filter @glinui/docs api:generate.

Generated: 2026-02-19T17:59:28.468Z · Full index: /docs/api-metadata

Primary Props Type

IconFrameProps

`IconFrameProps`

Prop	Type	Required	Default	Description
`size`	`"sm" \| "md" \| "lg"`	No	`"md"`	Variant option from iconFrameVariants.
`variant`	`"default" \| "glass" \| "outline" \| "ghost"`	No	`"default"`	Variant option from iconFrameVariants.