Lucide Icons

⚠️ Upgrading to Lucide React v1.0.0+?

The Lucide React 1.0 release introduced major breaking changes and renamed several key icons (for example, BarChart2 is now ChartBar, PlusCircle is BadgePlus or CirclePlus, and Instagram or Linkedin exports might be missing/modified).

Avoid Next.js compilation issues by reading our comprehensive step-by-step upgrade guide.

The ISC License is a highly permissive open-source license, functionally equivalent to the MIT and BSD 2-Clause licenses but written in simpler language. You are completely free to use Lucide Icons for any commercial or private projects without royalties or fees. You can redistribute the original or modified icons without restrictions. The only condition is preserving the copyright notice and this permission notice in all copies.

npm install lucide-react

npm install lucide-react

// Note: Works with both App Router and Pages Router out of the box. No additional configuration needed.

npm install lucide-vue-next

npm install lucide-svelte

npm install lucide

import { Home, Settings, User } from 'lucide-react'

export default function App() {
  return (
    <div>
      <Home size={24} />
      <Settings size={24} color="#6366f1" />
      <User size={24} strokeWidth={1.5} />
    </div>
  )
}

import { Bell } from 'lucide-react'

export default function Navbar() {
  return (
    <button className="flex items-center gap-2">
      <Bell className="h-5 w-5 text-gray-500" />
      <span>Notifications</span>
    </button>
  )
}

// app/page.tsx
import { ArrowRight, Github, Star } from 'lucide-react'

export default function Page() {
  return (
    <main>
      <h1>Welcome</h1>
      <a href="/docs">
        Get Started <ArrowRight size={16} />
      </a>
    </main>
  )
}