Nuxt module to integrate Lucide icons

Nuxt Lucide Icons

npm versionLicenseBuy us a treenpm downloadsMade by SWISNuxt

This Nuxt module makes working with Lucide icons a breeze!


  • 🚠  Auto imports Lucide icons
  • 🎛️  Configurable name prefix
  • 🌲  Supports tree-shaking

Quick Setup

  1. Add nuxt-lucide-icons dependency to your project
# Using pnpm
pnpm add -D nuxt-lucide-icons

# Using yarn
yarn add --dev nuxt-lucide-icons

# Using npm
npm install --save-dev nuxt-lucide-icons
  1. Add nuxt-lucide-icons to the modules section of nuxt.config.ts
export default defineNuxtConfig({
  modules: [
  1. That's it! You can now use all Lucide icons in your Nuxt app ✨
    <h1>Nuxt Lucide Icons</h1>
    <LucideRocket />
    <LucideFolderGit2 color="red" />
    <LucideGithub :size="32" />


Don't like the default component name prefix? You can change it in nuxt.config.ts:

export default defineNuxtConfig({
  modules: [

  lucide: {
    namePrefix: 'Icon'


# Install dependencies
npm install

# Generate type stubs
npm run dev:prepare

# Develop with the playground
npm run dev

# Build the playground
npm run dev:build

# Run ESLint
npm run lint

# Run Vitest
npm run test
npm run test:watch

# Release new version
npm run release


Please see CONTRIBUTING and CODE_OF_CONDUCT for details.


If you discover any security related issues, please email instead of using the issue tracker.



The MIT License (MIT). Please see License File for more information.

This package is Treeware. If you use it in production, then we ask that you buy the world a tree to thank us for our work. By contributing to the Treeware forest you’ll be creating employment for local families and restoring wildlife habitats.

SWIS ❤️ Open Source

SWIS is a web agency from Leiden, the Netherlands. We love working with open source software.