diff --git a/templates/course_dashboard.html b/templates/course_dashboard.html
index 56a2824..3aa8e2e 100644
--- a/templates/course_dashboard.html
+++ b/templates/course_dashboard.html
@@ -105,9 +105,9 @@
             cursor: pointer;
         }
 
-        .brand-icon {
-            font-size: 2.2em;
-            line-height: 1;
+        .brand-mark {
+            flex-shrink: 0;
+            display: block;
         }
 
         .brand h1 {
@@ -901,7 +901,10 @@
     <div class="app-header">
         <div class="container">
             <a href="/reset_course" class="brand">
-                <span class="brand-icon">📚</span>
+                <svg class="brand-mark" viewBox="0 0 64 64" width="44" height="44" aria-hidden="true">
+                    <rect x="2" y="2" width="60" height="60" rx="16" fill="var(--accent)"></rect>
+                    <path d="M24 20 L24 44 L46 32 Z" fill="var(--bg-secondary)"></path>
+                </svg>
                 <div>
                     <h1>OfflineU</h1>
                     <p class="tagline">Your self-hosted course library</p>
diff --git a/templates/help.html b/templates/help.html
index 44128aa..e7d7003 100644
--- a/templates/help.html
+++ b/templates/help.html
@@ -70,7 +70,7 @@
             align-items: center;
             gap: 12px;
         }
-        .app-header .brand-icon { font-size: 1.6em; }
+        .app-header .brand-mark { flex-shrink: 0; display: block; }
         .app-header a.brand-link {
             color: var(--accent);
             text-decoration: none;
@@ -138,7 +138,10 @@
 <body>
     <div class="app-header">
         <div class="header-inner">
-            <span class="brand-icon">📚</span>
+            <svg class="brand-mark" viewBox="0 0 64 64" width="28" height="28" aria-hidden="true">
+                <rect x="2" y="2" width="60" height="60" rx="16" fill="var(--accent)"></rect>
+                <path d="M24 20 L24 44 L46 32 Z" fill="var(--bg-secondary)"></path>
+            </svg>
             <a href="/reset_course" class="brand-link">OfflineU</a>
         </div>
     </div>
diff --git a/templates/lesson_view.html b/templates/lesson_view.html
index 097de99..8ebb539 100644
--- a/templates/lesson_view.html
+++ b/templates/lesson_view.html
@@ -79,8 +79,9 @@
             align-items: center;
             gap: 12px;
         }
-        .app-header .brand-icon {
-            font-size: 1.6em;
+        .app-header .brand-mark {
+            flex-shrink: 0;
+            display: block;
         }
         .app-header a.brand-link {
             color: var(--accent);
@@ -497,7 +498,10 @@
 <body>
     <div class="app-header">
         <div class="container">
-            <span class="brand-icon">📚</span>
+            <svg class="brand-mark" viewBox="0 0 64 64" width="28" height="28" aria-hidden="true">
+                <rect x="2" y="2" width="60" height="60" rx="16" fill="var(--accent)"></rect>
+                <path d="M24 20 L24 44 L46 32 Z" fill="var(--bg-secondary)"></path>
+            </svg>
             <a href="/reset_course" class="brand-link">OfflineU</a>
         </div>
     </div>
diff --git a/templates/notes_hub.html b/templates/notes_hub.html
index 42eacec..a411e36 100644
--- a/templates/notes_hub.html
+++ b/templates/notes_hub.html
@@ -72,7 +72,7 @@
             align-items: center;
             gap: 12px;
         }
-        .app-header .brand-icon { font-size: 1.6em; }
+        .app-header .brand-mark { flex-shrink: 0; display: block; }
         .app-header a.brand-link {
             color: var(--accent);
             text-decoration: none;
@@ -217,7 +217,10 @@
 <body>
     <div class="app-header">
         <div class="header-inner">
-            <span class="brand-icon">📚</span>
+            <svg class="brand-mark" viewBox="0 0 64 64" width="28" height="28" aria-hidden="true">
+                <rect x="2" y="2" width="60" height="60" rx="16" fill="var(--accent)"></rect>
+                <path d="M24 20 L24 44 L46 32 Z" fill="var(--bg-secondary)"></path>
+            </svg>
             <a href="/reset_course" class="brand-link">OfflineU</a>
         </div>
     </div>
diff --git a/templates/settings.html b/templates/settings.html
index 655e98c..7591309 100644
--- a/templates/settings.html
+++ b/templates/settings.html
@@ -70,8 +70,9 @@
             align-items: center;
             gap: 12px;
         }
-        .app-header .brand-icon {
-            font-size: 1.6em;
+        .app-header .brand-mark {
+            flex-shrink: 0;
+            display: block;
         }
         .app-header a.brand-link {
             color: var(--accent);
@@ -321,7 +322,10 @@
 <body>
     <div class="app-header">
         <div class="header-inner">
-            <span class="brand-icon">📚</span>
+            <svg class="brand-mark" viewBox="0 0 64 64" width="28" height="28" aria-hidden="true">
+                <rect x="2" y="2" width="60" height="60" rx="16" fill="var(--accent)"></rect>
+                <path d="M24 20 L24 44 L46 32 Z" fill="var(--bg-secondary)"></path>
+            </svg>
             <a href="/reset_course" class="brand-link">OfflineU</a>
         </div>
     </div>
