Featured Icon

A glyph inside a themed container — the small badge that anchors a card, artifact, or empty-state header. Color × theme × size × shape, all token-driven.

Overview

FeaturedIcon wraps a single icon in a styled, themed container — the small "badge" that anchors a card header, an artifact, or an empty state. It is entirely token-driven, so theme and dark mode flow through automatically; you never pass a raw color. Pass a Lucide icon (the container sizes the glyph) or arbitrary children.

Four axes compose freely: color (primary, gray, success, error) × theme (light, solid, outline) × size (sm, md, lg, xl) × shape (square, circle). The square corner radius scales with size; circle is fully rounded. It renders a <span> and is non-interactive by default.

Preview

color × theme

size

shape

'use client';import { FeaturedIcon } from '@gremorie/rx-display';import {  CheckIcon,  CircleAlertIcon,  RocketIcon,  SparklesIcon,} from 'lucide-react';export function FeaturedIconPreview() {  return (    <div className="flex flex-col gap-8">      <div className="flex flex-col gap-2">        <span className="text-muted-foreground text-xs">color × theme</span>        <div className="flex flex-wrap items-center gap-3">          <FeaturedIcon color="primary" theme="light" icon={SparklesIcon} />          <FeaturedIcon color="primary" theme="solid" icon={SparklesIcon} />          <FeaturedIcon color="primary" theme="outline" icon={SparklesIcon} />          <FeaturedIcon color="success" theme="light" icon={CheckIcon} />          <FeaturedIcon color="error" theme="light" icon={CircleAlertIcon} />          <FeaturedIcon color="gray" theme="light" icon={RocketIcon} />        </div>      </div>      <div className="flex flex-col gap-2">        <span className="text-muted-foreground text-xs">size</span>        <div className="flex flex-wrap items-center gap-3">          <FeaturedIcon size="sm" icon={RocketIcon} />          <FeaturedIcon size="md" icon={RocketIcon} />          <FeaturedIcon size="lg" icon={RocketIcon} />          <FeaturedIcon size="xl" icon={RocketIcon} />        </div>      </div>      <div className="flex flex-col gap-2">        <span className="text-muted-foreground text-xs">shape</span>        <div className="flex flex-wrap items-center gap-3">          <FeaturedIcon shape="square" icon={SparklesIcon} />          <FeaturedIcon shape="circle" icon={SparklesIcon} />        </div>      </div>    </div>  );}

Anatomy

FeaturedIcon   themed container (span) sizing a single icon glyph or children

Installation

bash npm i @gremorie/rx-display

bash pnpm add @gremorie/rx-display

bash yarn add @gremorie/rx-display

bash bun add @gremorie/rx-display

FeaturedIcon ships in the @gremorie/rx-display npm package. A standalone registry item for the copy-paste flow is not published yet.

Usage

import { FeaturedIcon } from "@gremorie/rx-display";
import { SparklesIcon } from "lucide-react";

export function Example() {
  return (
    <div className="flex items-center gap-3">
      <FeaturedIcon icon={SparklesIcon} />
      <FeaturedIcon color="success" theme="solid" icon={SparklesIcon} />
      <FeaturedIcon color="error" theme="outline" shape="circle" icon={SparklesIcon} />
    </div>
  );
}

The Angular edition of this component ships from source today (see the workbench for the side-by-side); its registry entry is coming next.

API

`<FeaturedIcon>`

Prop	Type	Default	Description
`icon`	`LucideIcon`	-	Lucide icon component to render. The container sizes the glyph per `size`.
`children`	`ReactNode`	-	Alternative to `icon` — render arbitrary content (e.g. a custom SVG).
`color`	`"primary" \| "gray" \| "success" \| "error"`	`"primary"`	Semantic color, resolved against tokens per `theme`.
`theme`	`"light" \| "solid" \| "outline"`	`"light"`	`light` = tinted background; `solid` = filled; `outline` = bordered, no fill.
`size`	`"sm" \| "md" \| "lg" \| "xl"`	`"md"`	Container size (sm 32 · md 40 · lg 48 · xl 56px); the glyph scales with it.
`shape`	`"square" \| "circle"`	`"square"`	`square` corner radius scales with size; `circle` is fully rounded.
`className`	`string`	-	Extra classes merged via `cn`.

All other span props are forwarded. The featuredIconVariants CVA function is also exported.

Composition

FeaturedIcon is a leaf — its levers are the four variant axes. It is most often the leading element of a header:

<div className="flex items-center gap-3">
  <FeaturedIcon icon={RocketIcon} />
  <div>
    <p className="font-medium">Ready to launch</p>
    <p className="text-muted-foreground text-sm">Everything checks out.</p>
  </div>
</div>

Variations

Themes

<FeaturedIcon theme="light" icon={SparklesIcon} />
<FeaturedIcon theme="solid" icon={SparklesIcon} />
<FeaturedIcon theme="outline" icon={SparklesIcon} />

Semantic colors

<FeaturedIcon color="success" theme="light" icon={CheckIcon} />

Circle shape and sizes

<FeaturedIcon shape="circle" size="lg" icon={RocketIcon} />

Accessibility

Decorative by default: the rendered icon is marked aria-hidden, so the glyph is not announced. When the icon carries meaning that isn't conveyed by nearby text, add an accessible label on a wrapping element (e.g. aria-label).
Color is not the only signal: pair the semantic color with text or an icon shape that communicates the same state, so the meaning survives for users who can't perceive color.
Contrast: the semantic tokens ship with AA contrast against their tinted/solid backgrounds in both themes.

Card - common host for a FeaturedIcon in the header.
Badge - compact text label, the sibling status primitive.
Item - list row whose featured media variant uses the same treatment.

Featured Icon

On this page