diff --git a/assets/app.js b/assets/app.js
index 566236b..a213214 100644
--- a/assets/app.js
+++ b/assets/app.js
@@ -146,10 +146,10 @@ if (animationsEnabled === null) animationsEnabled = true;
 function applyTheme() {
     if (isDarkMode) {
         document.body.classList.add('dark-mode');
-        document.getElementById('themeBtn').innerHTML = '🌙';
+        document.getElementById('themeBtn').innerHTML = '<i class="fa-solid fa-moon"></i>';
     } else {
         document.body.classList.remove('dark-mode');
-        document.getElementById('themeBtn').innerHTML = '☀️';
+        document.getElementById('themeBtn').innerHTML = '<i class="fa-solid fa-sun"></i>';
     }
     handleAmbientDrift();
     updateMotionBtn();
@@ -168,7 +168,7 @@ applyTheme();
 
 function updateMotionBtn() {
     if (!motionBtn) return;
-    motionBtn.innerHTML = animationsEnabled ? '✨' : '🚫';
+    motionBtn.innerHTML = animationsEnabled ? '<i class="fa-solid fa-wand-magic-sparkles"></i>' : '<i class="fa-solid fa-ban"></i>';
     motionBtn.title = animationsEnabled ? 'Toggle Animations' : 'Animations disabled';
 }
 
@@ -621,7 +621,7 @@ function render() {
             const isLocked = part.locked ? 'is-locked' : '';
             const isFinished = part.finished ? 'is-finished' : '';
             const isMinimized = part.minimized ? 'is-minimized' : '';
-            const lockIcon = part.locked ? '🔒' : '🔓';
+            const lockIcon = part.locked ? '<i class="fa-solid fa-lock"></i>' : '<i class="fa-solid fa-lock-open"></i>';
             const lockBtnClass = part.locked ? 'btn-lock locked-active' : 'btn-lock';
             const controlsDimmed = (part.locked || part.finished) ? 'dimmed' : '';
             const hideControls = (part.finished || part.minimized) ? 'hidden-controls' : '';
@@ -637,18 +637,18 @@ function render() {
             const partCardFullClass = `${isLocked} ${isFinished} ${isMinimized} ${finishPulseClass}`;
             const lockDisabled = part.locked ? 'disabled' : '';
             const actionsHtml = part.minimized
-                ? `<div class="part-actions"><button class="icon-btn btn-toggle-part" onclick="togglePartMinimize(${project.id}, ${part.id})" title="Expand">▼</button></div>`
+                ? `<div class="part-actions"><button class="icon-btn btn-toggle-part" onclick="togglePartMinimize(${project.id}, ${part.id})" title="Expand"><i class="fa-solid fa-chevron-down"></i></button></div>`
                 : `<div class="part-actions">
                         <button class="btn-color" style="--project-color: ${accent}" onclick="document.getElementById('${colorInputId}').click()" title="Set color"></button>
                         <input type="color" id="${colorInputId}" class="color-input" value="${accent}" onchange="setPartColor(${project.id}, ${part.id}, this.value)">
-                        <button class="icon-btn btn-reset-part" onclick="resetCount(${project.id}, ${part.id})" ${isFinished || part.locked ? 'disabled' : ''}>↺</button>
-                        <button class="icon-btn btn-delete-part" onclick="deletePart(${project.id}, ${part.id})" ${lockDisabled}>🗑️</button>
-                        <button class="icon-btn btn-toggle-part" onclick="togglePartMinimize(${project.id}, ${part.id})" title="Minimize">▼</button>
+                        <button class="icon-btn btn-reset-part" onclick="resetCount(${project.id}, ${part.id})" ${isFinished || part.locked ? 'disabled' : ''}><i class="fa-solid fa-rotate-left"></i></button>
+                        <button class="icon-btn btn-delete-part" onclick="deletePart(${project.id}, ${part.id})" ${lockDisabled}><i class="fa-solid fa-trash"></i></button>
+                        <button class="icon-btn btn-toggle-part" onclick="togglePartMinimize(${project.id}, ${part.id})" title="Minimize"><i class="fa-solid fa-chevron-down"></i></button>
                     </div>`;
             const countSubtext = part.minimized ? '' : `
                 <div class="count-subtext">
                     ${part.max !== null ? `<strong>${part.count}</strong> / ${part.max}` : 'No max set'}
-                    <button class="icon-btn ${showSetMax}" onclick="openModal('setMax', ${project.id}, ${part.id})" title="Set max" ${lockDisabled}>⚙️</button>
+                    <button class="icon-btn ${showSetMax}" onclick="openModal('setMax', ${project.id}, ${part.id})" title="Set max" ${lockDisabled}><i class="fa-solid fa-gear"></i></button>
                 </div>
             `;
             
diff --git a/assets/style.css b/assets/style.css
index 91db5ef..b51b19c 100644
--- a/assets/style.css
+++ b/assets/style.css
@@ -127,6 +127,7 @@ h1 {
     color: var(--header-text);
     transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.2s;
     transform: translateY(0);
+    font-family: inherit;
 }
 .header-btn:hover { transform: translateY(-1px) scale(1.03); box-shadow: 0 6px 14px rgba(0,0,0,0.12); }
 .header-btn:active { transform: translateY(0) scale(0.96); box-shadow: none; }
diff --git a/index.html b/index.html
index 926e7c3..15f04f7 100644
--- a/index.html
+++ b/index.html
@@ -7,6 +7,7 @@
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;700&family=Quicksand:wght@400;600;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-4LrZ0Yqhgm/Vdyg0LJ5Rzc5x8g6f5seRTwOAyq1DmiIYQnqak44fUgWuxlHfwDfC0BNp8f7C0R60VNZ9sFlQmA==" crossorigin="anonymous" referrerpolicy="no-referrer">
     <link rel="icon" href="assets/icons/favicon.ico">
     <link rel="icon" type="image/png" sizes="96x96" href="assets/icons/favicon-96x96.png">
     <link rel="icon" type="image/svg+xml" href="assets/icons/favicon.svg">
@@ -23,12 +24,12 @@
         <h1 id="appTitle">Toadstool Cottage Counter</h1>
     </div>
     <div class="header-controls">
-        <button class="header-btn hidden" id="installBtn" title="Install app">⬇️</button>
-        <button class="header-btn" id="motionBtn" onclick="toggleAnimations()" title="Toggle Animations">✨</button>
-        <button class="header-btn" id="themeBtn" onclick="toggleTheme()" title="Toggle Dark Mode">🌓</button>
-        <button class="header-btn" id="focusBtn" onclick="toggleFocusMode()" title="Focus Mode (Keeps Screen On)">👁️</button>
-        <button class="header-btn" id="exportBtn" onclick="exportData()" title="Export data">⬆️</button>
-        <button class="header-btn" id="importBtn" title="Import data">⬇️</button>
+        <button class="header-btn hidden" id="installBtn" title="Install app"><i class="fa-solid fa-download"></i></button>
+        <button class="header-btn" id="motionBtn" onclick="toggleAnimations()" title="Toggle Animations"><i class="fa-solid fa-wand-magic-sparkles"></i></button>
+        <button class="header-btn" id="themeBtn" onclick="toggleTheme()" title="Toggle Dark Mode"><i class="fa-solid fa-moon"></i></button>
+        <button class="header-btn" id="focusBtn" onclick="toggleFocusMode()" title="Focus Mode (Keeps Screen On)"><i class="fa-solid fa-eye"></i></button>
+        <button class="header-btn" id="exportBtn" onclick="exportData()" title="Export data"><i class="fa-solid fa-file-export"></i></button>
+        <button class="header-btn" id="importBtn" title="Import data"><i class="fa-solid fa-file-import"></i></button>
     </div>
 </header>
 <input type="file" id="importFile" accept="application/json" class="hidden-input" />