Lucide: a 1600+ SVG icon library with first-party packages for React, Vue, Svelte and more

The problem Lucide solves for multi-framework teams

Most projects do not need an icon library. They need one icon library that survives a framework migration, a design review, and a second product built by a different team. That is the gap Lucide targets: 1600+ vector (svg) files, described in the README as an open-source icon library for displaying icons and symbols in digital and non-digital projects, distributed through official packages rather than one generic bundle.

The audience is concrete. Designers who pull icons into Figma through the Lucide plugin, and developers who import the same shapes as React, Vue, Svelte, Solid, Preact, Angular, Astro or React Native components. A team running a React app and an Astro marketing site can keep one visual language instead of reconciling two icon sets at every redesign.

Lucide is a fork of Feather Icons, and that lineage explains the house style: consistent stroke-based outlines drawn on a shared grid. The project is community-made, and the repository carries categories/, icon.schema.json and brand-stopwords.json, which suggests icon metadata and naming are validated in the build rather than left to reviewers.

How the packages and the repository are organised

The repository is a pnpm workspace. The root package.json is marked private and its build script fans out across the framework packages:

{
  "private": true,
  "type": "module",
  "scripts": {
    "build": "pnpm -r --filter './packages/**' build",
    "test": "pnpm -r --filter './packages/**' test"
  }
}

Each framework gets a filter target of its own, so lucide-react, lucide-vue, lucide-svelte, lucide-solid, lucide-preact, lucide-react-native, lucide-static, lucide-angular and lucide-astro are built and tested independently. Source SVGs live under icons/, and scripts such as optimizeSvgs.mts, checkIconsAndCategories.mts and addMissingIconJsonFiles.mts run over them. There is also a prettier-plugin-lucide-svg.mjs at the root, which points to SVG formatting being enforced by tooling rather than convention.

The data flow is therefore: an SVG plus its metadata JSON in the repository, validated and optimised by scripts, then compiled per framework into the published packages. That is why the same icon name resolves in React and in Vue. It also explains why a new icon is a repository contribution rather than something you patch locally. The README points contributors at CONTRIBUTING.md for that path.

Installing lucide-react and rendering a first icon

The README lists the React package as lucide-react, with its guide at lucide.dev/guide/react. Install it from npm:

npm install lucide-react

The README's packages table gives the package name and the guide link; the guide page itself is where the import and prop details live, so read it before wiring icons into a component tree. What you should expect from the React package is icon components that render inline SVG and inherit the surrounding colour, the behaviour the library is built around.

If you are not on a component framework, the README lists lucide-static for plain SVG output, and the guide URL follows the same pattern at lucide.dev/guide/static. For design work, the Figma plugin is installed from its Figma community page, not from npm.

Brand logos are out of scope, and that is a hard boundary

The README is unusually blunt: Lucide does not accept brand logos, and does not plan to add them, citing legal restrictions, design consistency concerns and practical maintenance reasons. A separate BRAND_LOGOS_STATEMENT.md holds the full argument, and brand-stopwords.json sits at the repository root, which means the refusal is encoded in tooling rather than left to maintainer discretion.

This is the case where Lucide is the wrong tool. If your interface needs a GitHub mark, a payment provider logo, or a social network glyph, you will not find it here, and a pull request adding it will be closed. Teams often discover this mid-project after standardising on Lucide for everything else, then have to bolt on a second source purely for brand marks. Plan for that split before you migrate, not after.

The second limitation is stylistic. The library is built around one outline style. If your design system depends on filled, duotone or multicolour icons, Lucide gives you the outline family and little else, and mixing in another set reintroduces exactly the inconsistency you adopted Lucide to remove.

Lucide compared with Font Awesome and Material Symbols

Font Awesome and Material Symbols are the two libraries most teams weigh against Lucide, and the difference is structural rather than aesthetic. Font Awesome ships a much wider catalogue that includes brand marks, plus a font-based delivery path where icons are glyphs resolved by CSS class. Material Symbols follows the same font-and-class model and is tied to Google's design language.

Lucide takes the opposite route on both counts. Icons are individual SVG files compiled into per-framework component packages, so you import the specific icons you use and the bundler can drop the rest. There is no icon font in the packages table. And the catalogue is deliberately narrower: outline icons only, no brands.

The trade-off is real in both directions. A font-based library is trivial to drop into server-rendered HTML with a class name, while Lucide's static package expects you to handle the SVG markup yourself. In exchange, Lucide gives you typed component imports in nine frameworks from one source repository, and a naming and metadata schema that keeps the set internally consistent. If your priority is breadth including brands, Lucide loses. If your priority is one consistent outline set across a React app, a Vue admin panel and an Astro site, it wins on that axis.

Licence, maintenance and the cost of upgrading

The README states Lucide is totally free for commercial use and personal use, licensed under the ISC License, and the repository root carries a LICENSE file. ISC is a permissive licence in the same family as MIT: it permits commercial and personal use. The repository metadata reports the licence as NOASSERTION, which is a GitHub classification artefact rather than a second licence, so read the LICENSE file itself if your legal review requires certainty. Nothing here is legal advice.

On cadence, the release list shows 1.47.0 on 2026-09-17, 1.46.0 on 2026-09-14 and 1.45.0 on 2026-09-11, and the last push to the repository was on 2026-09-19. Releases are frequent and versioned, which cuts both ways: you get new icons quickly, and you also get a steady stream of minor bumps to absorb. The README does not document a rollback procedure or a long-term support branch, so pinning a version in your lockfile is the practical control.

The upgrade cost is mostly mechanical. Because icons are named imports, a renamed or removed icon shows up as a compile error rather than a silently blank space, which is the better failure mode. The heavier cost sits on contributors: adding an icon means touching the SVG, its metadata JSON, categories and the schema checks, then running the workspace build and test scripts. For consumers, the work is a dependency bump plus a rebuild.

Editorial conclusion

Adopt Lucide if you need one icon vocabulary across several frameworks and can accept its outline-only, no-brand-logo scope. Skip it if your product depends on third-party brand marks or filled/duotone icon styles, because the README states brand logos are not accepted and will not be added. Before committing, check the packages table for the exact package name for your framework, confirm the ISC licence text in LICENSE, and read BRAND_LOGOS_STATEMENT.md to see whether your icon needs fall outside what the project will draw.

Frequently asked questions

Official sources

1. Issues
2. lucide-icons/lucide on GitHub
3. Project website
4. README
5. Releases