Glin UI
Radix UIBase UI
Primitive / Atom

Icon Frame

Consistent framed surface for icon glyphs and short initials.

Edit on GitHub

Fast builds

Incremental builds finish in under 8 seconds.

Secure by default

Secrets are encrypted and rotated automatically.

Live metrics

Latency and error rates update every minute.

Error tracking

Group crashes by release and assign an owner.

Installation

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

Prefer the package?

Usage

Variants

The shared vocabulary. Omit `variant` for the ambient style (glinr).

glinr
solid
plain
soft
outline
ghost
gradient
glass
import { IconFrame } from "@glinui/ui"



<IconFrame variant="glinr" tone="accent"><Bell /></IconFrame>

Tones

Soft frames in every tone.

neutral
accent
success
warning
danger
info
import { IconFrame } from "@glinui/ui"



<IconFrame variant="soft" tone="success"><Bell /></IconFrame>

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.

import { IconFrame } from "@glinui/ui"
import { Sparkle } from "@phosphor-icons/react"

export function IconFrameVariantDemo() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <IconFrame variant="default">
        <Sparkle className="h-5 w-5" />
      </IconFrame>
      <IconFrame variant="glass">
        <Sparkle className="h-5 w-5" />
      </IconFrame>
      <IconFrame variant="outline">
        <Sparkle className="h-5 w-5" />
      </IconFrame>
      <IconFrame variant="ghost">
        <Sparkle className="h-5 w-5" />
      </IconFrame>
    </div>
  )
}

Sizes

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

import { IconFrame } from "@glinui/ui"
import { Lightning } from "@phosphor-icons/react"

export function IconFrameSizeDemo() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <IconFrame size="sm">
        <Lightning className="h-3.5 w-3.5" />
      </IconFrame>
      <IconFrame size="md">
        <Lightning className="h-5 w-5" />
      </IconFrame>
      <IconFrame size="lg">
        <Lightning className="h-7 w-7" />
      </IconFrame>
    </div>
  )
}

With Initials

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

import { IconFrame } from "@glinui/ui"

export function IconFrameInitialsDemo() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <IconFrame variant="default" size="md">GU</IconFrame>
      <IconFrame variant="glass" size="md">AB</IconFrame>
      <IconFrame variant="outline" size="md">JD</IconFrame>
      <IconFrame variant="ghost" size="md">MK</IconFrame>
    </div>
  )
}

Feature List Pattern

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

import { IconFrame } from "@glinui/ui"
import { Sparkle, Lightning } from "@phosphor-icons/react"

export function IconFrameFeatureDemo() {
  return (
    <div className="space-y-4 max-w-sm">
      <div className="flex items-start gap-3">
        <IconFrame variant="glass" size="md">
          <Sparkle className="h-5 w-5" />
        </IconFrame>
        <div>
          <p className="text-sm font-medium">Liquid Glass</p>
          <p className="text-xs text-neutral-500">SVG displacement refraction effects.</p>
        </div>
      </div>
      <div className="flex items-start gap-3">
        <IconFrame variant="glass" size="md">
          <Lightning className="h-5 w-5" />
        </IconFrame>
        <div>
          <p className="text-sm font-medium">Fast by Default</p>
          <p className="text-xs text-neutral-500">Zero runtime overhead for static tokens.</p>
        </div>
      </div>
    </div>
  )
}

Raised icon tile

Lift surface tile for feature icons.

import { IconFrame } from "@glinui/ui"
import { ShieldCheck } from "@phosphor-icons/react"

export function Demo() {
  return <IconFrame variant="raised" size="lg"><ShieldCheck size={20} /></IconFrame>
}

Accessibility

  • Use `aria-hidden` when decorative.
  • Add screen-reader text for meaningful icons.
  • `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.

ARIA Attributes

  • `aria-hidden="true"` for decorative usage

Reduced Motion

Frame transitions are color-only and respect reduced-motion settings.

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

Affected properties

background-colorborder-color

API Reference

PropTypeRequiredDefaultDescription
variantIconFrameVariant | nullNoambient (glinr)Surface treatment. Glass is opt-in.
toneSurfaceToneNoneutralIcon and tint color.
size"sm" | "md" | "lg"NomdSquare frame size.

Source

Import directly from the package or browse the source on GitHub. Click any file to view it.

Import

import { IconFrame } from "@glinui/ui"

Source Files

icon-frame.tsx

Dependencies

@glinui/ui

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-10-08T01:41:21.546Z · Full index: /docs/api-metadata

Primary Props Type

IconFrameProps

IconFrameProps

PropTypeRequiredDefaultDescription
size"sm" | "md" | "lg"No"md"Variant option from iconFrameVariants.
toneSurfaceToneNo"neutral"Tone for the icon color and tinted looks.
variantIconFrameVariant | nullNo-Omitted follows the ambient style (glinr by default). `glass` is opt-in and needs a backdrop.