Shared/Icon Wrapper

Icon Wrapper

A standardized icon renderer that maps semantic size tokens to Tailwind size-* utilities. Accepts both lucide-react icons and custom SVGR components. Handles accessibility via aria-label / aria-hidden.

Sizes

All six semantic size tokens mapped to pixel values.

xs12px

sm16px

md20px

lg24px

xl32px

2xl40px

Icons Gallery

Any lucide-react icon works — pass the component reference directly.

Stroke Width

Adjust the lucide stroke weight for different visual styles.

sw 1

sw 1.5

sw 2

sw 2.5

Color Tokens

Override color via className using semantic tokens.

primary

muted

destructive

foreground

Accessibility

Decorative icons use aria-hidden. Interactive icons require aria-label.

Decorative (aria-hidden)

No aria-label — rendered with aria-hidden="true".

This icon is decorative

Meaningful (aria-label)

Pass aria-label when the icon conveys meaning without adjacent text.