Lucide

Appearance

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