---
title: "Auto-Import SVG Icons in SvelteKit with Unplugin Icons"
description: "How to auto-import SVG icons on demand in a SvelteKit app using Unplugin Icons, with full setup and usage examples."
source: "https://www.launchfa.st/blog/sveltekit-unplugin-icons"
author: "Rishi Raj Jain"
created_at: 2024-06-09T00:00:00.000Z
updated_at: 2026-07-02T00:00:00.000Z
---

> **Site index for agents**
> Fetch https://www.launchfa.st/llms.txt to discover every page on this site.
> Every page is also available as Markdown by appending `.md` to its URL.

<img width="1600" height="900" alt="Using Unplugin Icons in SvelteKit" decoding="async" loading="eager" class="mt-4 border rounded-sm bg-cover bg-center bg-no-repeat transform will-change-auto" src="https://ik.imagekit.io/vjeqenuhn/launchfast-website/sveltekit-unplugin-icons" />

<a href="/#pricing" class="rounded-full break-words text-xs border text-black px-4 py-2 max-w-max text-center no-underline hover:bg-black hover:text-white">
  ℹ️&nbsp;&nbsp;Available today with LaunchFast Starter Kits</a>
</div>

In this guide, you will learn how to use [Unplugin Icons](https://github.com/unplugin/unplugin-icons) in a SvelteKit application. You will go through the process of setting up a new SvelteKit project, configuring Unplugin Icons, and using them to leverage a huge collection of icons in your application.

## Prerequisites

You'll need the following:

- [Node.js 20](https://nodejs.org/en/blog/announcements/v20-release-announce) or later

## Table Of Contents

- [Create a new SvelteKit application](#create-a-new-sveltekit-application)
- [Integrate Unplugin Icons in your SvelteKit project](#integrate-unplugin-icons-in-your-sveltekit-project)
  - [Install the Unplugin Icons dependencies](#install-the-unplugin-icons-dependencies)
  - [Include Type Definitions for Unplugin Icons](#include-type-definitions-for-unplugin-icons)
  - [Use Unplugin Icons in the index route](#use-unplugin-icons-in-the-index-route)
- [Build and Test your SvelteKit application locally](#build-and-test-your-sveltekit-application-locally)

## Create a new SvelteKit application

Let’s get started by creating a new SvelteKit project. Open your terminal and run the following command:

```bash
npm create svelte@latest my-app
```

`npm create svelte` is the recommended way to scaffold a SvelteKit project quickly.

When prompted, choose:

- `SvelteKit demo app` when prompted to select the app template.
- `Yes, using TypeScript syntax` when prompted to add type checking with TypeScript.
- `Add Prettier for code formatting` when prompted to select additional options.

Once that’s done, you can move into the project directory, install the dependencies and start the app:

```bash
cd my-app
npm install
npm run dev
```

The app should be running on [localhost:5173](http://localhost:5173/). Now, let's close the development server to install Unplugin Icons.

## Integrate Unplugin Icons in your SvelteKit project

### Install the Unplugin Icons dependencies

Execute the commands below to install the necessary packages for using Unplugin Icons with SvelteKit:

```bash
# unplugin-icons package for Webpack compiler
npm i -D unplugin-icons

# @iconify/json package for the icons collection
npm i -D @iconify/json
```

The command installs the following libraries:

- `unplugin-icons`: A package to access thousands of icons as components on-demand universally.
- `@iconify/json`: A big collection of open source vector icons, all validated, cleaned up and converted to the same easy to use format.

Further, perform the following additions in `vite.config.ts` to use the Unplugin Icons integration:

```tsx
// File: vite.config.ts

import { defineConfig } from 'vite'
import Icons from 'unplugin-icons/vite' // [!code ++] // [!code focus]
import { sveltekit } from '@sveltejs/kit/vite'

export default defineConfig({
  plugins: [
    sveltekit(),
    Icons({ // [!code ++] // [!code focus]
      compiler: 'svelte', // [!code ++] // [!code focus]
    }), // [!code ++] // [!code focus]
  ],
})
```

### Include Type Definitions for Unplugin Icons

To make sure that you can leverage the type definitions of the Unplugin Icons in SvelteKit, you would want to globally define such specific Icon imports as Svelte component imports. To do so, update the `tsconfig.json` file with the following code:

```json
{
  "extends": "./.svelte-kit/tsconfig.json",
  "compilerOptions": {
    "types": ["unplugin-icons/types/svelte"], // [!code ++] // [!code focus]
    "allowJs": true,
    "checkJs": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "sourceMap": true,
    "strict": true
  }
  // Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
  //
  // If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
  // from the referenced tsconfig.json - TypeScript does not merge them in
}
```

The code above simply marks each import from `~icons` to be considered as a Svelte component in your SvelteKit application.

### Use Unplugin Icons in the index route

Finally, import the icon and use it in your SvelteKit index route with the following code:

```svelte
<script lang="ts">
	import TwitterIcon from '~icons/devicon/twitter' // [!code ++] // [!code focus]
</script>

<TwitterIcon /> // [!code ++] // [!code focus]
```

The code above imports an icon as a Svelte component in the index route.

You're all done now!

## Build and Test your SvelteKit application locally

To test the application, prepare a build and run the preview server using the command below:

```bash
npm run build && npm run preview
```

## Conclusion

In this guide, you learned how to use Unplugin Icons in a SvelteKit application.

Using a different stack? Check out our guide on [Unplugin Icons in Next.js](/blog/nextjs-unplugin-icons).

If you have any questions or comments, feel free to reach out to me on [Twitter](https://twitter.com/direct_messages/create/rishi_raj_jain_).