Icon

Consistent stroke-icon wrapper: currentColor, sizes, and correct a11y (aria-hidden unless labelled).

Import

import { Icon } from '@marbleui/ui'

Props

<Icon>

Prop	Type	Default	Description
children	`ReactNode`	`—`
label	`string`	`—`	Meaningful icons get a label; decorative ones are hidden from assistive tech.
path	`string \| string[]`	`—`	SVG path data (24×24 stroke icons, Lucide-style). Or pass children for custom SVG content.
size	`number \| 'xs' \| 'sm' \| 'md' \| 'lg'`	`'sm'`
strokeWidth	`number`	`2`

Also accepts HTML element props (485).

Usage notes

Wrapper for 24×24 stroke icons that handles size, currentColor and hiding decorative icons from screen readers. No icon set is bundled: pass path data or your own SVG children. For an icon in a tinted container use FeaturedIcon; for a clickable icon use IconButton.

<Icon path="M6 8a6 6 0 1 1 12 0c0 7 3 9 3 9H3s3-2 3-9M10.3 21a1.94 1.94 0 0 0 3.4 0" className="text-accent-ink" />
<Icon path="m5 12 5 5L20 7" size="md" label="Verified" className="text-success-fg" />

size is xs, sm (default), md or lg (12–24 px), or a number of pixels. strokeWidth defaults to 2; path also takes an array for multi-path icons.
Without label the SVG is aria-hidden; with it, it becomes role="img" with that name. Inside an IconButton, label the button and leave the icon unlabelled.
Color comes from text-* classes. Other SVG attributes pass through, such as fill="currentColor" for filled icons.

Example source · show

import { Icon } from './icon'

const paths = {
  home: 'M3 10.5 12 3l9 7.5V20a1 1 0 0 1-1 1h-5v-6h-6v6H4a1 1 0 0 1-1-1z',
  bell: 'M6 8a6 6 0 1 1 12 0c0 7 3 9 3 9H3s3-2 3-9M10.3 21a1.94 1.94 0 0 0 3.4 0',
  heart: 'M19 14c1.5-1.4 3-3.2 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.8 0-3 .5-4.5 2-1.5-1.5-2.7-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.1 3 5.5l7 7z',
  check: 'm5 12 5 5L20 7',
}

export const styles = {
  Sizes: () => (
    <div className="flex items-end gap-4 text-fg">
      {(['xs', 'sm', 'md', 'lg'] as const).map((s) => <Icon key={s} path={paths.home} size={s} />)}
      <Icon path={paths.home} size={40} strokeWidth={1.5} />
    </div>
  ),
  Colors: () => (
    <div className="flex gap-4">
      <Icon path={paths.bell} size="md" className="text-accent-ink" />
      <Icon path={paths.heart} size="md" className="fill-danger/20 text-danger-fg" />
      <Icon path={paths.check} size="md" className="text-success-fg" label="Verified" />
    </div>
  ),
}

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

Catalog