4,193 icons for React in matched outline and filled pairs, with Lucide-compatible props
Import one icon by name, or load any of them on demand at runtime.
Demo
Search every icon by name or category and copy the import.
Install
npm install blode-icons-react
Quickstart
import { ChevronDownIcon } from "blode-icons-react";
export function Disclosure() {
return <ChevronDownIcon size={20} strokeWidth={1.5} />;
}
Import paths
// The whole library, every name carrying an Icon suffix
import { ChevronDownIcon, SparkleIcon } from "blode-icons-react";
// Any icon by name, code-split and loaded on demand
import { DynamicIcon } from "blode-icons-react/dynamic";
// A single icon, for the tightest bundle
import ChevronDownIcon from "blode-icons-react/icons/chevron-down";
<DynamicIcon name="SearchIcon" size={24} />;
Props
Every icon forwards its ref and accepts any SVG attribute, plus these three.
| Prop | Default | Description |
|---|
size | 24 | Sets both width and height |
color | currentColor | Passed to the SVG color attribute |
strokeWidth | 2 | Outline thickness |
Notes
- Common icons are also exported under their
lucide-react names, so ChevronDown and Search resolve without the suffix.
LucideProps and LucideIcon are exported, and match the lucide-react types of the same name.- Every icon is generated from SVGO-optimised source, so nothing arrives with editor cruft in it.
- Part of Blode.
License
MIT
Crafted by Matthew Blode
