Introduction

@implementjs/lucide packages every icon from Lucide as an implement component. Call one like any other element factory and you get a mountable <svg>:

import { Button } from "@implementjs/core";
import { HouseIcon } from "@implementjs/lucide";

Button({ onClick: goHome }, HouseIcon({ class: "size-4" }), "Home");

Add it next to core:

npm install @implementjs/core @implementjs/lucide

Browse the full set on lucide.dev/icons; every icon there ships here under its PascalCase name.

Only what you import

The package exports over two thousand icons, but each icon lives in its own module and the package is marked side-effect free, so bundlers keep only the ones your app imports. Importing HouseIcon costs you one icon, not the whole set.

Each icon's markup is parsed once and cloned per mount (the same template caching as the core Svg helper it is built on), so mounting the same icon many times stays cheap.

Where to next

• Usage covers naming, props, sizing, and color.
• Custom icons shows how to build your own icons in the same shape.