diff --git a/package-lock.json b/package-lock.json
index 5b1a254..654dc19 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,7 @@
       "dependencies": {
         "@tailwindcss/cli": "^4.1.14",
         "electron-store": "^8.2.0",
+        "lucide": "^1.7.0",
         "tailwindcss": "^4.1.14"
       },
       "devDependencies": {
@@ -4771,6 +4772,12 @@
         "node": ">=10"
       }
     },
+    "node_modules/lucide": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/lucide/-/lucide-1.7.0.tgz",
+      "integrity": "sha512-aYNogbuIxea3a8offpKjdMGf2FsUk9GECFh0B4iJgXlJOX41+7/ncvLVluKki8477SoybEdyGGf+qGYLBDiEsA==",
+      "license": "ISC"
+    },
     "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 2484526..4b11c37 100644
--- a/package.json
+++ b/package.json
@@ -86,6 +86,7 @@
   "dependencies": {
     "@tailwindcss/cli": "^4.1.14",
     "electron-store": "^8.2.0",
+    "lucide": "^1.7.0",
     "tailwindcss": "^4.1.14"
   }
 }
diff --git a/src/components/connection/ConnectionStatus.js b/src/components/connection/ConnectionStatus.js
index 331c53a..403a5c6 100644
--- a/src/components/connection/ConnectionStatus.js
+++ b/src/components/connection/ConnectionStatus.js
@@ -2,6 +2,8 @@
  * Bitcoin Core Connection Status Component
  * Shows connection progress and status while connecting to bitcoind
  */
+import { icons } from '../../js/icons.js';
+
 export function ConnectionStatusComponent(container, onConnected) {
     const connectionDiv = document.createElement('div');
     connectionDiv.id = 'connection-status';
@@ -60,7 +62,7 @@ export function ConnectionStatusComponent(container, onConnected) {
             <!-- Error Display (hidden by default) -->
             <div id="connection-error" class="hidden mt-4 bg-red-500/10 border border-red-500/30 rounded-lg p-4">
                 <div class="flex items-start">
-                    <span class="text-red-400 mr-2">⚠️</span>
+                    <span class="text-red-400 mr-2">${icons.alertTriangle(16)}</span>
                     <div>
                         <p class="text-sm font-medium text-red-400">Connection Failed</p>
                         <p id="error-message" class="text-xs text-red-300 mt-1"></p>
diff --git a/src/components/log/Log.js b/src/components/log/Log.js
index 5534ac4..1a72352 100644
--- a/src/components/log/Log.js
+++ b/src/components/log/Log.js
@@ -1,3 +1,5 @@
+import { icons } from '../../js/icons.js';
+
 export function LogComponent(container) {
   const content = document.createElement('div');
   content.id = 'log-content';
@@ -148,7 +150,7 @@ export function LogComponent(container) {
     
     <div class="bg-blue-500/10 border border-blue-500/30 rounded-lg p-4 mb-6">
       <div class="flex items-start gap-3">
-        <span class="text-2xl">💡</span>
+        <span>${icons.lightbulb(24)}</span>
         <div class="flex-1">
           <p class="text-blue-400 text-sm">
             <strong>Limited view:</strong> Only the last ${MAX_LOGS} log lines are shown here for performance. 
@@ -171,10 +173,10 @@ export function LogComponent(container) {
             </div>
             <div class="flex gap-2">
               <button id="refresh-logs" class="bg-[#242d3d] hover:bg-[#2d3748] text-white px-4 py-2 rounded text-sm transition-colors">
-                🔄 Refresh
+                ${icons.refreshCw(14, 'mr-1')} Refresh
               </button>
               <button id="open-log-file" class="bg-[#FF6B35] hover:bg-[#ff7d4d] text-white px-4 py-2 rounded text-sm font-semibold transition-colors">
-                📁 Open Log File
+                ${icons.folder(14, 'mr-1')} Open Log File
               </button>
             </div>
           </div>
diff --git a/src/components/market/Market.js b/src/components/market/Market.js
index f8aa8b8..9265d41 100644
--- a/src/components/market/Market.js
+++ b/src/components/market/Market.js
@@ -1,3 +1,5 @@
+import { icons } from '../../js/icons.js';
+
 export function Market(container) {
   const content = document.createElement('div');
   content.id = 'market-content';
@@ -16,7 +18,7 @@ export function Market(container) {
       case 'Taproot':
         return {
           label: 'Taproot',
-          icon: '⚡',
+          icon: icons.zap(14),
           classes: 'bg-purple-500/20 text-purple-400',
         };
       case 'Unified':
@@ -30,7 +32,7 @@ export function Market(container) {
       default:
         return {
           label: 'Legacy',
-          icon: '🔒',
+          icon: icons.lock(14),
           classes: 'bg-blue-500/20 text-blue-400',
         };
     }
@@ -478,7 +480,7 @@ export function Market(container) {
       'fixed top-4 right-4 bg-red-500 text-white px-6 py-3 rounded-lg shadow-lg z-50 max-w-md';
     errorDiv.innerHTML = `
       <div class="flex items-start gap-3">
-        <span class="text-xl">❌</span>
+        <span class="text-xl">${icons.xCircle(20)}</span>
         <div class="flex-1">
           <div class="font-semibold text-lg mb-1">Error</div>
           <div class="text-sm">${message}</div>
@@ -617,7 +619,7 @@ export function Market(container) {
         <div class="bg-[#0f1419] rounded-lg p-6 border border-blue-500/30">
           <div class="flex items-center justify-between mb-4">
             <span class="text-lg font-semibold text-lg text-blue-400">
-              🔄 Syncing Market Data...
+              ${icons.refreshCw(16, 'mr-2 animate-spin')} Syncing Market Data...
             </span>
             <span class="text-sm text-gray-400">
               Please wait
@@ -665,7 +667,7 @@ export function Market(container) {
           
           <div class="flex items-center justify-center text-xs text-gray-400 mt-2">
             <div class="text-cyan-400">
-              🔍 Discovering makers over Tor network...
+              ${icons.search(16, 'mr-2')} Discovering makers over Tor network...
             </div>
           </div>
         </div>
@@ -808,7 +810,7 @@ export function Market(container) {
 
     <div class="bg-[#1a2332] rounded-lg p-6 mb-6">
       <div class="flex items-start gap-3">
-        <span class="text-2xl">ℹ️</span>
+        <span class="text-[#FF6B35]">${icons.info(24)}</span>
         <div>
           <h3 class="text-lg font-semibold text-lg text-[#FF6B35] mb-2">Fee Calculation</h3>
           <p class="text-gray-300 mb-2">Total fee for a swap is calculated as:</p>
@@ -841,13 +843,13 @@ export function Market(container) {
       <!-- Maker Status Tabs -->
       <div class="flex border-b-2 border-[#FF6B35]">
   <button id="tab-good" class="flex-1 px-6 py-4 font-semibold text-lg bg-[#FF6B35] text-white border-b-4 border-[#FF6B35] transition-all">
-    ✅ Good Makers (<span id="good-count">0</span>)
+    ${icons.checkCircle(14, 'mr-1')} Good Makers (<span id="good-count">0</span>)
   </button>
   <button id="tab-bad" class="flex-1 px-6 py-4 font-semibold text-lg bg-[#1a2332] text-gray-400 border-b-4 border-transparent hover:text-white hover:border-gray-600 transition-all">
-    ❌ Bad Makers (<span id="bad-count">0</span>)
+    ${icons.xCircle(14, 'mr-1')} Bad Makers (<span id="bad-count">0</span>)
   </button>
   <button id="tab-unresponsive" class="flex-1 px-6 py-4 font-semibold text-lg bg-[#1a2332] text-gray-400 border-b-4 border-transparent hover:text-white hover:border-gray-600 transition-all">
-    ⏸️ Unresponsive (<span id="unresponsive-count">0</span>)
+    ${icons.pauseCircle(14, 'mr-1')} Unresponsive (<span id="unresponsive-count">0</span>)
   </button>
 </div>
 
diff --git a/src/components/receive/AddressList.js b/src/components/receive/AddressList.js
index f8aa4ff..a2b7c13 100644
--- a/src/components/receive/AddressList.js
+++ b/src/components/receive/AddressList.js
@@ -1,3 +1,5 @@
+import { icons } from '../../js/icons.js';
+
 export function AddressListComponent(container) {
   let currentFilter = 'all';
   let sortBy = 'newest';
@@ -218,7 +220,7 @@ const result = await window.api.taker.getTransactions(200, 0);
           </div>
           <div class="flex gap-2">
             <button id="export-addresses" class="bg-[#242d3d] hover:bg-[#2d3748] text-white px-4 py-2 rounded-lg text-sm font-semibold text-lg transition-colors">
-              📥 Export CSV
+              ${icons.arrowDownCircle(14, 'mr-1')} Export CSV
             </button>
             <button id="refresh-addresses" class="bg-[#FF6B35] hover:bg-[#ff7d4d] text-white px-4 py-2 rounded-lg text-sm font-semibold text-lg transition-colors">
               Refresh
@@ -292,7 +294,7 @@ const result = await window.api.taker.getTransactions(200, 0);
             filteredAddresses.length === 0
               ? `
             <div class="text-center py-12">
-              <div class="text-4xl mb-4">📭</div>
+              <div class="text-gray-500 mb-4 flex justify-center">${icons.inbox(48)}</div>
               <p class="text-gray-400 mb-4">No addresses ${currentFilter !== 'all' ? `for ${currentFilter} spend type` : 'found in transaction history'}</p>
               <button id="go-to-receive" class="bg-[#FF6B35] hover:bg-[#ff7d4d] text-white font-semibold text-lg px-6 py-2 rounded-lg transition-colors">
                 Generate New Address
@@ -336,7 +338,7 @@ const result = await window.api.taker.getTransactions(200, 0);
                                 ${addr.address.substring(0, 12)}...${addr.address.substring(addr.address.length - 8)}
                             </a>
                             <button class="copy-btn text-gray-500 hover:text-[#FF6B35] transition-colors" data-address="${addr.address}" title="Copy address">
-                                📋
+                                ${icons.clipboardCopy(14)}
                             </button>
                           </div>
                         </td>
@@ -430,7 +432,7 @@ const result = await window.api.taker.getTransactions(200, 0);
         await copyToClipboard(address);
         btn.textContent = '✓';
         setTimeout(() => {
-          btn.textContent = '📋';
+          btn.innerHTML = icons.clipboardCopy(14);
         }, 1500);
       });
     });
diff --git a/src/components/receive/Receive.js b/src/components/receive/Receive.js
index b733539..1144ea8 100644
--- a/src/components/receive/Receive.js
+++ b/src/components/receive/Receive.js
@@ -1,3 +1,5 @@
+import { icons } from '../../js/icons.js';
+
 export function ReceiveComponent(container) {
   const content = document.createElement('div');
   content.id = 'receive-content';
@@ -43,7 +45,7 @@ export function ReceiveComponent(container) {
                 <button id="generate-new" disabled class="w-full bg-[#242d3d] hover:bg-[#2d3748] disabled:bg-gray-700 disabled:cursor-not-allowed text-white font-semibold text-lg py-3 rounded-lg transition-colors border border-gray-700">
                     <span class="generate-text">Generate New Address</span>
                     <span class="generate-loading hidden">
-                        <span class="inline-block animate-spin mr-2">⟳</span>
+                        <span class="inline-block animate-spin mr-2">${icons.loader(16)}</span>
                         Generating...
                     </span>
                 </button>
@@ -54,7 +56,7 @@ export function ReceiveComponent(container) {
                 <!-- Info Card -->
                 <div class="mt-6 p-3 bg-red-500/10 border border-red-500/30 rounded-lg">
                   <p class="text-xs text-red-400">
-                      ⚠️ Reusing addresses can cause significant privacy reduction. Always generate a fresh address for each transaction to maintain anonymity.
+                      ${icons.alertTriangle(16, 'mr-1')} Reusing addresses can cause significant privacy reduction. Always generate a fresh address for each transaction to maintain anonymity.
                   </p>
                 </div>
 
@@ -226,7 +228,7 @@ export function ReceiveComponent(container) {
   async function copyToClipboard(text) {
     try {
       await navigator.clipboard.writeText(text);
-      copyButton.textContent = '✓ Copied!';
+      copyButton.innerHTML = icons.check(14, 'mr-1') + ' Copied!';
       copyButton.classList.add('bg-green-500');
       copyButton.classList.remove('bg-[#FF6B35]');
 
@@ -245,7 +247,7 @@ export function ReceiveComponent(container) {
       document.execCommand('copy');
       document.body.removeChild(textArea);
 
-      copyButton.textContent = '✓ Copied!';
+      copyButton.innerHTML = icons.check(14, 'mr-1') + ' Copied!';
       setTimeout(() => {
         copyButton.textContent = 'Copy';
       }, 2000);
@@ -444,7 +446,7 @@ export function ReceiveComponent(container) {
       currentAddressEl.textContent = `Error: ${error.message}`;
       qrContainer.innerHTML = `
         <div class="text-center text-red-400 p-4">
-          <p class="text-2xl mb-2">❌</p>
+          <div class="flex justify-center mb-2">${icons.xCircle(40, 'text-red-400')}</div>
           <p class="text-sm">Address generation failed</p>
           <p class="text-xs text-gray-500 mt-2">${error.message}</p>
         </div>
@@ -473,7 +475,7 @@ export function ReceiveComponent(container) {
       currentAddressEl.textContent = 'Failed to initialize';
       qrContainer.innerHTML = `
       <div class="text-center text-red-400 p-4">
-        <p class="text-2xl mb-2">❌</p>
+        <div class="flex justify-center mb-2">${icons.xCircle(40, 'text-red-400')}</div>
         <p class="text-sm">Initialization failed</p>
         <button onclick="location.reload()" class="mt-2 text-xs underline">Retry</button>
       </div>
diff --git a/src/components/send/Send.js b/src/components/send/Send.js
index 2679398..fad7ef4 100644
--- a/src/components/send/Send.js
+++ b/src/components/send/Send.js
@@ -1,3 +1,5 @@
+import { icons } from '../../js/icons.js';
+
 export function SendComponent(container, preSelectedUtxos = null) {
   const content = document.createElement('div');
   content.id = 'send-content';
@@ -122,13 +124,13 @@ export function SendComponent(container, preSelectedUtxos = null) {
     if (!signBtn) return;
 
     if (errors.length === 0) {
-      signBtn.textContent = '🔏 Sign Transaction';
+      signBtn.innerHTML = icons.key(14, 'mr-1') + ' Sign Transaction';
       signBtn.title = '';
       return;
     }
 
     // Show first error as button text
-    signBtn.textContent = '⚠️ ' + errors[0];
+    signBtn.innerHTML = icons.alertTriangle(14, 'mr-1') + ' ' + errors[0];
     signBtn.title = errors.join('\n');
   }
 
@@ -659,7 +661,7 @@ export function SendComponent(container, preSelectedUtxos = null) {
       signedTx = { id: 'simulated-tx' };
       signedTxHex = '0200000001' + 'ff'.repeat(100);
       
-      alert('✅ Transaction signed successfully!\n\nReview the details and click "Broadcast" to send.');
+      alert('Transaction signed successfully!\n\nReview the details and click "Broadcast" to send.');
       
       const hexPanel = content.querySelector('#hex-panel');
       if (hexPanel) hexPanel.classList.remove('hidden');
@@ -671,7 +673,7 @@ export function SendComponent(container, preSelectedUtxos = null) {
       
     } catch (error) {
       console.error('Signing failed:', error);
-      alert(`❌ Failed to sign: ${error.message}`);
+      alert(`Failed to sign: ${error.message}`);
     } finally {
       signBtn.disabled = false;
       signBtn.textContent = originalText;
@@ -754,7 +756,7 @@ export function SendComponent(container, preSelectedUtxos = null) {
       
     } catch (error) {
       console.error('Broadcast failed:', error);
-      alert(`❌ Failed to broadcast: ${error.message}`);
+      alert(`Failed to broadcast: ${error.message}`);
     } finally {
       broadcastBtn.disabled = false;
       broadcastBtn.textContent = originalText;
@@ -768,7 +770,7 @@ export function SendComponent(container, preSelectedUtxos = null) {
     popup.innerHTML = `
       <div class="bg-[#1a2332] rounded-lg p-8 max-w-2xl w-full mx-4 border border-green-500/50">
         <div class="text-center mb-6">
-          <div class="text-6xl mb-4">✅</div>
+          <div class="flex justify-center mb-4">${icons.checkCircle(64, 'text-green-400')}</div>
           <h2 class="text-2xl font-bold text-green-400 mb-2">Transaction Broadcast Successfully!</h2>
           <p class="text-gray-400">Your transaction(s) have been sent to the Bitcoin network</p>
         </div>
@@ -812,7 +814,7 @@ export function SendComponent(container, preSelectedUtxos = null) {
     <!-- Warning Banner -->
     <div class="mb-6 p-4 bg-yellow-500/10 border border-yellow-500/30 rounded-lg">
       <p class="text-sm text-yellow-400 font-semibold text-lg">
-        ⚠️ Regular and Swap UTXOs cannot be selected together in a single transaction
+        ${icons.alertTriangle(16, 'mr-1')} Regular and Swap UTXOs cannot be selected together in a single transaction
       </p>
       <p class="text-xs text-yellow-400/80 mt-1">Mixing these UTXO types compromises privacy. Use one type per send.</p>
     </div>
@@ -893,7 +895,7 @@ export function SendComponent(container, preSelectedUtxos = null) {
             
             <div id="utxo-warning" class="hidden mb-4 p-3 bg-red-500/10 border border-red-500/30 rounded-lg">
               <p class="text-xs text-red-400 font-semibold text-lg">
-                ⚠️ PRIVACY WARNING: You've selected both Regular and Swap UTXOs!
+                ${icons.alertTriangle(16, 'mr-1')} PRIVACY WARNING: You've selected both Regular and Swap UTXOs!
               </p>
               <p class="text-xs text-red-400/80 mt-1">This compromises your privacy. Please use only one type.</p>
             </div>
@@ -917,10 +919,10 @@ export function SendComponent(container, preSelectedUtxos = null) {
         <!-- Action Buttons -->
         <div class="grid grid-cols-2 gap-4">
           <button id="sign-tx-btn" class="bg-blue-500 hover:bg-blue-600 disabled:bg-gray-600 disabled:cursor-not-allowed text-white font-bold py-4 rounded-lg transition-colors text-lg">
-            🔏 Sign Transaction
+            ${icons.key(14, 'mr-1')} Sign Transaction
           </button>
           <button id="broadcast-tx-btn" disabled class="bg-[#FF6B35] hover:bg-[#ff7d4d] disabled:bg-gray-600 disabled:cursor-not-allowed text-white font-bold py-4 rounded-lg transition-colors text-lg">
-            📡 Broadcast
+            ${icons.radio(14, 'mr-1')} Broadcast
           </button>
         </div>
       </div>
@@ -980,7 +982,7 @@ export function SendComponent(container, preSelectedUtxos = null) {
                 </div>
                 <div class="flex justify-between">
                   <span class="text-gray-400">RBF:</span>
-                  <span class="text-blue-400">✓ Enabled</span>
+                  <span class="text-blue-400">${icons.check(14, 'mr-1')} Enabled</span>
                 </div>
               </div>
             </div>
diff --git a/src/components/settings/FirstTimeSetup.js b/src/components/settings/FirstTimeSetup.js
index 2d1670d..3b36276 100644
--- a/src/components/settings/FirstTimeSetup.js
+++ b/src/components/settings/FirstTimeSetup.js
@@ -1,3 +1,5 @@
+import { icons } from '../../js/icons.js';
+
 export function FirstTimeSetupModal(container, onComplete) {
   const defaultWalletName = `taker-wallet-${Math.floor(100000 + Math.random() * 900000)}`;
   const iconClass = 'w-5 h-5 flex-shrink-0';
@@ -163,21 +165,21 @@ export function FirstTimeSetupModal(container, onComplete) {
             <div class="grid grid-cols-3 gap-4">
               <!-- Create New Wallet -->
               <div id="choice-create" class="wallet-choice bg-[#0f1419] rounded-lg p-6 border-2 border-gray-700 cursor-pointer hover:border-[#FF6B35] transition-colors text-center">
-                <div class="text-4xl mb-3">🆕</div>
+                <div class="text-gray-400 mb-3 flex justify-center">${icons.plusCircle(40)}</div>
                 <h4 class="text-white font-semibold text-lg mb-2">Create New</h4>
                 <p class="text-xs text-gray-400">Start fresh with a new wallet</p>
               </div>
 
               <!-- Load Existing Wallet -->
               <div id="choice-load" class="wallet-choice bg-[#0f1419] rounded-lg p-6 border-2 border-gray-700 cursor-pointer hover:border-[#FF6B35] transition-colors text-center">
-                <div class="text-4xl mb-3">📂</div>
+                <div class="text-gray-400 mb-3 flex justify-center">${icons.folderOpen(40)}</div>
                 <h4 class="text-white font-semibold text-lg mb-2">Load Existing</h4>
                 <p class="text-xs text-gray-400">Load a wallet from file</p>
               </div>
 
               <!-- Restore Wallet -->
               <div id="choice-restore" class="wallet-choice bg-[#0f1419] rounded-lg p-6 border-2 border-gray-700 cursor-pointer hover:border-[#FF6B35] transition-colors text-center">
-                <div class="text-4xl mb-3">♻️</div>
+                <div class="text-gray-400 mb-3 flex justify-center">${icons.recycle(40)}</div>
                 <h4 class="text-white font-semibold text-lg mb-2">Restore</h4>
                 <p class="text-xs text-gray-400">Restore from backup JSON</p>
               </div>
@@ -478,7 +480,7 @@ export function FirstTimeSetupModal(container, onComplete) {
       </div>
 
       <button id="test-tor-setup" class="w-full bg-purple-500 hover:bg-purple-600 text-white font-semibold text-lg py-3 px-4 rounded-lg transition-colors">
-        🧅 Test Tor Connection
+        ${icons.globe(14, 'mr-1')} Test Tor Connection
       </button>
 
       <div id="tor-test-result" class="hidden"></div>
@@ -559,7 +561,7 @@ export function FirstTimeSetupModal(container, onComplete) {
             (result) => `
               <div class="flex items-start justify-between gap-3">
                 <span class="text-sm ${result.ok ? 'text-green-400' : 'text-red-400'}">
-                  ${result.ok ? '✅' : '❌'} ${result.label}
+                  ${result.ok ? icons.checkCircle(14, 'mr-1') : icons.xCircle(14, 'mr-1')} ${result.label}
                 </span>
                 <span class="text-xs text-gray-400 text-right">${result.message}</span>
               </div>
@@ -808,7 +810,7 @@ export function FirstTimeSetupModal(container, onComplete) {
       } else {
         errorDiv.innerHTML = `
           <div class="flex items-center">
-            <span class="text-sm text-red-400">❌ ${message}</span>
+            <span class="text-sm text-red-400">${icons.xCircle(14, 'mr-1')} ${message}</span>
           </div>
         `;
       }
@@ -1015,7 +1017,7 @@ export function FirstTimeSetupModal(container, onComplete) {
         'bg-red-500/10 border border-red-500/30 rounded-lg p-3';
       statusDiv.innerHTML = `
         <div class="flex items-center">
-          <span class="text-sm text-red-400">❌ Please select a backup file</span>
+          <span class="text-sm text-red-400">${icons.xCircle(14, 'mr-1')} Please select a backup file</span>
         </div>
       `;
       statusDiv.classList.remove('hidden');
@@ -1027,7 +1029,7 @@ export function FirstTimeSetupModal(container, onComplete) {
         'bg-blue-500/10 border border-blue-500/30 rounded-lg p-3';
       statusDiv.innerHTML = `
         <div class="flex items-center">
-          <span class="text-sm text-blue-400">🔄 Restoring wallet from backup...</span>
+          <span class="text-sm text-blue-400">${icons.refreshCw(14, 'mr-1 animate-spin')} Restoring wallet from backup...</span>
         </div>
       `;
       statusDiv.classList.remove('hidden');
@@ -1043,7 +1045,7 @@ export function FirstTimeSetupModal(container, onComplete) {
           'bg-green-500/10 border border-green-500/30 rounded-lg p-3';
         statusDiv.innerHTML = `
           <div class="flex items-center">
-            <span class="text-sm text-green-400">✅ Wallet restored successfully!</span>
+            <span class="text-sm text-green-400">${icons.checkCircle(14, 'mr-1')} Wallet restored successfully!</span>
           </div>
         `;
         return true;
@@ -1056,7 +1058,7 @@ export function FirstTimeSetupModal(container, onComplete) {
         'bg-red-500/10 border border-red-500/30 rounded-lg p-3';
       statusDiv.innerHTML = `
         <div class="flex items-center">
-          <span class="text-sm text-red-400">❌ ${error.message}</span>
+          <span class="text-sm text-red-400">${icons.xCircle(14, 'mr-1')} ${error.message}</span>
         </div>
       `;
       statusDiv.classList.remove('hidden');
diff --git a/src/components/settings/Settings.js b/src/components/settings/Settings.js
index 0b5110c..63058d2 100644
--- a/src/components/settings/Settings.js
+++ b/src/components/settings/Settings.js
@@ -1,3 +1,5 @@
+import { icons } from '../../js/icons.js';
+
 export function SettingsComponent(container) {
   const content = document.createElement('div');
   content.id = 'settings-content';
@@ -19,7 +21,7 @@ export function SettingsComponent(container) {
                         </p>
                         
                         <button id="backup-wallet-btn" class="w-full bg-[#FF6B35] hover:bg-[#ff7d4d] text-white font-semibold text-lg py-3 px-4 rounded-lg transition-colors">
-                            💾 Create Backup
+                            ${icons.save(16, 'mr-2')} Create Backup
                         </button>
                     </div>
                     
@@ -201,7 +203,7 @@ export function SettingsComponent(container) {
                                 </div>
                             </div>
                             <button id="copy-zmq-config-btn" class="w-full mt-4 bg-[#242d3d] hover:bg-[#2d3748] text-white py-2 px-4 rounded-lg text-sm transition-colors">
-                                📋 Copy ZMQ Config
+                                ${icons.clipboardCopy(14, 'mr-1')} Copy ZMQ Config
                             </button>
                         </div>
                     </div>
@@ -259,7 +261,7 @@ blockfilterindex=1
                 </div>
                 
                 <button id="copy-full-config-btn" class="mt-4 bg-[#242d3d] hover:bg-[#2d3748] text-white py-2 px-4 rounded-lg text-sm transition-colors">
-                    📋 Copy Full Config
+                    ${icons.clipboardCopy(14, 'mr-1')} Copy Full Config
                 </button>
             </div>
 
@@ -368,7 +370,7 @@ blockfilterindex=1
 
       const label = document.createElement('span');
       label.className = `text-sm ${result.ok ? 'text-green-400' : 'text-red-400'}`;
-      label.textContent = `${result.ok ? '✅' : '❌'} ${result.label}`;
+      label.innerHTML = `${result.ok ? icons.checkCircle(14, 'mr-1 text-green-400') : icons.xCircle(14, 'mr-1 text-red-400')} ${result.label}`;
 
       const message = document.createElement('span');
       message.className = 'text-xs text-gray-400 text-right';
@@ -538,14 +540,14 @@ blockfilterindex=1`;
 
       if (result.success) {
         alert(
-          `✅ Backup created successfully!\n\nLocation: ${destinationPath}`
+          `Backup created successfully!\n\nLocation: ${destinationPath}`
         );
       } else {
-        alert(`❌ Backup failed: ${result.error}`);
+        alert(`Backup failed: ${result.error}`);
       }
     } catch (error) {
       console.error('Backup error:', error);
-      alert(`❌ Backup failed: ${error.message}`);
+      alert(`Backup failed: ${error.message}`);
     }
   }
 
@@ -641,7 +643,7 @@ blockfilterindex=1`;
         await navigator.clipboard.writeText(configText);
         const btn = content.querySelector('#copy-zmq-config-btn');
         const originalText = btn.textContent;
-        btn.textContent = '✓ Copied!';
+        btn.innerHTML = icons.check(14, 'mr-1') + ' Copied!';
         setTimeout(() => {
           btn.textContent = originalText;
         }, 2000);
@@ -703,7 +705,7 @@ zmqpubrawtx=${rawtx}`;
         await navigator.clipboard.writeText(configText);
         const btn = content.querySelector('#copy-full-config-btn');
         const originalText = btn.textContent;
-        btn.textContent = '✓ Copied!';
+        btn.innerHTML = icons.check(14, 'mr-1') + ' Copied!';
         setTimeout(() => {
           btn.textContent = originalText;
         }, 2000);
diff --git a/src/components/swap/Coinswap.js b/src/components/swap/Coinswap.js
index ad2aa29..33971e0 100644
--- a/src/components/swap/Coinswap.js
+++ b/src/components/swap/Coinswap.js
@@ -1,4 +1,5 @@
 import { SwapStateManager, formatElapsedTime } from './SwapStateManager.js';
+import { icons } from '../../js/icons.js';
 
 export async function CoinswapComponent(container, swapConfig) {
   function normalizeProtocol(value, fallbackIsTaproot = false) {
@@ -181,7 +182,7 @@ export async function CoinswapComponent(container, swapConfig) {
   function markAllMakersComplete() {
     for (let i = 0; i < swapData.makers; i++) {
       updateMakerVisibility(i, true);
-      updateHopStatus(i, '✓ Complete', 'green');
+      updateHopStatus(i, `${icons.check(14, 'mr-1')} Complete`, 'green');
     }
   }
 
@@ -317,7 +318,7 @@ export async function CoinswapComponent(container, swapConfig) {
         );
         if (slot !== -1) {
           setTransactionConfirmed(slot);
-          updateHopStatus(slot, '✓ Confirmed', 'green');
+          updateHopStatus(slot, `${icons.check(14, 'mr-1')} Confirmed`, 'green');
 
           const confirmedHops = swapData.transactions.filter(
             (tx) => tx.status === 'confirmed'
@@ -342,7 +343,7 @@ export async function CoinswapComponent(container, swapConfig) {
         );
         if (slot !== -1) {
           setTransactionConfirmed(slot);
-          updateHopStatus(slot, '✓ Confirmed', 'green');
+          updateHopStatus(slot, `${icons.check(14, 'mr-1')} Confirmed`, 'green');
 
           // ✅ When outgoing is confirmed, light up ALL makers and mark intermediate hops as "Processing"
           if (slot === 0) {
@@ -352,7 +353,7 @@ export async function CoinswapComponent(container, swapConfig) {
             }
             // Mark intermediate hops as processing (hops 1 to N-1)
             for (let i = 1; i < swapData.hops - 1; i++) {
-              updateHopStatus(i, '🔄 Processing...', 'blue');
+              updateHopStatus(i, `${icons.refreshCw(14, 'mr-1 animate-spin')} Processing...`, 'blue');
             }
             console.log(
               `✅ Outgoing contract confirmed. All ${swapData.makers} makers now active`
@@ -384,7 +385,7 @@ export async function CoinswapComponent(container, swapConfig) {
     ) {
       // Mark all intermediate hops as "Keys received"
       for (let i = 1; i < swapData.hops - 1; i++) {
-        updateHopStatus(i, '🔑 Keys received', 'green');
+        updateHopStatus(i, `${icons.key(14, 'mr-1')} Keys received`, 'green');
       }
     }
     // V2: "Registered watcher for taker's incoming contract"
@@ -395,7 +396,7 @@ export async function CoinswapComponent(container, swapConfig) {
       if (txMatch) {
         // This is the final hop - mark it
         const lastHop = swapData.hops - 1;
-        updateHopStatus(lastHop, '📥 Receiving...', 'blue');
+        updateHopStatus(lastHop, `${icons.arrowDownCircle(14, 'mr-1')} Receiving...`, 'blue');
       }
     }
     // V2: "Sweeping taker's incoming contract"
@@ -408,19 +409,19 @@ export async function CoinswapComponent(container, swapConfig) {
       const txMatch = message.match(/([a-f0-9]{64})/i);
       if (txMatch) {
         const lastHop = swapData.hops - 1;
-        updateHopStatus(lastHop, '✓ Swept', 'green');
+        updateHopStatus(lastHop, `${icons.check(14, 'mr-1')} Swept`, 'green');
       }
     }
     // V1: "Swaps settled successfully"
     else if (message.includes('Swaps settled successfully')) {
       for (let i = 0; i < swapData.hops; i++) {
-        updateHopStatus(i, '✓ Complete', 'green');
+        updateHopStatus(i, `${icons.check(14, 'mr-1')} Complete`, 'green');
       }
     }
     // V2: "Taker sweep completed successfully"
     else if (message.includes('Taker sweep completed successfully')) {
       for (let i = 0; i < swapData.hops; i++) {
-        updateHopStatus(i, '✓ Complete', 'green');
+        updateHopStatus(i, `${icons.check(14, 'mr-1')} Complete`, 'green');
       }
       // Make sure all makers are visible
       for (let i = 0; i < swapData.makers; i++) {
@@ -431,7 +432,7 @@ export async function CoinswapComponent(container, swapConfig) {
     // V2: "Successfully Completed Taproot Coinswap"
     else if (message.includes('Successfully Completed Taproot Coinswap')) {
       for (let i = 0; i < swapData.hops; i++) {
-        updateHopStatus(i, '✓ Complete', 'green');
+        updateHopStatus(i, `${icons.check(14, 'mr-1')} Complete`, 'green');
       }
       // Make sure all makers are visible
       for (let i = 0; i < swapData.makers; i++) {
@@ -451,7 +452,7 @@ export async function CoinswapComponent(container, swapConfig) {
     else if (message.includes('Starting forward-flow private key handover')) {
       // Mark intermediate hops as doing key exchange
       for (let i = 1; i < swapData.hops - 1; i++) {
-        updateHopStatus(i, '🔐 Key exchange...', 'yellow');
+        updateHopStatus(i, `${icons.keyRound(14, 'mr-1')} Key exchange...`, 'yellow');
       }
     }
     // V2: "Downloading offer from taproot maker"
@@ -486,7 +487,7 @@ export async function CoinswapComponent(container, swapConfig) {
       message.includes('Verified Taproot contract data from maker')
     ) {
       updateMakerVisibility(makerIndex, true);
-      updateHopStatus(makerIndex, '✓ Contract ready', 'green');
+      updateHopStatus(makerIndex, `${icons.check(14, 'mr-1')} Contract ready`, 'green');
     }
     // V2: "Received private key from maker N"
     else if (
@@ -494,7 +495,7 @@ export async function CoinswapComponent(container, swapConfig) {
       message.includes('Received private key from maker')
     ) {
       updateMakerVisibility(makerIndex, true);
-      updateHopStatus(makerIndex, '🔐 Key received', 'green');
+      updateHopStatus(makerIndex, `${icons.keyRound(14, 'mr-1')} Key received`, 'green');
     }
     // V2: "Sending privkey to maker N and awaiting response"
     else if (
@@ -720,7 +721,7 @@ export async function CoinswapComponent(container, swapConfig) {
         </div>
         
         <div class="bg-blue-500/10 border border-blue-500/30 rounded p-3 text-xs text-blue-300">
-          <p class="font-semibold mb-1">🔒 Your funds are protected</p>
+          <p class="font-semibold mb-1">${icons.shieldCheck(16, 'mr-2')} Your funds are protected</p>
           <p>Recovery process has started automatically. Check your wallet for returned funds.</p>
         </div>
       </div>
@@ -1023,7 +1024,7 @@ export async function CoinswapComponent(container, swapConfig) {
           <div class="flex justify-between items-center mb-2">
             <span class="text-gray-300 font-medium">Locking Funds</span>
             <span class="${outgoing.status === 'confirmed' ? 'text-green-400' : 'text-yellow-400'}">
-              ${outgoing.status === 'confirmed' ? '✓ Confirmed' : outgoing.txid ? 'Broadcasted' : 'Pending'}
+              ${outgoing.status === 'confirmed' ? `${icons.check(14, 'mr-1')} Confirmed` : outgoing.txid ? 'Broadcasted' : 'Pending'}
             </span>
           </div>
           ${outgoing.txid ? `<div class="font-mono text-xs text-gray-400 break-all">${outgoing.txid}</div>` : '<div class="text-gray-500 text-xs">Waiting for broadcast...</div>'}
@@ -1033,7 +1034,7 @@ export async function CoinswapComponent(container, swapConfig) {
           <div class="flex justify-between items-center mb-2">
             <span class="text-gray-300 font-medium">Receiving Funds</span>
             <span class="${incoming.status === 'confirmed' ? 'text-green-400' : 'text-gray-500'}">
-              ${incoming.status === 'confirmed' ? '✓ Received' : 'Waiting...'}
+              ${incoming.status === 'confirmed' ? `${icons.check(14, 'mr-1')} Received` : 'Waiting...'}
             </span>
           </div>
           ${incoming.txid ? `<div class="font-mono text-xs text-gray-400 break-all">${incoming.txid}</div>` : '<div class="text-gray-500 text-xs">Sweep pending</div>'}
@@ -1061,7 +1062,7 @@ export async function CoinswapComponent(container, swapConfig) {
           <div class="flex justify-between mb-1">
             <span class="text-gray-400">Hop ${index + 1}</span>
             <span class="${tx.status === 'confirmed' ? 'text-green-400' : 'text-yellow-400'}">
-              ${tx.status === 'confirmed' ? '✓' : tx.status === 'broadcasting' ? '📡' : '⏳'}
+              ${tx.status === 'confirmed' ? icons.check(14) : tx.status === 'broadcasting' ? icons.radio(14) : icons.hourglass(14)}
             </span>
           </div>
           <div class="font-mono text-gray-300">${tx.txid ? tx.txid.substring(0, 12) + '...' : 'Pending'}</div>
diff --git a/src/components/swap/Swap.js b/src/components/swap/Swap.js
index 071ed97..5065080 100644
--- a/src/components/swap/Swap.js
+++ b/src/components/swap/Swap.js
@@ -1,3 +1,4 @@
+import { icons } from '../../js/icons.js';
 import { SwapStateManager, formatRelativeTime } from './SwapStateManager.js';
 import {
   buildSwapHistoryMarkup,
@@ -768,7 +769,7 @@ export async function SwapComponent(container) {
 
     if (warnings.length > 0) {
       warningEl.innerHTML = warnings
-        .map((w) => `<p class="text-xs text-yellow-400">⚠️ ${w}</p>`)
+        .map((w) => `<p class="text-xs text-yellow-400">${icons.alertTriangle(12, 'mr-1')} ${w}</p>`)
         .join('');
       warningEl.classList.remove('hidden');
       startBtn.disabled = true;
diff --git a/src/components/swap/SwapHistory.js b/src/components/swap/SwapHistory.js
index fa3f8e6..818d193 100644
--- a/src/components/swap/SwapHistory.js
+++ b/src/components/swap/SwapHistory.js
@@ -3,6 +3,7 @@ import {
   formatRelativeTime,
   formatElapsedTime,
 } from './SwapStateManager.js';
+import { icons } from '../../js/icons.js';
 
 let swapHistory = [];
 
@@ -195,7 +196,7 @@ export function buildSwapHistoryMarkup(history) {
   if (history.length === 0) {
     return `
       <div class="text-center py-16">
-        <div class="text-6xl mb-4">🔄</div>
+        <div class="text-gray-500 mb-4 flex justify-center">${icons.refreshCw(64)}</div>
         <h3 class="text-xl text-gray-300 mb-2">No Swap History</h3>
         <p class="text-gray-500 mb-6">You haven't completed any coinswaps yet.</p>
       </div>
@@ -222,7 +223,7 @@ export function buildSwapHistoryMarkup(history) {
           <div class="swap-history-row bg-[#1a2332] hover:bg-[#242d3d] rounded-lg p-5 cursor-pointer transition-all hover:scale-[1.01] hover:shadow-lg border border-transparent hover:border-[#FF6B35]/30" data-swap-id="${swap.id}">
             <div class="flex items-center gap-4">
               <div class="w-14 h-14 rounded-xl bg-green-500/20 flex items-center justify-center flex-shrink-0">
-                <span class="text-2xl">✓</span>
+                <span class="text-green-400">${icons.check(24)}</span>
               </div>
               <div class="flex-1 min-w-0">
                 <div class="flex items-center gap-3 mb-1">
@@ -341,7 +342,7 @@ export async function SwapHistoryComponent(container) {
     if (swapHistory.length === 0) {
       return `
         <div class="text-center py-16">
-          <div class="text-6xl mb-4">🔄</div>
+          <div class="text-gray-500 mb-4 flex justify-center">${icons.refreshCw(64)}</div>
           <h3 class="text-xl text-gray-300 mb-2">No Swap History</h3>
           <p class="text-gray-500 mb-6">You haven't completed any coinswaps yet.</p>
           <button id="start-first-swap" class="bg-[#FF6B35] hover:bg-[#ff7d4d] text-white font-semibold text-lg px-6 py-3 rounded-lg transition-colors">
@@ -366,7 +367,7 @@ export async function SwapHistoryComponent(container) {
               <div class="flex items-center gap-4">
                 <!-- Status Icon -->
                 <div class="w-14 h-14 rounded-xl bg-green-500/20 flex items-center justify-center flex-shrink-0">
-                  <span class="text-2xl">✓</span>
+                  <span class="text-green-400">${icons.check(24)}</span>
                 </div>
                 
                 <!-- Main Info -->
diff --git a/src/components/swap/SwapReport.js b/src/components/swap/SwapReport.js
index 5e169de..f12c386 100644
--- a/src/components/swap/SwapReport.js
+++ b/src/components/swap/SwapReport.js
@@ -1,3 +1,5 @@
+import { icons } from '../../js/icons.js';
+
 export function SwapReportComponent(container, swapReport) {
   function normalizeProtocol(value, fallbackIsTaproot = false) {
     switch (value) {
@@ -381,7 +383,7 @@ export function SwapReportComponent(container, swapReport) {
             <p class="text-xs text-gray-400 mb-1">Onion Address</p>
             <div class="flex items-center gap-2">
               <p class="font-mono text-sm text-white break-all flex-1">${makerAddr}</p>
-              <button class="copy-addr-btn text-gray-400 hover:text-[#FF6B35] transition-colors" title="Copy">📋</button>
+              <button class="copy-addr-btn text-gray-400 hover:text-[#FF6B35] transition-colors" title="Copy">${icons.clipboardCopy(14, 'mr-1')}</button>
             </div>
           </div>
           
@@ -415,14 +417,14 @@ export function SwapReportComponent(container, swapReport) {
           
           <!-- Privacy Contribution -->
           <div class="bg-green-500/10 border border-green-500/30 rounded-lg p-4">
-            <p class="text-xs text-green-400 mb-1">🔒 Privacy Contribution</p>
+            <p class="text-xs text-green-400 mb-1">${icons.shieldCheck(16, 'mr-2')} Privacy Contribution</p>
             <p class="text-xs text-gray-300">This maker broke the transaction link between hop ${makerIndex} and hop ${makerIndex + 2}, making it impossible to trace the flow of funds.</p>
           </div>
         </div>
         
         <div class="mt-6 flex gap-3">
           <button class="copy-addr-btn flex-1 bg-[#242d3d] hover:bg-[#2d3748] text-white py-3 rounded-lg transition-colors">
-            📋 Copy Address
+            ${icons.clipboardCopy(14, 'mr-1')} Copy Address
           </button>
           <button class="close-popup flex-1 text-white py-3 rounded-lg transition-colors"
                   style="background: ${color};">
@@ -515,9 +517,9 @@ export function SwapReportComponent(container, swapReport) {
               </div>
               <div class="flex gap-2 shrink-0">
                 <button class="copy-txid-btn text-gray-400 hover:text-white text-sm transition-colors"
-                        data-txid="${artifact.txid}" title="Copy">📋</button>
+                        data-txid="${artifact.txid}" title="Copy">${icons.clipboardCopy(14, 'mr-1')}</button>
                 <button class="view-txid-btn text-gray-400 hover:text-[#FF6B35] text-sm transition-colors"
-                        data-txid="${artifact.txid}" title="View on Explorer">🔍</button>
+                        data-txid="${artifact.txid}" title="View on Explorer">${icons.externalLink(14, 'mr-1')}</button>
               </div>
             </div>
           </div>
@@ -832,7 +834,7 @@ export function SwapReportComponent(container, swapReport) {
             <text x="${positions[0].x.toFixed(1)}" y="${(positions[0].y + youFont * 0.38).toFixed(1)}"
                   text-anchor="middle" fill="white" font-size="${youFont}" font-weight="bold">You</text>
             <text x="${positions[0].x.toFixed(1)}" y="${(positions[0].y + youHalf + 17).toFixed(1)}"
-                  text-anchor="middle" fill="#6EE7B7" font-size="${Math.max(8, youFont - 12)}">Completed ✓</text>
+                  text-anchor="middle" fill="#6EE7B7" font-size="${Math.max(8, youFont - 12)}">&#x2713; Completed</text>
           </g>
 
           <!-- Maker nodes (clickable) -->
@@ -944,7 +946,7 @@ export function SwapReportComponent(container, swapReport) {
         <div class="flex items-center justify-between mb-6">
           <div class="flex items-center gap-4">
             <div class="w-16 h-16 bg-[#FF6B35] rounded-xl flex items-center justify-center shadow-lg">
-              <span class="text-3xl">🪙</span>
+              <span>${icons.circleDollarSign(20, 'mr-2')}</span>
             </div>
             <div>
               <h2 class="text-4xl font-bold text-[#FF6B35]">
@@ -960,7 +962,7 @@ export function SwapReportComponent(container, swapReport) {
         
         <div class="flex items-center gap-4">
           <div class="px-4 py-2 bg-green-500/20 border border-green-500/30 rounded-lg backdrop-blur-sm">
-            <span class="text-green-400 font-semibold text-lg">✅ SWAP COMPLETED SUCCESSFULLY</span>
+            <span class="text-green-400 font-semibold text-lg flex items-center">${icons.checkCircle(20, 'mr-2')} SWAP COMPLETED SUCCESSFULLY</span>
           </div>
           <div class="px-4 py-2 bg-[#1a2332] rounded-lg">
             <span class="text-gray-400 text-sm">ID: </span>
@@ -1003,7 +1005,7 @@ export function SwapReportComponent(container, swapReport) {
           
           <div class="mt-6 p-4 bg-blue-500/10 border border-blue-500/30 rounded-lg">
             <h4 class="text-sm font-bold text-blue-300 mb-2 flex items-center gap-2">
-              <span>ℹ️</span> Report Summary
+              ${icons.info(16, 'mr-2')} Report Summary
             </h4>
             <div class="text-xs text-gray-300 grid grid-cols-1 md:grid-cols-2 gap-4">
               ${getReportInfoLines()}
@@ -1017,7 +1019,7 @@ export function SwapReportComponent(container, swapReport) {
         <div class="bg-[#1a2332] rounded-lg p-6 hover:scale-105 transition-transform cursor-pointer animate-fade-in-up stagger-1">
           <div class="flex items-center justify-between mb-2">
             <p class="text-sm text-white">Swap Amount</p>
-            <span class="text-2xl">💰</span>
+            <span>${icons.circleDollarSign(16, 'mr-2')}</span>
           </div>
           <p class="text-2xl font-bold text-[#FF6B35]">${satsToBtc(report.targetAmount)} BTC</p>
           <p class="text-xs text-gray-400 mt-1">${formatNumber(report.targetAmount)} sats</p>
@@ -1026,7 +1028,7 @@ export function SwapReportComponent(container, swapReport) {
         <div class="bg-[#1a2332] rounded-lg p-6 hover:scale-105 transition-transform cursor-pointer animate-fade-in-up stagger-2">
           <div class="flex items-center justify-between mb-2">
             <p class="text-sm text-white">Duration</p>
-            <span class="text-2xl">⏱️</span>
+            <span>${icons.timer(16, 'mr-2')}</span>
           </div>
           <p class="text-2xl font-bold text-cyan-400">${formatDuration(report.swapDurationSeconds)}</p>
           <p class="text-xs text-gray-400 mt-1">${report.swapDurationSeconds.toFixed(1)}s total</p>
@@ -1035,7 +1037,7 @@ export function SwapReportComponent(container, swapReport) {
         <div class="bg-[#1a2332] rounded-lg p-6 hover:scale-105 transition-transform cursor-pointer animate-fade-in-up stagger-3">
           <div class="flex items-center justify-between mb-2">
 <p class="text-sm text-white">On-Chain Artifacts</p>
-            <span class="text-2xl">🔗</span>
+            <span>${icons.link(16, 'mr-2')}</span>
           </div>
          <p class="text-2xl font-bold text-purple-400">
   ${report.artifactsCount}
@@ -1048,7 +1050,7 @@ export function SwapReportComponent(container, swapReport) {
         <div class="bg-[#1a2332] rounded-lg p-6 hover:scale-105 transition-transform cursor-pointer animate-fade-in-up stagger-4">
           <div class="flex items-center justify-between mb-2">
             <p class="text-sm text-white">Swap Partners</p>
-            <span class="text-2xl">🤝</span>
+            <span>${icons.handshake(16, 'mr-2')}</span>
           </div>
           <p class="text-2xl font-bold text-yellow-400">${report.makersCount || report.makerAddresses.length}</p>
           <p class="text-xs text-gray-400 mt-1">Makers recorded in the report</p>
@@ -1057,7 +1059,7 @@ export function SwapReportComponent(container, swapReport) {
         <div class="bg-[#1a2332] rounded-lg p-6 hover:scale-105 transition-transform cursor-pointer animate-fade-in-up stagger-4">
           <div class="flex items-center justify-between mb-2">
             <p class="text-sm text-white">Total Fee</p>
-            <span class="text-2xl">💸</span>
+            <span>${icons.receipt(16, 'mr-2')}</span>
           </div>
           <p class="text-2xl font-bold text-yellow-400">${report.feePercentage.toFixed(2)}%</p>
           <p class="text-xs text-gray-400 mt-1">${formatNumber(report.totalFee)} sats</p>
@@ -1073,7 +1075,7 @@ export function SwapReportComponent(container, swapReport) {
           <!-- Transaction Artifacts -->
           <div class="bg-[#1a2332] rounded-lg p-6 animate-fade-in-up stagger-2">
             <h3 class="text-xl font-semibold text-lg text-white mb-4 flex items-center gap-2">
-              <span>📝</span> Transaction Artifacts
+              ${icons.fileText(16, 'mr-2')} Transaction Artifacts
             </h3>
             <div class="space-y-3">
               ${buildTransactionArtifactsHtml()}
@@ -1083,7 +1085,7 @@ export function SwapReportComponent(container, swapReport) {
           <!-- Swap Partners / Makers -->
           <div class="bg-[#1a2332] rounded-lg p-6 animate-fade-in-up stagger-3">
             <h3 class="text-xl font-semibold text-lg text-white mb-4 flex items-center gap-2">
-              <span>🤝</span> Swap Partners
+              ${icons.handshake(16, 'mr-2')} Swap Partners
               <span class="text-xs text-gray-500 font-normal ml-2">(Click for details)</span>
             </h3>
             <div class="grid grid-cols-2 gap-3">
@@ -1099,7 +1101,7 @@ export function SwapReportComponent(container, swapReport) {
           <!-- Fee Breakdown -->
           <div class="bg-[#1a2332] rounded-lg p-6 animate-fade-in-up stagger-2">
             <h3 class="text-lg font-semibold text-lg text-white mb-4 flex items-center gap-2">
-              <span>💰</span> Fee Details
+              ${icons.circleDollarSign(16, 'mr-2')} Fee Details
             </h3>
             <div class="space-y-3">
               <div class="flex justify-between items-center pb-3 border-b border-gray-700">
@@ -1123,7 +1125,7 @@ export function SwapReportComponent(container, swapReport) {
           <!-- UTXO Summary with Tooltip -->
           <div class="bg-[#1a2332] rounded-lg p-6 animate-fade-in-up stagger-4">
             <h3 class="text-lg font-semibold text-lg text-white mb-4 flex items-center gap-2">
-              <span>📦</span> UTXO Summary
+              ${icons.package(16, 'mr-2')} UTXO Summary
             </h3>
             <div class="space-y-3 text-sm">
               <div class="flex justify-between items-center">
@@ -1143,7 +1145,7 @@ export function SwapReportComponent(container, swapReport) {
       <!-- Action Buttons -->
       <div class="mt-8 flex gap-4 animate-fade-in-up stagger-4">
         <button id="export-report" class="flex-1 bg-[#242d3d] hover:bg-[#2d3748] text-white font-semibold text-lg py-4 rounded-lg transition-all hover:scale-105">
-          📥 Export Report
+          ${icons.arrowDownCircle(16, 'mr-1')} Export Report
         </button>
         <button id="done-btn" class="flex-1 bg-[#FF6B35] hover:bg-[#ff7d4d] text-white font-bold py-4 rounded-lg transition-all hover:scale-105 shadow-lg">
           Back to Swaps
diff --git a/src/components/taker/TakerInitialization.js b/src/components/taker/TakerInitialization.js
index 6188e37..b27a5be 100644
--- a/src/components/taker/TakerInitialization.js
+++ b/src/components/taker/TakerInitialization.js
@@ -1,3 +1,5 @@
+import { icons } from '../../js/icons.js';
+
 export function TakerInitializationComponent(container, config, onInitialized) {
   const initDiv = document.createElement('div');
   initDiv.id = 'taker-initialization';
@@ -8,7 +10,7 @@ export function TakerInitializationComponent(container, config, onInitialized) {
         <div class="bg-[#1a2332] rounded-lg max-w-md w-full mx-4 p-8">
             <div class="text-center mb-8">
                 <div class="w-20 h-20 bg-[#FF6B35]/20 rounded-full flex items-center justify-center mx-auto mb-4">
-                    <span class="text-4xl">🔄</span>
+                    <span class="animate-spin">${icons.loader(40)}</span>
                 </div>
                 <h2 class="text-2xl font-bold text-white mb-2">Initializing Taker</h2>
                 <p id="taker-status-text" class="text-gray-400 text-sm">Setting up coinswap functionality...</p>
@@ -61,14 +63,14 @@ export function TakerInitializationComponent(container, config, onInitialized) {
                 </button>
                 <div class="mt-4 bg-blue-500/10 border border-blue-500/30 rounded-lg p-3">
                     <p class="text-xs text-blue-400">
-                        💡 <strong>Tip:</strong> This is the password you set when creating your wallet.
+                        ${icons.lightbulb(16, 'mr-1')} <strong>Tip:</strong> This is the password you set when creating your wallet.
                     </p>
                 </div>
             </div>
 
             <div id="taker-error" class="hidden mt-4 bg-red-500/10 border border-red-500/30 rounded-lg p-4">
                 <div class="flex items-start">
-                    <span class="text-red-400 mr-2">⚠️</span>
+                    <span class="text-red-400 mr-2">${icons.alertTriangle(16)}</span>
                     <div>
                         <p class="text-sm font-medium text-red-400">Initialization Failed</p>
                         <p id="error-message" class="text-xs text-red-300 mt-1"></p>
@@ -86,7 +88,7 @@ export function TakerInitializationComponent(container, config, onInitialized) {
 
             <div id="tor-setup" class="hidden mt-4 bg-blue-500/10 border border-blue-500/30 rounded-lg p-4">
                 <p class="text-xs text-blue-400 mb-3">
-                    💡 <strong>Tor Not Running:</strong>
+                    ${icons.lightbulb(16, 'mr-1')} <strong>Tor Not Running:</strong>
                 </p>
                 <div class="bg-[#0f1419] rounded p-3 font-mono text-xs text-gray-300">
                     sudo systemctl start tor@coinswap
diff --git a/src/components/wallet/TransactionsList.js b/src/components/wallet/TransactionsList.js
index 9e26a9e..7392eea 100644
--- a/src/components/wallet/TransactionsList.js
+++ b/src/components/wallet/TransactionsList.js
@@ -1,3 +1,5 @@
+import { icons } from '../../js/icons.js';
+
 export function TransactionsListComponent(container) {
   // State
   let currentFilter = 'all';
@@ -204,7 +206,7 @@ export function TransactionsListComponent(container) {
     if (filteredTransactions.length === 0) {
       transactionContainer.innerHTML = `
         <div class="text-center py-12">
-          <div class="text-4xl mb-4">📭</div>
+          <div class="text-gray-500 mb-4 flex justify-center">${icons.inbox(48)}</div>
           <p class="text-gray-400">No transactions found for the selected filter.</p>
           <p class="text-gray-500 text-sm mt-2">Try selecting a different filter or refresh.</p>
         </div>
@@ -232,7 +234,7 @@ export function TransactionsListComponent(container) {
                 <div class="min-w-0">
                     <div class="flex items-center gap-2 mb-1 flex-wrap">
                         <p class="text-white font-semibold text-lg capitalize">
-                          ${type === 'swap' ? '🔄 Coinswap' : type === 'received' ? '📥 Received' : '📤 Sent'}
+                          ${type === 'swap' ? icons.refreshCw(14, 'mr-1') + ' Coinswap' : type === 'received' ? icons.arrowDownCircle(14, 'mr-1') + ' Received' : icons.arrowUpCircle(14, 'mr-1') + ' Sent'}
                         </p>
                         <span class="text-xs px-2 py-0.5 rounded ${statusBadge.class}">${statusBadge.text}</span>
                         ${label ? `<span class="text-xs text-gray-500 truncate max-w-[150px]" title="${label}">${label}</span>` : ''}
@@ -334,7 +336,7 @@ export function TransactionsListComponent(container) {
       console.error('❌ Failed to load transactions:', error);
       transactionContainer.innerHTML = `
         <div class="text-center py-12">
-          <div class="text-4xl mb-4">❌</div>
+          <div class="text-red-400 mb-4 flex justify-center">${icons.xCircle(48)}</div>
           <p class="text-red-400">Failed to load transactions</p>
           <p class="text-gray-500 text-sm mt-2">${error.message}</p>
           <button onclick="location.reload()" class="mt-4 bg-[#FF6B35] text-white px-4 py-2 rounded-lg">Retry</button>
@@ -409,13 +411,13 @@ export function TransactionsListComponent(container) {
                         All (<span id="filter-all-count">--</span>)
                     </button>
                     <button data-filter="received" class="filter-btn bg-[#0f1419] hover:bg-[#242d3d] border border-gray-700 text-gray-400 px-4 py-2 rounded-lg text-sm font-semibold text-lg transition-colors">
-                        📥 Received (<span id="filter-received-count">--</span>)
+                        ${icons.arrowDownCircle(14, 'mr-1')} Received (<span id="filter-received-count">--</span>)
                     </button>
                     <button data-filter="sent" class="filter-btn bg-[#0f1419] hover:bg-[#242d3d] border border-gray-700 text-gray-400 px-4 py-2 rounded-lg text-sm font-semibold text-lg transition-colors">
-                        📤 Sent (<span id="filter-sent-count">--</span>)
+                        ${icons.arrowUpCircle(14, 'mr-1')} Sent (<span id="filter-sent-count">--</span>)
                     </button>
                     <button data-filter="swaps" class="filter-btn bg-[#0f1419] hover:bg-[#242d3d] border border-gray-700 text-gray-400 px-4 py-2 rounded-lg text-sm font-semibold text-lg transition-colors">
-                        🔄 Swaps (<span id="filter-swaps-count">--</span>)
+                        ${icons.refreshCw(14, 'mr-1')} Swaps (<span id="filter-swaps-count">--</span>)
                     </button>
                     <button data-sort="newest" id="sort-newest" class="sort-btn bg-[#FF6B35] text-white px-4 py-2 rounded-lg text-sm font-semibold text-lg transition-colors">
                         Newest
diff --git a/src/js/icons.js b/src/js/icons.js
new file mode 100644
index 0000000..dfc0302
--- /dev/null
+++ b/src/js/icons.js
@@ -0,0 +1,145 @@
+/**
+ * Icon helpers built on top of the `lucide` package.
+ *
+ * Usage in HTML templates:
+ *   import { icons } from '../../js/icons.js';
+ *   `<button>${icons.save()} Save</button>`
+ *   `<button>${icons.save(20, 'mr-1')} Save</button>`
+ *
+ * @param {number} size  - width/height in px (default 16)
+ * @param {string} cls   - extra CSS classes appended to the <svg>
+ * @returns {string}     - inline SVG string ready to embed in innerHTML
+ */
+
+import {
+  Check,
+  CheckCircle,
+  XCircle,
+  AlertTriangle,
+  RefreshCw,
+  Loader,
+  ArrowDownCircle,
+  ArrowUpCircle,
+  Package,
+  Save,
+  ExternalLink,
+  Zap,
+  Copy,
+  Search,
+  Lock,
+  Key,
+  KeyRound,
+  ClipboardCopy,
+  Info,
+  Timer,
+  Link,
+  Handshake,
+  Receipt,
+  FileText,
+  CircleDollarSign,
+  ShieldCheck,
+  Recycle,
+  Globe,
+  Inbox,
+  Radio,
+  Hourglass,
+  FolderOpen,
+  Folder,
+  Lightbulb,
+  PlusCircle,
+  PauseCircle,
+} from '../../node_modules/lucide/dist/esm/lucide.js';
+
+function nodeToString([tag, attrs, children]) {
+  const attrStr = Object.entries(attrs)
+    .map(([k, v]) => `${k}="${v}"`)
+    .join(' ');
+  const childStr = children ? children.map(nodeToString).join('') : '';
+  return childStr
+    ? `<${tag} ${attrStr}>${childStr}</${tag}>`
+    : `<${tag} ${attrStr}/>`;
+}
+
+function toSvg(iconData, size, cls) {
+  const children = iconData.map(nodeToString).join('');
+  const baseClass = 'inline-block align-middle flex-shrink-0';
+  const classAttr = cls
+    ? `class="${baseClass} ${cls}"`
+    : `class="${baseClass}"`;
+  return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" ${classAttr}>${children}</svg>`;
+}
+
+export const icons = {
+  /** ✅ success / completed */
+  checkCircle:    (size = 16, cls = '') => toSvg(CheckCircle,    size, cls),
+  /** ✓ bare check (compact) */
+  check:          (size = 16, cls = '') => toSvg(Check,          size, cls),
+  /** ❌ error / failure */
+  xCircle:        (size = 16, cls = '') => toSvg(XCircle,        size, cls),
+  /** ⚠️ warning */
+  alertTriangle:  (size = 16, cls = '') => toSvg(AlertTriangle,  size, cls),
+  /** 🔄 refresh / sync / coinswap */
+  refreshCw:      (size = 16, cls = '') => toSvg(RefreshCw,      size, cls),
+  /** ⟳ loading spinner — add animate-spin class */
+  loader:         (size = 16, cls = '') => toSvg(Loader,         size, cls),
+  /** 📥 receive / incoming */
+  arrowDownCircle:(size = 16, cls = '') => toSvg(ArrowDownCircle,size, cls),
+  /** 📤 send / outgoing */
+  arrowUpCircle:  (size = 16, cls = '') => toSvg(ArrowUpCircle,  size, cls),
+  /** 📦 UTXO / package */
+  package:        (size = 16, cls = '') => toSvg(Package,        size, cls),
+  /** 💾 save / backup */
+  save:           (size = 16, cls = '') => toSvg(Save,           size, cls),
+  /** 🔍 mempool explorer / external link */
+  externalLink:   (size = 16, cls = '') => toSvg(ExternalLink,   size, cls),
+  /** ⚡ speed / zap */
+  zap:            (size = 16, cls = '') => toSvg(Zap,            size, cls),
+  /** copy to clipboard */
+  copy:           (size = 16, cls = '') => toSvg(Copy,           size, cls),
+  /** search */
+  search:         (size = 16, cls = '') => toSvg(Search,         size, cls),
+  /** 🔒 lock / privacy */
+  lock:           (size = 16, cls = '') => toSvg(Lock,           size, cls),
+  /** 🔑 key / signing */
+  key:            (size = 16, cls = '') => toSvg(Key,            size, cls),
+  /** 🔐 key round / key exchange */
+  keyRound:       (size = 16, cls = '') => toSvg(KeyRound,       size, cls),
+  /** 📋 clipboard copy */
+  clipboardCopy:  (size = 16, cls = '') => toSvg(ClipboardCopy,  size, cls),
+  /** ℹ️ info */
+  info:           (size = 16, cls = '') => toSvg(Info,           size, cls),
+  /** ⏱️ timer / duration */
+  timer:          (size = 16, cls = '') => toSvg(Timer,          size, cls),
+  /** 🔗 link / artifacts */
+  link:           (size = 16, cls = '') => toSvg(Link,           size, cls),
+  /** 🤝 handshake / swap partners */
+  handshake:      (size = 16, cls = '') => toSvg(Handshake,      size, cls),
+  /** 💸 receipt / fees */
+  receipt:        (size = 16, cls = '') => toSvg(Receipt,        size, cls),
+  /** 📝 file text / transactions */
+  fileText:       (size = 16, cls = '') => toSvg(FileText,       size, cls),
+  /** 💰 dollar / amount */
+  circleDollarSign:(size = 16, cls = '') => toSvg(CircleDollarSign, size, cls),
+  /** 🛡️ shield check / privacy contribution */
+  shieldCheck:    (size = 16, cls = '') => toSvg(ShieldCheck,    size, cls),
+  /** ♻️ recycle / restore wallet */
+  recycle:        (size = 16, cls = '') => toSvg(Recycle,        size, cls),
+  /** 🧅 Tor / network / globe */
+  globe:          (size = 16, cls = '') => toSvg(Globe,          size, cls),
+  /** 📭 empty inbox */
+  inbox:          (size = 16, cls = '') => toSvg(Inbox,          size, cls),
+  /** 📡 broadcast / radio */
+  radio:          (size = 16, cls = '') => toSvg(Radio,          size, cls),
+  /** ⏳ hourglass / pending */
+  hourglass:      (size = 16, cls = '') => toSvg(Hourglass,      size, cls),
+  /** 📂 folder open */
+  folderOpen:     (size = 16, cls = '') => toSvg(FolderOpen,     size, cls),
+  /** 📁 folder */
+  folder:         (size = 16, cls = '') => toSvg(Folder,         size, cls),
+  /** 💡 tip / lightbulb */
+  lightbulb:      (size = 16, cls = '') => toSvg(Lightbulb,      size, cls),
+  /** 🆕 create new */
+  plusCircle:     (size = 16, cls = '') => toSvg(PlusCircle,     size, cls),
+  /** ⏸️ unresponsive / paused */
+  pauseCircle:    (size = 16, cls = '') => toSvg(PauseCircle,    size, cls),
+};
diff --git a/src/styles/output.css b/src/styles/output.css
index 364bb9b..d3cfa65 100644
--- a/src/styles/output.css
+++ b/src/styles/output.css
@@ -335,6 +335,9 @@
   .mt-8 {
     margin-top: calc(var(--spacing) * 8);
   }
+  .mr-1 {
+    margin-right: calc(var(--spacing) * 1);
+  }
   .mr-2 {
     margin-right: calc(var(--spacing) * 2);
   }
@@ -1217,6 +1220,9 @@
   .text-right {
     text-align: right;
   }
+  .align-middle {
+    vertical-align: middle;
+  }
   .font-mono {
     font-family: var(--font-mono);
   }
@@ -1232,10 +1238,6 @@
     font-size: var(--text-4xl);
     line-height: var(--tw-leading, var(--text-4xl--line-height));
   }
-  .text-6xl {
-    font-size: var(--text-6xl);
-    line-height: var(--tw-leading, var(--text-6xl--line-height));
-  }
   .text-lg {
     font-size: var(--text-lg);
     line-height: var(--tw-leading, var(--text-lg--line-height));