diff --git a/src/css/injected.scss b/src/css/injected.scss
index 30204cc5..ffd35f06 100644
--- a/src/css/injected.scss
+++ b/src/css/injected.scss
@@ -444,6 +444,7 @@ ul.magicDelete > li.deleting {
 .addedButton svg {
   margin: 6px;
   fill: var(--theme-primary);
+  color: var(--theme-primary);
 }
 #menu,
 .sub,
diff --git a/src/interface/components/icons/LucideMoon.svelte b/src/interface/components/icons/LucideMoon.svelte
new file mode 100644
index 00000000..7b679166
--- /dev/null
+++ b/src/interface/components/icons/LucideMoon.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+  let { class: className = "w-5 h-5" }: { class?: string } = $props();
+</script>
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+  class={className}
+  aria-hidden="true"
+>
+  <path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" />
+</svg>
diff --git a/src/interface/components/icons/LucideSun.svelte b/src/interface/components/icons/LucideSun.svelte
new file mode 100644
index 00000000..1914ef63
--- /dev/null
+++ b/src/interface/components/icons/LucideSun.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+  let { class: className = "w-5 h-5" }: { class?: string } = $props();
+</script>
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+  class={className}
+  aria-hidden="true"
+>
+  <circle cx="12" cy="12" r="4" />
+  <path d="M12 2v2" />
+  <path d="M12 20v2" />
+  <path d="m4.93 4.93 1.41 1.41" />
+  <path d="m17.66 17.66 1.41 1.41" />
+  <path d="M2 12h2" />
+  <path d="M20 12h2" />
+  <path d="m6.34 17.66-1.41 1.41" />
+  <path d="m19.07 4.93-1.41 1.41" />
+</svg>
diff --git a/src/interface/pages/themeCreator.svelte b/src/interface/pages/themeCreator.svelte
index 48261bd2..d9a49b46 100644
--- a/src/interface/pages/themeCreator.svelte
+++ b/src/interface/pages/themeCreator.svelte
@@ -28,6 +28,8 @@
   import { themeUpdates } from '../hooks/ThemeUpdates'
   import { CloseThemeCreator } from '@/plugins/built-in/themes/ThemeCreator'
   import ThemeBlobImage from '@/interface/components/themes/ThemeBlobImage.svelte'
+  import LucideMoon from '@/interface/components/icons/LucideMoon.svelte'
+  import LucideSun from '@/interface/components/icons/LucideSun.svelte'
 
   const { themeID } = $props<{ themeID: string }>()
   const themeManager = ThemeManager.getInstance();
@@ -253,19 +255,23 @@
             </div>
           {:else if item.type === 'lightDarkToggle'}
             <button
-              class="overflow-hidden relative px-4 py-1 text-xl font-medium rounded-lg transition bg-zinc-200 dark:bg-zinc-700 hover:bg-zinc-300 dark:hover:bg-zinc-600 font-IconFamily"
+              class="overflow-hidden relative flex justify-center items-center px-4 py-1 text-xl font-medium rounded-lg transition bg-zinc-200 dark:bg-zinc-700 hover:bg-zinc-300 dark:hover:bg-zinc-600"
               onclick={() => (item.props as LightDarkToggleProps).onChange(!(item.props as LightDarkToggleProps).state)}
             >
               {#key (item.props as LightDarkToggleProps).state}
                 <span
-                  class="absolute"
+                  class="absolute flex items-center justify-center"
                   in:fade={{ duration: 150 }}
                   out:fade={{ duration: 150 }}
                 >
-                  {(item.props as LightDarkToggleProps).state ? '\uec12' : '\uecfe'}
+                  {#if (item.props as LightDarkToggleProps).state}
+                    <LucideMoon class="w-5 h-5" />
+                  {:else}
+                    <LucideSun class="w-5 h-5" />
+                  {/if}
                 </span>
               {/key}
-              <span class='opacity-0'>{'\uec12'}</span>
+              <span class="opacity-0 inline-flex"><LucideMoon class="w-5 h-5" /></span>
             </button>
           {/if}
         </div>
diff --git a/src/lib/icons/lucideMoon.ts b/src/lib/icons/lucideMoon.ts
new file mode 100644
index 00000000..fd880246
--- /dev/null
+++ b/src/lib/icons/lucideMoon.ts
@@ -0,0 +1,6 @@
+/**
+ * Lucide "moon" icon (https://lucide.dev/icons/moon, ISC License).
+ */
+export const LUCIDE_MOON_ICON_SVG = `
+  <path fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/>
+`.trim();
diff --git a/src/lib/icons/lucideSun.ts b/src/lib/icons/lucideSun.ts
new file mode 100644
index 00000000..be2f252d
--- /dev/null
+++ b/src/lib/icons/lucideSun.ts
@@ -0,0 +1,15 @@
+/**
+ * Lucide "sun" icon (https://lucide.dev/icons/sun, ISC License).
+ * Thin strokes — reads clearly as a sun, not a gear.
+ */
+export const LUCIDE_SUN_ICON_SVG = `
+  <circle cx="12" cy="12" r="4" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M12 2v2"/>
+  <path fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M12 20v2"/>
+  <path fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="m4.93 4.93 1.41 1.41"/>
+  <path fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="m17.66 17.66 1.41 1.41"/>
+  <path fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M2 12h2"/>
+  <path fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M20 12h2"/>
+  <path fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="m6.34 17.66-1.41 1.41"/>
+  <path fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="m19.07 4.93-1.41 1.41"/>
+`.trim();
diff --git a/src/seqta/ui/AddBetterSEQTAElements.ts b/src/seqta/ui/AddBetterSEQTAElements.ts
index ca01d6da..e572e5bd 100644
--- a/src/seqta/ui/AddBetterSEQTAElements.ts
+++ b/src/seqta/ui/AddBetterSEQTAElements.ts
@@ -14,6 +14,8 @@ import stringToHTML from "@/seqta/utils/stringToHTML";
 import { settingsState } from "@/seqta/utils/listeners/SettingsState";
 import { updateAllColors } from "./colors/Manager";
 import { delay } from "@/seqta/utils/delay";
+import { LUCIDE_MOON_ICON_SVG } from "@/lib/icons/lucideMoon";
+import { LUCIDE_SUN_ICON_SVG } from "@/lib/icons/lucideSun";
 
 let cachedUserInfo: any = null;
 
@@ -413,14 +415,14 @@ function GetLightDarkModeString() {
 }
 
 async function addDarkLightToggle(parent?: Element) {
-  const SUN_ICON_SVG = /* html */ `<defs><clipPath id="__lottie_element_80"><rect width="24" height="24" x="0" y="0"></rect></clipPath></defs><g clip-path="url(#__lottie_element_80)"><g style="display: block;" transform="matrix(1,0,0,1,12,12)" opacity="1"><g opacity="1" transform="matrix(1,0,0,1,0,0)"><path fill-opacity="1" d=" M0,-4 C-2.2100000381469727,-4 -4,-2.2100000381469727 -4,0 C-4,2.2100000381469727 -2.2100000381469727,4 0,4 C2.2100000381469727,4 4,2.2100000381469727 4,0 C4,-2.2100000381469727 2.2100000381469727,-4 0,-4z"></path></g></g><g style="display: block;" transform="matrix(1,0,0,1,12,12)" opacity="1"><g opacity="1" transform="matrix(1,0,0,1,0,0)"><path fill-opacity="1" d=" M0,6 C-3.309999942779541,6 -6,3.309999942779541 -6,0 C-6,-3.309999942779541 -3.309999942779541,-6 0,-6 C3.309999942779541,-6 6,-3.309999942779541 6,0 C6,3.309999942779541 3.309999942779541,6 0,6z M8,-3.309999942779541 C8,-3.309999942779541 8,-8 8,-8 C8,-8 3.309999942779541,-8 3.309999942779541,-8 C3.309999942779541,-8 0,-11.3100004196167 0,-11.3100004196167 C0,-11.3100004196167 -3.309999942779541,-8 -3.309999942779541,-8 C-3.309999942779541,-8 -8,-8 -8,-8 C-8,-8 -8,-3.309999942779541 -8,-3.309999942779541 C-8,-3.309999942779541 -11.3100004196167,0 -11.3100004196167,0 C-11.3100004196167,0 -8,3.309999942779541 -8,3.309999942779541 C-8,3.309999942779541 -8,8 -8,8 C-8,8 -3.309999942779541,8 -3.309999942779541,8 C-3.309999942779541,8 0,11.3100004196167 0,11.3100004196167 C0,11.3100004196167 3.309999942779541,8 3.309999942779541,8 C3.309999942779541,8 8,8 8,8 C8,8 8,3.309999942779541 8,3.309999942779541 C8,3.309999942779541 11.3100004196167,0 11.3100004196167,0 C11.3100004196167,0 8,-3.309999942779541 8,-3.309999942779541z"></path></g></g></g>`;
-  const MOON_ICON_SVG = /* html */ `<defs><clipPath id="__lottie_element_263"><rect width="24" height="24" x="0" y="0"></rect></clipPath></defs><g clip-path="url(#__lottie_element_263)"><g style="display: block;" transform="matrix(1.5,0,0,1.5,7,12)" opacity="1"><g opacity="1" transform="matrix(1,0,0,1,0,0)"><path fill-opacity="1" d=" M0,-4 C-2.2100000381469727,-4 -1.2920000553131104,-2.2100000381469727 -1.2920000553131104,0 C-1.2920000553131104,2.2100000381469727 -2.2100000381469727,4 0,4 C2.2100000381469727,4 4,2.2100000381469727 4,0 C4,-2.2100000381469727 2.2100000381469727,-4 0,-4z"></path></g></g><g style="display: block;" transform="matrix(-1,0,0,-1,12,12)" opacity="1"><g opacity="1" transform="matrix(1,0,0,1,0,0)"><path fill-opacity="1" d=" M0,6 C-3.309999942779541,6 -6,3.309999942779541 -6,0 C-6,-3.309999942779541 -3.309999942779541,-6 0,-6 C3.309999942779541,-6 6,-3.309999942779541 6,0 C6,3.309999942779541 3.309999942779541,6 0,6z M8,-3.309999942779541 C8,-3.309999942779541 8,-8 8,-8 C8,-8 3.309999942779541,-8 3.309999942779541,-8 C3.309999942779541,-8 0,-11.3100004196167 0,-11.3100004196167 C0,-11.3100004196167 -3.309999942779541,-8 -3.309999942779541,-8 C-3.309999942779541,-8 -8,-8 -8,-8 C-8,-8 -8,-3.309999942779541 -8,-3.309999942779541 C-8,-3.309999942779541 -11.3100004196167,0 -11.3100004196167,0 C-11.3100004196167,0 -8,3.309999942779541 -8,3.309999942779541 C-8,3.309999942779541 -8,8 -8,8 C-8,8 -3.309999942779541,8 -3.309999942779541,8 C-3.309999942779541,8 0,11.3100004196167 0,11.3100004196167 C0,11.3100004196167 3.309999942779541,8 3.309999942779541,8 C3.309999942779541,8 8,8 8,8 C8,8 8,3.309999942779541 8,3.309999942779541 C8,3.309999942779541 11.3100004196167,0 11.3100004196167,0 C11.3100004196167,0 8,-3.309999942779541 8,-3.309999942779541z"></path></g></g></g>`;
+  const SUN_ICON_SVG = LUCIDE_SUN_ICON_SVG;
+  const MOON_ICON_SVG = LUCIDE_MOON_ICON_SVG;
 
   const toggleTarget = parent ?? document.getElementById("content")!;
   toggleTarget.append(
     stringToHTML(/* html */ `
       <button class="addedButton DarkLightButton tooltip" id="LightDarkModeButton">
-        <svg xmlns="http://www.w3.org/2000/svg">${settingsState.DarkMode ? SUN_ICON_SVG : MOON_ICON_SVG}</svg>
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">${settingsState.DarkMode ? SUN_ICON_SVG : MOON_ICON_SVG}</svg>
         <div class="tooltiptext topmenutooltip" id="darklighttooliptext">${GetLightDarkModeString()}</div>
       </button>
     `).firstChild!,