@filled-lucide/vue

Filled Lucide Vue

Filled (solid) versions of every Lucide icon for Vue 3. Same icon names, same 24×24 grid and the same API as @lucide/vue.

Installation

pnpm add @filled-lucide/vue

npm install @filled-lucide/vue

Usage

<script setup>
import { House } from '@filled-lucide/vue';
</script>

<template>
  <House
    :size="32"
    color="#e11d48"
  />
</template>

color sets the icon's fill. strokeWidth and absoluteStrokeWidth are accepted for compatibility but have no visible effect.

Filled and outline side by side

Every icon is also exported with a Filled prefix (FilledHouse, FilledX, …), so you can mix it with the outline icons from @lucide/vue:

<script setup>
import { House } from '@lucide/vue';
import { FilledHouse } from '@filled-lucide/vue';
</script>

<template>
  <FilledHouse v-if="active" />
  <House v-else />
</template>

Drop-in replacement for @lucide/vue

Install this package under the upstream name to switch an entire app, including libraries that import @lucide/vue (such as shadcn/ui), to filled icons without changing an import:

pnpm add @lucide/vue@npm:@filled-lucide/vue

Versions follow upstream: @filled-lucide/vue@1.52.0 has the same icons as @lucide/vue@1.52.0.

Documentation

The API is identical to upstream, so the Lucide documentation applies. See the Filled Lucide repository for details about the filled set.

License

ISC. Based on Lucide, © Lucide Contributors.

Filled Lucide is an independent project, not affiliated with or endorsed by the Lucide team. Report problems with the filled icons at linus-sch/filled-lucide, not to upstream Lucide.