diff --git a/frontend/package.json b/frontend/package.json
index b5951d5..8d17f4b 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -25,6 +25,7 @@
     "@tiptap/vue-3": "^3.0.0",
     "d3": "^7",
     "dompurify": "^3.1.0",
+    "lucide-vue-next": "^0.469.0",
     "marked": "^17.0.0",
     "pinia": "^3.0.0",
     "vue": "3.5.30",
diff --git a/frontend/src/components/AppHeader.vue b/frontend/src/components/AppHeader.vue
index d824f25..a975ba2 100644
--- a/frontend/src/components/AppHeader.vue
+++ b/frontend/src/components/AppHeader.vue
@@ -7,6 +7,7 @@ import { useAuthStore } from "@/stores/auth";
 import { useChatStore } from "@/stores/chat";
 import AppLogo from "@/components/AppLogo.vue";
 import NotificationBell from "@/components/NotificationBell.vue";
+import { Sun, Moon, Settings } from "lucide-vue-next";
 
 const { theme, toggleTheme } = useTheme();
 const { toggleShortcuts } = useShortcuts();
@@ -94,15 +95,13 @@ router.afterEach(() => {
         <button class="btn-icon" @click="toggleShortcuts" title="Keyboard shortcuts (?)">?</button>
 
         <button class="btn-icon" @click="toggleTheme" :title="`Switch to ${theme === 'dark' ? 'light' : 'dark'} mode`">
-          {{ theme === "dark" ? "\u2600" : "\u263E" }}
+          <Sun v-if="theme === 'dark'" :size="16" />
+          <Moon v-else :size="16" />
         </button>
 
         <!-- Settings link -->
         <router-link to="/settings" class="btn-icon" aria-label="Settings" title="Settings">
-          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-            <circle cx="12" cy="12" r="3"/>
-            <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/>
-          </svg>
+          <Settings :size="16" />
         </router-link>
 
         <div class="user-info">
@@ -137,7 +136,8 @@ router.afterEach(() => {
           <span class="status-text">{{ statusShortLabel }}</span>
         </span>
         <button class="btn-icon" @click="toggleShortcuts">?</button>
-        <button class="btn-icon" @click="toggleTheme">{{ theme === "dark" ? "\u2600" : "\u263E" }}</button>
+        <button class="btn-icon" @click="toggleTheme"><Sun v-if="theme === 'dark'" :size="16" />
+          <Moon v-else :size="16" /></button>
       </div>
       <div class="mobile-user">
         <span class="username">{{ authStore.user?.username }}</span>
diff --git a/frontend/src/components/ChatInputBar.vue b/frontend/src/components/ChatInputBar.vue
index 1d4f4c1..fa33639 100644
--- a/frontend/src/components/ChatInputBar.vue
+++ b/frontend/src/components/ChatInputBar.vue
@@ -10,6 +10,15 @@ import { useChatStore } from '@/stores/chat'
 import { useSettingsStore } from '@/stores/settings'
 import { useToastStore } from '@/stores/toast'
 import type { Note } from '@/types/note'
+import {
+  Paperclip,
+  Volume2,
+  VolumeX,
+  Square,
+  Mic,
+  Loader2,
+  ArrowUp,
+} from 'lucide-vue-next'
 
 const props = withDefaults(defineProps<{
   /** Textarea placeholder */
@@ -277,9 +286,7 @@ defineExpose({ focus, prefill })
           :disabled="!store.chatReady"
           title="Attach a note"
         >
-          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-            <path d="M21.44 11.05l-9.19 9.19a6 6 0 01-8.49-8.49l9.19-9.19a4 4 0 015.66 5.66l-9.2 9.19a2 2 0 01-2.83-2.83l8.49-8.48"/>
-          </svg>
+          <Paperclip :size="16" />
         </button>
         <div v-if="showNotePicker" class="note-picker-dropdown">
           <input
@@ -322,12 +329,8 @@ defineExpose({ focus, prefill })
           :title="listenMode ? 'Listen mode on' : 'Listen / volume'"
           aria-label="Listen and volume settings"
         >
-          <svg v-if="!tts.speaking.value" width="17" height="17" viewBox="0 0 24 24" fill="currentColor">
-            <path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"/>
-          </svg>
-          <svg v-else width="17" height="17" viewBox="0 0 24 24" fill="currentColor">
-            <path d="M18 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C21.8 14.82 22 13.43 22 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z"/>
-          </svg>
+          <Volume2 v-if="!tts.speaking.value" :size="16" />
+          <VolumeX v-else :size="16" />
         </button>
         <div v-if="speakerPopoverOpen" class="speaker-popover">
           <button
@@ -354,7 +357,7 @@ defineExpose({ focus, prefill })
             class="speaker-row speaker-row--stop"
             @click="tts.stop()"
           >
-            <svg width="12" height="12" viewBox="0 0 14 14" fill="currentColor"><rect width="14" height="14" rx="2"/></svg>
+            <Square :size="16" fill="currentColor" />
             <span>Stop playback</span>
           </button>
         </div>
@@ -371,12 +374,8 @@ defineExpose({ focus, prefill })
           :title="recorder.recording.value ? 'Click to stop (or wait for silence)' : 'Click to speak'"
           :aria-label="recorder.recording.value ? 'Stop recording' : 'Start recording'"
         >
-        <svg v-if="!transcribingVoice" width="17" height="17" viewBox="0 0 24 24" fill="currentColor">
-          <path d="M12 14c1.66 0 3-1.34 3-3V5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3zm-1-9c0-.55.45-1 1-1s1 .45 1 1v6c0 .55-.45 1-1 1s-1-.45-1-1V5zm6 6c0 2.76-2.24 5-5 5s-5-2.24-5-5H5c0 3.53 2.61 6.43 6 6.92V21h2v-3.08c3.39-.49 6-3.39 6-6.92h-2z"/>
-        </svg>
-        <svg v-else width="17" height="17" viewBox="0 0 24 24" fill="currentColor">
-          <circle cx="12" cy="12" r="8" opacity="0.35"/><circle cx="12" cy="12" r="4"/>
-        </svg>
+        <Mic v-if="!transcribingVoice" :size="16" />
+        <Loader2 v-else :size="16" class="mic-loader" />
         </button>
       </div>
 
@@ -387,14 +386,14 @@ defineExpose({ focus, prefill })
         @click="emit('abort')"
         title="Stop generation"
       >
-        <svg width="14" height="14" viewBox="0 0 14 14" fill="currentColor"><rect width="14" height="14" rx="2"/></svg>
+        <Square :size="16" fill="currentColor" />
       </button>
       <button
         v-else
         class="btn-send"
         @click="onSubmit"
         :disabled="!messageInput.trim() || !store.chatReady"
-      >&uarr;</button>
+      ><ArrowUp :size="16" /></button>
     </div>
   </div>
 </template>
@@ -484,6 +483,8 @@ defineExpose({ focus, prefill })
   z-index: 1;
 }
 .btn-mic.mic-transcribing { opacity: 0.5; }
+.mic-loader { animation: mic-spin 1s linear infinite; }
+@keyframes mic-spin { to { transform: rotate(360deg); } }
 
 /* Mic wrapper + live amplitude halo. The glow is a filled red disc
    absolutely positioned behind the button, scaled/faded by the
diff --git a/frontend/src/components/ChatPanel.vue b/frontend/src/components/ChatPanel.vue
index cf6d2f2..4a34c2d 100644
--- a/frontend/src/components/ChatPanel.vue
+++ b/frontend/src/components/ChatPanel.vue
@@ -6,6 +6,7 @@ import ChatStreamingBubble from '@/components/ChatStreamingBubble.vue'
 import ChatInputBar from '@/components/ChatInputBar.vue'
 import ToolCallCard from '@/components/ToolCallCard.vue'
 import type { Message, ToolCallRecord } from '@/types/chat'
+import { Mic, ChevronDown, X } from 'lucide-vue-next'
 
 const props = withDefaults(defineProps<{
   variant: 'full' | 'widget'
@@ -372,7 +373,7 @@ defineExpose({ focus, prefill, send, contextCount, sidebarOpen, toggleContextSid
               </router-link>
             </div>
             <button class="empty-voice-btn" @click="startVoiceMode" title="Start in voice mode">
-              <span class="voice-icon">🎤</span>
+              <Mic class="voice-icon" :size="16" />
               <span>Start in voice mode</span>
             </button>
           </div>
@@ -391,7 +392,7 @@ defineExpose({ focus, prefill, send, contextCount, sidebarOpen, toggleContextSid
             :class="{ collapsed: collapsedSections.has('auto') }"
             @click="toggleSection('auto')"
           >
-            <svg class="chev" width="10" height="10" viewBox="0 0 10 10" fill="currentColor"><path d="M2 3l3 4 3-4z"/></svg>
+            <ChevronDown class="chev" :size="16" />
             <span>Auto-included</span>
             <span class="section-count">{{ autoInjectedNotes.length }}</span>
           </button>
@@ -404,7 +405,7 @@ defineExpose({ focus, prefill, send, contextCount, sidebarOpen, toggleContextSid
                 class="context-note-score"
                 :class="{ 'score-high': note.score >= 0.75, 'score-medium': note.score >= 0.60 && note.score < 0.75, 'score-low': note.score < 0.60 }"
               >{{ Math.round(note.score * 100) }}%</span>
-              <button class="context-note-remove" @click="excludeAutoNote(note.id)" title="Remove from context">&times;</button>
+              <button class="context-note-remove" @click="excludeAutoNote(note.id)" title="Remove from context"><X :size="16" /></button>
             </div>
           </div>
         </template>
@@ -414,7 +415,7 @@ defineExpose({ focus, prefill, send, contextCount, sidebarOpen, toggleContextSid
             :class="{ collapsed: collapsedSections.has('suggested'), 'context-sidebar-header-gap': autoInjectedNotes.length }"
             @click="toggleSection('suggested')"
           >
-            <svg class="chev" width="10" height="10" viewBox="0 0 10 10" fill="currentColor"><path d="M2 3l3 4 3-4z"/></svg>
+            <ChevronDown class="chev" :size="16" />
             <span>Suggested</span>
             <span class="section-count">{{ suggestedNotes.length }}</span>
           </button>
@@ -436,14 +437,14 @@ defineExpose({ focus, prefill, send, contextCount, sidebarOpen, toggleContextSid
             :class="{ collapsed: collapsedSections.has('included'), 'context-sidebar-header-gap': autoInjectedNotes.length || suggestedNotes.length }"
             @click="toggleSection('included')"
           >
-            <svg class="chev" width="10" height="10" viewBox="0 0 10 10" fill="currentColor"><path d="M2 3l3 4 3-4z"/></svg>
+            <ChevronDown class="chev" :size="16" />
             <span>In Context</span>
             <span class="section-count">{{ includedNotes.length }}</span>
           </button>
           <div v-show="!collapsedSections.has('included')">
             <div v-for="note in includedNotes" :key="note.id" class="context-note context-note-included">
               <router-link :to="`/notes/${note.id}`" class="context-note-name">{{ note.title }}</router-link>
-              <button class="context-note-remove" @click="removeIncludedNote(note.id)" title="Remove from context">&times;</button>
+              <button class="context-note-remove" @click="removeIncludedNote(note.id)" title="Remove from context"><X :size="16" /></button>
             </div>
           </div>
         </template>
diff --git a/frontend/src/components/EventSlideOver.vue b/frontend/src/components/EventSlideOver.vue
index 5ba73a6..e5cd769 100644
--- a/frontend/src/components/EventSlideOver.vue
+++ b/frontend/src/components/EventSlideOver.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { X } from "lucide-vue-next";
 import { ref, computed, watch, onMounted, onUnmounted } from "vue";
 import { createEvent, updateEvent, deleteEvent, type EventEntry, type EventCreatePayload, type EventUpdatePayload } from "@/api/client";
 import ProjectSelector from "@/components/ProjectSelector.vue";
@@ -259,7 +260,7 @@ async function doDelete() {
       <div class="slide-over-panel" role="dialog" aria-modal="true">
         <div class="so-header">
           <h2 class="so-title">{{ isEditMode ? "Edit Event" : "New Event" }}</h2>
-          <button class="so-close" @click="emit('close')" aria-label="Close">✕</button>
+          <button class="so-close" @click="emit('close')" aria-label="Close"><X :size="16" /></button>
         </div>
 
         <form class="so-form" @submit.prevent="save">
@@ -316,7 +317,7 @@ async function doDelete() {
             <div class="color-row">
               <input v-model="color" type="color" class="color-picker" title="Pick event color" />
               <input v-model="color" class="so-input color-hex" placeholder="#5B4A8A" />
-              <button v-if="color" type="button" class="btn-clear-color" @click="color = ''">✕</button>
+              <button v-if="color" type="button" class="btn-clear-color" @click="color = ''"><X :size="16" /></button>
             </div>
           </div>
 
diff --git a/frontend/src/components/MarkdownToolbar.vue b/frontend/src/components/MarkdownToolbar.vue
index 23fe9b1..3822f0e 100644
--- a/frontend/src/components/MarkdownToolbar.vue
+++ b/frontend/src/components/MarkdownToolbar.vue
@@ -1,24 +1,40 @@
 <script setup lang="ts">
 import type { Editor } from "@tiptap/vue-3";
+import {
+  Bold,
+  Italic,
+  Strikethrough,
+  Heading1,
+  Heading2,
+  Heading3,
+  List,
+  ListOrdered,
+  ListChecks,
+  Code,
+  SquareCode,
+  Quote,
+  Link as LinkIcon,
+  Brackets,
+} from "lucide-vue-next";
+import type { Component } from "vue";
 
 const props = defineProps<{ editor: Editor | null }>();
 
-// SVG icons — Material Design paths (24x24) or custom SVG
-const ICONS: Record<string, string> = {
-  bold: `<svg viewBox="0 0 24 24" width="15" height="15" fill="currentColor"><path d="M15.6 10.79c.97-.67 1.65-1.77 1.65-2.79 0-2.26-1.75-4-4-4H7v14h7.04c2.09 0 3.71-1.7 3.71-3.79 0-1.52-.86-2.82-2.15-3.42zM10 6.5h3c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5h-3v-3zm3.5 9H10v-3h3.5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5z"/></svg>`,
-  italic: `<svg viewBox="0 0 24 24" width="15" height="15" fill="currentColor"><path d="M10 4v3h2.21l-3.42 8H6v3h8v-3h-2.21l3.42-8H18V4z"/></svg>`,
-  strike: `<svg viewBox="0 0 24 24" width="15" height="15" fill="currentColor"><path d="M10 19h4v-3h-4v3zM5 4v3h5v3h4V7h5V4H5zM3 14h18v-2H3v2z"/></svg>`,
-  h1: `<svg viewBox="0 0 24 24" width="15" height="15"><text x="1" y="17" font-family="sans-serif" font-weight="800" font-size="16" fill="currentColor">H</text><text x="14" y="17" font-family="sans-serif" font-weight="700" font-size="11" fill="currentColor">1</text></svg>`,
-  h2: `<svg viewBox="0 0 24 24" width="15" height="15"><text x="1" y="17" font-family="sans-serif" font-weight="800" font-size="16" fill="currentColor">H</text><text x="14" y="17" font-family="sans-serif" font-weight="700" font-size="11" fill="currentColor">2</text></svg>`,
-  h3: `<svg viewBox="0 0 24 24" width="15" height="15"><text x="1" y="17" font-family="sans-serif" font-weight="800" font-size="16" fill="currentColor">H</text><text x="14" y="17" font-family="sans-serif" font-weight="700" font-size="11" fill="currentColor">3</text></svg>`,
-  ul: `<svg viewBox="0 0 24 24" width="15" height="15" fill="currentColor"><path d="M4 10.5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm0-6c-.83 0-1.5.67-1.5 1.5S3.17 7.5 4 7.5 5.5 6.83 5.5 6 4.83 4.5 4 4.5zm0 12c-.83 0-1.5.68-1.5 1.5s.68 1.5 1.5 1.5 1.5-.68 1.5-1.5-.67-1.5-1.5-1.5zM7 19h14v-2H7v2zm0-6h14v-2H7v2zm0-8v2h14V5H7z"/></svg>`,
-  ol: `<svg viewBox="0 0 24 24" width="15" height="15" fill="currentColor"><path d="M2 17h2v.5H3v1h1v.5H2v1h3v-4H2zm1-9h1V4H2v1h1zm-1 3h1.8L2 13.1v.9h3v-1H3.2L5 10.9V10H2zm5-3h13V6H7v2zm0 4h13v-2H7v2zm0 4h13v-2H7v2z"/></svg>`,
-  task: `<svg viewBox="0 0 24 24" width="15" height="15" fill="currentColor"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>`,
-  code: `<svg viewBox="0 0 24 24" width="15" height="15" fill="currentColor"><path d="M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z"/></svg>`,
-  codeblock: `<svg viewBox="0 0 24 24" width="15" height="15" fill="currentColor"><path d="M20 3H4v10c0 2.21 1.79 4 4 4h6c2.21 0 4-1.79 4-4v-3h2c1.11 0 2-.89 2-2V5c0-1.11-.89-2-2-2zm0 5h-2V5h2v3zM4 19h16v2H4z"/></svg>`,
-  quote: `<svg viewBox="0 0 24 24" width="15" height="15" fill="currentColor"><path d="M6 17h3l2-4V7H5v6h3zm8 0h3l2-4V7h-6v6h3z"/></svg>`,
-  link: `<svg viewBox="0 0 24 24" width="15" height="15" fill="currentColor"><path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z"/></svg>`,
-  wikilink: `<svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h3"/><path d="M16 3h3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-3"/></svg>`,
+const ICONS: Record<string, Component> = {
+  bold: Bold,
+  italic: Italic,
+  strike: Strikethrough,
+  h1: Heading1,
+  h2: Heading2,
+  h3: Heading3,
+  ul: List,
+  ol: ListOrdered,
+  task: ListChecks,
+  code: Code,
+  codeblock: SquareCode,
+  quote: Quote,
+  link: LinkIcon,
+  wikilink: Brackets,
 };
 
 const groups = [
@@ -81,7 +97,7 @@ const groups = [
           tabindex="-1"
           @mousedown.prevent="btn.command()"
         >
-          <span class="btn-icon" v-html="ICONS[btn.id]" />
+          <component :is="ICONS[btn.id]" class="btn-icon" :size="16" />
         </button>
       </div>
       <span v-if="gi < groups.length - 1" class="toolbar-sep" aria-hidden="true" />
diff --git a/frontend/src/components/NotificationBell.vue b/frontend/src/components/NotificationBell.vue
index 1816355..7f4f25d 100644
--- a/frontend/src/components/NotificationBell.vue
+++ b/frontend/src/components/NotificationBell.vue
@@ -2,6 +2,7 @@
 import { ref, onMounted, onUnmounted } from 'vue'
 import { useNotificationsStore } from '@/stores/notifications'
 import NotificationsPanel from './NotificationsPanel.vue'
+import { Bell } from 'lucide-vue-next'
 
 const store = useNotificationsStore()
 const open = ref(false)
@@ -45,10 +46,7 @@ onUnmounted(() => {
       aria-label="Notifications"
       :title="`${store.count} unread notification${store.count !== 1 ? 's' : ''}`"
     >
-      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-        <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/>
-        <path d="M13.73 21a2 2 0 0 1-3.46 0"/>
-      </svg>
+      <Bell :size="16" aria-hidden="true" />
       <span v-if="store.count > 0" class="bell-badge" aria-live="polite">{{ store.count > 99 ? '99+' : store.count }}</span>
     </button>
     <NotificationsPanel v-if="open" @close="close" />
diff --git a/frontend/src/components/NotificationsPanel.vue b/frontend/src/components/NotificationsPanel.vue
index e10e997..3fb2a27 100644
--- a/frontend/src/components/NotificationsPanel.vue
+++ b/frontend/src/components/NotificationsPanel.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { X } from "lucide-vue-next";
 import { onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 import { useNotificationsStore } from '@/stores/notifications'
@@ -56,7 +57,7 @@ onMounted(() => store.fetchAll())
           </p>
           <span class="notif-time">{{ relativeTime(n.created_at) }}</span>
         </div>
-        <button class="btn-notif-close" @click.stop="store.markRead(n.id)" aria-label="Dismiss">✕</button>
+        <button class="btn-notif-close" @click.stop="store.markRead(n.id)" aria-label="Dismiss"><X :size="16" /></button>
       </li>
     </ul>
     <div v-else class="notif-empty">No unread notifications</div>
diff --git a/frontend/src/components/ShareDialog.vue b/frontend/src/components/ShareDialog.vue
index 23f84ba..bc975da 100644
--- a/frontend/src/components/ShareDialog.vue
+++ b/frontend/src/components/ShareDialog.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { X } from "lucide-vue-next";
 import { ref, onMounted } from 'vue'
 import {
   searchUsers,
@@ -116,7 +117,7 @@ onMounted(async () => {
       <div class="share-dialog" role="dialog" :aria-label="`Share ${resourceTitle}`">
         <header class="share-header">
           <h2 class="share-title">Share "{{ resourceTitle }}"</h2>
-          <button class="btn-close" @click="emit('close')" aria-label="Close">✕</button>
+          <button class="btn-close" @click="emit('close')" aria-label="Close"><X :size="16" /></button>
         </header>
 
         <!-- Add share form -->
@@ -183,7 +184,7 @@ onMounted(async () => {
                 <option value="editor">Editor</option>
                 <option value="admin">Admin</option>
               </select>
-              <button class="btn-remove-share" @click="removeShare(share)" aria-label="Remove">✕</button>
+              <button class="btn-remove-share" @click="removeShare(share)" aria-label="Remove"><X :size="16" /></button>
             </li>
             <li v-if="!shares.length" class="shares-empty">Not shared with anyone yet</li>
           </ul>
diff --git a/frontend/src/components/WorkspaceChatWidget.vue b/frontend/src/components/WorkspaceChatWidget.vue
index 59c1a86..7180927 100644
--- a/frontend/src/components/WorkspaceChatWidget.vue
+++ b/frontend/src/components/WorkspaceChatWidget.vue
@@ -3,6 +3,7 @@ import { ref, computed, nextTick, onMounted, onUnmounted, watch } from 'vue';
 import { useChatStore } from '@/stores/chat';
 import ChatPanel from '@/components/ChatPanel.vue';
 import ChatInputBar from '@/components/ChatInputBar.vue';
+import { RotateCcw, ChevronDown, ChevronUp } from 'lucide-vue-next';
 
 const props = defineProps<{ projectId: number }>();
 
@@ -195,11 +196,11 @@ defineExpose({ prefill });
             </button>
           </div>
         </div>
-        <button class="btn-icon-sm" title="Restart conversation" @click="restart">↻</button>
+        <button class="btn-icon-sm" title="Restart conversation" @click="restart">
+          <RotateCcw :size="16" />
+        </button>
         <button class="btn-icon-sm" title="Collapse" @click="collapse">
-          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
-            <polyline points="6 9 12 15 18 9"/>
-          </svg>
+          <ChevronDown :size="16" />
         </button>
       </div>
     </div>
@@ -217,9 +218,7 @@ defineExpose({ prefill });
     <!-- Collapsed: standalone input bar with expand affordance -->
     <div v-else class="ws-chat-collapsed">
       <button class="ws-chat-expand-btn" title="Expand chat" @click="expand">
-        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
-          <polyline points="18 15 12 9 6 15"/>
-        </svg>
+        <ChevronUp :size="16" />
       </button>
       <div class="ws-chat-input-row">
         <ChatInputBar
diff --git a/frontend/src/components/WorkspaceNoteEditor.vue b/frontend/src/components/WorkspaceNoteEditor.vue
index d0185f2..c6c62c8 100644
--- a/frontend/src/components/WorkspaceNoteEditor.vue
+++ b/frontend/src/components/WorkspaceNoteEditor.vue
@@ -10,6 +10,7 @@ import TiptapEditor from "@/components/TiptapEditor.vue";
 import TagInput from "@/components/TagInput.vue";
 import MarkdownToolbar from "@/components/MarkdownToolbar.vue";
 import WordCount from "@/components/WordCount.vue";
+import { Trash2, X } from "lucide-vue-next";
 
 const props = defineProps<{
   projectId: number;
@@ -316,7 +317,7 @@ defineExpose({ reload: loadProjectNotes });
           <button class="btn-confirm" :disabled="creatingNote || !newNoteTitle.trim()" @click="createNote">
             {{ creatingNote ? '…' : '+' }}
           </button>
-          <button class="btn-cancel" aria-label="Cancel new note" @click="cancelNewNote">✕</button>
+          <button class="btn-cancel" aria-label="Cancel new note" @click="cancelNewNote"><X :size="16" /></button>
         </template>
         <template v-else>
           <span class="rail-title">Notes</span>
@@ -332,7 +333,7 @@ defineExpose({ reload: loadProjectNotes });
           type="search"
           aria-label="Search notes"
         />
-        <button v-if="searchQuery" class="btn-search-clear" aria-label="Clear search" @click="searchQuery = ''">✕</button>
+        <button v-if="searchQuery" class="btn-search-clear" aria-label="Clear search" @click="searchQuery = ''"><X :size="16" /></button>
       </div>
 
       <div v-if="listLoading" class="rail-state">Loading…</div>
@@ -360,10 +361,10 @@ defineExpose({ reload: loadProjectNotes });
               <button class="btn-confirm-delete" :disabled="pendingDelete === note.id" @click="requestDelete(note.id, $event)">
                 {{ pendingDelete === note.id ? '…' : 'Delete?' }}
               </button>
-              <button class="btn-cancel-delete" aria-label="Cancel delete" @click="cancelDelete($event)">✕</button>
+              <button class="btn-cancel-delete" aria-label="Cancel delete" @click="cancelDelete($event)"><X :size="16" /></button>
             </template>
             <button v-else class="btn-delete" title="Delete note" @click="requestDelete(note.id, $event)">
-              <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/><path d="M10 11v6"/><path d="M14 11v6"/><path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"/></svg>
+              <Trash2 :size="16" />
             </button>
           </div>
         </li>
@@ -416,7 +417,7 @@ defineExpose({ reload: loadProjectNotes });
             :class="['btn-tag-suggestion', { applied: tagSuggestions.appliedTags.value.has(tag) }]"
             @click="tagSuggestions.applyTagSuggestion(tag)"
           >#{{ tag }}{{ tagSuggestions.appliedTags.value.has(tag) ? ' ✓' : '' }}</button>
-          <button class="btn-dismiss-suggestions" aria-label="Dismiss tag suggestions" @click="tagSuggestions.dismissTagSuggestions()">✕</button>
+          <button class="btn-dismiss-suggestions" aria-label="Dismiss tag suggestions" @click="tagSuggestions.dismissTagSuggestions()"><X :size="16" /></button>
         </div>
 
         <div class="toolbar-row">
@@ -429,7 +430,7 @@ defineExpose({ reload: loadProjectNotes });
             <button class="btn-chip-link" @click="applyLink(s)">[[{{ s.title }}]]</button>
           </span>
           <button class="btn-link-all" @click="applyAllLinks" title="Link all suggestions">All</button>
-          <button class="btn-dismiss-suggestions" aria-label="Dismiss link suggestions" @click="linkSuggestions = []">✕</button>
+          <button class="btn-dismiss-suggestions" aria-label="Dismiss link suggestions" @click="linkSuggestions = []"><X :size="16" /></button>
         </div>
 
         <div class="editor-area" @keydown.ctrl.s.prevent="saveNote" @keydown.ctrl.e.prevent="editorRef?.editor?.commands.focus()">
diff --git a/frontend/src/components/WorkspaceTaskPanel.vue b/frontend/src/components/WorkspaceTaskPanel.vue
index f57fc62..854bf73 100644
--- a/frontend/src/components/WorkspaceTaskPanel.vue
+++ b/frontend/src/components/WorkspaceTaskPanel.vue
@@ -5,6 +5,7 @@ import { apiGet, apiPatch, apiPost, apiDelete } from "@/api/client";
 import { useToastStore } from "@/stores/toast";
 import TaskLogSection from "@/components/TaskLogSection.vue";
 import { renderMarkdown } from "@/utils/markdown";
+import { Trash2, X } from "lucide-vue-next";
 
 const props = defineProps<{ projectId: number }>();
 
@@ -298,12 +299,12 @@ defineExpose({ reload: loadAll });
           </span>
           <template v-if="deleteConfirmPending">
             <button class="btn-delete-confirm" :disabled="deletingTask" @click="deleteActiveTask">{{ deletingTask ? '...' : 'Delete?' }}</button>
-            <button class="btn-delete-cancel" aria-label="Cancel delete" @click="cancelDeleteTask">✕</button>
+            <button class="btn-delete-cancel" aria-label="Cancel delete" @click="cancelDeleteTask"><X :size="16" /></button>
           </template>
           <button v-else class="btn-delete-task" title="Delete task" @click="deleteActiveTask">
-            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/><path d="M10 11v6"/><path d="M14 11v6"/><path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"/></svg>
+            <Trash2 :size="16" />
           </button>
-          <button class="btn-close-detail" @click="closeTask" aria-label="Close detail">✕</button>
+          <button class="btn-close-detail" @click="closeTask" aria-label="Close detail"><X :size="16" /></button>
         </div>
 
         <h3 class="detail-title">{{ activeTask.title }}</h3>
diff --git a/frontend/src/views/CalendarView.vue b/frontend/src/views/CalendarView.vue
index f107c3f..082e4e7 100644
--- a/frontend/src/views/CalendarView.vue
+++ b/frontend/src/views/CalendarView.vue
@@ -10,6 +10,7 @@ import { listEvents, updateEvent, type EventEntry } from "@/api/client";
 import EventSlideOver from "@/components/EventSlideOver.vue";
 import { useToastStore } from "@/stores/toast";
 import { fmtTime, fmtDateTime, fmtDayLabel } from "@/utils/dateFormat";
+import { MapPin } from "lucide-vue-next";
 
 const toast = useToastStore();
 const calendarRef = ref<InstanceType<typeof FullCalendar> | null>(null);
@@ -333,9 +334,7 @@ const upcomingGrouped = computed(() => {
                   </template>
                 </div>
                 <div v-if="ev.location" class="upcoming-card-meta">
-                  <svg width="11" height="11" viewBox="0 0 24 24" fill="currentColor" style="flex-shrink:0">
-                    <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/>
-                  </svg>
+                  <MapPin :size="16" style="flex-shrink:0" />
                   {{ ev.location }}
                 </div>
                 <div v-if="ev.description" class="upcoming-card-desc">{{ ev.description }}</div>
@@ -367,9 +366,7 @@ const upcomingGrouped = computed(() => {
             </template>
           </div>
           <div v-if="popover.location" class="popover-meta">
-            <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor" style="flex-shrink:0;margin-top:1px">
-              <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/>
-            </svg>
+            <MapPin :size="16" style="flex-shrink:0;margin-top:1px" />
             {{ popover.location }}
           </div>
           <div v-if="popover.description" class="popover-desc">{{ popover.description }}</div>
diff --git a/frontend/src/views/ChatView.vue b/frontend/src/views/ChatView.vue
index cab2b55..ef6f654 100644
--- a/frontend/src/views/ChatView.vue
+++ b/frontend/src/views/ChatView.vue
@@ -4,6 +4,7 @@ import { useRoute, useRouter } from "vue-router";
 import { useChatStore } from "@/stores/chat";
 import { apiGet } from "@/api/client";
 import ChatPanel from "@/components/ChatPanel.vue";
+import { MoreVertical, Menu, Paperclip } from "lucide-vue-next";
 
 const route = useRoute();
 const router = useRouter();
@@ -314,9 +315,7 @@ onUnmounted(() => {
               aria-label="List actions"
               title="List actions"
             >
-              <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
-                <circle cx="12" cy="5" r="1.75"/><circle cx="12" cy="12" r="1.75"/><circle cx="12" cy="19" r="1.75"/>
-              </svg>
+              <MoreVertical :size="16" />
             </button>
             <div v-if="sidebarKebabOpen" class="kebab-menu">
               <button
@@ -388,11 +387,7 @@ onUnmounted(() => {
       <template v-if="store.currentConversation">
         <div class="chat-header">
           <button class="btn-sidebar-toggle hide-desktop" aria-label="Toggle sidebar" @click="toggleSidebar">
-            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-              <line x1="3" y1="6" x2="21" y2="6"/>
-              <line x1="3" y1="12" x2="21" y2="12"/>
-              <line x1="3" y1="18" x2="21" y2="18"/>
-            </svg>
+            <Menu :size="24" />
           </button>
           <h2>{{ store.currentConversation.title || "New Chat" }}</h2>
 
@@ -433,7 +428,7 @@ onUnmounted(() => {
             @click="toggleContextSidebar"
             :title="contextSidebarOpen ? 'Hide context panel' : 'Show context panel'"
           >
-            <span class="context-icon">📎</span>
+            <Paperclip class="context-icon" :size="16" />
             <span class="context-label">Context</span>
             <span class="context-count-badge">{{ contextCount }}</span>
           </button>
@@ -446,9 +441,7 @@ onUnmounted(() => {
               aria-label="Conversation actions"
               title="Conversation actions"
             >
-              <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
-                <circle cx="12" cy="5" r="1.75"/><circle cx="12" cy="12" r="1.75"/><circle cx="12" cy="19" r="1.75"/>
-              </svg>
+              <MoreVertical :size="16" />
             </button>
             <div v-if="headerKebabOpen" class="kebab-menu kebab-menu--right">
               <button
@@ -470,11 +463,7 @@ onUnmounted(() => {
 
       <div v-else class="no-conversation">
         <button class="btn-sidebar-toggle no-conv-toggle hide-desktop" @click="toggleSidebar">
-          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-            <line x1="3" y1="6" x2="21" y2="6"/>
-            <line x1="3" y1="12" x2="21" y2="12"/>
-            <line x1="3" y1="18" x2="21" y2="18"/>
-          </svg>
+          <Menu :size="24" />
         </button>
         <p>Select a conversation or start a new chat.</p>
         <button class="btn-new-conv" @click="newConversation">
diff --git a/frontend/src/views/GraphView.vue b/frontend/src/views/GraphView.vue
index b4f2e47..07d02a2 100644
--- a/frontend/src/views/GraphView.vue
+++ b/frontend/src/views/GraphView.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { X } from "lucide-vue-next";
 import { ref, onMounted, onUnmounted, watch, computed } from "vue";
 import { useRouter } from "vue-router";
 import { forceSimulation, forceLink, forceManyBody, forceX, forceY, forceCollide, SimulationNodeDatum, SimulationLinkDatum, Simulation } from "d3-force";
@@ -543,7 +544,7 @@ onUnmounted(() => {
                 :to="peekNode.type === 'task' ? `/tasks/${peekNode.id}/edit` : `/notes/${peekNode.id}/edit`"
                 class="peek-link"
               >Edit</router-link>
-              <button class="peek-close" @click="closePeek" title="Close (Esc)">✕</button>
+              <button class="peek-close" @click="closePeek" title="Close (Esc)"><X :size="16" /></button>
             </div>
           </div>
 
diff --git a/frontend/src/views/KnowledgeView.vue b/frontend/src/views/KnowledgeView.vue
index a25ffd5..e80b881 100644
--- a/frontend/src/views/KnowledgeView.vue
+++ b/frontend/src/views/KnowledgeView.vue
@@ -7,6 +7,20 @@ import { useChatStore } from "@/stores/chat";
 import GraphView from "@/views/GraphView.vue";
 import ChatPanel from "@/components/ChatPanel.vue";
 import ChatInputBar from "@/components/ChatInputBar.vue";
+import {
+  FileText,
+  CheckSquare,
+  User,
+  MapPin,
+  List,
+  Search,
+  Share2,
+  ChevronLeft,
+  ChevronRight,
+  ChevronUp,
+  ChevronDown,
+  X,
+} from "lucide-vue-next";
 
 const router = useRouter();
 const chatStore = useChatStore();
@@ -426,23 +440,23 @@ onUnmounted(() => {
           </button>
           <div v-if="newNoteMenuOpen" class="new-note-menu">
             <button @click="createNew('note')">
-              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
+              <FileText :size="16" />
               Note
             </button>
             <button @click="createNew('task')">
-              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg>
+              <CheckSquare :size="16" />
               Task
             </button>
             <button @click="createNew('person')">
-              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
+              <User :size="16" />
               Person
             </button>
             <button @click="createNew('place')">
-              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
+              <MapPin :size="16" />
               Place
             </button>
             <button @click="createNew('list')">
-              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/></svg>
+              <List :size="16" />
               List
             </button>
           </div>
@@ -493,7 +507,7 @@ onUnmounted(() => {
         <!-- Toolbar -->
         <div class="knowledge-toolbar">
           <div class="search-wrap">
-            <svg class="search-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
+            <Search class="search-icon" :size="16" />
             <input
               v-model="searchQuery"
               @input="onSearchInput"
@@ -509,10 +523,7 @@ onUnmounted(() => {
             <option value="type">By type</option>
           </select>
           <button class="btn-graph" :class="{ active: graphOpen }" @click="toggleGraph" title="Toggle graph view">
-            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-              <circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/>
-              <path d="m8.59 13.51 6.83 3.98M15.41 6.51l-6.82 3.98"/>
-            </svg>
+            <Share2 :size="16" />
             Graph
           </button>
         </div>
@@ -630,12 +641,12 @@ onUnmounted(() => {
               @click="toggleGraphExpand"
               :title="graphExpanded ? 'Narrow panel' : 'Expand panel'"
             >
-              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <polyline v-if="graphExpanded" points="15 18 9 12 15 6"/>
-                <polyline v-else points="9 18 15 12 9 6"/>
-              </svg>
+              <ChevronLeft v-if="graphExpanded" :size="16" />
+              <ChevronRight v-else :size="16" />
+            </button>
+            <button class="btn-icon-sm" @click="toggleGraph" title="Close graph">
+              <X :size="16" />
             </button>
-            <button class="btn-icon-sm" @click="toggleGraph" title="Close graph">✕</button>
           </div>
         </div>
         <div class="graph-embed">
@@ -656,12 +667,12 @@ onUnmounted(() => {
             @click="chatCollapsed = !chatCollapsed"
             :title="chatCollapsed ? 'Expand' : 'Collapse'"
           >
-            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
-              <polyline v-if="chatCollapsed" points="18 15 12 9 6 15"/>
-              <polyline v-else points="6 9 12 15 18 9"/>
-            </svg>
+            <ChevronUp v-if="chatCollapsed" :size="16" />
+            <ChevronDown v-else :size="16" />
+          </button>
+          <button class="btn-icon-sm" @click="closeChat" title="Close chat">
+            <X :size="16" />
           </button>
-          <button class="btn-icon-sm" @click="closeChat" title="Close chat">✕</button>
         </div>
       </div>
 
diff --git a/frontend/src/views/NoteViewerView.vue b/frontend/src/views/NoteViewerView.vue
index 0d359f7..847606f 100644
--- a/frontend/src/views/NoteViewerView.vue
+++ b/frontend/src/views/NoteViewerView.vue
@@ -9,6 +9,7 @@ import type { Note } from "@/types/note";
 import TagPill from "@/components/TagPill.vue";
 import TableOfContents from "@/components/TableOfContents.vue";
 import ShareDialog from "@/components/ShareDialog.vue";
+import { Clock, Pencil, Link as LinkIcon } from "lucide-vue-next";
 
 const route = useRoute();
 const router = useRouter();
@@ -238,12 +239,12 @@ async function convertToTask() {
         <h1 class="note-title">{{ store.currentNote.title || "Untitled" }}</h1>
         <p class="meta">
           <span class="meta-item">
-            <svg viewBox="0 0 24 24" width="13" height="13" fill="currentColor" aria-hidden="true"><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67V7z"/></svg>
+            <Clock :size="16" />
             Updated {{ relativeTime(store.currentNote.updated_at) }}
           </span>
           <span class="meta-sep" aria-hidden="true">·</span>
           <span class="meta-item">
-            <svg viewBox="0 0 24 24" width="13" height="13" fill="currentColor" aria-hidden="true"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>
+            <Pencil :size="16" />
             Created {{ relativeTime(store.currentNote.created_at) }}
           </span>
         </p>
@@ -265,7 +266,7 @@ async function convertToTask() {
 
         <div v-if="backlinks.length" class="backlinks">
           <h3 class="backlinks-heading">
-            <svg viewBox="0 0 24 24" width="15" height="15" fill="currentColor" aria-hidden="true"><path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z"/></svg>
+            <LinkIcon :size="16" />
             Backlinks
             <span class="backlinks-count">{{ backlinks.length }}</span>
           </h3>
diff --git a/frontend/src/views/ProjectView.vue b/frontend/src/views/ProjectView.vue
index a7039d3..add5054 100644
--- a/frontend/src/views/ProjectView.vue
+++ b/frontend/src/views/ProjectView.vue
@@ -5,6 +5,16 @@ import { apiGet, apiPatch, apiDelete, apiPost } from "@/api/client";
 import { useToastStore } from "@/stores/toast";
 import { relativeTime } from "@/composables/useRelativeTime";
 import ShareDialog from "@/components/ShareDialog.vue";
+import {
+  LayoutGrid,
+  Clock,
+  FileText,
+  ChevronRight,
+  ChevronDown,
+  Pencil,
+  Trash2,
+  Check,
+} from "lucide-vue-next";
 
 interface Milestone {
   id: number;
@@ -330,7 +340,7 @@ async function confirmDelete() {
       <router-link to="/projects" class="btn-back">← Projects</router-link>
       <div class="page-header-actions">
         <router-link v-if="project" :to="`/workspace/${project.id}`" class="btn-workspace">
-          <svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor" aria-hidden="true"><path d="M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z"/></svg>
+          <LayoutGrid :size="16" />
           Workspace
         </router-link>
         <button v-if="project" class="btn-share" @click="showShare = true">Share</button>
@@ -359,7 +369,7 @@ async function confirmDelete() {
         </div>
         <p v-if="project.goal" class="project-goal">{{ project.goal }}</p>
         <p v-if="project.summary?.last_activity" class="project-activity">
-          <svg viewBox="0 0 24 24" width="11" height="11" fill="currentColor" aria-hidden="true"><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67V7z"/></svg>
+          <Clock :size="16" />
           Active {{ relativeTime(project.summary.last_activity) }}
         </p>
       </div>
@@ -382,7 +392,7 @@ async function confirmDelete() {
           <span class="stat-label">done</span>
         </div>
         <div class="stat-chip stat-notes">
-          <svg viewBox="0 0 24 24" width="12" height="12" fill="currentColor" aria-hidden="true" style="opacity:0.6"><path d="M14 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6zM6 20V4h7v5h5v11H6z"/></svg>
+          <FileText :size="16" style="opacity:0.6" />
           <span class="stat-val">{{ project.summary.note_count }}</span>
           <span class="stat-label">notes</span>
         </div>
@@ -463,7 +473,8 @@ async function confirmDelete() {
                   @click="group.milestone && renamingMilestoneId !== group.milestone.id && toggleMilestoneCollapse(group.milestone.id)"
                 >
                   <span class="ms-chevron" v-if="group.milestone">
-                    <svg viewBox="0 0 24 24" width="10" height="10" fill="currentColor"><path :d="collapsedMilestones.has(group.milestone.id) ? 'M8 5l8 7-8 7V5z' : 'M5 8l7 8 7-8H5z'"/></svg>
+                    <ChevronRight v-if="collapsedMilestones.has(group.milestone.id)" :size="16" />
+                    <ChevronDown v-else :size="16" />
                   </span>
                   <template v-if="group.milestone && renamingMilestoneId === group.milestone.id">
                     <input
@@ -485,10 +496,10 @@ async function confirmDelete() {
                     <span class="ms-pct">{{ group.milestone.pct }}%</span>
                     <div class="ms-actions" @click.stop>
                       <button class="ms-action-btn" title="Rename" @click="startRenameMilestone(group.milestone)">
-                        <svg viewBox="0 0 24 24" width="12" height="12" fill="currentColor"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>
+                        <Pencil :size="16" />
                       </button>
                       <button class="ms-action-btn ms-action-delete" title="Delete" @click="deletingMilestone = group.milestone">
-                        <svg viewBox="0 0 24 24" width="12" height="12" fill="currentColor"><path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/></svg>
+                        <Trash2 :size="16" />
                       </button>
                     </div>
                   </template>
@@ -554,7 +565,7 @@ async function confirmDelete() {
                             title="Mark as Done"
                             :disabled="advancingTaskId === task.id"
                             @click="advanceTaskStatus(task, $event)"
-                          >✓</button>
+                          ><Check :size="16" /></button>
                         </div>
                       </router-link>
                       <p v-if="!group.tasks.filter(t => t.status === 'in_progress').length" class="col-empty">No tasks</p>
@@ -598,7 +609,7 @@ async function confirmDelete() {
             </div>
             <template v-else>
               <router-link v-for="note in notes" :key="note.id" :to="`/notes/${note.id}`" class="note-row">
-                <svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor" class="note-icon" aria-hidden="true"><path d="M14 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6zM6 20V4h7v5h5v11H6z"/></svg>
+                <FileText class="note-icon" :size="16" />
                 <span class="note-title">{{ note.title || "Untitled" }}</span>
                 <span class="note-date">{{ relativeTime(note.updated_at) }}</span>
               </router-link>
diff --git a/frontend/src/views/SettingsView.vue b/frontend/src/views/SettingsView.vue
index c3280bb..62573ae 100644
--- a/frontend/src/views/SettingsView.vue
+++ b/frontend/src/views/SettingsView.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { X } from "lucide-vue-next";
 import { ref, computed, watch, onMounted } from "vue";
 import { useSettingsStore } from "@/stores/settings";
 import { useAuthStore } from "@/stores/auth";
@@ -2098,7 +2099,7 @@ function formatUserDate(iso: string): string {
                   class="btn-remove-slot"
                   @click="removeBlendSlot(idx)"
                   title="Remove this voice"
-                >✕</button>
+                ><X :size="16" /></button>
               </div>
             </div>
           </div>
diff --git a/frontend/src/views/TaskViewerView.vue b/frontend/src/views/TaskViewerView.vue
index 5eebf91..b15e6f3 100644
--- a/frontend/src/views/TaskViewerView.vue
+++ b/frontend/src/views/TaskViewerView.vue
@@ -13,6 +13,7 @@ import PriorityBadge from "@/components/PriorityBadge.vue";
 import TagPill from "@/components/TagPill.vue";
 import TableOfContents from "@/components/TableOfContents.vue";
 import ShareDialog from "@/components/ShareDialog.vue";
+import { Clock, Pencil, Link as LinkIcon } from "lucide-vue-next";
 
 const route = useRoute();
 const router = useRouter();
@@ -314,12 +315,12 @@ const subTaskProgress = computed(() => {
         <h1 class="task-title">{{ store.currentTask.title || "Untitled" }}</h1>
         <p class="meta">
           <span class="meta-item">
-            <svg viewBox="0 0 24 24" width="13" height="13" fill="currentColor" aria-hidden="true"><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67V7z"/></svg>
+            <Clock :size="16" />
             Updated {{ relativeTime(store.currentTask.updated_at) }}
           </span>
           <span class="meta-sep" aria-hidden="true">·</span>
           <span class="meta-item">
-            <svg viewBox="0 0 24 24" width="13" height="13" fill="currentColor" aria-hidden="true"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>
+            <Pencil :size="16" />
             Created {{ relativeTime(store.currentTask.created_at) }}
           </span>
         </p>
@@ -395,7 +396,7 @@ const subTaskProgress = computed(() => {
 
         <div v-if="backlinks.length" class="backlinks">
           <h3 class="backlinks-heading">
-            <svg viewBox="0 0 24 24" width="15" height="15" fill="currentColor" aria-hidden="true"><path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z"/></svg>
+            <LinkIcon :size="16" />
             Backlinks
             <span class="backlinks-count">{{ backlinks.length }}</span>
           </h3>