Demo

<Icon icon="lucide:package" color="hsl(128, 75%, 75%)" style="overflow:unset" />

Usage

Add the svIconify vite plugin to your vite config to enable tree-shaking

import { defineConfig } from "vite";
import { sveltekit } from "@sveltejs/kit/vite";
import { svIconify } from "sv-iconify/vite";

export default defineConfig({
	plugins: [
		svIconify(), // Required
		sveltekit(),
	],
});

Import the Icon component and use it in your Svelte files:

<script>
  import Icon from 'sv-iconify';
</script>

<Icon icon="lucide:heart" width="24" />
<Icon icon="mdi:home" width="32" color="blue" />

Props

Icons can customized similar to Iconify

<!-- Basic usage -->
<Icon icon="mdi:home" />

<!-- Custom size -->
<Icon icon="carbon:user" width="{24}" />
<Icon icon="carbon:user" width="1rem" />
<Icon icon="carbon:user" width="24" />

<!-- Custom color -->
<Icon icon="lucide:heart" color="red" />
<Icon icon="lucide:heart" color="var(--red-600)" />

<!-- Rotation -->
<Icon icon="mdi:arrow-right" rotate="90deg" />

<!-- Flip -->
<Icon icon="mdi:arrow-left" hFlip />
<Icon icon="mdi:arrow-left" vFlip />

The list of available props are shown in the demo above along with the generated code for the current.

Bundling Config

To ensure tree-shaking works correctly, make sure to add the svIconify vite plugin to your vite config. You can pass options to customize the behavior.

import { defineConfig } from "vite";
import { sveltekit } from "@sveltejs/kit/vite";
import { svIconify } from "sv-iconify/vite";

export default defineConfig({
	plugins: [
		svIconify({
			sourceDir: "./custom-icons",
			outputPath: "static/icons/icons-bundle.json",
			scanDir: "src",
			includes: {
				iconSets: ["mdi", "carbon"],
				icons: ["lucide:home", "tabler:package"],
			},
		}),
		sveltekit(),
	],
});

• sourceDir - (string)
  Path to the directory containing icon JSON files.
  Default: 'node_modules/sv-iconify/dist/data/json'
• outputPath - (string)
  Output path for the generated icon bundle (production builds only).
  Default: 'static/_sv-iconify/icons-bundle.json'
• scanDir - (string)
  Directory to scan for icon usage in your source files.
  Default: 'src'
• includes - (object)
  Configuration for force-including icons or icon sets.
  Use this to force include icon sets that cannot be automatically detected. This is essential when icon names are dynamic, such as those loaded from a database or API at runtime.
  • includes.iconSets - (string[])
    List of icon set prefixes to include entirely
    e.g., ['lucide', 'tabler']
  • includes.icons - (string[])
    Specific icons to include.
    e.g., ['lucide:home', 'tabler:package']

Credits

• Iconify - Icon source
• KawaiiLogos - Logo Inspiration
• Sonner - Website theme Inspiration