[{"data":1,"prerenderedAt":12},["ShallowReactive",2],{"guide-use-lucide-icons-in-vue-svelte-and-html":3},{"slug":4,"path":5,"title":6,"seoTitle":7,"description":8,"date":9,"updated":9,"order":10,"html":11},"use-lucide-icons-in-vue-svelte-and-html","\u002Fguides\u002Fuse-lucide-icons-in-vue-svelte-and-html","Lucide icons in Vue, Svelte, Angular and plain HTML","Use Lucide Icons in Vue, Svelte, Angular & HTML","The current Lucide packages for Vue, Svelte 5 and Angular, how to use the icon font, and how to add icons to a page without a framework.","2026-10-26",2,"\u003Cp>Lucide publishes an official package for each framework. In 2026 several of them moved to new names under the \u003Ccode>@lucide\u003C\u002Fcode> scope, and the old packages are deprecated, so check which one your project uses.\u003C\u002Fp>\n\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>Framework\u003C\u002Fth>\n\u003Cth>Package\u003C\u002Fth>\n\u003Cth>Old (deprecated) package\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\u003Ctr>\n\u003Ctd>React\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>lucide-react\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Vue\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>@lucide\u002Fvue\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>lucide-vue-next\u003C\u002Fcode>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Svelte 5\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>@lucide\u002Fsvelte\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>lucide-svelte\u003C\u002Fcode> (Svelte 4)\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Angular\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>@lucide\u002Fangular\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>lucide-angular\u003C\u002Fcode>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Solid\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>lucide-solid\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>React Native\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>lucide-react-native\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Astro\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>@lucide\u002Fastro\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>No framework\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>lucide\u003C\u002Fcode>, \u003Ccode>lucide-static\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\u003C\u002Ftable>\n\u003Ch2>Vue\u003C\u002Fh2>\n\u003Cpre>\u003Ccode class=\"language-bash\">npm install @lucide\u002Fvue\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cpre>\u003Ccode class=\"language-vue\"><script setup>\nimport { House } from "@lucide\u002Fvue";\n<\u002Fscript>\n\n<template>\n  <House :size="24" :stroke-width="1.5" color="currentColor" \u002F>\n<\u002Ftemplate>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch2>Svelte 5\u003C\u002Fh2>\n\u003Cpre>\u003Ccode class=\"language-bash\">npm install @lucide\u002Fsvelte\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cpre>\u003Ccode class=\"language-svelte\"><script>\n  import { House } from "@lucide\u002Fsvelte";\n<\u002Fscript>\n\n<House size={24} strokeWidth={1.5} \u002F>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch2>Angular\u003C\u002Fh2>\n\u003Cp>\u003Ccode>@lucide\u002Fangular\u003C\u002Fcode> provides each icon as a standalone component used on an \u003Ccode>svg\u003C\u002Fcode> element:\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-ts\">import { Component } from "@angular\u002Fcore";\nimport { LucideHouse } from "@lucide\u002Fangular";\n\n@Component({\n  selector: "app-example",\n  imports: [LucideHouse],\n  template: `<svg lucideHouse [size]="24" [strokeWidth]="1.5"><\u002Fsvg>`,\n})\nexport class Example {}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch2>Plain HTML with the lucide package\u003C\u002Fh2>\n\u003Cp>Without a framework, add \u003Ccode>data-lucide\u003C\u002Fcode> placeholders and let the \u003Ccode>lucide\u003C\u002Fcode> script replace them with SVGs:\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-html\"><i data-lucide="house"><\u002Fi>\n<i data-lucide="search" width="20" height="20" stroke-width="1.5"><\u002Fi>\n\n<script src="https:\u002F\u002Funpkg.com\u002Flucide@latest"><\u002Fscript>\n<script>\n  lucide.createIcons();\n<\u002Fscript>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Pin a version (\u003Ccode>lucide@1.61.0\u003C\u002Fcode> rather than \u003Ccode>@latest\u003C\u002Fcode>) in production so icons can't change under you.\u003C\u002Fp>\n\u003Ch2>The icon font\u003C\u002Fh2>\n\u003Cp>\u003Ccode>lucide-static\u003C\u002Fcode> includes an icon font, handy for CSS-only projects:\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-html\"><link rel="stylesheet" href="https:\u002F\u002Funpkg.com\u002Flucide-static@latest\u002Ffont\u002Flucide.css">\n\n<i class="icon-house"><\u002Fi>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Fonts can't change stroke width and are blurrier at small sizes than SVG, so prefer SVGs or components when you can. Each icon page lists the icon's font class and code point.\u003C\u002Fp>\n\u003Ch2>Plain SVG files\u003C\u002Fh2>\n\u003Cp>\u003Ccode>lucide-static\u003C\u002Fcode> also has every icon as an SVG file (\u003Ccode>lucide-static\u002Ficons\u002Fhouse.svg\u003C\u002Fcode>). Or download any icon from its page here, at the size and stroke width you pick.\u003C\u002Fp>\n",1793042395994]