PACKAGE · ICONS

lucide-react

A Lucide icon library package for React applications.

WEEKLY DOWNLOADS 44.8M
STARS 22.9K
FORKS 1.4K
OPEN ISSUES 561
GZIP SIZE 148.7 kB
UNPACKED SIZE 30.2 MB
LAST UPDATED 3mo ago
DOWNLOAD TRENDS

lucide-react downloads — last 12 months

Download trends for lucide-react1 download series from Jun 2025 to May 2026. Use left and right arrow keys to inspect monthly values.082.8M165.5M248.3M331.0MJun 2025SepDecMarMay 2026
lucide-react
ABOUT LUCIDE-REACT

Lucide-React provides a comprehensive SVG icon library for React applications, aiming to solve the challenge of reliably integrating and managing a vast collection of scalable vector graphics icons within a component-based UI.

It is built on the principles of modularity and open-source collaboration, drawing inspiration from Feather Icons and offering a community-driven approach to icon design and availability. The library is primarily designed for React developers who require a flexible and easily stylable set of icons.

The primary API involves importing individual icons as React components, such as `import { Camera } from 'lucide-react'`. These components accept standard SVG attributes like `className`, `size`, and `strokeWidth` for declarative styling and customization directly within your JSX.

Lucide-React integrates seamlessly into any modern React project, including those using Next.js or Create React App. Its component-based nature aligns perfectly with React's declarative UI paradigm, making it simple to manage icon states and dynamic rendering.

With an unpacked size of 30.2 MB and a gzipped bundle size of 148.7 kB, Lucide-React offers a substantial icon set while maintaining a manageable impact on application bundle size. The library is actively maintained, as indicated by its last update date of 2026-05-28, suggesting ongoing development and support.

While extensive, developers should be aware of the sheer number of icons available, which may lead to increased build times if not managed properly. For extremely minimalist use cases where only a handful of icons are needed, importing on-demand or a more specialized, smaller icon set might be considered to further optimize build artifacts.

WHEN TO USE
  • When integrating a diverse and actively maintained set of SVG icons into your React components.
  • When requiring granular control over icon styling through standard SVG attributes like `size`, `strokeWidth`, and `color` via component props.
  • When building user interfaces that need to dynamically change icons based on application state or user interactions.
  • When leveraging React Server Components and need to render SVGs declaratively on the server or client.
  • When migrating from icon sets like Feather Icons and seeking a similar API and design philosophy.
  • When prioritizing a large selection of icons with a structured import system for maintainability.
WHEN NOT TO USE
  • If your application requires only a very small, fixed set of icons (e.g., 1-3 icons) and absolute minimal bundle size is critical, a manual SVG inclusion or a much smaller icon library might be more appropriate.
  • If you are working in an environment where SVG rendering is heavily restricted or requires a different approach, such as templating engines outside the React ecosystem.
  • If the primary need is for bitmap-based icons rather than scalable vector graphics.
  • When seeking an icon library that ships as a single CSS file or a font-based icon solution, as Lucide-React provides individual React components.
  • If you need icons that are automatically optimized for specific image formats beyond SVG.

CORRECTIONS

Spot wrong data here?

A short note helps us fix it.

Anonymous · No account · No email back

COMPARISONS 3
lucide-react vs @phosphor-icons/react ★ 1.7K · 942.9K/wk lucide-react vs @heroicons/react ★ 23.6K · 1.7M/wk lucide-react vs @tabler/icons-react ★ 20.9K · 1.2M/wk