Icon

Renders a lucide icon with Silver UI size and color tokens.

Examples

Default

<Icon color="primary" icon={Home} size="md" />

Sizes

<div className={styles.row}>
  {sizes.map(size => (
    <Icon key={size} {...args} size={size} />
  ))}
</div>

Colors

primary

secondary

tertiary

disabled

accent

success

error

warning

inherit

blue

red

green

gray

cyan

teal

yellow

orange

pink

purple

<div className={styles.grid}>
  {colors.map(color => (
    <div className={styles.colorItem} key={color}>
      <Icon {...args} color={color} />
      <Text>{color}</Text>
    </div>
  ))}
</div>

API

Icon

Renders a lucide icon with Silver UI size and color tokens.

Prop	Type	Default	Description
className	string	—	Additional CSS class names applied to the SVG element.
color	"error" | "info" | "success" | "warning" | "primary" | "red" | "orange" | "yellow" | "green" | "teal" | "cyan" | "blue" | "purple" | "pink" | "gray" | "secondary" | "accent" | "disabled" | "inherit" | "tertiary"	'inherit'	Color token used for the icon.
data-testid	string	—	Test ID applied to the SVG element.
icon*	IconComponent	—	Lucide icon component to render.
ref	Ref<SVGSVGElement>	—	Ref forwarded to the SVG element.
size	"sm" | "md" | "lg"	'md'	Icon size.
style	CSSProperties	—	Inline styles applied to the SVG element.