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

Icon Font ​

Lucide icons are also available as a web font. The font includes all icons as glyphs, allowing you to use them in your project with CSS classes. This can be a convenient option for projects that prefer using icon fonts.

Not recommended for high traffic production use

The Icon font 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.

Using the CSS Stylesheet ​

css
@import 'lucide-static/font/lucide.css';
css
@import "~lucide-static/font/lucide.css";
html
<link rel="stylesheet" href="https://unpkg.com/lucide-static@latest/font/lucide.css" />
html
<link rel="stylesheet" href="/your/path/to/lucide.css" />

Using the Icon Font ​

Once you have included the stylesheet, you can use the icons in your HTML by applying the appropriate CSS classes. Each icon has a corresponding class name that you can use to display it.

For example, to display the "home" icon, you would use the following HTML:

html
<div class="icon-house"></div>

Example with JavaScript ​

<!DOCTYPE html>
<html>
  <body>
    <i class="icon-home"></i>

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