Lucide Svelte

Implementation of the lucide icon library for svelte applications.


yarn add lucide-svelte


npm install lucide-svelte

How to use

All the icons are Svelte components, that ouputs Svg elements. So each icon can be imported and used as a component. This also helps with the use of threeshaking so you only import the icons you use.


Default usage:

import { Skull } from 'lucide-svelte';
<Skull />

You can pass additional props to adjust the icon.

import { Camera } from 'lucide-svelte';
<Camera color="#ff3e98" />

Available props


* All SVGProps are available to style the svgs. See the list of SVG Presentation Attributes on MDN

Example of custom props

import { Phone } from 'lucide-svelte';
<Phone fill="#333" />

This results a filled phone icon.

One generic icon component

It is possible to create one generic icon component to load icons.

⚠️ Example below importing all EsModules, caution using this example, not recommended when you bundle your application,the build size will grow strongly. Because it will import all the icons.

Icon Component Example

import * as icons from 'lucide-svelte';
export let name;
<svelte:component this="{icons[name]}" {...$$props} />
Then you can use it like this
import LucideIcon from './LucideIcon';
<LucideIcon name="Menu" />

Powered by Vercel