diff --git a/README.md b/README.md
index 35b83884..7d47c354 100644
--- a/README.md
+++ b/README.md
@@ -499,7 +499,7 @@ Type Declarations
 For SvelteKit, in the `src/app.d.ts` file:
 
 ```ts
-import 'unplugin-icons/types/svelte'
+import 'unplugin-icons/types/svelte';
 ```
 
 For Svelte + Vite, in the `src/vite-env.d.ts` file:
@@ -510,6 +510,13 @@ For Svelte + Vite, in the `src/vite-env.d.ts` file:
 /// <reference types="unplugin-icons/types/svelte" />
 ```
 
+If you're still using Svelte 3, replace the reference to use Svelte 3:
+```js
+/// <reference types="svelte" />
+/// <reference types="vite/client" />
+/// <reference types="unplugin-icons/types/svelte3" />
+```
+
 <br></details>
 
 <details>
diff --git a/examples/sveltekit/package.json b/examples/sveltekit/package.json
index be8db51b..dca7be8a 100644
--- a/examples/sveltekit/package.json
+++ b/examples/sveltekit/package.json
@@ -3,8 +3,8 @@
   "private": true,
   "scripts": {
     "build": "vite build",
-    "check": "sveltekit sync && svelte-check --tsconfig ./tsconfig.json",
-    "check:watch": "sveltekit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
     "dev": "vite dev",
     "preview": "vite preview"
   },
@@ -15,7 +15,6 @@
     "@sveltejs/kit": "^1.20.4",
     "svelte": "^4.2.0",
     "svelte-check": "^3.5.0",
-    "svelte-preprocess": "^5.0.4",
     "tslib": "^2.6.2",
     "typescript": "^5.2.2",
     "unplugin-icons": "workspace:*"
diff --git a/examples/sveltekit/src/app.d.ts b/examples/sveltekit/src/app.d.ts
index 4fa00cb6..9e5940d8 100644
--- a/examples/sveltekit/src/app.d.ts
+++ b/examples/sveltekit/src/app.d.ts
@@ -1,2 +1,12 @@
-/// <reference types="@sveltejs/kit" />
-/// <reference types="unplugin-icons/types/svelte" />
+import 'unplugin-icons/types/svelte';
+
+declare global {
+    namespace App {
+        // interface Error {}
+        // interface Locals {}
+        // interface PageData {}
+        // interface Platform {}
+    }
+}
+
+export {};
diff --git a/examples/sveltekit/svelte.config.js b/examples/sveltekit/svelte.config.js
index 6bde6beb..1e6b0bd7 100644
--- a/examples/sveltekit/svelte.config.js
+++ b/examples/sveltekit/svelte.config.js
@@ -1,10 +1,10 @@
-import preprocess from 'svelte-preprocess'
+import { vitePreprocess } from '@sveltejs/kit/vite'
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
   // Consult https://github.com/sveltejs/svelte-preprocess
   // for more information about preprocessors
-  preprocess: preprocess(),
+  preprocess: vitePreprocess(),
 }
 
 export default config
diff --git a/examples/vite-svelte/src/main.ts b/examples/vite-svelte/src/main.ts
index fb363569..d5f003c5 100644
--- a/examples/vite-svelte/src/main.ts
+++ b/examples/vite-svelte/src/main.ts
@@ -1,7 +1,7 @@
 import App from './App.svelte'
 
 const app = new App({
-  target: document.getElementById('app'),
+  target: document.getElementById('app')!,
 })
 
 export default app
diff --git a/package.json b/package.json
index c0f2d7ae..8765969e 100644
--- a/package.json
+++ b/package.json
@@ -68,6 +68,12 @@
     "./types/svelte": {
       "types": "./types/svelte.d.ts"
     },
+    "./types/svelte3": {
+      "types": "./types/svelte3.d.ts"
+    },
+    "./types/svelte4": {
+      "types": "./types/svelte4.d.ts"
+    },
     "./types/vue": {
       "types": "./types/vue.d.ts"
     },
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 40f29c9f..aef34031 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -158,9 +158,6 @@ importers:
       svelte-check:
         specifier: ^3.5.0
         version: 3.5.0(@babel/core@7.22.8)(svelte@4.2.0)
-      svelte-preprocess:
-        specifier: ^5.0.4
-        version: 5.0.4(@babel/core@7.22.8)(svelte@4.2.0)(typescript@5.2.2)
       tslib:
         specifier: ^2.6.2
         version: 2.6.2
diff --git a/types/svelte.d.ts b/types/svelte.d.ts
index 759e0f8a..b2c6a6a7 100644
--- a/types/svelte.d.ts
+++ b/types/svelte.d.ts
@@ -1,8 +1 @@
-declare module 'virtual:icons/*' {
-  export { SvelteComponentDev as default } from 'svelte/internal'
-}
-
-declare module '~icons/*' {
-  import { SvelteComponentTyped } from 'svelte'
-  export default class extends SvelteComponentTyped<svelte.JSX.IntrinsicElements['svg']> {}
-}
+import './svelte4.d.ts'
diff --git a/types/svelte3.d.ts b/types/svelte3.d.ts
new file mode 100644
index 00000000..759e0f8a
--- /dev/null
+++ b/types/svelte3.d.ts
@@ -0,0 +1,8 @@
+declare module 'virtual:icons/*' {
+  export { SvelteComponentDev as default } from 'svelte/internal'
+}
+
+declare module '~icons/*' {
+  import { SvelteComponentTyped } from 'svelte'
+  export default class extends SvelteComponentTyped<svelte.JSX.IntrinsicElements['svg']> {}
+}
diff --git a/types/svelte4.d.ts b/types/svelte4.d.ts
new file mode 100644
index 00000000..826095eb
--- /dev/null
+++ b/types/svelte4.d.ts
@@ -0,0 +1,11 @@
+declare module 'virtual:icons/*' {
+  import { SvelteComponent } from 'svelte'
+  import type { SvelteHTMLElements } from 'svelte/elements'
+  export default class extends SvelteComponent<SvelteHTMLElements['svg']> {}
+}
+
+declare module '~icons/*' {
+  import { SvelteComponent } from 'svelte'
+  import type { SvelteHTMLElements } from 'svelte/elements'
+  export default class extends SvelteComponent<SvelteHTMLElements['svg']> {}
+}
diff --git a/types/vue.d.ts b/types/vue.d.ts
index b11869a7..82328d38 100644
--- a/types/vue.d.ts
+++ b/types/vue.d.ts
@@ -1 +1 @@
-import './vue3'
+import './vue3.d.ts'