Skip to content

Lucide

UI & GraphicsIconsJavaScript
Official docs ↗GitHub ↗

What it is

Lucide is a simple, consistent, and customizable icon library for web projects. It offers a wide range of open-source, SVG-based icons that are lightweight and easy to integrate.

Lucide icons can be used as React components, SVG elements, or directly in HTML. They are easily customizable via props like `size`, `color`, and `strokeWidth`, or via CSS classes.

Installation

npm install lucide-react

Getting started

The smallest useful thing you can do with it, and what each part means.

Using a React icon
import { Activity } from 'lucide-react';

function App() {
  return <Activity size={24} color='blue' />;
}
Imports the `Activity` icon from Lucide and renders it in a React component with a specific size and color.
Inline SVG usage
<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-activity'>
  <path d='M22 12h-4l-3 8-4-16-3 8H2'></path>
</svg>
Uses Lucide icon directly as an inline SVG element, which can be styled via CSS.

Advanced usage

Where the library earns its place over a simpler alternative.

Customizing stroke and color
<Activity strokeWidth={1.5} color='red' size={32} />
Demonstrates adjusting stroke width, color, and size for a Lucide icon in React.
Using multiple icons in a component
import { Activity, Airplay } from 'lucide-react';

function IconRow() {
  return (
    <div>
      <Activity size={20} />
      <Airplay size={20} />
    </div>
  );
}
Shows how to import and render multiple Lucide icons together in a React component.
Applying CSS classes
<Activity className='text-green-500 hover:text-green-700 transition-all' size={24} />
Demonstrates using Tailwind CSS classes (or any CSS) to style Lucide icons dynamically.

Errors and fixes

The failures you are most likely to hit, and what actually resolves them.

Icon not rendered
Ensure the icon is correctly imported and exists in the Lucide package.
Incorrect size or color
Verify that the props `size`, `color`, and `strokeWidth` are applied correctly.
Bundle size too large
Use tree-shaking or import individual icons instead of the entire package.

Best practices

  • Import only the icons you need to reduce bundle size.
  • Use size and color props for consistent styling across your app.
  • Leverage CSS classes for hover, transitions, and responsive adjustments.
  • Use inline SVG or React components depending on your framework for maximum flexibility.
  • Keep icons accessible by providing `aria-label` or `title` when necessary.

Background

Why it exists, and what it was reacting to.

Lucide was created as a fork and improvement of the Feather Icons library, focusing on accessibility, customizability, and modern design principles. It is designed to be developer-friendly, with scalable SVG icons that can be styled with CSS and adapted to any project.

Related libraries

Others in UI & Graphics for JavaScript.

← All JavaScript librariesJavaScript guide