diff --git a/src/docs/package.json b/src/docs/package.json
index 49fe4b4947b..e8190ab7ba2 100644
--- a/src/docs/package.json
+++ b/src/docs/package.json
@@ -32,8 +32,6 @@
     "vite": "^4.4.10"
   },
   "dependencies": {
-    "@svelte-put/inline-svg": "^3.0.0",
-    "@svelte-put/preprocess-inline-svg": "^2.1.3",
     "colord": "^2.9.3",
     "daisyui": "^3.9.1",
     "lodash.debounce": "^4.0.8",
diff --git a/src/docs/src/routes/(docs)/+page.svelte b/src/docs/src/routes/(docs)/+page.svelte
index 43d1e4ff2ec..e70b543c93f 100644
--- a/src/docs/src/routes/(docs)/+page.svelte
+++ b/src/docs/src/routes/(docs)/+page.svelte
@@ -1,7 +1,5 @@
 <script>
   import { onMount } from "svelte"
-  import { inlineSvg } from "@svelte-put/inline-svg"
-
   import Countup from "svelte-countup"
   import SEO from "@components/SEO.svelte"
   import Ads from "@components/Ads.svelte"
@@ -1250,7 +1248,8 @@
         <div />
 
         {#each ["vue", "react", "svelte", "qwik", "remix", "nextjs", "solidjs", "preact", "phoenix", "nuxtjs", "astro", "angular", "vite", "laravel"] as logo, index}
-          <svg
+          <img
+            loading="lazy"
             width="96"
             height="96"
             class="aspect-square w-full will-change-auto motion-reduce:!opacity-100 motion-reduce:!filter-none motion-reduce:![scale:1]"
@@ -1271,7 +1270,8 @@
               [-70 + index * 5, -60 + index * 5],
               [1.05, 1]
             )}`}
-            use:inlineSvg={`/logos/${logo}.svg`} />
+            alt={`daisyUI ${logo}`}
+            src={`/logos/${logo}.svg`} />
         {/each}
       </div>
     </div>
@@ -1703,11 +1703,13 @@
       <div class="h-16" />
       <div class="pointer-events-none mx-auto flex max-w-xl flex-wrap justify-center gap-10 px-6">
         {#each ["svelte", "vue", "react", "solidjs", "preact", "angular", "qwik", "nextjs", "nuxtjs", "remix", "11ty", "vite", "astro"] as logo, index}
-          <svg
+          <img
+            loading="lazy"
             width="96"
             height="96"
             class="aspect-square h-10 w-10"
-            use:inlineSvg={`/logos/${logo}.svg`} />
+            src={`/logos/${logo}.svg`}
+            alt={`daisyUI ${logo}`} />
         {/each}
       </div>
       <div class="h-16" />
diff --git a/src/docs/src/routes/(docs)/docs/install/+page.svelte.md b/src/docs/src/routes/(docs)/docs/install/+page.svelte.md
index abd324da42b..3f0fe2a03c0 100644
--- a/src/docs/src/routes/(docs)/docs/install/+page.svelte.md
+++ b/src/docs/src/routes/(docs)/docs/install/+page.svelte.md
@@ -5,7 +5,6 @@ published: true
 ---
 
 <script>
-  import { inlineSvg } from "@svelte-put/inline-svg"
   import InstallTabs from "@components/InstallTabs.svelte"
   import Translate from "@components/Translate.svelte"
   import { exampleRepos } from "@src/lib/data.js"
@@ -41,11 +40,11 @@ module.exports = {
 
 <figure class="px-12 pt-6 pb-2 w-full aspect-[2/1] items-end overflow-visible">
 {#if logos.length === 1}
-<svg use:inlineSvg={logos[0]} width="96" height="96" class="aspect-square w-full h-auto" />
+<img loading="lazy" alt={logos[0]} src={logos[0]} width="96" height="96" class="aspect-square w-full h-auto" />
 {:else}
 <div class="grid w-full">
-<svg use:inlineSvg={logos[0]} width="96" height="96" class="aspect-square col-start-1 row-start-1 w-full h-auto" />
-<svg use:inlineSvg={logos[1]} width="96" height="96" class="aspect-square col-start-1 row-start-1 w-3/5 -mr-4 -mb-4 place-self-end justify-self-end drop-shadow-md h-auto" />
+<img loading="lazy" alt={logos[0]} src={logos[0]} width="96" height="96" class="aspect-square col-start-1 row-start-1 w-full h-auto" />
+<img loading="lazy" alt={logos[1]} src={logos[1]} width="96" height="96" class="aspect-square col-start-1 row-start-1 w-3/5 -mr-4 -mb-4 place-self-end justify-self-end drop-shadow-md h-auto" />
 </div>
 {/if}
 </figure>
diff --git a/src/docs/static/logos/nextjs.svg b/src/docs/static/logos/nextjs.svg
index 6d92ca23a1b..0ed5355e448 100644
--- a/src/docs/static/logos/nextjs.svg
+++ b/src/docs/static/logos/nextjs.svg
@@ -1 +1 @@
-<svg class="next-mark_root__wLeec" height="80" role="img" viewBox="0 0 180 180" width="80"><mask height="180" id=":R0:mask0_408_134" maskUnits="userSpaceOnUse" style="mask-type:alpha" width="180" x="0" y="0"><circle cx="90" cy="90" fill="black" r="90"></circle></mask><g mask="url(#:R0:mask0_408_134)"><circle cx="90" cy="90" data-circle="true" fill="black" r="90"></circle><path d="M149.508 157.52L69.142 54H54V125.97H66.1136V69.3836L139.999 164.845C143.333 162.614 146.509 160.165 149.508 157.52Z" fill="url(#:R0:paint0_linear_408_134)"></path><rect fill="url(#:R0:paint1_linear_408_134)" height="72" width="12" x="115" y="54"></rect></g><defs><linearGradient gradientUnits="userSpaceOnUse" id=":R0:paint0_linear_408_134" x1="109" x2="144.5" y1="116.5" y2="160.5"><stop stop-color="white"></stop><stop offset="1" stop-color="white" stop-opacity="0"></stop></linearGradient><linearGradient gradientUnits="userSpaceOnUse" id=":R0:paint1_linear_408_134" x1="121" x2="120.799" y1="54" y2="106.875"><stop stop-color="white"></stop><stop offset="1" stop-color="white" stop-opacity="0"></stop></linearGradient></defs></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" class="next-mark_root__wLeec" height="80" role="img" viewBox="0 0 180 180" width="80"><mask height="180" id=":R0:mask0_408_134" maskUnits="userSpaceOnUse" style="mask-type:alpha" width="180" x="0" y="0"><circle cx="90" cy="90" fill="black" r="90"></circle></mask><g mask="url(#:R0:mask0_408_134)"><circle cx="90" cy="90" data-circle="true" fill="black" r="90"></circle><path d="M149.508 157.52L69.142 54H54V125.97H66.1136V69.3836L139.999 164.845C143.333 162.614 146.509 160.165 149.508 157.52Z" fill="url(#:R0:paint0_linear_408_134)"></path><rect fill="url(#:R0:paint1_linear_408_134)" height="72" width="12" x="115" y="54"></rect></g><defs><linearGradient gradientUnits="userSpaceOnUse" id=":R0:paint0_linear_408_134" x1="109" x2="144.5" y1="116.5" y2="160.5"><stop stop-color="white"></stop><stop offset="1" stop-color="white" stop-opacity="0"></stop></linearGradient><linearGradient gradientUnits="userSpaceOnUse" id=":R0:paint1_linear_408_134" x1="121" x2="120.799" y1="54" y2="106.875"><stop stop-color="white"></stop><stop offset="1" stop-color="white" stop-opacity="0"></stop></linearGradient></defs></svg>
diff --git a/src/docs/svelte.config.js b/src/docs/svelte.config.js
index ea310ae9799..969e4ae6895 100644
--- a/src/docs/svelte.config.js
+++ b/src/docs/svelte.config.js
@@ -3,7 +3,6 @@ import adapter from "@sveltejs/adapter-static"
 import preprocess from "svelte-preprocess"
 import headingSlugs from "rehype-slug"
 import linkHeadings from "rehype-autolink-headings"
-import { inlineSvg } from "@svelte-put/preprocess-inline-svg"
 
 const rehypePlugins = [
   headingSlugs,
@@ -43,7 +42,6 @@ export default {
         _: "src/lib/mdsvex.svelte",
       },
     }),
-    inlineSvg(),
     preprocess({
       postcss: true,
     }),