Icon

A wrapper component for Lucide icons that provides consistent sizing and styling across the design system.

Sizes

Large

Medium

Small

Common Icons

The Icon component supports all Lucide icons. Here are some commonly used icons:

House

Settings

User

Search

X

Check

Plus

Minus

ChevronLeft

ChevronRight

ArrowLeft

ArrowRight

Star

Heart

Bell

Mail

Pencil

Copy

Download

Upload

Share

Info

CircleAlert

CircleCheck

Usage

Pass the Lucide icon name as a string to the name prop. Browse all available icons at lucide.dev/icons.

interface IconProps {
  name: string; // Lucide icon name (e.g., "Star", "Home", "Settings")
  size?: "large" | "medium" | "small";
  className?: string;
}