diff --git a/package-lock.json b/package-lock.json
index 6e2a244..2f5db60 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,6 +19,7 @@
         "@tauri-apps/plugin-fs": "^2.5.1",
         "@tauri-apps/plugin-opener": "^2",
         "@uiw/react-codemirror": "^4.25.10",
+        "lucide-react": "^1.21.0",
         "react": "^19.1.0",
         "react-dom": "^19.1.0",
         "react-markdown": "^10.1.0",
@@ -4390,6 +4391,15 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/lucide-react": {
+      "version": "1.21.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-1.21.0.tgz",
+      "integrity": "sha512-reEZMXq8Qdd5jg5XYkQ5TR1fB/GiQ7ih4vcrthYDtgjSDwh0i6/YLiGjsWsIwgN49gpAnd4J2elSNzncMEEUUQ==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/magic-string": {
       "version": "0.30.21",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
diff --git a/package.json b/package.json
index aa13365..e912b55 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
     "@tauri-apps/plugin-fs": "^2.5.1",
     "@tauri-apps/plugin-opener": "^2",
     "@uiw/react-codemirror": "^4.25.10",
+    "lucide-react": "^1.21.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-markdown": "^10.1.0",
diff --git a/src/App.css b/src/App.css
index 8678916..2f5285b 100644
--- a/src/App.css
+++ b/src/App.css
@@ -261,6 +261,9 @@ body,
 }
 
 .toolbar-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
   font: inherit;
   font-size: 0.7rem;
   letter-spacing: 0.04em;
@@ -270,6 +273,14 @@ body,
   border-radius: 4px;
   padding: 2px 8px;
   cursor: pointer;
+  transition: background 0.12s ease, color 0.12s ease;
+}
+
+/* Icon-only buttons: square them off so they don't inherit text padding */
+.toolbar-btn--icon {
+  justify-content: center;
+  gap: 0;
+  padding: 4px;
 }
 
 .toolbar-btn:hover:not(:disabled) {
@@ -277,6 +288,10 @@ body,
   color: var(--toolbar-btn-hover-fg);
 }
 
+.toolbar-btn:active:not(:disabled) {
+  transform: translateY(0.5px);
+}
+
 .toolbar-btn:disabled {
   opacity: 0.4;
   cursor: default;
diff --git a/src/App.tsx b/src/App.tsx
index 83cfa15..78990e4 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -8,6 +8,7 @@ import { invoke } from "@tauri-apps/api/core";
 import { getCurrentWindow } from "@tauri-apps/api/window";
 import { listen } from "@tauri-apps/api/event";
 import { gutters } from "@codemirror/view";
+import { PanelLeftClose, PanelLeftOpen, PanelRightClose, PanelRightOpen, Search, Folder, Info, Settings, ClipboardCopy, Check } from "lucide-react";
 import { MilkdownEditor } from "./MilkdownEditor";
 import { FileTree, type FileNode } from "./FileTree";
 import { CommandPalette, FindOverlay } from "./SearchOverlays";
@@ -591,23 +592,30 @@ function App() {
           )}
         </div>
         <div className="toolbar-actions">
-          <button 
-            className={`toolbar-btn ${viewMode === "preview" ? "active" : ""}`} 
+          <button
+            className={`toolbar-btn toolbar-btn--icon ${viewMode === "preview" ? "active" : ""}`}
             onClick={() => setViewMode(viewMode === "preview" ? "both" : "preview")}
             title={viewMode === "preview" ? "Show Editor" : "Hide Editor"}
+            aria-label={viewMode === "preview" ? "Show editor" : "Hide editor"}
           >
-            {viewMode === "preview" ? "Show Editor" : "Hide Editor"}
+            {viewMode === "preview" ? <PanelLeftOpen size={18} strokeWidth={1.5} /> : <PanelLeftClose size={18} strokeWidth={1.5} />}
           </button>
-          <button 
-            className={`toolbar-btn ${viewMode === "editor" ? "active" : ""}`} 
+          <button
+            className={`toolbar-btn toolbar-btn--icon ${viewMode === "editor" ? "active" : ""}`}
             onClick={() => setViewMode(viewMode === "editor" ? "both" : "editor")}
             title={viewMode === "editor" ? "Show Preview" : "Hide Preview"}
+            aria-label={viewMode === "editor" ? "Show preview" : "Hide preview"}
           >
-            {viewMode === "editor" ? "Show Preview" : "Hide Preview"}
+            {viewMode === "editor" ? <PanelRightOpen size={18} strokeWidth={1.5} /> : <PanelRightClose size={18} strokeWidth={1.5} />}
           </button>
           <div className="toolbar-divider" style={{ width: '1px', height: '20px', background: 'var(--toolbar-border)', margin: '0 4px' }} />
-          <button className="toolbar-btn" onClick={handleCopy} title="Copy Markdown">
-            {copied ? "✓" : "Copy"}
+          <button
+            className="toolbar-btn toolbar-btn--icon"
+            onClick={handleCopy}
+            title="Copy Markdown"
+            aria-label={copied ? "Copied" : "Copy Markdown"}
+          >
+            {copied ? <Check size={18} strokeWidth={1.5}/> : <ClipboardCopy size={18} />}
           </button>
           <button className="toolbar-btn" onClick={() => void exportToPdf()} title="Export as PDF">
             Export PDF
@@ -711,20 +719,18 @@ function App() {
               className={`activity-btn ${sidebarOpen ? "active" : ""}`}
               onClick={() => setSidebarOpen((prev) => !prev)}
               title="Toggle File Tree Sidebar"
+              aria-label="Toggle file tree sidebar"
             >
-              <svg className="activity-icon" viewBox="0 0 24 24" width="20" height="20">
-                <path fill="currentColor" d="M19 5.5H12L10 3.5H5c-1.1 0-2 .9-2 2v13c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-11c0-1.1-.9-2-2-2zm0 13H5v-11h14v11z"/>
-              </svg>
+              <Folder className="activity-icon" size={20} />
             </button>
             
             <button
               className="activity-btn"
               onClick={() => setShowCommandPalette(true)}
               title="Search Files and Content"
+              aria-label="Search files and content"
             >
-              <svg className="activity-icon" viewBox="0 0 24 24" width="20" height="20">
-                <path fill="currentColor" d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
-              </svg>
+              <Search className="activity-icon" size={20} />
             </button>
           </div>
           
@@ -733,10 +739,9 @@ function App() {
               className={`activity-btn ${showHelp ? "active" : ""}`}
               onClick={() => setShowHelp(true)}
               title="Help & Shortcuts"
+              aria-label="Help and shortcuts"
             >
-              <svg className="activity-icon" viewBox="0 0 24 24" width="20" height="20">
-                <path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/>
-              </svg>
+              <Info className="activity-icon" size={20} />
             </button>
             
             <button
@@ -745,10 +750,9 @@ function App() {
                 setTheme((t) => (t === "dark" || (t === "system" && systemDark) ? "light" : "dark"));
               }}
               title="Toggle Theme (Settings)"
+              aria-label="Toggle theme"
             >
-              <svg className="activity-icon" viewBox="0 0 24 24" width="20" height="20">
-                <path fill="currentColor" d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58a.49.49 0 0 0 .12-.61l-1.92-3.32a.488.488 0 0 0-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54a.484.484 0 0 0-.48-.41h-3.84a.48.48 0 0 0-.48.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87a.49.49 0 0 0 .12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58a.49.49 0 0 0-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z"/>
-              </svg>
+              <Settings className="activity-icon" size={20} />
             </button>
           </div>
         </nav>