main

Iconify for Svelte using static code analysis
Bundle only what you use, works even without internet access!

Browse Icons

Installation

pnpm add sv-iconify --save-dev

Demo

80px
128°
2
0°
<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

vite.config.js 
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:

+page.svelte 
<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

+page.svelte 
<!-- 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.

vite.config.js 
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']
  • fallback - (boolean)
    Enable or disable fallback to Iconify API when an icon is not found locally.
    When set to true, if an icon cannot be found in the bundled icons, it will attempt to fetch it from Iconify API.
    Default: true

Limitation

  • Since sv-iconify relies on static analysis to detect icon usage in your source code, dynamic icon names (e.g., those constructed at runtime) may not be detected and included in the bundle.

    Use the includes option in the Vite plugin configuration to manually include such icons or icon sets to ensure they are available at runtime.

  • Emoji icons are not included are they are too large for dev bundles. If you need emoji ensure fallback is set to true and ensure it have internet access.

Credits