We value your feedback!

Can you spare a moment to take our survey?
Your feedback helps us improve Lucide and make it better for everyone.

Lucide

Appearance

Get JavaScript certificates from certificates.dev

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