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

Lucide

Appearance

Link as Image ​

In some cases, you might want to use Lucide icons as images instead of inline SVGs. This can be useful for performance reasons or when you want to use the icons in contexts where inline SVGs are not supported.

In HTML ​

You can link to the SVG files directly in your HTML using the <img> tag. The path to the SVG files will depend on how you have set up your project.

html
<html>
  <body>
    <img src="node_modules/lucide-static/icons/smile.svg" alt="Smile Icon">
  </body>
</html>
html
<html>
  <body>
    <img src="~/lucide-static/icons/smile.svg" alt="Smile Icon">
  </body>
</html>
html
<html>
  <body>
    <img src="https://cdn.jsdelivr.net/npm/lucide-static@latest/icons/smile.svg" alt="Smile Icon">
  </body>
</html>

For CDN users

Names of icons can change in future releases. Make sure you set an explicit version in the URL to avoid breaking changes.
https://cdn.jsdelivr.net/npm/lucide-static@{version}/icons/smile.svg

In CSS ​

You can also use the icons as background images in your CSS. This is useful for adding icons to buttons, links, or other elements.

css
.button {
  background-image: url('node_modules/lucide-static/icons/smile.svg');
}
css
.button {
  background-image: url('~/lucide-static/icons/smile.svg');
}
css
.button {
  background-image: url('https://cdn.jsdelivr.net/npm/lucide-static@latest/icons/smile.svg');
}

For CDN users

Names of icons can change in future releases. Make sure you set an explicit version in the URL to avoid breaking changes.
https://cdn.jsdelivr.net/npm/lucide-static@{version}/icons/smile.svg