Icon

v1.0.0

bash

npm install @hua-labs/hua

tsx

import { Icon, IconProvider } from "@hua-labs/hua";

size={16, 20, 24, 32, 48}

thin

light

regular

bold

duotone

fill

default

primary

secondary

success

warning

error

muted

spin

pulse

bounce

Phosphor

Lucide

Iconsax

Lucide

heart

Heart

arrow-left

arrowLeft

Phosphor

heart

Heart

arrow-left

Iconsax

heart

Heart

HEART

Props

Icon


`name*`	`AllIconName`	-	Icon name (e.g., 'heart', 'user', 'settings')
`size`	`number \| string`	`20`	Icon size in pixels or CSS value
`provider`	`"lucide" \| "phosphor" \| "iconsax"`	`"phosphor"`	Icon provider to use (overrides global setting)
`weight`	`"thin" \| "light" \| "regular" \| "bold" \| "duotone" \| "fill"`	`"regular"`	Phosphor icon weight
`variant`	`"default" \| "primary" \| "secondary" \| "success" \| "warning" \| "error" \| "muted" \| "inherit"`	`"default"`	Color variant
`spin`	`boolean`	`false`	Enable spin animation
`pulse`	`boolean`	`false`	Enable pulse animation
`bounce`	`boolean`	`false`	Enable bounce animation
`animated`	`boolean`	`false`	Enable animation (general)
`emotion`	`"happy" \| "sad" \| "neutral" \| "excited" \| "angry" \| "love" \| "like" \| "dislike"`	-	Emotion icon type (happy, sad, angry, etc.)
`status`	`"success" \| "error" \| "warning" \| "info" \| "loading" \| "locked" \| "unlocked" \| "visible" \| "hidden"`	-	Status icon type (loading, success, error, etc.)
`aria-label`	`string`	-	Accessible label for meaningful icons
`aria-hidden`	`boolean`	`true`	Hide from screen readers (decorative icons)

IconProvider


`set`	`"lucide" \| "phosphor" \| "iconsax"`	`"phosphor"`	Default icon set for all child icons
`weight`	`"thin" \| "light" \| "regular" \| "bold" \| "duotone" \| "fill"`	`"regular"`	Default Phosphor weight
`size`	`number`	`20`	Default icon size
`color`	`string`	`"currentColor"`	Default icon color
`strokeWidth`	`number`	`1.25`	Default stroke width (Lucide/Iconsax)

BasicIcons.tsxtsx

import { Icon } from '@hua-labs/hua-ui';

export function BasicIcons() {
  return (
    <div className="flex gap-4">
      <Icon name="heart" />
      <Icon name="user" />
      <Icon name="settings" />
      <Icon name="bell" />
      <Icon name="search" />
    </div>
  );
}

IconSizes.tsxtsx

import { Icon } from '@hua-labs/hua-ui';

export function IconSizes() {
  return (
    <div className="flex items-center gap-4">
      <Icon name="star" size={16} />
      <Icon name="star" size={20} />
      <Icon name="star" size={24} />
      <Icon name="star" size={32} />
      <Icon name="star" size={48} />
    </div>
  );
}

ProviderExample.tsxtsx

import { Icon, IconProvider } from '@hua-labs/hua-ui';

export function ProviderExample() {
  return (
    <div className="space-y-6">
      {/* Phosphor (default) - weight supported */}
      <IconProvider set="phosphor" weight="duotone" size={24}>
        <div className="flex gap-4">
          <Icon name="heart" />
          <Icon name="user" />
          <Icon name="bell" />
        </div>
      </IconProvider>

      {/* Lucide - strokeWidth supported */}
      <IconProvider set="lucide" size={24} strokeWidth={1.5}>
        <div className="flex gap-4">
          <Icon name="heart" />
          <Icon name="user" />
          <Icon name="bell" />
        </div>
      </IconProvider>

      {/* Iconsax */}
      <IconProvider set="iconsax" size={24}>
        <div className="flex gap-4">
          <Icon name="heart" />
          <Icon name="user" />
          <Icon name="bell" />
        </div>
      </IconProvider>
    </div>
  );
}

PhosphorWeights.tsxtsx

import { Icon } from '@hua-labs/hua-ui';

// Phosphor only - 6 weights
export function PhosphorWeights() {
  return (
    <div className="flex gap-4">
      <Icon name="heart" weight="thin" />
      <Icon name="heart" weight="light" />
      <Icon name="heart" weight="regular" />
      <Icon name="heart" weight="bold" />
      <Icon name="heart" weight="duotone" />
      <Icon name="heart" weight="fill" />
    </div>
  );
}

ColorVariants.tsxtsx

import { Icon } from '@hua-labs/hua-ui';

export function ColorVariants() {
  return (
    <div className="flex gap-4">
      <Icon name="circle" variant="default" />
      <Icon name="circle" variant="primary" />
      <Icon name="circle" variant="secondary" />
      <Icon name="circle" variant="success" />
      <Icon name="circle" variant="warning" />
      <Icon name="circle" variant="error" />
      <Icon name="circle" variant="muted" />
    </div>
  );
}

AnimatedIcons.tsxtsx

import { Icon } from '@hua-labs/hua-ui';

export function AnimatedIcons() {
  return (
    <div className="flex gap-6">
      {/* Spin animation */}
      <Icon name="loader" spin />

      {/* Pulse animation */}
      <Icon name="heart" pulse variant="error" />

      {/* Bounce animation */}
      <Icon name="bell" bounce variant="warning" />
    </div>
  );
}

SpecialIcons.tsxtsx

import {
  Icon,
  EmotionIcon,
  StatusIcon,
  LoadingIcon,
  SuccessIcon,
  ErrorIcon
} from '@hua-labs/hua-ui';

export function SpecialIcons() {
  return (
    <div className="space-y-4">
      {/* Emotion icons */}
      <div className="flex gap-4">
        <EmotionIcon emotion="happy" />
        <EmotionIcon emotion="sad" />
        <EmotionIcon emotion="angry" />
      </div>

      {/* Status icons */}
      <div className="flex gap-4">
        <StatusIcon status="loading" spin />
        <StatusIcon status="success" variant="success" />
        <StatusIcon status="error" variant="error" />
      </div>

      {/* Preset icons */}
      <div className="flex gap-4">
        <LoadingIcon />
        <SuccessIcon />
        <ErrorIcon />
      </div>
    </div>
  );
}

AccessibleIcons.tsxtsx

import { Icon } from '@hua-labs/hua-ui';

export function AccessibleIcons() {
  return (
    <div className="flex gap-4">
      {/* Decorative icon (default) - hidden from screen readers */}
      <span>
        <Icon name="star" aria-hidden />
        Premium
      </span>

      {/* Meaningful icon - provide label */}
      <button>
        <Icon name="trash" aria-label="Delete" />
      </button>

      {/* Search button */}
      <button>
        <Icon name="search" aria-label="Search" />
      </button>
    </div>
  );
}

	Phosphor	Lucide	Iconsax
	6,000+	1,400+	1,000+
Weight/Style	6 weights	strokeWidth	Linear/Bold
	✅	-	-

•Decorative Icons: Icons without meaning should have aria-hidden='true' (default behavior)
•Meaningful Icons: Provide aria-label for icons that convey information
•Button Icons: Icon-only buttons need accessible labels via aria-label
•Color Contrast: Icon colors should maintain sufficient contrast with background

Alert Card