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 `` tag. The path to the SVG files will depend on how you have set up your project.

::: code-group

html

<html>
  <body>
    
  </body>
</html>

html

<html>
  <body>
    
  </body>
</html>

html

<html>
  <body>
    
  </body>
</html>

:::

::: warning 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.

::: code-group

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

:::