Accessible Icon

Give a bring-your-own decorative icon an accessible name without visible text — pairs with any icon library.

Group: Utilities · Import path: @orionshub/lucent/accessible-icon · Server-safe — renders on the server without a client bundle.

Import

import { AccessibleIcon } from '@orionshub/lucent'
import '@orionshub/lucent/styles.css' // once, at your app root

Examples

Labelled icon

Labelled icon

Show source

export function AccessibleIconBasic() {
  return (
    <Button variant="outline">
      <AccessibleIcon label="Settings">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
          <circle cx="12" cy="12" r="3" />
          <path d="M12 2v4M12 18v4M2 12h4M18 12h4" />
        </svg>
      </AccessibleIcon>
    </Button>
  )
}

Props

Prop	Type	Default	Description
children*	React.ReactNode	—	The decorative icon (rendered aria-hidden by Radix).
label*	string	—	The accessible name announced to assistive tech. REQUIRED.

Guidance

One-time CSS import

Import the compiled stylesheet once at your app root: import '@orionshub/lucent/styles.css'. Components ship stable class names and read design tokens from CSS custom properties — there is no style runtime. See CSS Import.

Transparency & solid mode

Every glass surface reads --lucent-glass-opacity (0.60–1.0). Dial it at runtime with setGlassOpacity(), or switch to setContrast('solid') for a fully opaque, high-contrast rendering. See Transparency & Solid Mode.

RTL

Authored with CSS logical properties — set dir="rtl" on a parent (or the document) and layout mirrors with no JS. Toggle RTL from the glass-controls panel to preview. See RTL Support.

SSR / Next.js

Server-safe — renders on the server without a client bundle. All components are safe to import in a Server Component tree; interactive ones carry their own "use client" boundary. See SSR & Next.js.