Using lucide-react for consistent, beautiful icons in your applications
We recommend using lucide-react for all icons in your applications. Lucide provides a comprehensive set of beautiful, consistent icons that are optimized for React applications and follow modern design principles.
To install lucide-react run:
npm install lucide-reactyarn add lucide-reactpnpm add lucide-reactImport icons individually from lucide-react for optimal bundle size:
import { Home, User, Settings, Search } from "lucide-react"
export function MyComponent() {
return (
<div className="flex items-center gap-4">
<Home className="h-5 w-5" />
<User className="h-5 w-5" />
<Settings className="h-5 w-5" />
<Search className="h-5 w-5" />
</div>
)
}You can customize icons with standard React props and Tailwind classes:
<Check className="h-6 w-6 text-green-600" />
<X className="h-6 w-6 text-red-600" />
<AlertCircle className="h-6 w-6 text-yellow-600" />
<Info className="h-6 w-6 text-blue-600" />import {
Home,
User,
Settings,
Search,
Menu,
ChevronLeft,
ChevronRight
} from "lucide-react"import {
Plus,
Edit,
Trash2,
Download,
Upload,
Save,
Copy
} from "lucide-react"import {
Check,
X,
AlertCircle,
Info,
CheckCircle,
XCircle,
AlertTriangle
} from "lucide-react"import {
Mail,
Phone,
MessageCircle,
Send,
Bell,
Heart,
Star
} from "lucide-react"