diff --git a/frontend/src/components/cloud/CloudFolderTreeItem.vue b/frontend/src/components/cloud/CloudFolderTreeItem.vue
index e3442cd..4f5d26d 100644
--- a/frontend/src/components/cloud/CloudFolderTreeItem.vue
+++ b/frontend/src/components/cloud/CloudFolderTreeItem.vue
@@ -7,26 +7,8 @@
     @select="navigate"
   >
     <template #icon>
-      <svg
-        v-if="folder.is_dir"
-        class="w-4 h-4 shrink-0 text-gray-400"
-        fill="none"
-        stroke="currentColor"
-        viewBox="0 0 24 24"
-      >
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-          d="M3 7a2 2 0 012-2h4l2 2h8a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V7z" />
-      </svg>
-      <svg
-        v-else
-        class="w-4 h-4 shrink-0 text-gray-400"
-        fill="none"
-        stroke="currentColor"
-        viewBox="0 0 24 24"
-      >
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-          d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
-      </svg>
+      <AppIcon v-if="folder.is_dir" name="folder" class="w-4 h-4 shrink-0 text-gray-400" />
+      <AppIcon v-else name="fileDoc" class="w-4 h-4 shrink-0 text-gray-400" />
     </template>
     <template #children="{ children }">
       <CloudFolderTreeItem
@@ -43,6 +25,7 @@
 <script setup>
 import { useRouter } from 'vue-router'
 import * as api from '../../api/client.js'
+import AppIcon from '../ui/AppIcon.vue'
 import TreeItem from '../ui/TreeItem.vue'
 
 const props = defineProps({
diff --git a/frontend/src/components/cloud/CloudProviderTreeItem.vue b/frontend/src/components/cloud/CloudProviderTreeItem.vue
index da597fd..cb521c3 100644
--- a/frontend/src/components/cloud/CloudProviderTreeItem.vue
+++ b/frontend/src/components/cloud/CloudProviderTreeItem.vue
@@ -6,10 +6,7 @@
     @select="navigateToRoot"
   >
     <template #icon>
-      <svg class="w-4 h-4 shrink-0" :class="providerIconColor" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-          d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z" />
-      </svg>
+      <AppIcon name="cloud" class="w-4 h-4 shrink-0" :class="providerIconColor" />
     </template>
     <template #children="{ children }">
       <CloudFolderTreeItem
@@ -27,6 +24,7 @@
 import { computed } from 'vue'
 import { useRouter } from 'vue-router'
 import * as api from '../../api/client.js'
+import AppIcon from '../ui/AppIcon.vue'
 import TreeItem from '../ui/TreeItem.vue'
 import CloudFolderTreeItem from './CloudFolderTreeItem.vue'
 import { providerColor } from '../../utils/formatters.js'
diff --git a/frontend/src/components/settings/SettingsCloudTab.vue b/frontend/src/components/settings/SettingsCloudTab.vue
index 60a0278..45d3de6 100644
--- a/frontend/src/components/settings/SettingsCloudTab.vue
+++ b/frontend/src/components/settings/SettingsCloudTab.vue
@@ -12,10 +12,7 @@
         v-if="oauthError"
         class="mb-4 p-3 rounded-lg bg-red-50 border border-red-200 flex items-start gap-2"
       >
-        <svg class="w-4 h-4 text-red-600 shrink-0 mt-0.5" 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>
+        <AppIcon name="warning" class="w-4 h-4 text-red-600 shrink-0 mt-0.5" />
         <p class="text-sm text-red-700">{{ oauthError }}</p>
       </div>
 
@@ -28,10 +25,7 @@
             <div class="flex items-center gap-3 min-w-0">
               <!-- Provider icon -->
               <div class="w-8 h-8 rounded-lg bg-gray-50 border border-gray-200 flex items-center justify-center">
-                <svg class="w-5 h-5" :class="provider.iconColor" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                    d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z" />
-                </svg>
+                <AppIcon name="cloud" class="w-5 h-5" :class="provider.iconColor" />
               </div>
               <div class="min-w-0">
                 <span class="text-sm font-semibold text-gray-900">{{ provider.label }}</span>
@@ -154,10 +148,7 @@
             v-if="connectionFor(provider.key)?.status === 'REQUIRES_REAUTH'"
             class="mx-0 mb-2 p-3 rounded-lg bg-yellow-50 border border-yellow-200 flex items-start gap-2"
           >
-            <svg class="w-4 h-4 text-yellow-600 shrink-0 mt-0.5" 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>
+            <AppIcon name="warning" class="w-4 h-4 text-yellow-600 shrink-0 mt-0.5" />
             <p class="text-sm text-yellow-800">
               Your {{ provider.label }} connection needs to be re-authorized.
               Click <strong>Reconnect {{ provider.label }}</strong> to restore access.
@@ -203,6 +194,7 @@
 import { ref, computed, onMounted } from 'vue'
 import { useCloudConnectionsStore } from '../../stores/cloudConnections.js'
 import { initiateOAuth } from '../../api/client.js'
+import AppIcon from '../ui/AppIcon.vue'
 import ConfirmBlock from '../ui/ConfirmBlock.vue'
 import CloudCredentialModal from '../cloud/CloudCredentialModal.vue'
 
diff --git a/frontend/src/components/ui/SearchableModelSelect.vue b/frontend/src/components/ui/SearchableModelSelect.vue
index 3196ece..7cd01bd 100644
--- a/frontend/src/components/ui/SearchableModelSelect.vue
+++ b/frontend/src/components/ui/SearchableModelSelect.vue
@@ -24,12 +24,10 @@
         class="absolute inset-y-0 right-0 flex items-center px-2 text-gray-400 hover:text-gray-600"
         @mousedown.prevent="toggleOpen"
       >
-        <svg
+        <AppIcon
+          name="chevronDown"
           :class="['w-4 h-4 transition-transform', isOpen ? 'rotate-180' : '']"
-          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" />
-        </svg>
+        />
       </button>
     </div>
 
@@ -82,9 +80,7 @@
           class="sticky bottom-0 flex items-center gap-2 px-3 py-2 text-sm text-indigo-600 font-medium border-t border-gray-100 bg-white cursor-pointer hover:bg-indigo-50 select-none"
           @mousedown.prevent="selectManual"
         >
-          <svg class="w-3.5 h-3.5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
-          </svg>
+          <AppIcon name="pencilEdit" class="w-3.5 h-3.5 shrink-0" />
           <span>{{ query.trim() ? `Use "${query.trim()}"` : 'Enter model name manually' }}</span>
         </li>
       </ul>
@@ -95,6 +91,7 @@
 <script setup>
 import { ref, computed, watch, nextTick, onUnmounted } from 'vue'
 import { getAiModels } from '../../api/client.js'
+import AppIcon from './AppIcon.vue'
 
 const props = defineProps({
   modelValue: { type: String, default: '' },