📄 lucide/guide/packages/lucide-static

File: lucide-static.md | Updated: 11/15/2025

Source: https://lucide.dev/guide/packages/lucide-static

Skip to content

On this page

Lucide Static ​

=================================================================================

Static assets and utilities for Lucide icons that work without JavaScript frameworks. This package provides multiple formats including individual SVG files, SVG sprites, icon fonts, and Node.js utilities for server-side rendering and static site generation.

What you can accomplish:

  • Use individual SVG files as images or CSS background images
  • Implement icon fonts for CSS-based icon systems
  • Create SVG sprites for efficient icon loading in static sites
  • Import SVG strings in Node.js applications and server-side rendering
  • Build static websites and applications without JavaScript framework dependencies

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 ​

pnpmyarnnpmbun

sh

pnpm add lucide-static

sh

yarn add lucide-static

sh

npm install lucide-static

sh

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: ​

WebpackCDN

html

<!-- SVG file for a single icon -->
<img src="~lucide-static/icons/house.svg" />

html

<!-- SVG file for a single icon -->
<img src="https://unpkg.com/lucide-static@latest/icons/house.svg" />

In CSS: ​

WebpackCDN

css

.house-icon {
  background-image: url(~lucide-static/icons/house.svg);
}

css

.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):

WebpackVite

js

import arrowRightIcon from 'lucide-static/icons/arrow-right';

js

import arrowRightIcon from 'lucide-static/icons/arrow-right.svg?raw';

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): ​

html

<img src="lucide-static/sprite.svg#house" />

Inline usage: ​

html

<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:

css

.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:

xml

<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:

ViteWebpackCDNStatic asset

css

@import 'lucide-static/font/lucide.css';

css

@import ('~lucide-static/font/lucide.css');

html

<link rel="stylesheet" href="https://unpkg.com/lucide-static@latest/font/lucide.css" />

html

<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 .

html

<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 projects:

ESMCommonJs

js

import {MessageSquare} from 'lucide-static';

js

const {MessageSquare} = require('lucide-static');

Note: Each icon name is in PascalCase.

Express app example in Node.js ​

js

import express from 'express';
import {MessageSquare} from 'lucide-static';
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}`);
});