diff --git a/src/lib/stores/app.ts b/src/lib/stores/app.ts
index 9e1ad8de72..6a841df61e 100644
--- a/src/lib/stores/app.ts
+++ b/src/lib/stores/app.ts
@@ -1,4 +1,5 @@
 import { browser } from '$app/environment';
+import { base } from '$app/paths';
 import { derived, writable } from 'svelte/store';
 
 export type AppStore = {
@@ -13,7 +14,7 @@ export const app = writable<AppStore>({
 
 export const iconPath = derived(app, ($app) => {
     return (name: string, type: 'color' | 'grayscale') => {
-        return `/icons/${$app.themeInUse}/${type}/${name}.svg`;
+        return `${base}/icons/${$app.themeInUse}/${type}/${name}.svg`;
     };
 });
 
diff --git a/src/routes/(console)/project-[project]/auth/settings/+page.svelte b/src/routes/(console)/project-[project]/auth/settings/+page.svelte
index 50ec182c4e..075220ccb1 100644
--- a/src/routes/(console)/project-[project]/auth/settings/+page.svelte
+++ b/src/routes/(console)/project-[project]/auth/settings/+page.svelte
@@ -12,6 +12,7 @@
     import { sdk } from '$lib/stores/sdk';
     import type { Models } from '@appwrite.io/console';
     import { project } from '../../store';
+    import { base } from '$app/paths';
 
     const projectId = $page.params.project;
     let showProvider = false;
@@ -83,7 +84,7 @@
                                     <img
                                         height="20"
                                         width="20"
-                                        src={`/icons/${$app.themeInUse}/color/${oAuthProvider.icon}.svg`}
+                                        src={`${base}/icons/${$app.themeInUse}/color/${oAuthProvider.icon}.svg`}
                                         alt={provider.name} />
                                 </div>
                                 <p class="u-margin-block-start-8">{provider.name}</p>
diff --git a/src/routes/(console)/project-[project]/auth/user-[user]/identities/table.svelte b/src/routes/(console)/project-[project]/auth/user-[user]/identities/table.svelte
index 841db04875..752ee062f8 100644
--- a/src/routes/(console)/project-[project]/auth/user-[user]/identities/table.svelte
+++ b/src/routes/(console)/project-[project]/auth/user-[user]/identities/table.svelte
@@ -22,6 +22,7 @@
     import type { Column } from '$lib/helpers/types';
     import { oAuthProviders } from '$lib/stores/oauth-providers';
     import { app } from '$lib/stores/app';
+    import { base } from '$app/paths';
 
     export let columns: Column[];
     export let data: PageData;
@@ -93,7 +94,7 @@
                                             style="--p-text-size: 1rem"
                                             height="20"
                                             width="20"
-                                            src={`/icons/${$app.themeInUse}/color/${provider.icon}.svg`}
+                                            src={`${base}/icons/${$app.themeInUse}/color/${provider.icon}.svg`}
                                             alt={provider.name} />
                                     </div>
                                     {provider.name}
diff --git a/src/routes/(console)/project-[project]/overview/onboard.svelte b/src/routes/(console)/project-[project]/overview/onboard.svelte
index 568f592c04..3680955c94 100644
--- a/src/routes/(console)/project-[project]/overview/onboard.svelte
+++ b/src/routes/(console)/project-[project]/overview/onboard.svelte
@@ -81,7 +81,7 @@
                             <span class="u-flex u-cross-center u-gap-16">
                                 <div class="avatar is-medium" aria-hidden="true">
                                     <img
-                                        src={`/icons/${$app.themeInUse}/${platform.icon}.svg`}
+                                        src={`${base}/icons/${$app.themeInUse}/${platform.icon}.svg`}
                                         alt="technology" />
                                 </div>
                                 <span class="text">{platform.title}</span>
@@ -116,7 +116,7 @@
                         <span class="u-flex u-cross-center u-gap-16">
                             <div class="avatar is-medium" aria-hidden="true">
                                 <img
-                                    src={`/icons/${$app.themeInUse}/grayscale/code.svg`}
+                                    src={`${base}/icons/${$app.themeInUse}/grayscale/code.svg`}
                                     alt="technology" />
                             </div>
                             <span class="text">API key</span>
@@ -135,7 +135,7 @@
                         <span class="u-flex u-cross-center u-gap-16">
                             <div class="avatar is-medium" aria-hidden="true">
                                 <img
-                                    src={`/icons/${$app.themeInUse}/grayscale/code.svg`}
+                                    src={`${base}/icons/${$app.themeInUse}/grayscale/code.svg`}
                                     alt="technology" />
                             </div>
                             <span class="text">Webhook</span>