@react-zero-ui/icon-sprite

React icons. SVG sprite output.

Full Lucide and Tabler icon support. At build time only the icons you actually used are packed into one cached SVG sprite.

Zero runtime6,800+ icons~62% smaller HTML

Read the README View on NPM

How it works

One component. Two outputs.

Use just like Lucide. In development it renders the real svg icon, without the aggressive sprite caching that normally forces you to reopen the tab to see edits to an icon. At build time only icons you used are packed into one cached SVG sprite.

What you write

import { Settings } from "@react-zero-ui/icon-sprite";

<Settings size={24} className="text-fd-primary" />

import { Settings } from "@react-zero-ui/icon-sprite";<Settings size={24} className="text-fd-primary" />

Development · real component

<!-- dev: renders the real Lucide component -->
<svg
  xmlns="http://www.w3.org/2000/svg"
  width="24"
  height="24"
  viewBox="0 0 24 24"
>
  <path d="M9.671 4.136a2.34 2.34 0 0 1
	4.659 0 2.34 2.34 0 0 0 3.319 1.915
	2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831
	2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319
	1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915
	2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34
	2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.32-1.915" />
  <circle cx="12" cy="12" r="3" />
</svg>

<!-- dev: renders the real Lucide component --><svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24">  <path d="M9.671 4.136a2.34 2.34 0 0 1	4.659 0 2.34 2.34 0 0 0 3.319 1.915	2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831	2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319	1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915	2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34	2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.32-1.915" />  <circle cx="12" cy="12" r="3" /></svg>

Production · sprite reference

<!-- prod: after npx zero-icons -->
<svg
  width="24"
  height="24"
>
  <use href="/icons.svg#settings" />
</svg>

<!-- prod: after npx zero-icons --><svg  width="24"  height="24">  <use href="/icons.svg#settings" /></svg>

Benchmark

Same icons. Smaller HTML.

This benchmark renders the same 150-icon UI twice: once with normal inline React SVG icons, and once with generated sprite output from @react-zero-ui/icon-sprite.

Lucide React HTML

19.5kb

Repeated inline SVG markup in the page output.

Sprite HTML

7.5kb

Small SVG references pointing to one generated sprite.

HTML saved

62%

Measured against the same icon count and page structure.

Metric	lucide-react	@react-zero-ui/icon-sprite	Result
Rendered icons	150	150	Same UI
HTML output	19.5kb	7.5kb	-62%
SVG strategy	Inline SVG	Sprite <use />	Less repeated markup
Browser caching	Per document	Shared sprite file	Reusable

The benefit grows on icon-heavy pages such as dashboards, tables, menus, pricing pages, admin panels, and documentation sites where the same icons are rendered many times.

Lucide and Tabler, one import path.

Lucide names and Tabler's Icon* names are built in, with support for your own SVGs under /public/zero-ui-icons.

6,800+ icons

No sprite busywork.

Write component imports during development. Add zero-icons before your production build. The scanner handles the sprite sheet.

1. Import components

Keep the same prop shape you expect from icon libraries.

2. Add the prebuild hook

zero-icons scans for used Lucide, Tabler, and custom icons before every production build.

3. Ship one sprite

Browsers cache the sprite while your HTML stays small.

import { Settings } from "@react-zero-ui/icon-sprite";

<Settings size={24} className="text-fd-primary" />

import { Settings } from "@react-zero-ui/icon-sprite";<Settings size={24} className="text-fd-primary" />

{
  "scripts": {
    "prebuild": "zero-icons",
   }
}

{  "scripts": {    "prebuild": "zero-icons",   }}