Skip to content

Lucide Static

This package include the following lucide implementations:

  • All SVG files
  • SVG sprite
  • Icon fonts
  • JavaScript library containing strings of SVGs.

Why lucide-static?

This package is suitable for specific use cases, for example if you want to use icon fonts, SVG sprites, normal SVGs or Common.js SVG strings in your javascript project.

WARNING

While they can be useful for prototyping, it is not recommended to use the SVG sprites or icon fonts provided by this package in production web apps as all the available icons are included in the app, hence increasing loading time and data usage. We recommend to use a bundler and tree-shaking to make sure only the icons you use are bundled with your app. Tree-shaking is only available in these packages: lucide, lucide-react, lucide-vue, lucide-vue-next, lucide-angular, lucide-preact

Installation

Package Managers

sh
pnpm install lucide-static
pnpm install lucide-static
sh
yarn add lucide-static
yarn add lucide-static
sh
npm install lucide-static
npm install lucide-static

CDN

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

<!-- Icon font -->
<style>
  @font-face {
    font-family: 'LucideIcons';
    src: url(https://unpkg.com/lucide-static@latest/font/Lucide.ttf) format('truetype');
  }
</style>
<!-- SVG file for a single icon -->
<img src="https://unpkg.com/lucide-static@latest/icons/home.svg" />

<!-- Icon font -->
<style>
  @font-face {
    font-family: 'LucideIcons';
    src: url(https://unpkg.com/lucide-static@latest/font/Lucide.ttf) format('truetype');
  }
</style>

Usage

Check out the codesandbox examples.

SVG Files

SVG file as image

To use it in for example html:

html
<!-- SVG file for a single icon -->
<img src="~lucide-static/icons/home.svg" />
<!-- SVG file for a single icon -->
<img src="~lucide-static/icons/home.svg" />
css
.home-icon {
  background-image: url(~lucide-static/icons/home.svg);
}
.home-icon {
  background-image: url(~lucide-static/icons/home.svg);
}

Make sure you have the correct webpack loaders to make this work. url-loader

SVG file as string

You can simply import each SVG by targeting lucide-static/icons/{icon-name}.svg. To use SVGs in your project you can for example use a SVG loader.

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

// return string of an SVG
import arrowRightIcon from 'lucide-static/icons/arrow-right';

// return string of an SVG

SVG Sprite

You may need additional loader for this.

html
<!-- Icon Sprite, not recommended for production! -->
<img src="lucide-static/sprite.svg#home" />

<!-- or -->
<svg
  width="24"
  height="24"
  fill="none"
  stroke="currentColor"
  stroke-width="2"
  stroke-linecap="round"
  stroke-linejoin="round"
>
  <use href="#alert-triangle" />
</svg>

<svg>
  ...sprite svg
</svg>
<!-- Icon Sprite, not recommended for production! -->
<img src="lucide-static/sprite.svg#home" />

<!-- or -->
<svg
  width="24"
  height="24"
  fill="none"
  stroke="currentColor"
  stroke-width="2"
  stroke-linecap="round"
  stroke-linejoin="round"
>
  <use href="#alert-triangle" />
</svg>

<svg>
  ...sprite svg
</svg>

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;
}
.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="#alert-triangle"
  />
</svg>
<svg>
  ...sprite svg
</svg>
<svg
  xmlns="http://www.w3.org/2000/svg"
  class="lucide-icon"
>
<use
    href="#alert-triangle"
  />
</svg>
<svg>
  ...sprite svg
</svg>

Icon Font

css
@import ('~lucide-static/font/Lucide.css');
@import ('~lucide-static/font/Lucide.css');
html
<div class="icon-home"></div>
<div class="icon-home"></div>

Node.js

To use lucide icons in your Nodejs project you can import each icon as:

js
const { messageSquare } = require('lucide-static/lib');
const { messageSquare } = require('lucide-static/lib');

Note: Each icon name is in camelCase.

Example in node.js project

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}`);
});
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}`);
});