/ux
Components/Data Display/ThemeIcon

ThemeIcon

Data Display

Icon inside a rounded container with brand-colour fills.

Wraps any icon in a sized, styled shell for use in feature lists, stats, or navigation decorators. Not clickable — pair with ActionIcon for interactive icon buttons.

Usage

import { ThemeIcon } from "nosible-ux"
import { TrendingUp } from "lucide-react"

export default function Example() {
  return (
    <ThemeIcon variant="filled" size="md">
      <TrendingUp size={16} />
    </ThemeIcon>
  )
}

Examples

Variants

Sizes

Accessibility

Decorative icons inside ThemeIcon should have aria-hidden="true". If the icon conveys meaning, add aria-label to the wrapping element.

Props

Name TypeDefaultDescription
asChild
boolean | undefinedfalseWhen true, renders the child element as the root (polymorphic).
color
"default" | "critical" | null | undefined—
size
"xs" | "sm" | "md" | "lg" | "xl" | null | undefined—
variant
"default" | "ghost" | "filled" | "outline" | "subtle" | "transparent" | null | undefined—
← All ComponentsGetting Started →