lucide-vue-next Is Deprecated: Use @lucide/vue (Vue Icons)

lucide-vue-next is deprecated. Its npm page says "Package deprecated. Please use @lucide/vue instead." Lucide v1 renamed the Vue package, and the Lucide migration guide says the API is the same, so migrating is a find and replace of lucide-vue-next with @lucide/vue. The one breaking change: brand icons such as Github were removed.

Migrate from lucide-vue-next to @lucide/vue

npm uninstall lucide-vue-next
npm install @lucide/vue

<script setup>
// before: import { Search, UserCheck } from 'lucide-vue-next';
import { Search, UserCheck } from '@lucide/vue';
</script>

<template>
  <Search :size="20" />
  <UserCheck color="#16a34a" :stroke-width="1.5" />
</template>

On npm, lucide-vue-next 1.0.0 (March 2026) carries the deprecation notice; the last 0.x release was 0.577.0. @lucide/vue is at 1.61 and needs Vue 3.0.1 or newer.

What changed in v1, from the Lucide v1 release notes:

Using @lucide/vue

Each icon is a Vue component that renders an inline SVG, and only imported icons reach the bundle, per the Lucide Vue getting started guide. Props:

Names are PascalCase, and each icon has three exports: UserCheck, UserCheckIcon and LucideUserCheck. To browse all icons and copy names, use the Lucide pack page.

Set defaults for a component and its children with setLucideProps. It uses Vue's provide, so call it in the setup of a parent component:

<!-- App.vue -->
<script setup>
import { setLucideProps } from '@lucide/vue';

setLucideProps({ size: 20, strokeWidth: 1.75 });
</script>

@iconify/vue: any icon set at runtime

@iconify/vue gives one <Icon> component for every set on Iconify (Lucide, Material Symbols, Phosphor, Tabler and 200+ more). Per the Iconify for Vue docs, it renders SVG and loads icon data on demand from the Iconify API.

npm install --save-dev @iconify/vue

<script setup>
import { Icon } from '@iconify/vue';
</script>

<template>
  <Icon icon="lucide:search" width="20" height="20" />
  <Icon icon="mdi:home" style="color: #2563eb" />
</template>

Two limits from the docs: the component is not designed for server-side rendering (they point to the Iconify Icon web component for SSR), and each new icon is a network request unless you add the data yourself with addIcon() or addCollection(). For a production app with a fixed icon list, unplugin-icons is usually the better fit.

unplugin-icons: build-time icons with auto-import

unplugin-icons turns Iconify icons into Vue components at build time, so there is no runtime fetch. Install the plugin, the auto-import companion and the data for the sets you use:

npm install -D unplugin-icons unplugin-vue-components @iconify-json/lucide

// vite.config.ts
import { defineConfig } from 'vite';
import Vue from '@vitejs/plugin-vue';
import Icons from 'unplugin-icons/vite';
import IconsResolver from 'unplugin-icons/resolver';
import Components from 'unplugin-vue-components/vite';

export default defineConfig({
  plugins: [
    Vue(),
    Components({ resolvers: [IconsResolver()] }),
    Icons({ compiler: 'vue3' }),
  ],
});

With auto-import, write icons as {prefix}-{collection}-{icon}, where the default prefix is i:

<template>
  <i-lucide-search class="size-5" />
  <i-lucide-user-check style="color: #16a34a" />
</template>

Or import one explicitly:

<script setup>
import IconSearch from '~icons/lucide/search';
</script>

<template>
  <IconSearch />
</template>

For TypeScript, add "unplugin-icons/types/vue" to compilerOptions.types in tsconfig.json. Install @iconify-json/<set> for each extra set (for example @iconify-json/mdi), or @iconify/json for all of them.

Nuxt: @nuxt/icon

For Nuxt, the Nuxt Icon module is the shortest path:

npx nuxi module add icon
npm i -D @iconify-json/lucide

<template>
  <Icon name="lucide:search" />
</template>

Installing the @iconify-json/* package for each set lets the module serve icons from your own server instead of the public Iconify API. Default size is 1em, set in app.config.ts under icon.size.

Which one to pick

All four render inline SVG, so currentColor and CSS classes control color: see change SVG icon color with CSS. The same choices for React are covered in React icon libraries.

FAQ