Lucide

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.

⚠️ 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 treeshaking to make sure only the icons you use are bundled with your app. Threeshaking is only available in these packages: lucide, lucide-react, lucide-vue, lucide-vue-next, lucide-angular, lucide-preact

Installation

Package Managers

yarn add lucide-static

or

npm install lucide-static

CDN

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

<!-- SVG file for a single icon -->
<img src="~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.

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


// return string of an SVG

SVG Sprite

You may need additional loader for this.

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

.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="#alert-triangle"
  />
</svg>
<svg>
  ...sprite svg
</svg>

Icon Font

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

Node.js

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

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

Note: Each icon name is in camelCase.

Example in node.js project

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

Powered by Vercel