How to Use SVG Icons in Svelte 5 & SvelteKit: The Complete 2026 Guide

The Svelte 5 Paradigm Shift: Runes vs. Legacy Icon Patterns

In Svelte 3 and 4, building a reusable icon component relied on export let size = 24 and the $$restProps magic variable. In Svelte 5, reactivity is explicitly driven by Runes. The legacy export syntax is superseded by the $props() rune, which integrates deeply with TypeScript for robust type checking, autocomplete, and superior tree-shaking.

Furthermore, Svelte 5 eliminates the runtime overhead of the virtual DOM entirely. When you compile an SVG in Svelte 5, the compiler transforms the vector markup into direct DOM manipulation instructions, resulting in the smallest runtime footprint of any major frontend framework.

Architecture 1: Standalone Svelte 5 SVG Icon Component (Zero Dependencies)

For core user interface icons (navigation bars, search inputs, modal triggers), creating standalone Svelte Single-File Components (SFC) provides maximum reliability, zero third-party package dependencies, and instant SSR rendering.

Here is the canonical Svelte 5 TypeScript icon component implementation:

<!-- src/lib/components/icons/ArrowRight.svelte -->
<script lang="ts">
  import type { SVGAttributes } from 'svelte/elements';

  interface IconProps extends SVGAttributes<SVGSVGElement> {
    size?: number | string;
    color?: string;
    strokeWidth?: number | string;
  }

  let {
    size = 24,
    color = 'currentColor',
    strokeWidth = 2,
    class: className = '',
    children,
    ...restProps
  }: IconProps = $props();
</script>

<svg
  xmlns="http://www.w3.org/2000/svg"
  width={size}
  height={size}
  viewBox="0 0 24 24"
  fill="none"
  stroke={color}
  stroke-width={strokeWidth}
  stroke-linecap="round"
  stroke-linejoin="round"
  class={className}
  aria-hidden="true"
  {...restProps}
>
  <path d="M5 12h14" />
  <path d="m12 5 7 7-7 7" />
  {@render children?.()}
</svg>

Why This Pattern Excels

• Universal Theming via currentColor: By defaulting stroke={color} to currentColor, the SVG automatically inherits its color from the parent element's CSS color property or Tailwind text utilities (e.g., text-sky-500).
• Zero-Overhead Attribute Spreading: The ...restProps object passes arbitrary HTML and SVG attributes (such as data-testid, id, role, or aria-label) directly to the root <svg>.
• Snippet Child Rendering: The {@render children?.()} expression allows consumer components to inject custom supplementary elements, such as notification badges or ping indicator rings.

Architecture 2: Multi-Icon Composable Sets with Svelte 5 Snippets

When you have a set of closely related icons (such as media player controls: play, pause, stop, skip), writing individual .svelte files for each can lead to boilerplate. Svelte 5 introduces snippets ({#snippet}), which allow you to declare multiple reusable vector templates within a single file:

<!-- src/lib/components/icons/MediaIcon.svelte -->
<script lang="ts">
  import type { SVGAttributes } from 'svelte/elements';

  interface MediaIconProps extends SVGAttributes<SVGSVGElement> {
    type: 'play' | 'pause' | 'skip-forward';
    size?: number | string;
    color?: string;
  }

  let {
    type,
    size = 24,
    color = 'currentColor',
    class: className = '',
    ...restProps
  }: MediaIconProps = $props();
</script>

{#snippet playPath()}
  <polygon points="6 3 20 12 6 21 6 3" fill={color} stroke="none" />
{/snippet}

{#snippet pausePath()}
  <rect x="6" y="4" width="4" height="16" rx="1" fill={color} stroke="none" />
  <rect x="14" y="4" width="4" height="16" rx="1" fill={color} stroke="none" />
{/snippet}

{#snippet skipForwardPath()}
  <polygon points="5 4 15 12 5 20 5 4" fill={color} stroke="none" />
  <line x1="19" x2="19" y1="5" y2="19" stroke={color} stroke-width="2" stroke-linecap="round" />
{/snippet}

<svg
  xmlns="http://www.w3.org/2000/svg"
  width={size}
  height={size}
  viewBox="0 0 24 24"
  class={className}
  aria-hidden="true"
  {...restProps}
>
  {#if type === 'play'}
    {@render playPath()}
  {:else if type === 'pause'}
    {@render pausePath()}
  {:else if type === 'skip-forward'}
    {@render skipForwardPath()}
  {/if}
</svg>

This pattern packages related glyphs into a single cohesive component while keeping the compiled bundle lightweight and tree-shakeable.

Architecture 3: Automated On-Demand Loading with unplugin-icons

In large dashboard applications requiring hundreds of distinct icons, manually writing SFC components is inefficient. The unplugin-icons ecosystem integrates seamlessly into SvelteKit's Vite build pipeline, enabling on-demand imports across 100+ open-source icon sets (including Lucide, Tabler, Phosphor, and Material Symbols).

1. Install Required Packages

npm install -D unplugin-icons @iconify-json/lucide

2. Configure vite.config.ts in SvelteKit

// vite.config.ts
import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';
import Icons from 'unplugin-icons/vite';

export default defineConfig({
  plugins: [
    sveltekit(),
    Icons({
      compiler: 'svelte',
      autoInstall: true,
      defaultClass: 'icon-base',
      defaultStyle: 'display: inline-block; vertical-align: middle;'
    })
  ]
});

3. Import and Use Icons Anywhere in Svelte 5

<!-- src/routes/+page.svelte -->
<script lang="ts">
  import IconSearch from '~icons/lucide/search';
  import IconSettings from '~icons/lucide/settings';
  import IconCheck from '~icons/lucide/check';
</script>

<div class="flex items-center gap-4">
  <IconSearch class="size-5 text-zinc-400 hover:text-lime-400 transition-colors" />
  <IconSettings class="size-6 text-zinc-300 animate-spin-slow" />
  <IconCheck class="size-5 text-emerald-500" />
</div>

During the Vite build process, unplugin-icons extracts only the raw SVG paths referenced in your code and compiles them into pure Svelte components. If your application references 12 icons from a library of 1,500, only those 12 icons exist in your production build.

Dynamic Icon Rendering in Svelte 5 (The Post-<svelte:component> Era)

In previous Svelte versions, rendering an icon dynamically based on database state or route data required the <svelte:component this={...}> directive. In Svelte 5, components are first-class values and can be invoked directly.

Modern Svelte 5 Dynamic Icon Dispatcher

<!-- src/lib/components/DynamicIcon.svelte -->
<script lang="ts">
  import type { Component } from 'svelte';
  import HomeIcon from '$lib/components/icons/Home.svelte';
  import UserIcon from '$lib/components/icons/User.svelte';
  import SettingsIcon from '$lib/components/icons/Settings.svelte';

  const iconRegistry: Record<string, Component> = {
    home: HomeIcon,
    user: UserIcon,
    settings: SettingsIcon
  };

  interface Props {
    name: string;
    size?: number;
    class?: string;
  }

  let { name, size = 20, class: className = '' }: Props = $props();

  // Reactive derived component lookup
  let SelectedIcon = $derived(iconRegistry[name]);
</script>

{#if SelectedIcon}
  <!-- In Svelte 5, dynamic components render directly like regular components -->
  <SelectedIcon {size} class={className} />
{:else}
  <span class="inline-block size-5 bg-zinc-800 rounded-full" aria-hidden="true"></span>
{/if}

Notice that we no longer need <svelte:component this={SelectedIcon}>. Svelte 5 treats uppercase identifier bindings as callable component constructors automatically.

SvelteKit SSR & Hydration Safety

SvelteKit renders pages on the server and streams HTML to the client before hydrating interactivity. While static vector paths never trigger hydration errors, gradients (<linearGradient>), clipping paths (<clipPath>), and masks (<mask>) frequently cause visual glitches if XML IDs collide across multiple instances.

The ID Collision Bug

<!-- ❌ DANGEROUS: Hardcoded ID causes all icons on the page to point to the first instance -->
<svg viewBox="0 0 24 24">
  <defs>
    <linearGradient id="gradient-accent">
      <stop stop-color="#C1DD2D" />
      <stop offset="1" stop-color="#10B981" />
    </linearGradient>
  </defs>
  <path fill="url(#gradient-accent)" d="..." />
</svg>

If you render 20 cards containing this icon on a single page, all 20 will reference the first gradient in the DOM. If that element is unmounted or lazy-loaded, all remaining icons will turn black.

The Production Svelte 5 Fix

<!-- src/lib/components/icons/DuotoneBolt.svelte -->
<script lang="ts">
  interface Props {
    id?: string;
    size?: number;
    class?: string;
  }

  let {
    // Generate a deterministic ID based on component name and optional prop
    id = 'bolt-grad-' + Math.random().toString(36).substring(2, 9),
    size = 24,
    class: className = ''
  }: Props = $props();
</script>

<svg
  xmlns="http://www.w3.org/2000/svg"
  width={size}
  height={size}
  viewBox="0 0 24 24"
  class={className}
  aria-hidden="true"
>
  <defs>
    <linearGradient id={id} x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#C1DD2D" />
      <stop offset="100%" stop-color="#10B981" />
    </linearGradient>
  </defs>
  <path fill={`url(#${id})`} d="M13 2 3 14h9l-1 8 10-12h-9l1-8Z" />
</svg>

In prerendered or static SvelteKit sites, passing explicit unique id props or scoping IDs per component prevents cross-document style bleeding completely.

Tailwind CSS v4 & Svelte 5 Styling Masterclass

In modern web development, styling vector icons directly via utility classes represents the gold standard for developer ergonomics. By setting stroke="currentColor" or fill="currentColor", you unlock full access to Tailwind CSS color palettes, transitions, and responsive modifiers.

<!-- NavButton.svelte -->
<script lang="ts">
  import ArrowRight from '$lib/components/icons/ArrowRight.svelte';
  let { label = 'Continue' } = $props();
</script>

<button class="group flex items-center gap-2 px-5 py-2.5 rounded-lg bg-zinc-900 border border-zinc-800 text-zinc-100 hover:border-lime-500/50 hover:bg-zinc-800 transition-all duration-200">
  <span class="font-medium text-sm">{label}</span>
  <ArrowRight
    class="size-4 text-zinc-400 stroke-[2] transition-transform duration-200 group-hover:translate-x-1 group-hover:text-lime-400"
  />
</button>

Essential Tailwind Classes for Icons

• size-4 / size-5 / size-6: Sets both width and height simultaneously via CSS custom properties.
• stroke-[1.5] / stroke-[2]: Adjusts vector line thickness dynamically without modifying underlying SVG paths.
• transition-transform duration-200 group-hover:scale-110: High-performance GPU-accelerated micro-interactions.
• text-lime-400 dark:text-lime-300: Effortless light/dark mode color switching.

Performance Benchmark: Svelte 5 vs. Svelte 4 vs. React 19 vs. Vue 3

To quantify the real-world performance impact of different framework icon architectures, we benchmarked 50 unique vector icons rendered on a dashboard landing page:

Svelte 5 achieves the fastest initial DOM creation and lowest hydration overhead because the compiler generates direct template cloning instructions (using native browser document.importNode) rather than traversing a virtual DOM tree.

IconStash 1-Click Svelte 5 Export Workflow

IconStash indexes 134,701 vector icons across 28 curated open-source libraries (Lucide, Tabler, Phosphor, Heroicons, Google Material Symbols, and more). Rather than manually copying SVG markup and converting attribute names, IconStash provides instant Svelte 5 component export.

1. Unified Search: Search across all 28 libraries simultaneously with zero latency.
2. Interactive Customization: Adjust stroke width (from 1px to 3px) and pixel dimensions in real time in the browser.
3. Instant Export: Click "Copy Svelte" to grab ready-to-paste Svelte 5 code pre-configured with $props(), currentColor, and restProps.

Frequently Asked Questions