Icon

A unified icon component that wraps the full Heroicons library (outline and solid variants) along with brand icons for Google, Apple, Facebook, and Stripe. Provides consistent sizing, coloring, and accessibility attributes.

Import

import { Icon } from '@wavebooking/aqua-fusion';

Preview

Live PreviewOpen in Storybook

Loading preview...

Usage

<Icon name="HomeIcon" />

With size and color

<Icon name="CheckCircleIcon" size="lg" color="success" />

Solid variant

<Icon name="HeartIcon" variant="solid" color="error" />

Brand icons

<Icon name="google" size="lg" />
<Icon name="stripe" size="lg" />
<Icon name="apple" size="lg" />
<Icon name="facebook" size="lg" />

Spinning loader

<Icon name="ArrowPathIcon" spin />

With accessibility label

When an icon carries meaning rather than being purely decorative, provide a label to set aria-label and role="img".

<Icon name="BellIcon" label="Notifications" />

Props

Prop	Type	Default	Description
`name`*	IconName	-	The icon to render. Accepts any Heroicon name (e.g. "HomeIcon") or a brand name ("google", "apple", "facebook", "stripe").
`variant`	'outline' \| 'solid'	`'outline'`	Heroicon style variant. Only applies to Heroicons, not brand icons.
`size`	'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl'	`'md'`	Icon size. Maps to 12px through 48px.
`color`	'default' \| 'muted' \| 'primary' \| 'success' \| 'warning' \| 'error' \| 'info' \| 'inverse' \| 'inherit'	`'inherit'`	Semantic color variant for the icon.
`label`	string	-	Accessible label. When provided, sets aria-label and role="img". When omitted, the icon is treated as decorative (aria-hidden).
`spin`	boolean	`false`	Apply a CSS spin animation. Useful for loading indicators.
`className`	string	-	Additional CSS classes.