Lucide

Language: JavaScript

Icons

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.

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.

Installation

npm: npm install lucide-react

yarn: yarn add lucide-react

cdn: <script src='https://unpkg.com/lucide/dist/umd/lucide.min.js'></script>

manual: Download individual SVG icons or the full package and include them in your project.

Usage

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.

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.

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.

Error Handling

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.

Official Docs Github