diff --git a/build/brand-icons/128x128-black.png b/build/brand-icons/128x128-black.png
new file mode 100644
index 0000000..15e81e3
Binary files /dev/null and b/build/brand-icons/128x128-black.png differ
diff --git a/build/icons/1024x1024.png b/build/icons/1024x1024.png
index fbc8755..7e586cf 100644
Binary files a/build/icons/1024x1024.png and b/build/icons/1024x1024.png differ
diff --git a/build/icons/128x128.png b/build/icons/128x128.png
index 904a2ec..cefeaca 100644
Binary files a/build/icons/128x128.png and b/build/icons/128x128.png differ
diff --git a/build/icons/16x16.png b/build/icons/16x16.png
index ab49048..f968457 100644
Binary files a/build/icons/16x16.png and b/build/icons/16x16.png differ
diff --git a/build/icons/24x24.png b/build/icons/24x24.png
index c24f31f..5461188 100644
Binary files a/build/icons/24x24.png and b/build/icons/24x24.png differ
diff --git a/build/icons/256x256.png b/build/icons/256x256.png
index 8f2d944..38888c5 100644
Binary files a/build/icons/256x256.png and b/build/icons/256x256.png differ
diff --git a/build/icons/32x32.png b/build/icons/32x32.png
index bad2feb..da4fc57 100644
Binary files a/build/icons/32x32.png and b/build/icons/32x32.png differ
diff --git a/build/icons/48x48.png b/build/icons/48x48.png
index afefeca..e7b330f 100644
Binary files a/build/icons/48x48.png and b/build/icons/48x48.png differ
diff --git a/build/icons/512x512.png b/build/icons/512x512.png
index 26758ef..bba21b7 100644
Binary files a/build/icons/512x512.png and b/build/icons/512x512.png differ
diff --git a/build/icons/64x64.png b/build/icons/64x64.png
index f98189f..2bc4ea2 100644
Binary files a/build/icons/64x64.png and b/build/icons/64x64.png differ
diff --git a/esbuild.config.mjs b/esbuild.config.mjs
index 7f17720..40ceb38 100644
--- a/esbuild.config.mjs
+++ b/esbuild.config.mjs
@@ -30,6 +30,10 @@ const copyAssets = {
         path.join("build", "icons", "128x128.png"),
         path.join("dist", "brand-icon.png")
       );
+      fs.copyFileSync(
+        path.join("build", "brand-icons", "128x128-black.png"),
+        path.join("dist", "brand-icon-black.png")
+      );
     });
   },
 };
diff --git a/src/renderer/index.css b/src/renderer/index.css
index 46f5c08..7edb3de 100644
--- a/src/renderer/index.css
+++ b/src/renderer/index.css
@@ -323,11 +323,21 @@ html, body {
   color: #ffffff;
 }
 
-/* The brand logo is a dark glyph; on the near-black dark theme it would be
-   invisible. Render it white there (light theme keeps the dark logo). */
-:root[data-theme="dark-mode"] .brand-icon,
-:root[data-theme="dark-mode"] .welcome-brand {
-  filter: brightness(0) invert(1);
+/* The brand icon ships as two color variants of the same glyph: a black one
+   for Light mode (visible on the light panel) and a white one for Dark mode
+   (visible on the near-black panel). Toggle them with the existing data-theme
+   attribute so the switch is automatic and the shape never changes. */
+.brand-icon-dark,
+.welcome-brand-dark {
+  display: none;
+}
+:root[data-theme="dark-mode"] .brand-icon-light,
+:root[data-theme="dark-mode"] .welcome-brand-light {
+  display: none;
+}
+:root[data-theme="dark-mode"] .brand-icon-dark,
+:root[data-theme="dark-mode"] .welcome-brand-dark {
+  display: inline-block;
 }
 
 /* ---- welcome ---- */
diff --git a/src/renderer/index.html b/src/renderer/index.html
index 489d7a8..47d80bb 100644
--- a/src/renderer/index.html
+++ b/src/renderer/index.html
@@ -12,7 +12,8 @@
       <aside class="sidebar">
         <div class="sidebar-header">
           <div class="sidebar-brand">
-            <img class="brand-icon" src="./brand-icon.png" alt="Folio" draggable="false" />
+            <img class="brand-icon brand-icon-light" src="./brand-icon-black.png" alt="Folio" draggable="false" />
+            <img class="brand-icon brand-icon-dark" src="./brand-icon.png" alt="Folio" draggable="false" />
             <span class="sidebar-title">Chapters</span>
           </div>
           <button class="icon-button" id="addChapterBtn" title="Add chapter">+</button>
@@ -40,7 +41,8 @@
       </aside>
       <main class="editor" id="editor">
         <div class="welcome" id="welcome">
-          <img class="welcome-brand" src="./brand-icon.png" alt="Folio" draggable="false" />
+          <img class="welcome-brand welcome-brand-light" src="./brand-icon-black.png" alt="Folio" draggable="false" />
+          <img class="welcome-brand welcome-brand-dark" src="./brand-icon.png" alt="Folio" draggable="false" />
           <h1 class="app-name">Folio</h1>
           <p class="app-tagline">Your stories, in folders you choose.</p>
           <div class="welcome-actions">