diff --git a/app/templates/shop/account/addresses.html b/app/templates/shop/account/addresses.html
index 376d9b8a..18ac38e0 100644
--- a/app/templates/shop/account/addresses.html
+++ b/app/templates/shop/account/addresses.html
@@ -16,27 +16,20 @@
         <button @click="openAddModal()"
                 class="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-primary hover:bg-primary-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary"
                 style="background-color: var(--color-primary)">
-            <svg class="-ml-1 mr-2 h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
-            </svg>
+            <span class="-ml-1 mr-2 h-5 w-5" x-html="$icon('plus', 'h-5 w-5')"></span>
             Add Address
         </button>
     </div>
 
     <!-- Loading State -->
     <div x-show="loading" class="flex justify-center py-12">
-        <svg class="animate-spin h-8 w-8 text-primary" style="color: var(--color-primary)" fill="none" viewBox="0 0 24 24">
-            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
-        </svg>
+        <span class="h-8 w-8 text-primary" style="color: var(--color-primary)" x-html="$icon('spinner', 'h-8 w-8 animate-spin')"></span>
     </div>
 
     <!-- Error State -->
     <div x-show="error && !loading" class="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4 mb-6">
         <div class="flex">
-            <svg class="h-5 w-5 text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-            </svg>
+            <span class="h-5 w-5 text-red-400" x-html="$icon('exclamation-circle', 'h-5 w-5')"></span>
             <p class="ml-3 text-sm text-red-700 dark:text-red-400" x-text="error"></p>
         </div>
     </div>
@@ -44,10 +37,7 @@
     <!-- Empty State -->
     <div x-show="!loading && !error && addresses.length === 0"
          class="bg-white dark:bg-gray-800 rounded-lg shadow border border-gray-200 dark:border-gray-700 p-12 text-center">
-        <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
-        </svg>
+        <span class="mx-auto h-12 w-12 text-gray-400 block" x-html="$icon('location-marker', 'h-12 w-12 mx-auto')"></span>
         <h3 class="mt-4 text-lg font-medium text-gray-900 dark:text-white">No addresses yet</h3>
         <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">Add your first address to speed up checkout.</p>
         <button @click="openAddModal()"
@@ -65,9 +55,7 @@
                 <div x-show="address.is_default" class="absolute top-4 right-4">
                     <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium"
                           :class="address.address_type === 'shipping' ? 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200' : 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200'">
-                        <svg class="-ml-0.5 mr-1 h-3 w-3" fill="currentColor" viewBox="0 0 20 20">
-                            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
-                        </svg>
+                        <span class="-ml-0.5 mr-1 h-3 w-3" x-html="$icon('check-circle', 'h-3 w-3')"></span>
                         Default <span x-text="address.address_type === 'shipping' ? 'Shipping' : 'Billing'" class="ml-1"></span>
                     </span>
                 </div>
@@ -144,9 +132,7 @@
 
             <div class="absolute top-0 right-0 pt-4 pr-4">
                 <button @click="showAddressModal = false" class="text-gray-400 hover:text-gray-500">
-                    <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-                    </svg>
+                    <span class="h-6 w-6" x-html="$icon('x-mark', 'h-6 w-6')"></span>
                 </button>
             </div>
 
@@ -298,9 +284,7 @@
 
             <div class="sm:flex sm:items-start">
                 <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-100 dark:bg-red-900 sm:mx-0 sm:h-10 sm:w-10">
-                    <svg class="h-6 w-6 text-red-600 dark:text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
-                    </svg>
+                    <span class="h-6 w-6 text-red-600 dark:text-red-400" x-html="$icon('exclamation-triangle', 'h-6 w-6')"></span>
                 </div>
                 <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
                     <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white">Delete Address</h3>
diff --git a/app/templates/shop/account/dashboard.html b/app/templates/shop/account/dashboard.html
index d1363ef1..3cf624ca 100644
--- a/app/templates/shop/account/dashboard.html
+++ b/app/templates/shop/account/dashboard.html
@@ -21,9 +21,7 @@
            class="block bg-white dark:bg-gray-800 rounded-lg shadow hover:shadow-lg transition-shadow p-6 border border-gray-200 dark:border-gray-700">
             <div class="flex items-center mb-4">
                 <div class="flex-shrink-0">
-                    <svg class="h-8 w-8 text-primary" style="color: var(--color-primary)" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
-                    </svg>
+                    <span class="h-8 w-8 text-primary" style="color: var(--color-primary)" x-html="$icon('shopping-bag', 'h-8 w-8')"></span>
                 </div>
                 <div class="ml-4">
                     <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Orders</h3>
@@ -41,9 +39,7 @@
            class="block bg-white dark:bg-gray-800 rounded-lg shadow hover:shadow-lg transition-shadow p-6 border border-gray-200 dark:border-gray-700">
             <div class="flex items-center mb-4">
                 <div class="flex-shrink-0">
-                    <svg class="h-8 w-8 text-primary" style="color: var(--color-primary)" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
-                    </svg>
+                    <span class="h-8 w-8 text-primary" style="color: var(--color-primary)" x-html="$icon('user', 'h-8 w-8')"></span>
                 </div>
                 <div class="ml-4">
                     <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Profile</h3>
@@ -60,10 +56,7 @@
            class="block bg-white dark:bg-gray-800 rounded-lg shadow hover:shadow-lg transition-shadow p-6 border border-gray-200 dark:border-gray-700">
             <div class="flex items-center mb-4">
                 <div class="flex-shrink-0">
-                    <svg class="h-8 w-8 text-primary" style="color: var(--color-primary)" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
-                    </svg>
+                    <span class="h-8 w-8 text-primary" style="color: var(--color-primary)" x-html="$icon('location-marker', 'h-8 w-8')"></span>
                 </div>
                 <div class="ml-4">
                     <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Addresses</h3>
@@ -79,9 +72,7 @@
            x-init="fetch('/api/v1/shop/messages/unread-count').then(r => r.json()).then(d => unreadCount = d.unread_count).catch(() => {})">
             <div class="flex items-center mb-4">
                 <div class="flex-shrink-0 relative">
-                    <svg class="h-8 w-8 text-primary" style="color: var(--color-primary)" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
-                    </svg>
+                    <span class="h-8 w-8 text-primary" style="color: var(--color-primary)" x-html="$icon('chat-bubble-left', 'h-8 w-8')"></span>
                     <span x-show="unreadCount > 0"
                           class="absolute -top-1 -right-1 inline-flex items-center justify-center px-1.5 py-0.5 text-xs font-bold leading-none text-white bg-red-600 rounded-full"
                           x-text="unreadCount > 9 ? '9+' : unreadCount"></span>
@@ -163,9 +154,7 @@
             <div class="sm:flex sm:items-start">
                 <!-- Icon -->
                 <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-100 dark:bg-red-900 sm:mx-0 sm:h-10 sm:w-10">
-                    <svg class="h-6 w-6 text-red-600 dark:text-red-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
-                    </svg>
+                    <span class="h-6 w-6 text-red-600 dark:text-red-400" x-html="$icon('exclamation-triangle', 'h-6 w-6')"></span>
                 </div>
 
                 <!-- Content -->
diff --git a/app/templates/shop/account/forgot-password.html b/app/templates/shop/account/forgot-password.html
index 4137cbce..d4961c85 100644
--- a/app/templates/shop/account/forgot-password.html
+++ b/app/templates/shop/account/forgot-password.html
@@ -1,4 +1,5 @@
 {# app/templates/shop/account/forgot-password.html #}
+{# standalone #}
 <!DOCTYPE html>
 <html :class="{ 'dark': dark }" x-data="forgotPassword()" lang="en">
 <head>
@@ -101,10 +102,7 @@
                                             class="btn-primary-theme block w-full px-4 py-2 mt-4 text-sm font-medium leading-5 text-center text-white transition-colors duration-150 border border-transparent rounded-lg focus:outline-none focus:shadow-outline-purple disabled:opacity-50 disabled:cursor-not-allowed">
                                         <span x-show="!loading">Send Reset Link</span>
                                         <span x-show="loading" class="flex items-center justify-center">
-                                            <svg class="inline w-4 h-4 mr-2 animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-                                                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-                                                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-                                            </svg>
+                                            <span class="inline w-4 h-4 mr-2" x-html="$icon('spinner', 'w-4 h-4 animate-spin')"></span>
                                             Sending...
                                         </span>
                                     </button>
@@ -116,9 +114,7 @@
                         <template x-if="emailSent">
                             <div class="text-center">
                                 <div class="flex items-center justify-center w-16 h-16 mx-auto mb-4 rounded-full bg-green-100 dark:bg-green-900">
-                                    <svg class="w-8 h-8 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
-                                    </svg>
+                                    <span class="w-8 h-8 text-green-600 dark:text-green-400" x-html="$icon('check', 'w-8 h-8')"></span>
                                 </div>
 
                                 <h1 class="mb-4 text-xl font-semibold text-gray-700 dark:text-gray-200">
diff --git a/app/templates/shop/account/login.html b/app/templates/shop/account/login.html
index a57e0f8e..1fc9606c 100644
--- a/app/templates/shop/account/login.html
+++ b/app/templates/shop/account/login.html
@@ -138,10 +138,7 @@
                                     class="btn-primary-theme block w-full px-4 py-2 mt-4 text-sm font-medium leading-5 text-center text-white transition-colors duration-150 border border-transparent rounded-lg focus:outline-none focus:shadow-outline-purple disabled:opacity-50 disabled:cursor-not-allowed">
                                 <span x-show="!loading">Sign in</span>
                                 <span x-show="loading" class="flex items-center justify-center">
-                                    <svg class="inline w-4 h-4 mr-2 animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-                                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-                                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-                                    </svg>
+                                    <span class="inline w-4 h-4 mr-2" x-html="$icon('spinner', 'w-4 h-4 animate-spin')"></span>
                                     Signing in...
                                 </span>
                             </button>
diff --git a/app/templates/shop/account/messages.html b/app/templates/shop/account/messages.html
index 16329bf2..bb871cb1 100644
--- a/app/templates/shop/account/messages.html
+++ b/app/templates/shop/account/messages.html
@@ -16,17 +16,13 @@
                         <a href="{{ base_url }}shop/account/dashboard"
                            class="inline-flex items-center text-sm font-medium text-gray-700 hover:text-primary dark:text-gray-400 dark:hover:text-white"
                            style="--hover-color: var(--color-primary)">
-                            <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
-                                <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z" />
-                            </svg>
+                            <span class="w-4 h-4 mr-2" x-html="$icon('home', 'w-4 h-4')"></span>
                             My Account
                         </a>
                     </li>
                     <li>
                         <div class="flex items-center">
-                            <svg class="w-6 h-6 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
-                                <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
-                            </svg>
+                            <span class="w-6 h-6 text-gray-400" x-html="$icon('chevron-right', 'w-6 h-6')"></span>
                             <span class="ml-1 text-sm font-medium text-gray-500 md:ml-2 dark:text-gray-400">Messages</span>
                         </div>
                     </li>
@@ -40,10 +36,7 @@
     <!-- Loading State -->
     <template x-if="loading">
         <div class="flex justify-center items-center py-12">
-            <svg class="animate-spin h-8 w-8 text-primary" style="color: var(--color-primary)" fill="none" viewBox="0 0 24 24">
-                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-            </svg>
+            <span class="h-8 w-8 text-primary" style="color: var(--color-primary)" x-html="$icon('spinner', 'h-8 w-8 animate-spin')"></span>
         </div>
     </template>
 
@@ -81,9 +74,7 @@
                     <div class="divide-y divide-gray-200 dark:divide-gray-700">
                         <template x-if="conversations.length === 0">
                             <div class="px-6 py-12 text-center">
-                                <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
-                                </svg>
+                                <span class="mx-auto h-12 w-12 text-gray-400 block" x-html="$icon('chat-bubble-left', 'h-12 w-12 mx-auto')"></span>
                                 <h3 class="mt-2 text-sm font-medium text-gray-900 dark:text-white">No messages</h3>
                                 <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
                                     You don't have any conversations yet.
@@ -148,9 +139,7 @@
                     <div class="flex items-center justify-between px-6 py-4 border-b border-gray-200 dark:border-gray-700">
                         <div class="flex items-center space-x-4">
                             <button @click="backToList()" class="text-gray-500 hover:text-gray-700 dark:hover:text-gray-300">
-                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
-                                </svg>
+                                <span class="w-5 h-5" x-html="$icon('chevron-left', 'w-5 h-5')"></span>
                             </button>
                             <div>
                                 <h2 class="text-lg font-semibold text-gray-900 dark:text-white" x-text="selectedConversation.subject"></h2>
@@ -185,9 +174,7 @@
                                                         <a :href="att.download_url"
                                                            target="_blank"
                                                            class="flex items-center space-x-2 text-xs underline opacity-80 hover:opacity-100">
-                                                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13" />
-                                                            </svg>
+                                                            <span class="w-4 h-4" x-html="$icon('paperclip', 'w-4 h-4')"></span>
                                                             <span x-text="att.filename"></span>
                                                         </a>
                                                     </template>
@@ -216,9 +203,7 @@
                                     <div class="flex flex-col justify-end space-y-2">
                                         <!-- File upload -->
                                         <label class="cursor-pointer text-gray-500 hover:text-gray-700 dark:hover:text-gray-300">
-                                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13" />
-                                            </svg>
+                                            <span class="w-6 h-6" x-html="$icon('paperclip', 'w-6 h-6')"></span>
                                             <input type="file" multiple class="hidden" @change="handleFileSelect($event)">
                                         </label>
                                         <button type="submit"
@@ -227,10 +212,7 @@
                                                 style="background-color: var(--color-primary)">
                                             <span x-show="!sending">Send</span>
                                             <span x-show="sending" class="flex items-center">
-                                                <svg class="animate-spin -ml-1 mr-2 h-4 w-4" fill="none" viewBox="0 0 24 24">
-                                                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-                                                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-                                                </svg>
+                                                <span class="-ml-1 mr-2 h-4 w-4" x-html="$icon('spinner', 'h-4 w-4 animate-spin')"></span>
                                                 Sending
                                             </span>
                                         </button>
@@ -243,9 +225,7 @@
                                             <div class="flex items-center space-x-1 bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded text-sm">
                                                 <span x-text="file.name" class="max-w-[150px] truncate"></span>
                                                 <button type="button" @click="removeAttachment(index)" class="text-gray-500 hover:text-red-500">
-                                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-                                                    </svg>
+                                                    <span class="w-4 h-4" x-html="$icon('x-mark', 'w-4 h-4')"></span>
                                                 </button>
                                             </div>
                                         </template>
diff --git a/app/templates/shop/account/order-detail.html b/app/templates/shop/account/order-detail.html
index 4447c725..030ba59f 100644
--- a/app/templates/shop/account/order-detail.html
+++ b/app/templates/shop/account/order-detail.html
@@ -14,15 +14,11 @@
                 <a href="{{ base_url }}shop/account/dashboard" class="hover:text-primary">My Account</a>
             </li>
             <li class="flex items-center">
-                <svg class="h-4 w-4 mx-2" fill="currentColor" viewBox="0 0 20 20">
-                    <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
-                </svg>
+                <span class="h-4 w-4 mx-2" x-html="$icon('chevron-right', 'h-4 w-4')"></span>
                 <a href="{{ base_url }}shop/account/orders" class="hover:text-primary">Orders</a>
             </li>
             <li class="flex items-center">
-                <svg class="h-4 w-4 mx-2" fill="currentColor" viewBox="0 0 20 20">
-                    <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
-                </svg>
+                <span class="h-4 w-4 mx-2" x-html="$icon('chevron-right', 'h-4 w-4')"></span>
                 <span class="text-gray-900 dark:text-white" x-text="order?.order_number || 'Order Details'"></span>
             </li>
         </ol>
@@ -36,9 +32,7 @@
     <!-- Error State -->
     <div x-show="error && !loading" class="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-6">
         <div class="flex">
-            <svg class="h-6 w-6 text-red-400" fill="currentColor" viewBox="0 0 20 20">
-                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
-            </svg>
+            <span class="h-6 w-6 text-red-400" x-html="$icon('x-circle', 'h-6 w-6')"></span>
             <div class="ml-3">
                 <h3 class="text-lg font-medium text-red-800 dark:text-red-200">Error loading order</h3>
                 <p class="mt-1 text-sm text-red-700 dark:text-red-300" x-text="error"></p>
@@ -79,9 +73,7 @@
                     <div class="relative flex items-start">
                         <div class="flex items-center justify-center w-8 h-8 rounded-full shrink-0 z-10"
                              :class="getTimelineStepClass('pending')">
-                            <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
-                                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
-                            </svg>
+                            <span class="w-4 h-4" x-html="$icon('check-circle', 'w-4 h-4')"></span>
                         </div>
                         <div class="ml-4">
                             <p class="font-medium text-gray-900 dark:text-white">Order Placed</p>
@@ -93,12 +85,8 @@
                     <div class="relative flex items-start">
                         <div class="flex items-center justify-center w-8 h-8 rounded-full shrink-0 z-10"
                              :class="getTimelineStepClass('processing')">
-                            <svg x-show="isStepComplete('processing')" class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
-                                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
-                            </svg>
-                            <svg x-show="!isStepComplete('processing')" class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
-                                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clip-rule="evenodd" />
-                            </svg>
+                            <span x-show="isStepComplete('processing')" class="w-4 h-4" x-html="$icon('check-circle', 'w-4 h-4')"></span>
+                            <span x-show="!isStepComplete('processing')" class="w-4 h-4" x-html="$icon('clock', 'w-4 h-4')"></span>
                         </div>
                         <div class="ml-4">
                             <p class="font-medium" :class="isStepComplete('processing') ? 'text-gray-900 dark:text-white' : 'text-gray-400 dark:text-gray-500'">Processing</p>
@@ -110,13 +98,8 @@
                     <div class="relative flex items-start">
                         <div class="flex items-center justify-center w-8 h-8 rounded-full shrink-0 z-10"
                              :class="getTimelineStepClass('shipped')">
-                            <svg x-show="isStepComplete('shipped')" class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
-                                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
-                            </svg>
-                            <svg x-show="!isStepComplete('shipped')" class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
-                                <path d="M8 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM15 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z" />
-                                <path d="M3 4a1 1 0 00-1 1v10a1 1 0 001 1h1.05a2.5 2.5 0 014.9 0H10a1 1 0 001-1V5a1 1 0 00-1-1H3zM14 7a1 1 0 00-1 1v6.05A2.5 2.5 0 0115.95 16H17a1 1 0 001-1v-5a1 1 0 00-.293-.707l-2-2A1 1 0 0015 7h-1z" />
-                            </svg>
+                            <span x-show="isStepComplete('shipped')" class="w-4 h-4" x-html="$icon('check-circle', 'w-4 h-4')"></span>
+                            <span x-show="!isStepComplete('shipped')" class="w-4 h-4" x-html="$icon('truck', 'w-4 h-4')"></span>
                         </div>
                         <div class="ml-4">
                             <p class="font-medium" :class="isStepComplete('shipped') ? 'text-gray-900 dark:text-white' : 'text-gray-400 dark:text-gray-500'">Shipped</p>
@@ -128,12 +111,8 @@
                     <div class="relative flex items-start">
                         <div class="flex items-center justify-center w-8 h-8 rounded-full shrink-0 z-10"
                              :class="getTimelineStepClass('delivered')">
-                            <svg x-show="isStepComplete('delivered')" class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
-                                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
-                            </svg>
-                            <svg x-show="!isStepComplete('delivered')" class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
-                                <path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd" />
-                            </svg>
+                            <span x-show="isStepComplete('delivered')" class="w-4 h-4" x-html="$icon('check-circle', 'w-4 h-4')"></span>
+                            <span x-show="!isStepComplete('delivered')" class="w-4 h-4" x-html="$icon('gift', 'w-4 h-4')"></span>
                         </div>
                         <div class="ml-4">
                             <p class="font-medium" :class="isStepComplete('delivered') ? 'text-gray-900 dark:text-white' : 'text-gray-400 dark:text-gray-500'">Delivered</p>
@@ -171,9 +150,7 @@
                             <div class="px-6 py-4 flex items-center gap-4">
                                 <!-- Product Image Placeholder -->
                                 <div class="flex-shrink-0 w-16 h-16 bg-gray-100 dark:bg-gray-700 rounded-lg flex items-center justify-center">
-                                    <svg class="h-8 w-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
-                                    </svg>
+                                    <span class="h-8 w-8 text-gray-400" x-html="$icon('cube', 'h-8 w-8')"></span>
                                 </div>
                                 <!-- Product Info -->
                                 <div class="flex-1 min-w-0">
@@ -201,10 +178,7 @@
                     <!-- Shipping Address -->
                     <div class="bg-white dark:bg-gray-800 rounded-lg shadow border border-gray-200 dark:border-gray-700 p-6">
                         <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center">
-                            <svg class="h-5 w-5 mr-2 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
-                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
-                            </svg>
+                            <span class="h-5 w-5 mr-2 text-gray-400" x-html="$icon('location-marker', 'h-5 w-5')"></span>
                             Shipping Address
                         </h3>
                         <div class="text-sm text-gray-600 dark:text-gray-300 space-y-1">
@@ -220,9 +194,7 @@
                     <!-- Billing Address -->
                     <div class="bg-white dark:bg-gray-800 rounded-lg shadow border border-gray-200 dark:border-gray-700 p-6">
                         <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center">
-                            <svg class="h-5 w-5 mr-2 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
-                            </svg>
+                            <span class="h-5 w-5 mr-2 text-gray-400" x-html="$icon('document-text', 'h-5 w-5')"></span>
                             Billing Address
                         </h3>
                         <div class="text-sm text-gray-600 dark:text-gray-300 space-y-1">
@@ -239,9 +211,7 @@
                 <!-- Customer Notes -->
                 <div x-show="order.customer_notes" class="bg-white dark:bg-gray-800 rounded-lg shadow border border-gray-200 dark:border-gray-700 p-6">
                     <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center">
-                        <svg class="h-5 w-5 mr-2 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z" />
-                        </svg>
+                        <span class="h-5 w-5 mr-2 text-gray-400" x-html="$icon('chat-bubble-left', 'h-5 w-5')"></span>
                         Order Notes
                     </h3>
                     <p class="text-sm text-gray-600 dark:text-gray-300" x-text="order.customer_notes"></p>
@@ -291,9 +261,7 @@
                 <!-- Invoice Download -->
                 <div x-show="canDownloadInvoice()" class="bg-white dark:bg-gray-800 rounded-lg shadow border border-gray-200 dark:border-gray-700 p-6">
                     <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center">
-                        <svg class="h-5 w-5 mr-2 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
-                        </svg>
+                        <span class="h-5 w-5 mr-2 text-gray-400" x-html="$icon('document-text', 'h-5 w-5')"></span>
                         Invoice
                     </h3>
                     <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
@@ -302,13 +270,8 @@
                     <button @click="downloadInvoice()"
                             :disabled="downloadingInvoice"
                             class="w-full inline-flex justify-center items-center px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 disabled:opacity-50 disabled:cursor-not-allowed transition-colors">
-                        <svg x-show="!downloadingInvoice" class="h-4 w-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
-                        </svg>
-                        <svg x-show="downloadingInvoice" class="animate-spin h-4 w-4 mr-2" fill="none" viewBox="0 0 24 24">
-                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-                        </svg>
+                        <span x-show="!downloadingInvoice" class="h-4 w-4 mr-2" x-html="$icon('arrow-down-tray', 'h-4 w-4')"></span>
+                        <span x-show="downloadingInvoice" class="h-4 w-4 mr-2" x-html="$icon('spinner', 'h-4 w-4 animate-spin')"></span>
                         <span x-text="downloadingInvoice ? 'Generating...' : 'Download Invoice'"></span>
                     </button>
                 </div>
@@ -316,9 +279,7 @@
                 <!-- Shipping Info -->
                 <div x-show="order.shipping_method || order.tracking_number" class="bg-white dark:bg-gray-800 rounded-lg shadow border border-gray-200 dark:border-gray-700 p-6">
                     <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center">
-                        <svg class="h-5 w-5 mr-2 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4" />
-                        </svg>
+                        <span class="h-5 w-5 mr-2 text-gray-400" x-html="$icon('archive', 'h-5 w-5')"></span>
                         Shipping
                     </h3>
                     <div class="space-y-3 text-sm">
@@ -341,10 +302,7 @@
                            rel="noopener noreferrer"
                            class="mt-3 w-full inline-flex justify-center items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white transition-colors"
                            style="background-color: var(--color-primary)">
-                            <svg class="h-4 w-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
-                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
-                            </svg>
+                            <span class="h-4 w-4 mr-2" x-html="$icon('location-marker', 'h-4 w-4')"></span>
                             Track Package
                         </a>
                     </div>
@@ -359,9 +317,7 @@
                     <a href="{{ base_url }}shop/account/messages"
                        class="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white transition-colors"
                        style="background-color: var(--color-primary)">
-                        <svg class="h-4 w-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
-                        </svg>
+                        <span class="h-4 w-4 mr-2" x-html="$icon('chat-bubble-left', 'h-4 w-4')"></span>
                         Contact Support
                     </a>
                 </div>
@@ -372,9 +328,7 @@
         <div class="mt-8">
             <a href="{{ base_url }}shop/account/orders"
                class="inline-flex items-center text-sm font-medium text-gray-600 dark:text-gray-400 hover:text-primary">
-                <svg class="h-4 w-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
-                </svg>
+                <span class="h-4 w-4 mr-2" x-html="$icon('chevron-left', 'h-4 w-4')"></span>
                 Back to Orders
             </a>
         </div>
diff --git a/app/templates/shop/account/orders.html b/app/templates/shop/account/orders.html
index 9ef080b3..4015220b 100644
--- a/app/templates/shop/account/orders.html
+++ b/app/templates/shop/account/orders.html
@@ -14,9 +14,7 @@
                 <a href="{{ base_url }}shop/account/dashboard" class="hover:text-primary">My Account</a>
             </li>
             <li class="flex items-center">
-                <svg class="h-4 w-4 mx-2" fill="currentColor" viewBox="0 0 20 20">
-                    <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
-                </svg>
+                <span class="h-4 w-4 mx-2" x-html="$icon('chevron-right', 'h-4 w-4')"></span>
                 <span class="text-gray-900 dark:text-white">Order History</span>
             </li>
         </ol>
@@ -36,9 +34,7 @@
     <!-- Error State -->
     <div x-show="error && !loading" class="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4 mb-6">
         <div class="flex">
-            <svg class="h-5 w-5 text-red-400" fill="currentColor" viewBox="0 0 20 20">
-                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
-            </svg>
+            <span class="h-5 w-5 text-red-400" x-html="$icon('x-circle', 'h-5 w-5')"></span>
             <p class="ml-3 text-sm text-red-700 dark:text-red-300" x-text="error"></p>
         </div>
     </div>
@@ -46,9 +42,7 @@
     <!-- Empty State -->
     <div x-show="!loading && !error && orders.length === 0"
          class="bg-white dark:bg-gray-800 rounded-lg shadow border border-gray-200 dark:border-gray-700 p-12 text-center">
-        <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
-        </svg>
+        <span class="mx-auto h-12 w-12 text-gray-400 block" x-html="$icon('shopping-bag', 'h-12 w-12 mx-auto')"></span>
         <h3 class="mt-4 text-lg font-medium text-gray-900 dark:text-white">No orders yet</h3>
         <p class="mt-2 text-gray-500 dark:text-gray-400">Start shopping to see your orders here.</p>
         <a href="{{ base_url }}shop/products"
@@ -88,9 +82,7 @@
                         <a :href="'{{ base_url }}shop/account/orders/' + order.id"
                            class="inline-flex items-center px-3 py-1.5 border border-gray-300 dark:border-gray-600 rounded-md text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors">
                             View Details
-                            <svg class="ml-2 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
-                            </svg>
+                            <span class="ml-2 h-4 w-4" x-html="$icon('chevron-right', 'h-4 w-4')"></span>
                         </a>
                     </div>
                 </div>
diff --git a/app/templates/shop/account/profile.html b/app/templates/shop/account/profile.html
index 6ad376b5..f4e30308 100644
--- a/app/templates/shop/account/profile.html
+++ b/app/templates/shop/account/profile.html
@@ -14,9 +14,7 @@
                 <a href="{{ base_url }}shop/account/dashboard" class="hover:text-primary">My Account</a>
             </li>
             <li class="flex items-center">
-                <svg class="h-4 w-4 mx-2" fill="currentColor" viewBox="0 0 20 20">
-                    <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
-                </svg>
+                <span class="h-4 w-4 mx-2" x-html="$icon('chevron-right', 'h-4 w-4')"></span>
                 <span class="text-gray-900 dark:text-white">Profile</span>
             </li>
         </ol>
@@ -36,9 +34,7 @@
     <!-- Error State -->
     <div x-show="error && !loading" class="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4 mb-6">
         <div class="flex">
-            <svg class="h-5 w-5 text-red-400" fill="currentColor" viewBox="0 0 20 20">
-                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
-            </svg>
+            <span class="h-5 w-5 text-red-400" x-html="$icon('x-circle', 'h-5 w-5')"></span>
             <p class="ml-3 text-sm text-red-700 dark:text-red-300" x-text="error"></p>
         </div>
     </div>
@@ -53,9 +49,7 @@
          x-transition:leave-end="opacity-0 transform -translate-y-2"
          class="bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg p-4 mb-6">
         <div class="flex">
-            <svg class="h-5 w-5 text-green-400" fill="currentColor" viewBox="0 0 20 20">
-                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
-            </svg>
+            <span class="h-5 w-5 text-green-400" x-html="$icon('check-circle', 'h-5 w-5')"></span>
             <p class="ml-3 text-sm text-green-700 dark:text-green-300" x-text="successMessage"></p>
         </div>
     </div>
@@ -127,10 +121,7 @@
                                    focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary
                                    disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
                             style="background-color: var(--color-primary)">
-                        <svg x-show="savingProfile" class="animate-spin -ml-1 mr-2 h-4 w-4 text-white" fill="none" viewBox="0 0 24 24">
-                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-                        </svg>
+                        <span x-show="savingProfile" class="-ml-1 mr-2 h-4 w-4" x-html="$icon('spinner', 'h-4 w-4 animate-spin')"></span>
                         <span x-text="savingProfile ? 'Saving...' : 'Save Changes'"></span>
                     </button>
                 </div>
@@ -190,10 +181,7 @@
                                    focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary
                                    disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
                             style="background-color: var(--color-primary)">
-                        <svg x-show="savingPreferences" class="animate-spin -ml-1 mr-2 h-4 w-4 text-white" fill="none" viewBox="0 0 24 24">
-                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-                        </svg>
+                        <span x-show="savingPreferences" class="-ml-1 mr-2 h-4 w-4" x-html="$icon('spinner', 'h-4 w-4 animate-spin')"></span>
                         <span x-text="savingPreferences ? 'Saving...' : 'Save Preferences'"></span>
                     </button>
                 </div>
@@ -263,10 +251,7 @@
                                    focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary
                                    disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
                             style="background-color: var(--color-primary)">
-                        <svg x-show="changingPassword" class="animate-spin -ml-1 mr-2 h-4 w-4 text-white" fill="none" viewBox="0 0 24 24">
-                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-                        </svg>
+                        <span x-show="changingPassword" class="-ml-1 mr-2 h-4 w-4" x-html="$icon('spinner', 'h-4 w-4 animate-spin')"></span>
                         <span x-text="changingPassword ? 'Changing...' : 'Change Password'"></span>
                     </button>
                 </div>
diff --git a/app/templates/shop/account/register.html b/app/templates/shop/account/register.html
index ebeee6fd..ce0bbcd7 100644
--- a/app/templates/shop/account/register.html
+++ b/app/templates/shop/account/register.html
@@ -1,4 +1,5 @@
 {# app/templates/shop/account/register.html #}
+{# standalone #}
 <!DOCTYPE html>
 <html :class="{ 'dark': dark }" x-data="customerRegistration()" lang="en">
 <head>
@@ -205,10 +206,7 @@
                                     class="btn-primary-theme block w-full px-4 py-2 mt-6 text-sm font-medium leading-5 text-center text-white transition-colors duration-150 border border-transparent rounded-lg focus:outline-none focus:shadow-outline-purple disabled:opacity-50 disabled:cursor-not-allowed">
                                 <span x-show="!loading">Create Account</span>
                                 <span x-show="loading" class="flex items-center justify-center">
-                                    <svg class="inline w-4 h-4 mr-2 animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-                                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-                                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-                                    </svg>
+                                    <span class="inline w-4 h-4 mr-2" x-html="$icon('spinner', 'w-4 h-4 animate-spin')"></span>
                                     Creating account...
                                 </span>
                             </button>
diff --git a/app/templates/shop/account/reset-password.html b/app/templates/shop/account/reset-password.html
index 37217b3a..8c7ac1a9 100644
--- a/app/templates/shop/account/reset-password.html
+++ b/app/templates/shop/account/reset-password.html
@@ -68,9 +68,7 @@
                         <template x-if="tokenInvalid">
                             <div class="text-center">
                                 <div class="flex items-center justify-center w-16 h-16 mx-auto mb-4 rounded-full bg-red-100 dark:bg-red-900">
-                                    <svg class="w-8 h-8 text-red-600 dark:text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
-                                    </svg>
+                                    <span class="w-8 h-8 text-red-600 dark:text-red-400" x-html="$icon('x-mark', 'w-8 h-8')"></span>
                                 </div>
 
                                 <h1 class="mb-4 text-xl font-semibold text-gray-700 dark:text-gray-200">
@@ -142,10 +140,7 @@
                                             class="btn-primary-theme block w-full px-4 py-2 mt-6 text-sm font-medium leading-5 text-center text-white transition-colors duration-150 border border-transparent rounded-lg focus:outline-none focus:shadow-outline-purple disabled:opacity-50 disabled:cursor-not-allowed">
                                         <span x-show="!loading">Reset Password</span>
                                         <span x-show="loading" class="flex items-center justify-center">
-                                            <svg class="inline w-4 h-4 mr-2 animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-                                                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-                                                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-                                            </svg>
+                                            <span class="inline w-4 h-4 mr-2" x-html="$icon('spinner', 'w-4 h-4 animate-spin')"></span>
                                             Resetting...
                                         </span>
                                     </button>
@@ -157,9 +152,7 @@
                         <template x-if="resetComplete">
                             <div class="text-center">
                                 <div class="flex items-center justify-center w-16 h-16 mx-auto mb-4 rounded-full bg-green-100 dark:bg-green-900">
-                                    <svg class="w-8 h-8 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
-                                    </svg>
+                                    <span class="w-8 h-8 text-green-600 dark:text-green-400" x-html="$icon('check', 'w-8 h-8')"></span>
                                 </div>
 
                                 <h1 class="mb-4 text-xl font-semibold text-gray-700 dark:text-gray-200">
diff --git a/app/templates/shop/checkout.html b/app/templates/shop/checkout.html
index ac8577d2..7a2af9c3 100644
--- a/app/templates/shop/checkout.html
+++ b/app/templates/shop/checkout.html
@@ -13,15 +13,11 @@
         <ol class="flex items-center space-x-2 text-sm text-gray-500 dark:text-gray-400">
             <li><a href="{{ base_url }}shop/" class="hover:text-primary">Home</a></li>
             <li class="flex items-center">
-                <svg class="h-4 w-4 mx-2" fill="currentColor" viewBox="0 0 20 20">
-                    <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
-                </svg>
+                <span class="h-4 w-4 mx-2" x-html="$icon('chevron-right', 'h-4 w-4')"></span>
                 <a href="{{ base_url }}shop/cart" class="hover:text-primary">Cart</a>
             </li>
             <li class="flex items-center">
-                <svg class="h-4 w-4 mx-2" fill="currentColor" viewBox="0 0 20 20">
-                    <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
-                </svg>
+                <span class="h-4 w-4 mx-2" x-html="$icon('chevron-right', 'h-4 w-4')"></span>
                 <span class="text-gray-900 dark:text-white">Checkout</span>
             </li>
         </ol>
@@ -37,9 +33,7 @@
 
     {# Empty Cart #}
     <div x-show="!loading && cartItems.length === 0" class="text-center py-12 bg-white dark:bg-gray-800 rounded-lg border-2 border-dashed border-gray-300 dark:border-gray-600">
-        <svg class="mx-auto h-12 w-12 text-gray-400 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
-        </svg>
+        <span class="mx-auto h-12 w-12 text-gray-400 mb-4 block" x-html="$icon('shopping-bag', 'h-12 w-12 mx-auto')"></span>
         <h3 class="text-xl font-semibold text-gray-700 dark:text-gray-200 mb-2">Your cart is empty</h3>
         <p class="text-gray-500 dark:text-gray-400 mb-6">Add some products before checking out.</p>
         <a href="{{ base_url }}shop/products" class="inline-block px-6 py-3 text-white rounded-lg transition-colors" style="background-color: var(--color-primary)">
@@ -75,9 +69,7 @@
                 {# Error Message #}
                 <div x-show="error" class="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4">
                     <div class="flex">
-                        <svg class="h-5 w-5 text-red-400" fill="currentColor" viewBox="0 0 20 20">
-                            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
-                        </svg>
+                        <span class="h-5 w-5 text-red-400" x-html="$icon('x-circle', 'h-5 w-5')"></span>
                         <p class="ml-3 text-sm text-red-700 dark:text-red-300" x-text="error"></p>
                     </div>
                 </div>
@@ -415,10 +407,7 @@
                                 style="background-color: var(--color-primary)">
                             <span x-show="!submitting">Place Order</span>
                             <span x-show="submitting" class="flex items-center">
-                                <svg class="animate-spin -ml-1 mr-2 h-5 w-5 text-white" fill="none" viewBox="0 0 24 24">
-                                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-                                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-                                </svg>
+                                <span class="-ml-1 mr-2 h-5 w-5" x-html="$icon('spinner', 'h-5 w-5 animate-spin')"></span>
                                 Processing...
                             </span>
                         </button>
diff --git a/app/templates/shop/products.html b/app/templates/shop/products.html
index 4a1424d9..58e78e07 100644
--- a/app/templates/shop/products.html
+++ b/app/templates/shop/products.html
@@ -93,9 +93,7 @@
                                     class="flex-shrink-0 p-2 sm:px-4 sm:py-2 bg-primary text-white rounded-lg hover:bg-primary-dark transition-colors flex items-center justify-center gap-2"
                                     style="background-color: var(--color-primary)"
                                     :title="'Add to Cart'">
-                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" />
-                                </svg>
+                                <span class="w-5 h-5" x-html="$icon('shopping-cart', 'w-5 h-5')"></span>
                                 <span class="hidden sm:inline">Add to Cart</span>
                             </button>
                         </div>
diff --git a/app/templates/vendor/billing.html b/app/templates/vendor/billing.html
index f88da332..b5a072b6 100644
--- a/app/templates/vendor/billing.html
+++ b/app/templates/vendor/billing.html
@@ -382,10 +382,7 @@
                                 class="px-4 py-2 text-sm font-medium rounded-lg transition-colors">
                             <template x-if="purchasingAddon === addon.code">
                                 <span class="flex items-center">
-                                    <svg class="animate-spin -ml-1 mr-2 h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-                                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-                                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-                                    </svg>
+                                    <span class="-ml-1 mr-2 h-4 w-4" x-html="$icon('spinner', 'h-4 w-4 animate-spin')"></span>
                                     Processing...
                                 </span>
                             </template>
diff --git a/app/templates/vendor/landing-default.html b/app/templates/vendor/landing-default.html
index e10d17a3..e01a61f2 100644
--- a/app/templates/vendor/landing-default.html
+++ b/app/templates/vendor/landing-default.html
@@ -1,4 +1,5 @@
 {# app/templates/vendor/landing-default.html #}
+{# standalone #}
 {# Default/Minimal Landing Page Template #}
 {% extends "shop/base.html" %}
 
@@ -39,9 +40,7 @@
                        class="inline-flex items-center justify-center px-8 py-4 text-lg font-semibold rounded-lg text-white bg-primary hover:bg-primary-dark transition-colors shadow-lg hover:shadow-xl"
                        style="background-color: var(--color-primary)">
                         Browse Our Shop
-                        <svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
-                        </svg>
+                        <span class="w-5 h-5 ml-2" x-html="$icon('arrow-right', 'w-5 h-5')"></span>
                     </a>
                     {% if page.content %}
                     <a href="#about"
diff --git a/app/templates/vendor/landing-full.html b/app/templates/vendor/landing-full.html
index b8a07def..da159364 100644
--- a/app/templates/vendor/landing-full.html
+++ b/app/templates/vendor/landing-full.html
@@ -1,4 +1,5 @@
 {# app/templates/vendor/landing-full.html #}
+{# standalone #}
 {# Full Landing Page Template - Maximum Features #}
 {% extends "shop/base.html" %}
 
@@ -46,9 +47,7 @@
                            class="inline-flex items-center justify-center px-8 py-4 text-lg font-semibold rounded-lg text-white bg-primary hover:bg-primary-dark transition-colors shadow-lg"
                            style="background-color: var(--color-primary)">
                             Shop Now
-                            <svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
-                            </svg>
+                            <span class="w-5 h-5 ml-2" x-html="$icon('arrow-right', 'w-5 h-5')"></span>
                         </a>
                         <a href="#about"
                            class="inline-flex items-center justify-center px-8 py-4 text-lg font-semibold rounded-lg text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors border-2 border-gray-200 dark:border-gray-600">
@@ -108,9 +107,7 @@
             <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
                 <div class="p-6 rounded-xl bg-gray-50 dark:bg-gray-800 hover:shadow-lg transition-shadow">
                     <div class="w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center mb-4" style="color: var(--color-primary)">
-                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
-                        </svg>
+                        <span class="w-6 h-6" x-html="$icon('check', 'w-6 h-6')"></span>
                     </div>
                     <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">
                         Premium Quality
@@ -122,9 +119,7 @@
 
                 <div class="p-6 rounded-xl bg-gray-50 dark:bg-gray-800 hover:shadow-lg transition-shadow">
                     <div class="w-12 h-12 rounded-lg bg-accent/10 flex items-center justify-center mb-4" style="color: var(--color-accent)">
-                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
-                        </svg>
+                        <span class="w-6 h-6" x-html="$icon('bolt', 'w-6 h-6')"></span>
                     </div>
                     <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">
                         Fast Shipping
@@ -136,9 +131,7 @@
 
                 <div class="p-6 rounded-xl bg-gray-50 dark:bg-gray-800 hover:shadow-lg transition-shadow">
                     <div class="w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center mb-4" style="color: var(--color-primary)">
-                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
-                        </svg>
+                        <span class="w-6 h-6" x-html="$icon('currency-dollar', 'w-6 h-6')"></span>
                     </div>
                     <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">
                         Best Value
@@ -150,9 +143,7 @@
 
                 <div class="p-6 rounded-xl bg-gray-50 dark:bg-gray-800 hover:shadow-lg transition-shadow">
                     <div class="w-12 h-12 rounded-lg bg-accent/10 flex items-center justify-center mb-4" style="color: var(--color-accent)">
-                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z"></path>
-                        </svg>
+                        <span class="w-6 h-6" x-html="$icon('user-plus', 'w-6 h-6')"></span>
                     </div>
                     <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">
                         24/7 Support
@@ -258,9 +249,7 @@
             <a href="{{ base_url }}shop/products"
                class="inline-flex items-center justify-center px-10 py-5 text-lg font-bold rounded-xl text-primary bg-white hover:bg-gray-50 transition-all transform hover:scale-105 shadow-2xl">
                 View All Products
-                <svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
-                </svg>
+                <span class="w-5 h-5 ml-2" x-html="$icon('arrow-right', 'w-5 h-5')"></span>
             </a>
         </div>
     </section>
diff --git a/app/templates/vendor/landing-minimal.html b/app/templates/vendor/landing-minimal.html
index dce2daa5..06d04e34 100644
--- a/app/templates/vendor/landing-minimal.html
+++ b/app/templates/vendor/landing-minimal.html
@@ -1,4 +1,5 @@
 {# app/templates/vendor/landing-minimal.html #}
+{# standalone #}
 {# Minimal Landing Page Template - Ultra Clean #}
 {% extends "shop/base.html" %}
 
@@ -40,9 +41,7 @@
                class="inline-flex items-center justify-center px-10 py-5 text-xl font-semibold rounded-full text-white bg-primary hover:bg-primary-dark transition-all transform hover:scale-105 shadow-2xl"
                style="background-color: var(--color-primary)">
                 Enter Shop
-                <svg class="w-6 h-6 ml-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
-                </svg>
+                <span class="w-6 h-6 ml-3" x-html="$icon('arrow-right', 'w-6 h-6')"></span>
             </a>
         </div>
 
diff --git a/app/templates/vendor/landing-modern.html b/app/templates/vendor/landing-modern.html
index 370bcb62..1b10e4d0 100644
--- a/app/templates/vendor/landing-modern.html
+++ b/app/templates/vendor/landing-modern.html
@@ -1,4 +1,5 @@
 {# app/templates/vendor/landing-modern.html #}
+{# standalone #}
 {# Modern Landing Page Template - Feature Rich #}
 {% extends "shop/base.html" %}
 
@@ -43,9 +44,7 @@
                    class="group inline-flex items-center justify-center px-10 py-5 text-lg font-bold rounded-xl text-white bg-primary hover:bg-primary-dark transition-all transform hover:scale-105 shadow-2xl hover:shadow-3xl"
                    style="background-color: var(--color-primary)">
                     <span>Start Shopping</span>
-                    <svg class="w-5 h-5 ml-2 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
-                    </svg>
+                    <span class="w-5 h-5 ml-2 group-hover:translate-x-1 transition-transform" x-html="$icon('arrow-right', 'w-5 h-5')"></span>
                 </a>
                 <a href="#features"
                    class="inline-flex items-center justify-center px-10 py-5 text-lg font-bold rounded-xl text-gray-700 dark:text-gray-200 bg-white/90 dark:bg-gray-800/90 backdrop-blur hover:bg-white dark:hover:bg-gray-800 transition-all border-2 border-gray-200 dark:border-gray-600">
@@ -55,9 +54,7 @@
 
             {# Scroll Indicator #}
             <div class="absolute bottom-10 left-1/2 transform -translate-x-1/2 animate-bounce">
-                <svg class="w-6 h-6 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"></path>
-                </svg>
+                <span class="w-6 h-6 text-gray-400" x-html="$icon('arrow-down', 'w-6 h-6')"></span>
             </div>
         </div>
     </section>
@@ -79,9 +76,7 @@
                 <div class="text-center group">
                     <div class="inline-flex items-center justify-center w-20 h-20 rounded-full bg-primary/10 text-primary mb-6 group-hover:scale-110 transition-transform"
                          style="color: var(--color-primary)">
-                        <svg class="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
-                        </svg>
+                        <span class="w-10 h-10" x-html="$icon('check', 'w-10 h-10')"></span>
                     </div>
                     <h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">
                         Quality Products
@@ -95,9 +90,7 @@
                 <div class="text-center group">
                     <div class="inline-flex items-center justify-center w-20 h-20 rounded-full bg-accent/10 text-accent mb-6 group-hover:scale-110 transition-transform"
                          style="color: var(--color-accent)">
-                        <svg class="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
-                        </svg>
+                        <span class="w-10 h-10" x-html="$icon('bolt', 'w-10 h-10')"></span>
                     </div>
                     <h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">
                         Fast Delivery
@@ -111,9 +104,7 @@
                 <div class="text-center group">
                     <div class="inline-flex items-center justify-center w-20 h-20 rounded-full bg-primary/10 text-primary mb-6 group-hover:scale-110 transition-transform"
                          style="color: var(--color-primary)">
-                        <svg class="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
-                        </svg>
+                        <span class="w-10 h-10" x-html="$icon('currency-dollar', 'w-10 h-10')"></span>
                     </div>
                     <h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">
                         Best Prices
@@ -149,9 +140,7 @@
             <a href="{{ base_url }}shop/products"
                class="inline-flex items-center justify-center px-10 py-5 text-lg font-bold rounded-xl text-primary bg-white hover:bg-gray-50 transition-all transform hover:scale-105 shadow-2xl">
                 Browse Products
-                <svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
-                </svg>
+                <span class="w-5 h-5 ml-2" x-html="$icon('chevron-right', 'w-5 h-5')"></span>
             </a>
         </div>
     </section>
diff --git a/app/templates/vendor/login.html b/app/templates/vendor/login.html
index 9aea8589..c0bfd470 100644
--- a/app/templates/vendor/login.html
+++ b/app/templates/vendor/login.html
@@ -88,10 +88,7 @@
                                         class="block w-full px-4 py-2 mt-4 text-sm font-medium leading-5 text-center text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg active:bg-purple-600 hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple disabled:opacity-50 disabled:cursor-not-allowed">
                                     <span x-show="!loading">Sign in</span>
                                     <span x-show="loading" class="flex items-center justify-center">
-                                        <svg class="inline w-4 h-4 mr-2 animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-                                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-                                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-                                        </svg>
+                                        <span class="inline w-4 h-4 mr-2" x-html="$icon('spinner', 'w-4 h-4 animate-spin')"></span>
                                         Signing in...
                                     </span>
                                 </button>
@@ -116,10 +113,7 @@
 
                         <!-- Loading State -->
                         <div x-show="loading && !vendor" class="text-center py-8">
-                            <svg class="inline w-8 h-8 animate-spin text-purple-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-                                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-                                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-                            </svg>
+                            <span class="inline-block w-8 h-8 text-purple-600" x-html="$icon('spinner', 'w-8 h-8 animate-spin')"></span>
                             <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">Loading vendor information...</p>
                         </div>
 
diff --git a/app/templates/vendor/onboarding.html b/app/templates/vendor/onboarding.html
index 31a3177b..c4b4e952 100644
--- a/app/templates/vendor/onboarding.html
+++ b/app/templates/vendor/onboarding.html
@@ -1,4 +1,5 @@
 {# app/templates/vendor/onboarding.html #}
+{# standalone #}
 <!DOCTYPE html>
 <html :class="{ 'dark': dark }" x-data="vendorOnboarding()" lang="en">
 <head>
@@ -35,9 +36,7 @@
                             class="flex items-center space-x-2 px-3 py-2 rounded-lg bg-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors">
                         <span x-text="languageFlags[lang]"></span>
                         <span class="text-sm text-gray-700 dark:text-gray-300 hidden sm:inline" x-text="languageNames[lang]"></span>
-                        <svg class="w-4 h-4 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
-                        </svg>
+                        <span class="w-4 h-4 text-gray-500" x-html="$icon('chevron-down', 'w-4 h-4')"></span>
                     </button>
                     <div x-show="open" @click.away="open = false" x-cloak
                          class="absolute right-0 mt-2 w-40 bg-white dark:bg-gray-700 rounded-lg shadow-lg border border-gray-200 dark:border-gray-600 z-50">
@@ -67,9 +66,7 @@
                                      'bg-gray-200 dark:bg-gray-700 text-gray-600 dark:text-gray-400': !isStepCompleted(step.id) && currentStep !== step.id
                                  }">
                                 <template x-if="isStepCompleted(step.id)">
-                                    <svg class="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
-                                    </svg>
+                                    <span class="w-4 h-4 sm:w-5 sm:h-5" x-html="$icon('check', 'w-4 h-4 sm:w-5 sm:h-5')"></span>
                                 </template>
                                 <template x-if="!isStepCompleted(step.id)">
                                     <span x-text="index + 1"></span>
@@ -95,10 +92,7 @@
         <div class="max-w-4xl mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
             <!-- Loading State -->
             <div x-show="loading" class="p-12 text-center">
-                <svg class="inline w-8 h-8 animate-spin text-purple-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-                </svg>
+                <span class="inline-block w-8 h-8 text-purple-600" x-html="$icon('spinner', 'w-8 h-8 animate-spin')"></span>
                 <p class="mt-4 text-gray-600 dark:text-gray-400" x-text="t('loading')"></p>
             </div>
 
@@ -222,23 +216,16 @@
                                     class="px-4 py-2 text-sm font-medium text-purple-600 bg-purple-100 rounded-lg hover:bg-purple-200 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed">
                                 <span x-show="!testing" x-text="t('step2.test_connection')"></span>
                                 <span x-show="testing" class="flex items-center">
-                                    <svg class="w-4 h-4 mr-2 animate-spin" fill="none" viewBox="0 0 24 24">
-                                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-                                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-                                    </svg>
+                                    <span class="w-4 h-4 mr-2" x-html="$icon('spinner', 'w-4 h-4 animate-spin')"></span>
                                     <span x-text="t('step2.testing')"></span>
                                 </span>
                             </button>
                             <span x-show="connectionStatus === 'success'" class="text-green-600 dark:text-green-400 text-sm flex items-center">
-                                <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
-                                </svg>
+                                <span class="w-4 h-4 mr-1" x-html="$icon('check', 'w-4 h-4')"></span>
                                 <span x-text="t('step2.connection_success')"></span>
                             </span>
                             <span x-show="connectionStatus === 'failed'" class="text-red-600 dark:text-red-400 text-sm flex items-center">
-                                <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
-                                </svg>
+                                <span class="w-4 h-4 mr-1" x-html="$icon('x-mark', 'w-4 h-4')"></span>
                                 <span x-text="connectionError || t('step2.connection_failed')"></span>
                             </span>
                         </div>
@@ -348,9 +335,7 @@
                         <!-- After Sync -->
                         <div x-show="syncComplete" class="text-center py-8">
                             <div class="w-16 h-16 mx-auto mb-4 rounded-full bg-green-100 dark:bg-green-900/30 flex items-center justify-center">
-                                <svg class="w-8 h-8 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
-                                </svg>
+                                <span class="w-8 h-8 text-green-600 dark:text-green-400" x-html="$icon('check', 'w-8 h-8')"></span>
                             </div>
                             <p class="text-lg font-medium text-gray-800 dark:text-white" x-text="t('step4.import_complete')"></p>
                             <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">
@@ -376,10 +361,7 @@
                             <span x-text="currentStep === 'order_sync' && syncComplete ? t('buttons.complete') : t('buttons.save_continue')"></span>
                         </span>
                         <span x-show="saving" class="flex items-center">
-                            <svg class="w-4 h-4 mr-2 animate-spin" fill="none" viewBox="0 0 24 24">
-                                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-                                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-                            </svg>
+                            <span class="w-4 h-4 mr-2" x-html="$icon('spinner', 'w-4 h-4 animate-spin')"></span>
                             <span x-text="t('buttons.saving')"></span>
                         </span>
                     </button>
diff --git a/app/templates/vendor/team.html b/app/templates/vendor/team.html
index 362fdc87..227475f9 100644
--- a/app/templates/vendor/team.html
+++ b/app/templates/vendor/team.html
@@ -111,17 +111,22 @@
                             ></span>
                         </td>
                         <!-- Joined -->
-                        <td class="px-4 py-3 text-sm" x-text="formatDate(member.created_at)"></td>
+                        <td class="px-4 py-3 text-sm" x-text="formatDate(member.joined_at)"></td>
                         <!-- Actions -->
                         <td class="px-4 py-3">
                             <div class="flex items-center space-x-2 text-sm">
+                                <!-- Edit button - not for owners -->
                                 <button
                                     @click="openEditModal(member)"
                                     class="p-1 text-gray-500 hover:text-blue-600 dark:text-gray-400 dark:hover:text-blue-400"
                                     title="Edit"
+                                    x-show="!member.is_owner"
                                 >
                                     <span x-html="$icon('pencil', 'w-5 h-5')"></span>
                                 </button>
+                                <!-- Owner badge -->
+                                <span x-show="member.is_owner" class="text-xs text-gray-400 dark:text-gray-500 italic">Owner</span>
+                                <!-- Remove button - not for owners -->
                                 <button
                                     @click="confirmRemove(member)"
                                     class="p-1 text-gray-500 hover:text-red-600 dark:text-gray-400 dark:hover:text-red-400"