Icon

Lucide icon wrapper with consistent sizing.

displayiconvisual

Import

import { Icon } from "@/components/ui";

Basic Usage

Icon Preview

Code

tsx

<Icon name="Home" />

Sizes

Available in multiple sizes

1<div className="flex items-center gap-4">
2  <Icon name="Star" size="xs" />
3  <Icon name="Star" size="sm" />
4  <Icon name="Star" size="md" />
5  <Icon name="Star" size="lg" />
6  <Icon name="Star" size="xl" />
7</div>

Colors

Custom icon colors

1<div className="flex items-center gap-4">
2  <Icon name="Heart" color="red" />
3  <Icon name="Star" color="yellow" />
4  <Icon name="Check" color="green" />
5</div>

Common Icons

Frequently used icons

1<div className="flex items-center gap-4">
2  <Icon name="Home" />
3  <Icon name="Settings" />
4  <Icon name="User" />
5  <Icon name="Search" />
6  <Icon name="Menu" />
7  <Icon name="X" />
8</div>

Ready to use this component?

Configure your app with the features you need and download production-ready code.

Start Configuring