lucide-react

library1.8.0jsnpmunverified

Lucide React is the official React component library for Lucide, a comprehensive and modern open-source icon set. It provides a highly customizable collection of SVG icons designed for ease of use in React applications. Currently at version 1.8.0, the library maintains a rapid release cadence, frequently adding new icons and minor fixes, with a major V1 release signifying its stability and widespread adoption. Lucide aims to be a spiritual successor to Feather Icons, offering a larger and continuously expanding icon set, improved accessibility features, and better tree-shaking capabilities. It supports various customization options such as size, stroke width, color, and more, making it a flexible choice for modern web development.

web-framework

npm install lucide-react

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · LUCIDE-REACT

lucide-react

web-frameworkjavascriptv1.8.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Bell

✓ import { Bell } from 'lucide-react'

✗ import Bell from 'lucide-react'

All icons are named exports. Avoid default imports for individual icons.

LucideIcon

✓ import { type LucideIcon } from 'lucide-react'

✗ import { LucideIcon } from 'lucide-react'

Use 'import type' for TypeScript type imports to ensure they are stripped during compilation.

LucideProps

✓ import { type LucideProps } from 'lucide-react'

✗ import { LucideProps } from 'lucide-react'

Provides the TypeScript interface for icon component props (e.g., size, color, strokeWidth).

Demonstrates importing and rendering multiple Lucide icons in a React component with custom size, color, and stroke width props, including conditional rendering.

import React from 'react'; import { Bell, Settings, Sun, Moon } from 'lucide-react'; interface MyIconDisplayProps { theme: 'light' | 'dark'; } function MyIconDisplay({ theme }: MyIconDisplayProps) { const iconColor = theme === 'light' ? '#333' : '#eee'; return ( <div style={{ display: 'flex', gap: '20px', padding: '20px', background: theme === 'light' ? '#fff' : '#222', borderRadius: '8px' }}> <Bell size={24} color={iconColor} strokeWidth={2} /> <Settings size={32} color={iconColor} strokeWidth={1.5} /> {theme === 'light' ? ( <Sun size={28} color="orange" /> ) : ( <Moon size={28} color="lightblue" /> )} <p style={{ color: iconColor, margin: 0 }}>Lucide icons in action!</p> </div> ); } export default MyIconDisplay;

Debug

Known issues

breakingWhen migrating from older icon libraries like Feather Icons or very early versions of Lucide (pre-1.0.0), icon names, available icons, and component APIs have changed. Ensure you consult the official Lucide documentation for the correct icon names and usage patterns in `lucide-react` v1.x.

fix

Refer to the Lucide documentation (lucide.dev/guide/packages/lucide-react) for updated icon names and component usage. Expect to refactor icon imports and props.

affects: <1.0.0

gotchaThe `fix(lucide-react): Fix dynamic imports` change in v1.7.0 addressed an internal issue. If your application had highly customized dynamic icon loading mechanisms directly interacting with `lucide-react`'s internal module structure before this version, there's a minor possibility of unexpected behavior due to the fix.

fix

Upgrade to v1.7.0 or higher. If custom dynamic loading issues arise, review Lucide's official recommendations for dynamic loading or adjust your implementation to align with standard named imports.

affects: <1.7.0

gotchaImporting all icons using `import * as LucideIcons from 'lucide-react';` will prevent effective tree-shaking, leading to significantly larger bundle sizes. The library is designed for individual, named imports.

fix

Always use named imports for individual icons (e.g., `import { Bell, Settings } from 'lucide-react';`) to ensure only the necessary icons are included in your final bundle.

affects: >=1.0.0

Errors

Common errors & fixes

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

An icon component was imported incorrectly, often using a default import instead of a named import.

fix

Ensure you are using named imports for individual icons: `import { IconName } from 'lucide-react';`

Property 'someUnknownProp' does not exist on type 'IntrinsicAttributes & LucideProps'.

Attempting to pass a prop to a Lucide icon component that is not defined in `LucideProps` (e.g., `width` instead of `size`, or a misspelled prop).

fix

Consult the `LucideProps` type or official documentation for valid props. Common props include `size`, `color`, `strokeWidth`, and standard SVG attributes like `className`.

Upgrade

Version history

1.8.0latest on npm

Audit

Dependencies

reactrequiredPeer dependency for rendering React components.

Agent activity

90 hits · last 30 days

node

Resources

githubhttps://github.com/lucide-icons/lucide ↗

packagehttps://www.npmjs.com/package/lucide-react ↗

homepagehttps://lucide.dev ↗