a87ac013f7
* docs(packages/lucide-static): update docs for better clarity * docs(packages/lucide-static): fix node.js heading level
4.9 KiB
Lucide Static
This package includes the following implementations of Lucide icons:
- Individual SVG files
- SVG sprite
- Icon font files
- A JavaScript library exporting SVG strings
Who is this for?
lucide-static is suitable for very specific use cases where you want to use Lucide icons without relying on a JavaScript framework or component system. It's ideal for:
- Projects that use icon fonts with plain CSS or utility-first frameworks
- Embedding raw SVG files or sprites directly in HTML
- Using SVGs as CSS background images
- Importing SVG strings into Node.js (CommonJS) environments
::: danger
Not recommended for production
SVG sprites and icon fonts include all icons, which can significantly increase your app's bundle size and load time.
For production environments, we recommend using a bundler with tree-shaking support to include only the icons you actually use. Consider using:
Installation
::: code-group
pnpm install lucide-static
yarn add lucide-static
npm install lucide-static
bun add lucide-static
:::
SVG Files
You can use standalone SVG files or SVG sprites in several ways.
Check out our codesandbox example.
SVG file as image
In HTML:
::: code-group
<!-- SVG file for a single icon -->
<img src="~lucide-static/icons/house.svg" />
<!-- SVG file for a single icon -->
<img src="https://unpkg.com/lucide-static@latest/icons/house.svg" />
:::
In CSS:
::: code-group
.house-icon {
background-image: url(~lucide-static/icons/house.svg);
}
.house-icon {
background-image: url(https://unpkg.com/lucide-static@latest/icons/house.svg);
}
:::
Make sure you have the correct Webpack loader configured, such as url-loader.
SVG file as string
To import an SVG as a string (e.g., for templating):
import arrowRightIcon from 'lucide-static/icons/arrow-right';
You'll need an SVG loader like svg-inline-loader.
Using the SVG sprite
:::danger Not intended for production use. :::
You may also need an additional SVG loader to handle this.
Basic sprite usage (not production-optimized):
<img src="lucide-static/sprite.svg#house" />
Inline usage:
<svg
width="24"
height="24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<use href="#alert-triangle" />
</svg>
<!-- sprite SVG -->
<svg>...</svg>
Inline with CSS helper class
If you'd prefer, you can use CSS to hold your base SVG properties:
.lucide-icon {
width: 24px;
height: 24px;
stroke: currentColor;
fill: none;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
...and update the SVG as follows:
<svg
xmlns="http://www.w3.org/2000/svg"
class="lucide-icon"
>
<use href="#triangle-alert" />
</svg>
<!-- sprite SVG -->
<svg>...</svg>
Icon font
:::danger Not intended for production use. :::
Lucide icons are also available as a web font. To use them, you first need to include the corresponding stylesheet:
::: code-group
@import 'lucide-static/font/lucide.css';
@import ('~lucide-static/font/lucide.css');
<link rel="stylesheet" href="https://unpkg.com/lucide-static@latest/font/lucide.css" />
<link rel="stylesheet" href="/your/path/to/lucide.css" />
:::
Once included, use the format icon-{kebab-case-name}. You can copy icon names from the Lucide Icons page.
<div class="icon-house"></div>
If you're not using a package manager, you can download the font files directly from the latest release.
Node.js
You can also import Lucide icons in Node.js (CommonJS) projects:
const {messageSquare} = require('lucide-static/lib');
Note: Each icon name is in camelCase.
Express app example in Node.js
const express = require('express');
const {messageSquare} = require('lucide-static/lib');
const app = express();
const port = 3000;
app.get('/', (req, res) => {
res.send(`
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>Lucide Icons</h1>
<p>This is a Lucide icon ${messageSquare}</p>
</body>
</html>
`);
});
app.listen(port, () => {
console.log(`Example app listening at http://localhost:${port}`);
});