diff --git a/apps/desktop/src/components/icons/AiProviderLogo.vue b/apps/desktop/src/components/icons/AiProviderLogo.vue
index f9fb05f37..ccdaeb2f1 100644
--- a/apps/desktop/src/components/icons/AiProviderLogo.vue
+++ b/apps/desktop/src/components/icons/AiProviderLogo.vue
@@ -3,6 +3,7 @@ import { computed, ref, watch } from "vue";
 import { Settings2 } from "@lucide/vue";
 import type { AiProvider } from "@/stores/settingsStore";
 import { useTheme } from "@/composables/useTheme";
+import { webPath } from "@/lib/webPath";
 
 const props = defineProps<{
   provider: AiProvider;
@@ -22,8 +23,8 @@ watch(
 
 const usesWhiteDarkIcon = computed(() => props.provider === "claude" || props.provider === "ollama" || props.provider === "openai" || props.provider === "openai-compatible");
 const localIconUrl = computed(() => {
-  if (props.provider === "openai-compatible") return "/icons/ai/openai.svg";
-  return props.iconSlug ? `/icons/ai/${props.iconSlug}.svg` : "";
+  if (props.provider === "openai-compatible") return webPath("/icons/ai/openai.svg");
+  return props.iconSlug ? webPath(`/icons/ai/${props.iconSlug}.svg`) : "";
 });
 const fallbackText = computed(() => {
   if (props.provider === "openai-compatible") return "OC";
diff --git a/apps/desktop/src/components/icons/DatabaseIcon.vue b/apps/desktop/src/components/icons/DatabaseIcon.vue
index 038efb369..34d303b03 100644
--- a/apps/desktop/src/components/icons/DatabaseIcon.vue
+++ b/apps/desktop/src/components/icons/DatabaseIcon.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed } from "vue";
 import { Database } from "@lucide/vue";
+import { webPath } from "@/lib/webPath";
 
 const props = defineProps<{
   dbType: string;
@@ -97,7 +98,7 @@ const normalizedType = computed(() => props.dbType.toLowerCase().replace(/[\s-]+
 const assetName = computed(() => assetIcons[normalizedType.value]);
 const assetSrc = computed(() => {
   if (!assetName.value) return "";
-  return assetName.value.includes(".") ? `/icons/database/${assetName.value}` : `/icons/database/${assetName.value}.svg`;
+  return webPath(assetName.value.includes(".") ? `/icons/database/${assetName.value}` : `/icons/database/${assetName.value}.svg`);
 });
 const letter = computed(() => letterIcons[normalizedType.value]);
 </script>
diff --git a/apps/desktop/src/lib/__tests__/webPath.spec.ts b/apps/desktop/src/lib/__tests__/webPath.spec.ts
index d2c9b2df6..41854e6b5 100644
--- a/apps/desktop/src/lib/__tests__/webPath.spec.ts
+++ b/apps/desktop/src/lib/__tests__/webPath.spec.ts
@@ -11,6 +11,8 @@ describe("webPath", () => {
     expect(dbxWebBasePath("/", "/dbx/")).toBe("/dbx");
     expect(webPath("/login", "/dbx")).toBe("/dbx/login");
     expect(webPath("/", "/dbx")).toBe("/dbx/");
+    expect(webPath("/icons/database/mysql.svg", "/dbx")).toBe("/dbx/icons/database/mysql.svg");
+    expect(webPath("/icons/ai/openai.svg", "/dbx")).toBe("/dbx/icons/ai/openai.svg");
     expect(apiUrl("/auth/check", "/dbx")).toBe("/dbx/api/auth/check");
     expect(apiUrl("/api/auth/check", "/dbx")).toBe("/dbx/api/auth/check");
     expect(apiUrl("api/auth/check", "/dbx")).toBe("/dbx/api/auth/check");