lucide/docs/guide/static/getting-started.md

<script setup> import OverviewLink from '../../.vitepress/theme/components/base/OverviewLink.vue' import OverviewLinkGrid from '../../.vitepress/theme/components/base/OverviewLinkGrid.vue' </script>

Getting started

This guide will help you get started with Lucide Static in your project. Make sure you have a your environment set up. If you don't have one yet, you can create a new project using Vite, Parcel or any other boilerplate of your choice.

For what use cases is lucide-static suitable?

lucide-static is suitable for very specific use cases where you want to use Lucide icons without relying on a JavaScript framework or component system. It's ideal for:

• Projects that use icon fonts with plain CSS or utility-first frameworks
• Embedding raw SVG files or sprites directly in HTML
• Using SVGs as CSS background images
• Importing SVG strings into Node.js environments

::: danger Not recommended for production high performance needs {#production-warning} SVG sprites and icon fonts include 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. :::

Installation

Package Managers

::: code-group

pnpm add lucide-static

yarn add lucide-static

npm install lucide-static

bun add lucide-static

:::