diff --git a/src/lib/components/svgIcon.svelte b/src/lib/components/svgIcon.svelte
index 6b3dbb70c..8f3b78d0a 100644
--- a/src/lib/components/svgIcon.svelte
+++ b/src/lib/components/svgIcon.svelte
@@ -9,10 +9,11 @@
     export { className as class };
 
     enum iconSizes {
-        small = '--icon-size-small',
-        medium = '--icon-size-medium',
-        large = '--icon-size-large',
-        xlarge = '--icon-size-extra-large'
+        xs = '--icon-size-xs',
+        small = '--icon-size-s',
+        medium = '--icon-size-m',
+        large = '--icon-size-l',
+        xlarge = '--icon-size-xl'
     }
 </script>
 
diff --git a/src/lib/elements/forms/inputSelect.svelte b/src/lib/elements/forms/inputSelect.svelte
index 247786a32..235abd039 100644
--- a/src/lib/elements/forms/inputSelect.svelte
+++ b/src/lib/elements/forms/inputSelect.svelte
@@ -13,6 +13,7 @@
         label: string;
         disabled?: boolean;
         leadingIcon?: ComponentType;
+        leadingHtml?: string;
     }[];
 
     let element: HTMLSelectElement;
diff --git a/src/routes/(console)/project-[project]/sites/create-site/aside.svelte b/src/routes/(console)/project-[project]/sites/create-site/aside.svelte
index 93547a411..0905dd6ff 100644
--- a/src/routes/(console)/project-[project]/sites/create-site/aside.svelte
+++ b/src/routes/(console)/project-[project]/sites/create-site/aside.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { Card } from '$lib/components';
+    import { Card, SvgIcon } from '$lib/components';
     import { Icon, Layout, Typography } from '@appwrite.io/pink-svelte';
     import { IconGithub, IconGitBranch } from '@appwrite.io/pink-icons-svelte';
     import { consoleVariables } from '$routes/(console)/store';
@@ -24,7 +24,7 @@
                     <Typography.Caption variant="400">Framework</Typography.Caption>
                     <Layout.Stack gap="xs" alignItems="center" direction="row">
                         {#if frameworkIcon}
-                            <Icon size="s" icon={frameworkIcon}></Icon>
+                            <SvgIcon name={frameworkIcon} />
                         {/if}
                         <Typography.Text variant="m-500" color="--color-fgcolor-neutral-primary">
                             {framework.name}
diff --git a/src/routes/(console)/project-[project]/sites/create-site/details.svelte b/src/routes/(console)/project-[project]/sites/create-site/details.svelte
index c9d6f9cc8..c081a5825 100644
--- a/src/routes/(console)/project-[project]/sites/create-site/details.svelte
+++ b/src/routes/(console)/project-[project]/sites/create-site/details.svelte
@@ -16,6 +16,8 @@
     }[] = [];
 
     let showCustomId = false;
+
+    $: console.log(options);
 </script>
 
 <Fieldset legend="Details">
diff --git a/src/routes/(console)/project-[project]/sites/create-site/repositories/repository-[repository]/configuration.svelte b/src/routes/(console)/project-[project]/sites/create-site/repositories/repository-[repository]/configuration.svelte
index 889c99e11..4559761a8 100644
--- a/src/routes/(console)/project-[project]/sites/create-site/repositories/repository-[repository]/configuration.svelte
+++ b/src/routes/(console)/project-[project]/sites/create-site/repositories/repository-[repository]/configuration.svelte
@@ -25,6 +25,7 @@
     import ImportSiteVariablesModal from '../../importSiteVariablesModal.svelte';
     import type { Models } from '@appwrite.io/console';
     import { getFrameworkIcon } from '../../../store';
+    import { iconPath } from '$lib/stores/app';
 
     export let frameworks: Models.Framework[];
     export let selectedFramework: Models.Framework;
@@ -61,7 +62,7 @@
             options={frameworks.map((framework) => ({
                 value: framework.key,
                 label: framework.name,
-                leadingIcon: getFrameworkIcon(framework.key)
+                leadingHtml: `<img src='${$iconPath(getFrameworkIcon(framework.key), 'color')}' style='inline-size: var(--icon-size-m)' />`
             }))}
             on:change={() => {
                 selectedFramework = frameworks.find((framework) => framework.key === frameworkId);
diff --git a/src/routes/(console)/project-[project]/sites/create-site/templates/template-[template]/+page.svelte b/src/routes/(console)/project-[project]/sites/create-site/templates/template-[template]/+page.svelte
index 6e1f40fe4..93cc529dc 100644
--- a/src/routes/(console)/project-[project]/sites/create-site/templates/template-[template]/+page.svelte
+++ b/src/routes/(console)/project-[project]/sites/create-site/templates/template-[template]/+page.svelte
@@ -3,7 +3,7 @@
     import { base } from '$app/paths';
     import { page } from '$app/stores';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import { Card } from '$lib/components';
+    import { Card, SvgIcon } from '$lib/components';
     import { Button, Form } from '$lib/elements/forms';
     import { Wizard } from '$lib/layout';
     import { addNotification } from '$lib/stores/notifications';
@@ -30,6 +30,7 @@
     import Domain from '../../domain.svelte';
     import { NewRepository, Repositories, RepositoryBehaviour } from '$lib/components/git';
     import { getFrameworkIcon } from '../../../store';
+    import { iconPath } from '$lib/stores/app';
 
     export let data;
 
@@ -225,7 +226,7 @@
                     return {
                         value: framework.name,
                         label: framework.name,
-                        leadingIcon: getFrameworkIcon(framework.key)
+                        leadingHtml: `<img src='${$iconPath(getFrameworkIcon(framework.key), 'color')}' style='inline-size: var(--icon-size-m)' />`
                     };
                 })}
                 <Layout.Stack gap="xxl">