Filled Lucide React

Filled (solid) versions of every Lucide icon for React. Same icon names, same 24×24 grid and the same API as lucide-react.

Installation

pnpm add @filled-lucide/react

npm install @filled-lucide/react

Usage

import { House, Heart } from '@filled-lucide/react';

export default function App() {
  return (
    <House
      size={32}
      color="#e11d48"
    />
  );
}

color sets the icon's fill. strokeWidth and absoluteStrokeWidth are accepted for compatibility but have no visible effect.

Filled and outline side by side

Every icon is also exported with a Filled prefix (FilledHouse, FilledX, …), so you can mix it with the outline icons from lucide-react:

import { House } from 'lucide-react';
import { FilledHouse } from '@filled-lucide/react';

<nav>{active ? <FilledHouse /> : <House />}</nav>;

Drop-in replacement for lucide-react

Install this package under the upstream name to switch an entire app, including libraries that import lucide-react (such as shadcn/ui), to filled icons without changing an import:

pnpm add lucide-react@npm:@filled-lucide/react

Versions follow upstream: @filled-lucide/[email protected] has the same icons as [email protected].

Documentation

The API is identical to upstream, so the Lucide documentation applies. See the Filled Lucide repository for details about the filled set.

License

ISC. Based on Lucide, © Lucide Contributors.

Filled Lucide is an independent project, not affiliated with or endorsed by the Lucide team. Report problems with the filled icons at linus-sch/filled-lucide, not to upstream Lucide.