Release candidate for Lucide v1 is out!🚀
You're looking at the site for v1, for v0 go to v0 site

Lucide

Appearance

Using the SVG sprite ​

Learn how to use SVG sprites with Lucide icons in your project, including basic usage and inline options.

Not recommended for high traffic production use

The SVG sprite includes 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 one of the framework-specific packages.

SVG sprites can be loaded as individual image, or used inline with the <use> element. You may also need an additional SVG loader to handle node_modules imports in your project. Check out our codesandbox example for a working example.

Basic sprite usage ​

SVG sprites can be imported directory in img tags, and select the icon with
the #{icon-name} syntax:

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

Inline usage ​

You can also use the sprite inline with the <use> element. This allows you to apply CSS styles directly to the SVG elements.

<!DOCTYPE html>
<html>
  <body>
    <svg
      width="24"
      height="24"
      fill="none"
      stroke="currentColor"
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
    >
      <use href="#alarm-clock-check" />
    </svg>

    <div id="sprite" style="display: none;"></div>

    <script src="index.js"></script>
  </body>
</html>
Open on CodeSandboxOpen Sandbox

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;
}
Open on CodeSandboxOpen Sandbox