Featured Icon

Icon in a decorated container, for feature lists, empty states and modals.

Import

import { FeaturedIcon } from '@marbleui/ui'

Props

<FeaturedIcon>

Prop	Type	Default
icon *required	`ReactNode`	`—`
className	`string`	`—`
size	`'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`
variant	`'outline' \| 'dark' \| 'light' \| 'gradient' \| 'glass'`	`'light'`

Usage notes

Icon in a tinted or framed container that leads a feature list item, empty state or dialog. For a clickable icon use IconButton; for a person or entity use Avatar.

<HStack gap={4} align="start">
  <FeaturedIcon variant="outline" icon={<ShieldIcon />} />
  <VStack gap={1}>
    <h3 className="font-semibold">Audit log</h3>
    <p className="text-sm text-fg-muted">Every change is recorded with who made it and when.</p>
  </VStack>
</HStack>

It is always aria-hidden, so the heading or text next to it has to carry the meaning.
variant is light (default, soft accent circle), dark, outline (concentric rings), gradient (accent fill) or glass. glass is translucent and needs a colorful or image background behind it.
size is sm, md (default), lg or xl. It also sizes any svg inside (16–28 px), overriding the icon’s own size.
The outline rings reach 16 px beyond the box; leave room so a parent with overflow-hidden doesn’t clip them.

Example source · show

import { FeaturedIcon } from './featured-icon'

const I = ({ d }: { d: string }) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d={d} /></svg>
const icons = ['M13 2 3 14h9l-1 8 10-12h-9z', 'M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10', 'M3 3v18h18M7 16l4-4 4 4 5-6', 'M4 4h16v16H4zM4 7l8 6 8-6']
const variants = ['light', 'dark', 'outline', 'gradient', 'glass'] as const

export const styles = {
  Variants: () => (
    <div className="flex flex-col gap-6 rounded-xl bg-[radial-gradient(circle_at_30%_20%,var(--accent-soft),transparent_60%)] p-6">
      {variants.map((v) => <div key={v} className="flex items-center gap-6"><span className="w-20 text-xs text-fg-muted capitalize">{v}</span>{icons.map((d) => <FeaturedIcon key={d} variant={v} icon={<I d={d} />} />)}</div>)}
    </div>
  ),
  Sizes: () => <div className="flex items-end gap-6 p-6">{(['sm', 'md', 'lg', 'xl'] as const).map((s) => <FeaturedIcon key={s} size={s} variant="outline" icon={<I d={icons[0]!} />} />)}</div>,
}

Source: packages/ui/src/featured-icon/featured-icon.tsx

Catalog