diff --git a/frontend/src/lib/components/ArgInfo.svelte b/frontend/src/lib/components/ArgInfo.svelte
index 54de7ef5b4..feadd419cd 100644
--- a/frontend/src/lib/components/ArgInfo.svelte
+++ b/frontend/src/lib/components/ArgInfo.svelte
@@ -8,9 +8,13 @@
 	import Tooltip from './Tooltip.svelte'
 	import { Button, DrawerContent } from './common'
 
-	export let value: any
-	let jsonViewer: Drawer
-	let jsonViewerContent: any | undefined
+	interface Props {
+		value: any
+	}
+
+	let { value }: Props = $props()
+	let jsonViewer: Drawer | undefined = $state()
+	let jsonViewerContent: any | undefined = $state()
 
 	function isString(value: any) {
 		return typeof value === 'string' || value instanceof String
@@ -61,17 +65,17 @@
 {:else if isString(value) && value.startsWith('$res:')}
 	<button
 		class="text-xs text-blue-500"
-		on:click={async () => {
+		onclick={async () => {
 			await getResource(value.substring('$res:'.length))
-			jsonViewer.toggleDrawer()
+			jsonViewer?.toggleDrawer()
 		}}>{value}</button
 	>
 {:else if isString(value) && value.startsWith('$var:')}
 	<button
 		class="text-xs text-blue-500"
-		on:click={async () => {
+		onclick={async () => {
 			await getVariable(value.substring('$res:'.length))
-			jsonViewer.toggleDrawer()
+			jsonViewer?.toggleDrawer()
 		}}>{value}</button
 	>
 {:else if typeof value !== 'object'}
@@ -80,9 +84,9 @@
 		{#if JSON.stringify(value).length > 80}
 			<button
 				class="text-xs text-blue-500"
-				on:click={() => {
+				onclick={() => {
 					jsonViewerContent = value
-					jsonViewer.toggleDrawer()
+					jsonViewer?.toggleDrawer()
 				}}>See expanded</button
 			>
 		{/if}
@@ -92,9 +96,9 @@
 		{#if JSON.stringify(value).length > 120}
 			<button
 				class="text-xs absolute top-0 right-4 text-tertiary"
-				on:click={() => {
+				onclick={() => {
 					jsonViewerContent = value
-					jsonViewer.toggleDrawer()
+					jsonViewer?.toggleDrawer()
 				}}><Expand size={18} /></button
 			>
 		{/if}
diff --git a/frontend/src/lib/components/DraftBadge.svelte b/frontend/src/lib/components/DraftBadge.svelte
index fa9dc3a57d..e14cebb545 100644
--- a/frontend/src/lib/components/DraftBadge.svelte
+++ b/frontend/src/lib/components/DraftBadge.svelte
@@ -2,19 +2,27 @@
 	import Popover from './Popover.svelte'
 	import { Badge } from './common'
 
-	export let has_draft: boolean = false
-	export let draft_only: boolean = false
+	interface Props {
+		has_draft?: boolean
+		draft_only?: boolean
+	}
+
+	let { has_draft = false, draft_only = false }: Props = $props()
 </script>
 
 {#if has_draft}
 	{#if draft_only}
 		<Popover notClickable>
-			<svelte:fragment slot="text">Never deployed and is only a draft</svelte:fragment>
+			{#snippet text()}
+				Never deployed and is only a draft
+			{/snippet}
 			<Badge small color="indigo" baseClass="border border-indigo-200">Draft only</Badge>
 		</Popover>
 	{:else}
 		<Popover notClickable>
-			<svelte:fragment slot="text">Is deployed and has a draft</svelte:fragment>
+			{#snippet text()}
+				Is deployed and has a draft
+			{/snippet}
 			<Badge small color="indigo" baseClass="border border-indigo-200">+Draft</Badge>
 		</Popover>
 	{/if}
diff --git a/frontend/src/lib/components/apps/components/helpers/RefreshButton.svelte b/frontend/src/lib/components/apps/components/helpers/RefreshButton.svelte
index 71c5e2dbd3..fc25b2e382 100644
--- a/frontend/src/lib/components/apps/components/helpers/RefreshButton.svelte
+++ b/frontend/src/lib/components/apps/components/helpers/RefreshButton.svelte
@@ -6,19 +6,24 @@
 	import Popover from '$lib/components/Popover.svelte'
 	import type { AppViewerContext, CancelablePromise } from '../../types'
 
-	export let id: string
-	export let loading: boolean
+	interface Props {
+		id: string
+		loading: boolean
+	}
+
+	let { id, loading }: Props = $props()
 
 	const { runnableComponents } = getContext<AppViewerContext>('AppViewerContext')
-	let buttonHover = false
-	let cancelCallbacks: (CancelablePromise<void>)[] | undefined = undefined
+	let buttonHover = $state(false)
+	let cancelCallbacks: CancelablePromise<void>[] | undefined = $state(undefined)
 </script>
 
 <Popover>
 	<Button
-		on:mouseenter={() => (buttonHover = true)} on:mouseleave={() => (buttonHover = false)} 
+		on:mouseenter={() => (buttonHover = true)}
+		on:mouseleave={() => (buttonHover = false)}
 		startIcon={{
-			icon: loading ? !buttonHover ? LoaderIcon : RefreshCwOff : RefreshCw,
+			icon: loading ? (!buttonHover ? LoaderIcon : RefreshCwOff) : RefreshCw,
 			classes: twMerge(
 				loading && !buttonHover ? 'animate-spin text-blue-800' : '',
 				'transition-all text-gray-500 dark:text-white'
@@ -29,14 +34,14 @@
 		btnClasses={twMerge(loading ? ' bg-blue-100 dark:bg-blue-400' : '', 'transition-all')}
 		on:click={() => {
 			if (buttonHover && loading) {
-				cancelCallbacks?.forEach((cb) => cb.cancel()) 
+				cancelCallbacks?.forEach((cb) => cb.cancel())
 			} else {
-				cancelCallbacks = $runnableComponents[id]?.cb?.map((cb) =>  cb())
+				cancelCallbacks = $runnableComponents[id]?.cb?.map((cb) => cb())
 			}
 		}}
 		iconOnly
 	/>
-	<svelte:fragment slot="text">
+	{#snippet text()}
 		{#if loading}
 			{#if buttonHover}
 				Stop Refreshing
@@ -46,5 +51,5 @@
 		{:else}
 			Refresh
 		{/if}
-	</svelte:fragment>
+	{/snippet}
 </Popover>
diff --git a/frontend/src/lib/components/common/kbd/Kbd.svelte b/frontend/src/lib/components/common/kbd/Kbd.svelte
index 27de0f7686..002f4e8c16 100644
--- a/frontend/src/lib/components/common/kbd/Kbd.svelte
+++ b/frontend/src/lib/components/common/kbd/Kbd.svelte
@@ -2,9 +2,21 @@
 	import { isMac } from '$lib/utils'
 	import { twMerge } from 'tailwind-merge'
 
-	export let kbdClass = ''
-	export let small = false
-	export let isModifier: boolean = false
+	interface Props {
+		kbdClass?: string
+		small?: boolean
+		isModifier?: boolean
+		class?: string
+		children?: import('svelte').Snippet
+	}
+
+	let {
+		kbdClass = $bindable(''),
+		small = false,
+		isModifier = false,
+		class: classNames = '',
+		children
+	}: Props = $props()
 
 	if (small) {
 		kbdClass = twMerge(
@@ -20,12 +32,12 @@
 
 <span
 	class={twMerge(
-		$$props.class,
+		classNames,
 		small ? 'h-4  center-center' : '',
 		'ml-0.5 rounded border bg-surface-secondary text-primary shadow-sm font-light transition-all group-hover:border-primary-500 group-hover:text-primary-inverse'
 	)}
 >
 	<kbd class={kbdClass}>
-		<slot />
+		{@render children?.()}
 	</kbd>
 </span>
diff --git a/frontend/src/lib/components/common/languageIcons/Bash.svelte b/frontend/src/lib/components/common/languageIcons/Bash.svelte
index b4da143788..e535d15289 100644
--- a/frontend/src/lib/components/common/languageIcons/Bash.svelte
+++ b/frontend/src/lib/components/common/languageIcons/Bash.svelte
@@ -1,18 +1,29 @@
 <script>
-	export let width = 16
-	export let height = 16
+	/**
+	 * @typedef {Object} Props
+	 * @property {number} [width]
+	 * @property {number} [height]
+	 */
+
+	/** @type {Props & { [key: string]: any }} */
+	let { width = 16, height = 16, ...rest } = $props()
 </script>
 
-<svg
-	{width}
-	{height}
-	{...$$restProps}
-	viewBox="0 0 16 16"
-	fill="none"
-	xmlns="http://www.w3.org/2000/svg"
->
-	<path d="M14.1478 3.56504L9.4137 0.752673C8.84829 0.415776 8.15106 0.415776 7.58566 0.752673L2.85152 3.56504C2.28612 3.899 1.9375 4.52007 1.9375 5.19093V10.8127C1.9375 11.4836 2.28612 12.1047 2.85152 12.4386L7.58566 15.2481C7.8669 15.415 8.18329 15.5 8.49968 15.5C8.81607 15.5 9.12953 15.415 9.4137 15.2481L14.1478 12.4386C14.7132 12.1017 15.0619 11.4836 15.0619 10.8127V5.19093C15.0619 4.52007 14.7132 3.899 14.1478 3.56504Z" fill="white"/>
-	<path d="M14.1478 3.5651L9.4137 0.752734C9.13246 0.58575 8.81607 0.500793 8.49968 0.500793C8.18329 0.500793 7.86983 0.58575 7.58566 0.752734L2.85152 3.5651C2.28612 3.89906 1.9375 4.52013 1.9375 5.19099V10.8128C1.9375 11.4837 2.28612 12.1047 2.85152 12.4387L7.58566 15.2481C7.8669 15.4151 8.18329 15.5001 8.49968 15.5001C8.81607 15.5001 9.12953 15.4151 9.4137 15.2481L14.1478 12.4387C14.7132 12.1018 15.0619 11.4837 15.0619 10.8128V5.19099C15.0619 4.52013 14.7132 3.89906 14.1478 3.5651ZM7.75265 14.961L3.0185 12.1516C2.55563 11.8762 2.26854 11.3635 2.26854 10.8128V5.19099C2.26854 4.64024 2.55563 4.12757 3.0185 3.85219L7.75265 1.04276C7.98115 0.908 8.23895 0.837691 8.49968 0.837691C8.76041 0.837691 9.02114 0.908 9.24671 1.04276L13.9809 3.85219C14.3705 4.08363 14.6341 4.48497 14.7074 4.93612C14.5492 4.60216 14.1976 4.50841 13.7846 4.75156L9.3053 7.51998C8.74576 7.84516 8.33562 8.21428 8.33562 8.88515V14.4044C8.33562 14.8087 8.49675 15.0694 8.74869 15.1456C8.66666 15.1602 8.58464 15.169 8.49968 15.169C8.23895 15.1661 7.97822 15.0958 7.75265 14.961Z" fill="#283037"/>
-	<path d="M12.9086 11.3547L11.728 12.0607C11.6958 12.0783 11.6724 12.0988 11.6724 12.1369V12.4445C11.6724 12.4826 11.6987 12.4972 11.728 12.4796L12.9262 11.7531C12.9584 11.7355 12.9614 11.7004 12.9614 11.6623V11.3899C12.9643 11.3518 12.9379 11.3371 12.9086 11.3547Z" fill="#4DA825"/>
-	<path d="M10.3983 8.75913C10.4364 8.73863 10.4686 8.76499 10.4686 8.81479L10.4715 9.222C10.6414 9.15462 10.7908 9.13704 10.9256 9.16634C10.9549 9.17513 10.9666 9.21321 10.9549 9.26008L10.8641 9.62042C10.8582 9.64678 10.8406 9.67608 10.8231 9.69366C10.8143 9.70245 10.8084 9.70831 10.7996 9.71123C10.7879 9.71709 10.7762 9.72002 10.7645 9.71709C10.7029 9.70245 10.5565 9.67022 10.328 9.7874C10.0877 9.91044 10.0028 10.1184 10.0057 10.2737C10.0086 10.4583 10.1024 10.5169 10.4305 10.5198C10.867 10.5256 11.0574 10.719 11.0604 11.1584C11.0662 11.592 10.8348 12.0549 10.4803 12.342L10.4891 12.7462C10.4891 12.796 10.4569 12.8517 10.4188 12.8693L10.1786 13.007C10.1405 13.0275 10.1082 13.004 10.1082 12.9542L10.1053 12.5558C9.90025 12.6408 9.69225 12.6613 9.56042 12.6086C9.53406 12.5998 9.52527 12.5617 9.53406 12.5207L9.62194 12.1545C9.6278 12.1252 9.64538 12.0959 9.66589 12.0783C9.67468 12.0724 9.68053 12.0666 9.68932 12.0607C9.70397 12.0549 9.71569 12.0519 9.72741 12.0578C9.87096 12.1047 10.0526 12.0842 10.2284 11.9933C10.451 11.8791 10.6004 11.6535 10.5975 11.425C10.5946 11.22 10.4832 11.135 10.2137 11.1321C9.87095 11.1321 9.5487 11.0647 9.54285 10.5579C9.53992 10.1419 9.7567 9.70831 10.0995 9.43293L10.0965 9.02572C10.0965 8.97592 10.1258 8.92026 10.1668 8.89975L10.3983 8.75913Z" fill="white"/>
+<svg {width} {height} {...rest} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<path
+		d="M14.1478 3.56504L9.4137 0.752673C8.84829 0.415776 8.15106 0.415776 7.58566 0.752673L2.85152 3.56504C2.28612 3.899 1.9375 4.52007 1.9375 5.19093V10.8127C1.9375 11.4836 2.28612 12.1047 2.85152 12.4386L7.58566 15.2481C7.8669 15.415 8.18329 15.5 8.49968 15.5C8.81607 15.5 9.12953 15.415 9.4137 15.2481L14.1478 12.4386C14.7132 12.1017 15.0619 11.4836 15.0619 10.8127V5.19093C15.0619 4.52007 14.7132 3.899 14.1478 3.56504Z"
+		fill="white"
+	/>
+	<path
+		d="M14.1478 3.5651L9.4137 0.752734C9.13246 0.58575 8.81607 0.500793 8.49968 0.500793C8.18329 0.500793 7.86983 0.58575 7.58566 0.752734L2.85152 3.5651C2.28612 3.89906 1.9375 4.52013 1.9375 5.19099V10.8128C1.9375 11.4837 2.28612 12.1047 2.85152 12.4387L7.58566 15.2481C7.8669 15.4151 8.18329 15.5001 8.49968 15.5001C8.81607 15.5001 9.12953 15.4151 9.4137 15.2481L14.1478 12.4387C14.7132 12.1018 15.0619 11.4837 15.0619 10.8128V5.19099C15.0619 4.52013 14.7132 3.89906 14.1478 3.5651ZM7.75265 14.961L3.0185 12.1516C2.55563 11.8762 2.26854 11.3635 2.26854 10.8128V5.19099C2.26854 4.64024 2.55563 4.12757 3.0185 3.85219L7.75265 1.04276C7.98115 0.908 8.23895 0.837691 8.49968 0.837691C8.76041 0.837691 9.02114 0.908 9.24671 1.04276L13.9809 3.85219C14.3705 4.08363 14.6341 4.48497 14.7074 4.93612C14.5492 4.60216 14.1976 4.50841 13.7846 4.75156L9.3053 7.51998C8.74576 7.84516 8.33562 8.21428 8.33562 8.88515V14.4044C8.33562 14.8087 8.49675 15.0694 8.74869 15.1456C8.66666 15.1602 8.58464 15.169 8.49968 15.169C8.23895 15.1661 7.97822 15.0958 7.75265 14.961Z"
+		fill="#283037"
+	/>
+	<path
+		d="M12.9086 11.3547L11.728 12.0607C11.6958 12.0783 11.6724 12.0988 11.6724 12.1369V12.4445C11.6724 12.4826 11.6987 12.4972 11.728 12.4796L12.9262 11.7531C12.9584 11.7355 12.9614 11.7004 12.9614 11.6623V11.3899C12.9643 11.3518 12.9379 11.3371 12.9086 11.3547Z"
+		fill="#4DA825"
+	/>
+	<path
+		d="M10.3983 8.75913C10.4364 8.73863 10.4686 8.76499 10.4686 8.81479L10.4715 9.222C10.6414 9.15462 10.7908 9.13704 10.9256 9.16634C10.9549 9.17513 10.9666 9.21321 10.9549 9.26008L10.8641 9.62042C10.8582 9.64678 10.8406 9.67608 10.8231 9.69366C10.8143 9.70245 10.8084 9.70831 10.7996 9.71123C10.7879 9.71709 10.7762 9.72002 10.7645 9.71709C10.7029 9.70245 10.5565 9.67022 10.328 9.7874C10.0877 9.91044 10.0028 10.1184 10.0057 10.2737C10.0086 10.4583 10.1024 10.5169 10.4305 10.5198C10.867 10.5256 11.0574 10.719 11.0604 11.1584C11.0662 11.592 10.8348 12.0549 10.4803 12.342L10.4891 12.7462C10.4891 12.796 10.4569 12.8517 10.4188 12.8693L10.1786 13.007C10.1405 13.0275 10.1082 13.004 10.1082 12.9542L10.1053 12.5558C9.90025 12.6408 9.69225 12.6613 9.56042 12.6086C9.53406 12.5998 9.52527 12.5617 9.53406 12.5207L9.62194 12.1545C9.6278 12.1252 9.64538 12.0959 9.66589 12.0783C9.67468 12.0724 9.68053 12.0666 9.68932 12.0607C9.70397 12.0549 9.71569 12.0519 9.72741 12.0578C9.87096 12.1047 10.0526 12.0842 10.2284 11.9933C10.451 11.8791 10.6004 11.6535 10.5975 11.425C10.5946 11.22 10.4832 11.135 10.2137 11.1321C9.87095 11.1321 9.5487 11.0647 9.54285 10.5579C9.53992 10.1419 9.7567 9.70831 10.0995 9.43293L10.0965 9.02572C10.0965 8.97592 10.1258 8.92026 10.1668 8.89975L10.3983 8.75913Z"
+		fill="white"
+	/>
 </svg>
diff --git a/frontend/src/lib/components/common/languageIcons/Go.svelte b/frontend/src/lib/components/common/languageIcons/Go.svelte
index 3e1f4581d4..3c2f4c339d 100644
--- a/frontend/src/lib/components/common/languageIcons/Go.svelte
+++ b/frontend/src/lib/components/common/languageIcons/Go.svelte
@@ -1,16 +1,15 @@
 <script>
-	export let width = 16
-	export let height = 16
+	/**
+	 * @typedef {Object} Props
+	 * @property {number} [width]
+	 * @property {number} [height]
+	 */
+
+	/** @type {Props & { [key: string]: any }} */
+	let { width = 16, height = 16, ...rest } = $props()
 </script>
 
-<svg
-	{width}
-	{height}
-	{...$$restProps}
-	viewBox="0 0 16 16"
-	fill="none"
-	xmlns="http://www.w3.org/2000/svg"
->
+<svg {width} {height} {...rest} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
 	<path
 		d="M1.20743 6.82123C1.17627 6.82123 1.16848 6.80565 1.18406 6.78228L1.34764 6.57197C1.36322 6.5486 1.40217 6.53302 1.43333 6.53302H4.21424C4.2454 6.53302 4.25319 6.55639 4.23761 6.57976L4.10519 6.78228C4.08961 6.80565 4.05066 6.82902 4.02729 6.82902L1.20743 6.82123Z"
 		fill="#00ACD7"
diff --git a/frontend/src/lib/components/common/languageIcons/JavaScript.svelte b/frontend/src/lib/components/common/languageIcons/JavaScript.svelte
index d8552b77c8..276fdc8477 100644
--- a/frontend/src/lib/components/common/languageIcons/JavaScript.svelte
+++ b/frontend/src/lib/components/common/languageIcons/JavaScript.svelte
@@ -1,6 +1,12 @@
 <script>
-	export let width = 16
-	export let height = 16
+	/**
+	 * @typedef {Object} Props
+	 * @property {number} [width]
+	 * @property {number} [height]
+	 */
+
+	/** @type {Props} */
+	let { width = 16, height = 16 } = $props()
 </script>
 
 <svg xmlns="http://www.w3.org/2000/svg" {width} {height} viewBox="0 0 630 630">
diff --git a/frontend/src/lib/components/common/languageIcons/LanguageIcon.svelte b/frontend/src/lib/components/common/languageIcons/LanguageIcon.svelte
index 6a3de43bf9..3cfb57fee5 100644
--- a/frontend/src/lib/components/common/languageIcons/LanguageIcon.svelte
+++ b/frontend/src/lib/components/common/languageIcons/LanguageIcon.svelte
@@ -24,7 +24,8 @@
 	import JavaIcon from '$lib/components/icons/JavaIcon.svelte'
 	import DuckDbIcon from '$lib/components/icons/DuckDbIcon.svelte'
 
-	export let lang:
+	interface Props {
+		lang: 
 		| SupportedLanguage
 		| 'mysql'
 		| 'bun'
@@ -33,10 +34,20 @@
 		| 'fetch'
 		| 'docker'
 		| 'powershell'
-		| 'bunnative'
-	export let width = 30
-	export let height = 30
-	export let scale = 1
+		| 'bunnative';
+		width?: number;
+		height?: number;
+		scale?: number;
+		[key: string]: any
+	}
+
+	let {
+		lang,
+		width = 30,
+		height = 30,
+		scale = 1,
+		...rest
+	}: Props = $props();
 
 	const languageLabel: Record<Script['language'] | 'bunnative', String> = {
 		python3: 'Python',
@@ -99,15 +110,16 @@
 	}
 
 	let subIconScale = width === 30 ? 0.6 : 0.8
+
+	const SvelteComponent = $derived(langToComponent[lang]);
 </script>
 
 <div class="relative">
-	<svelte:component
-		this={langToComponent[lang]}
+	<SvelteComponent
 		title={languageLabel[lang]}
 		width={width * scale}
 		height={height * scale}
-		{...$$restProps}
+		{...rest}
 	/>
 	{#if lang === 'deno'}
 		<div
diff --git a/frontend/src/lib/components/common/languageIcons/Python.svelte b/frontend/src/lib/components/common/languageIcons/Python.svelte
index 1046682c58..b8d42f7cf0 100644
--- a/frontend/src/lib/components/common/languageIcons/Python.svelte
+++ b/frontend/src/lib/components/common/languageIcons/Python.svelte
@@ -1,12 +1,17 @@
-<script>
-	export let width = 16
-	export let height = 16
+<script lang="ts">
+	interface Props {
+		width?: number;
+		height?: number;
+		[key: string]: any
+	}
+
+	let { width = 16, height = 16, ...rest }: Props = $props();
 </script>
 
 <svg
 	{width}
 	{height}
-	{...$$restProps}
+	{...rest}
 	viewBox="0 0 17 16"
 	fill="none"
 	xmlns="http://www.w3.org/2000/svg"
diff --git a/frontend/src/lib/components/common/languageIcons/TypeScript.svelte b/frontend/src/lib/components/common/languageIcons/TypeScript.svelte
index 11d7e679eb..abecd33cde 100644
--- a/frontend/src/lib/components/common/languageIcons/TypeScript.svelte
+++ b/frontend/src/lib/components/common/languageIcons/TypeScript.svelte
@@ -1,12 +1,17 @@
-<script>
-	export let width = 16
-	export let height = 16
+<script lang="ts">
+	interface Props {
+		width?: number;
+		height?: number;
+		[key: string]: any
+	}
+
+	let { width = 16, height = 16, ...rest }: Props = $props();
 </script>
 
 <svg
 	{width}
 	{height}
-	{...$$restProps}
+	{...rest}
 	viewBox="0 0 17 16"
 	fill="none"
 	xmlns="http://www.w3.org/2000/svg"
diff --git a/frontend/src/lib/components/graph/renderers/triggers/TriggersBadge.svelte b/frontend/src/lib/components/graph/renderers/triggers/TriggersBadge.svelte
index 3d90edd866..070b9166fd 100644
--- a/frontend/src/lib/components/graph/renderers/triggers/TriggersBadge.svelte
+++ b/frontend/src/lib/components/graph/renderers/triggers/TriggersBadge.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { Calendar, Mail, Webhook, Unplug, Database, Terminal } from 'lucide-svelte'
 	import { Loader2 } from 'lucide-svelte'
-	import { type ComponentType } from 'svelte'
+	import { type Component, type ComponentType } from 'svelte'
 	import { Route } from 'lucide-svelte'
 	import { getContext } from 'svelte'
 	import { type TriggerContext } from '$lib/components/triggers'
@@ -44,7 +44,11 @@
 	let menuOpen = $state(false)
 
 	const triggerTypeConfig: {
-		[key in TriggerType]: { icon: ComponentType; countKey?: string; disabled?: boolean }
+		[key in TriggerType]: {
+			icon: ComponentType | Component<any, {}, ''>
+			countKey?: string
+			disabled?: boolean
+		}
 	} = {
 		webhook: { icon: Webhook, countKey: 'webhook_count' },
 		schedule: { icon: Calendar, countKey: 'schedule_count' },
diff --git a/frontend/src/lib/components/icons/ActivitypubIcon.svelte b/frontend/src/lib/components/icons/ActivitypubIcon.svelte
index efe8f989b3..0185d98f3a 100644
--- a/frontend/src/lib/components/icons/ActivitypubIcon.svelte
+++ b/frontend/src/lib/components/icons/ActivitypubIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg
diff --git a/frontend/src/lib/components/icons/AirtableIcon.svelte b/frontend/src/lib/components/icons/AirtableIcon.svelte
index ea803bd87d..e71aa95bdd 100644
--- a/frontend/src/lib/components/icons/AirtableIcon.svelte
+++ b/frontend/src/lib/components/icons/AirtableIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg
diff --git a/frontend/src/lib/components/icons/AnsibleIcon.svelte b/frontend/src/lib/components/icons/AnsibleIcon.svelte
index c02395e0d4..26a5c6b5b6 100644
--- a/frontend/src/lib/components/icons/AnsibleIcon.svelte
+++ b/frontend/src/lib/components/icons/AnsibleIcon.svelte
@@ -1,6 +1,10 @@
-<script>
-	export let height = '24px'
-	export let width = '24px'
+<script lang="ts">
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg
diff --git a/frontend/src/lib/components/icons/AppwriteIcon.svelte b/frontend/src/lib/components/icons/AppwriteIcon.svelte
index e3fa92af08..53d8d0369b 100644
--- a/frontend/src/lib/components/icons/AppwriteIcon.svelte
+++ b/frontend/src/lib/components/icons/AppwriteIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg
diff --git a/frontend/src/lib/components/icons/AsanaIcon.svelte b/frontend/src/lib/components/icons/AsanaIcon.svelte
index a32e3f8819..8636c11101 100644
--- a/frontend/src/lib/components/icons/AsanaIcon.svelte
+++ b/frontend/src/lib/components/icons/AsanaIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg {width} {height} viewBox="0 0 256 236.624" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid"><title>Asana</title><g><path d="M200.324957,125.270044 C169.575962,125.270044 144.649915,150.19729 144.649915,180.947483 C144.649915,211.696478 169.575962,236.623724 200.324957,236.623724 C231.073952,236.623724 256,211.696478 256,180.947483 C256,150.19729 231.073952,125.270044 200.324957,125.270044 L200.324957,125.270044 Z M55.6754021,125.274837 C24.9270063,125.274837 0,150.19729 0,180.947483 C0,211.696478 24.9270063,236.623724 55.6754021,236.623724 C86.425116,236.623724 111.35332,211.696478 111.35332,180.947483 C111.35332,150.19729 86.425116,125.274837 55.6754021,125.274837 L55.6754021,125.274837 Z M183.674444,55.674204 C183.674444,86.425116 158.748396,111.354638 128.000599,111.354638 C97.2505258,111.354638 72.3247177,86.425116 72.3247177,55.674204 C72.3247177,24.9294026 97.2505258,0 128.000599,0 C158.748396,0 183.674444,24.9294026 183.674444,55.674204 L183.674444,55.674204 Z" fill="#F06A6A"/></g></svg>
\ No newline at end of file
diff --git a/frontend/src/lib/components/icons/AwsEcrIcon.svelte b/frontend/src/lib/components/icons/AwsEcrIcon.svelte
index 9d1bf7f0c0..2801712f62 100644
--- a/frontend/src/lib/components/icons/AwsEcrIcon.svelte
+++ b/frontend/src/lib/components/icons/AwsEcrIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg
diff --git a/frontend/src/lib/components/icons/AwsIcon.svelte b/frontend/src/lib/components/icons/AwsIcon.svelte
index b4d7b4c9d4..3b02d9d773 100644
--- a/frontend/src/lib/components/icons/AwsIcon.svelte
+++ b/frontend/src/lib/components/icons/AwsIcon.svelte
@@ -1,8 +1,12 @@
 <script lang="ts">
-	export let size: number = 16
-	export let color: string | undefined = undefined
-	let clazz = ''
-	export { clazz as class }
+	interface Props {
+		size?: number;
+		color?: string | undefined;
+		class?: string;
+	}
+
+	let { size = 16, color = undefined, class: clazz = '' }: Props = $props();
+	
 </script>
 
 <svg
diff --git a/frontend/src/lib/components/icons/AzureIcon.svelte b/frontend/src/lib/components/icons/AzureIcon.svelte
index fcec9b7e14..4940e9b43e 100644
--- a/frontend/src/lib/components/icons/AzureIcon.svelte
+++ b/frontend/src/lib/components/icons/AzureIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg id="azure" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 374.5 377.3" {width} {height}
diff --git a/frontend/src/lib/components/icons/BarsStaggered.svelte b/frontend/src/lib/components/icons/BarsStaggered.svelte
index 1a7745e914..dbfebdeb1d 100644
--- a/frontend/src/lib/components/icons/BarsStaggered.svelte
+++ b/frontend/src/lib/components/icons/BarsStaggered.svelte
@@ -1,8 +1,12 @@
 <script lang="ts">
-	export let size: number = 16
-	export let style: string = 'fill: white;'
-	let clazz = ''
-	export { clazz as class }
+	interface Props {
+		size?: number;
+		style?: string;
+		class?: string;
+	}
+
+	let { size = 16, style = 'fill: white;', class: clazz = '' }: Props = $props();
+	
 </script>
 
 <svg
diff --git a/frontend/src/lib/components/icons/BcryptIcon.svelte b/frontend/src/lib/components/icons/BcryptIcon.svelte
index 609db1d0c6..bf9bf9b6a2 100644
--- a/frontend/src/lib/components/icons/BcryptIcon.svelte
+++ b/frontend/src/lib/components/icons/BcryptIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg {width} {height} viewBox="0 0 168 168" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/frontend/src/lib/components/icons/BigQueryIcon.svelte b/frontend/src/lib/components/icons/BigQueryIcon.svelte
index a12761bd19..10d099f75d 100644
--- a/frontend/src/lib/components/icons/BigQueryIcon.svelte
+++ b/frontend/src/lib/components/icons/BigQueryIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg xmlns="http://www.w3.org/2000/svg" {width} {height} viewBox="0 0 24 24"
diff --git a/frontend/src/lib/components/icons/BitbucketIcon.svelte b/frontend/src/lib/components/icons/BitbucketIcon.svelte
index a3a6163bca..9b33e6bb10 100644
--- a/frontend/src/lib/components/icons/BitbucketIcon.svelte
+++ b/frontend/src/lib/components/icons/BitbucketIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+    interface Props {
+        height?: string;
+        width?: string;
+    }
+
+    let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" {width} {height} viewBox="0 0 62.42 62.42">
diff --git a/frontend/src/lib/components/icons/BunIcon.svelte b/frontend/src/lib/components/icons/BunIcon.svelte
index 9228e7ce1d..ef845d4834 100644
--- a/frontend/src/lib/components/icons/BunIcon.svelte
+++ b/frontend/src/lib/components/icons/BunIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = 24
-	export let width = 24
+	interface Props {
+		height?: number;
+		width?: number;
+	}
+
+	let { height = 24, width = 24 }: Props = $props();
 </script>
 
 <svg
diff --git a/frontend/src/lib/components/icons/CACertificate.svelte b/frontend/src/lib/components/icons/CACertificate.svelte
index 2a4f9ec2cd..c73aa5d3ca 100644
--- a/frontend/src/lib/components/icons/CACertificate.svelte
+++ b/frontend/src/lib/components/icons/CACertificate.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg {width} {height} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/frontend/src/lib/components/icons/CSharpIcon.svelte b/frontend/src/lib/components/icons/CSharpIcon.svelte
index 36cd1777f3..703c692036 100644
--- a/frontend/src/lib/components/icons/CSharpIcon.svelte
+++ b/frontend/src/lib/components/icons/CSharpIcon.svelte
@@ -1,6 +1,10 @@
-<script>
-	export let height = '24px'
-	export let width = '24px'
+<script lang="ts">
+    interface Props {
+        height?: string;
+        width?: string;
+    }
+
+    let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg {width} {height} viewBox="0 0 256 288" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
diff --git a/frontend/src/lib/components/icons/CalcomIcon.svelte b/frontend/src/lib/components/icons/CalcomIcon.svelte
index 3dce2d516c..e11dc76d24 100644
--- a/frontend/src/lib/components/icons/CalcomIcon.svelte
+++ b/frontend/src/lib/components/icons/CalcomIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg
diff --git a/frontend/src/lib/components/icons/ClickhouseIcon.svelte b/frontend/src/lib/components/icons/ClickhouseIcon.svelte
index 6f4f092182..6d3870762a 100644
--- a/frontend/src/lib/components/icons/ClickhouseIcon.svelte
+++ b/frontend/src/lib/components/icons/ClickhouseIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg
diff --git a/frontend/src/lib/components/icons/ClickupIcon.svelte b/frontend/src/lib/components/icons/ClickupIcon.svelte
index 132ce36937..22e160931a 100644
--- a/frontend/src/lib/components/icons/ClickupIcon.svelte
+++ b/frontend/src/lib/components/icons/ClickupIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg
diff --git a/frontend/src/lib/components/icons/CloudflareIcon.svelte b/frontend/src/lib/components/icons/CloudflareIcon.svelte
index ada335e65c..6ade506d8a 100644
--- a/frontend/src/lib/components/icons/CloudflareIcon.svelte
+++ b/frontend/src/lib/components/icons/CloudflareIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg
diff --git a/frontend/src/lib/components/icons/CurrencyApiIcon.svelte b/frontend/src/lib/components/icons/CurrencyApiIcon.svelte
index a53965c0d1..66cc8176eb 100644
--- a/frontend/src/lib/components/icons/CurrencyApiIcon.svelte
+++ b/frontend/src/lib/components/icons/CurrencyApiIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+    interface Props {
+        height?: string;
+        width?: string;
+    }
+
+    let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg {width} {height} viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/frontend/src/lib/components/icons/DatadogIcon.svelte b/frontend/src/lib/components/icons/DatadogIcon.svelte
index 74af0888bc..f1e8e02776 100644
--- a/frontend/src/lib/components/icons/DatadogIcon.svelte
+++ b/frontend/src/lib/components/icons/DatadogIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg
diff --git a/frontend/src/lib/components/icons/DbIcon.svelte b/frontend/src/lib/components/icons/DbIcon.svelte
index fc963fde0e..fe74ca9adb 100644
--- a/frontend/src/lib/components/icons/DbIcon.svelte
+++ b/frontend/src/lib/components/icons/DbIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <!-- By Fabián Alexis - https://github.com/fabianalexisinostroza/Antu, CC BY-SA 3.0, https://commons.wikimedia.org/w/index.php?curid=49951194 -->
diff --git a/frontend/src/lib/components/icons/DenoIcon.svelte b/frontend/src/lib/components/icons/DenoIcon.svelte
index e29de9524b..86dca42410 100644
--- a/frontend/src/lib/components/icons/DenoIcon.svelte
+++ b/frontend/src/lib/components/icons/DenoIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = 24
-	export let width = 24
+	interface Props {
+		height?: number;
+		width?: number;
+	}
+
+	let { height = 24, width = 24 }: Props = $props();
 </script>
 
 <svg
diff --git a/frontend/src/lib/components/icons/DiscordIcon.svelte b/frontend/src/lib/components/icons/DiscordIcon.svelte
index 3939621420..384008b773 100644
--- a/frontend/src/lib/components/icons/DiscordIcon.svelte
+++ b/frontend/src/lib/components/icons/DiscordIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg
diff --git a/frontend/src/lib/components/icons/DockerIcon.svelte b/frontend/src/lib/components/icons/DockerIcon.svelte
index c87ce8510d..d7ab3f498c 100644
--- a/frontend/src/lib/components/icons/DockerIcon.svelte
+++ b/frontend/src/lib/components/icons/DockerIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg
diff --git a/frontend/src/lib/components/icons/DuckDbIcon.svelte b/frontend/src/lib/components/icons/DuckDbIcon.svelte
index 7229a377a6..1fa2e55b2c 100644
--- a/frontend/src/lib/components/icons/DuckDbIcon.svelte
+++ b/frontend/src/lib/components/icons/DuckDbIcon.svelte
@@ -1,6 +1,10 @@
-<script>
-	export let width = 16
-	export let height = 16
+<script lang="ts">
+	interface Props {
+		width?: number;
+		height?: number;
+	}
+
+	let { width = 16, height = 16 }: Props = $props();
 </script>
 
 <svg {width} {height} viewBox="0 0 335 335" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/frontend/src/lib/components/icons/DynatraceIcon.svelte b/frontend/src/lib/components/icons/DynatraceIcon.svelte
index 0bd4e035ae..e8d57c58ce 100644
--- a/frontend/src/lib/components/icons/DynatraceIcon.svelte
+++ b/frontend/src/lib/components/icons/DynatraceIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+    interface Props {
+        height?: string;
+        width?: string;
+    }
+
+    let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg {width} {height} viewBox="-2 0 260 260" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
diff --git a/frontend/src/lib/components/icons/EdgeDbIcon.svelte b/frontend/src/lib/components/icons/EdgeDbIcon.svelte
index d40dfefa67..2b94ecb6d0 100644
--- a/frontend/src/lib/components/icons/EdgeDbIcon.svelte
+++ b/frontend/src/lib/components/icons/EdgeDbIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+  interface Props {
+    height?: string;
+    width?: string;
+  }
+
+  let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg
diff --git a/frontend/src/lib/components/icons/FaunadbIcon.svelte b/frontend/src/lib/components/icons/FaunadbIcon.svelte
index 2980661cfc..62c4dde4f2 100644
--- a/frontend/src/lib/components/icons/FaunadbIcon.svelte
+++ b/frontend/src/lib/components/icons/FaunadbIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg
diff --git a/frontend/src/lib/components/icons/FirebaseIcon.svelte b/frontend/src/lib/components/icons/FirebaseIcon.svelte
index a2a77f8cd3..6d1ce00468 100644
--- a/frontend/src/lib/components/icons/FirebaseIcon.svelte
+++ b/frontend/src/lib/components/icons/FirebaseIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg
diff --git a/frontend/src/lib/components/icons/FunkwhaleIcon.svelte b/frontend/src/lib/components/icons/FunkwhaleIcon.svelte
index fc6c4d248a..45a1821beb 100644
--- a/frontend/src/lib/components/icons/FunkwhaleIcon.svelte
+++ b/frontend/src/lib/components/icons/FunkwhaleIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg
diff --git a/frontend/src/lib/components/icons/GCloudIcon.svelte b/frontend/src/lib/components/icons/GCloudIcon.svelte
index b7395c5bd2..6fba8faa05 100644
--- a/frontend/src/lib/components/icons/GCloudIcon.svelte
+++ b/frontend/src/lib/components/icons/GCloudIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg
diff --git a/frontend/src/lib/components/icons/GSheetsIcon.svelte b/frontend/src/lib/components/icons/GSheetsIcon.svelte
index d6a3f860d5..419f9d1b26 100644
--- a/frontend/src/lib/components/icons/GSheetsIcon.svelte
+++ b/frontend/src/lib/components/icons/GSheetsIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg
diff --git a/frontend/src/lib/components/icons/GcalIcon.svelte b/frontend/src/lib/components/icons/GcalIcon.svelte
index e6c806afb2..6b8f90b086 100644
--- a/frontend/src/lib/components/icons/GcalIcon.svelte
+++ b/frontend/src/lib/components/icons/GcalIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg
diff --git a/frontend/src/lib/components/icons/GdocsIcon.svelte b/frontend/src/lib/components/icons/GdocsIcon.svelte
index 49bcae01de..2e202cc2c8 100644
--- a/frontend/src/lib/components/icons/GdocsIcon.svelte
+++ b/frontend/src/lib/components/icons/GdocsIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" {width} {height} viewBox="0 0 50 50" style="fill:currentcolor;">
diff --git a/frontend/src/lib/components/icons/GdriveIcon.svelte b/frontend/src/lib/components/icons/GdriveIcon.svelte
index 34e9e34219..eff87a3645 100644
--- a/frontend/src/lib/components/icons/GdriveIcon.svelte
+++ b/frontend/src/lib/components/icons/GdriveIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg
diff --git a/frontend/src/lib/components/icons/GitIcon.svelte b/frontend/src/lib/components/icons/GitIcon.svelte
index 5a8a581c65..cf8045cba8 100644
--- a/frontend/src/lib/components/icons/GitIcon.svelte
+++ b/frontend/src/lib/components/icons/GitIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg {width} {height} viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/frontend/src/lib/components/icons/GithubIcon.svelte b/frontend/src/lib/components/icons/GithubIcon.svelte
index 3c94d82af0..2f08b8e045 100644
--- a/frontend/src/lib/components/icons/GithubIcon.svelte
+++ b/frontend/src/lib/components/icons/GithubIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg
diff --git a/frontend/src/lib/components/icons/GitlabIcon.svelte b/frontend/src/lib/components/icons/GitlabIcon.svelte
index 46c5ec451c..cb567c2473 100644
--- a/frontend/src/lib/components/icons/GitlabIcon.svelte
+++ b/frontend/src/lib/components/icons/GitlabIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg
diff --git a/frontend/src/lib/components/icons/GmailIcon.svelte b/frontend/src/lib/components/icons/GmailIcon.svelte
index 19a5a741ae..2a3281adef 100644
--- a/frontend/src/lib/components/icons/GmailIcon.svelte
+++ b/frontend/src/lib/components/icons/GmailIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg
diff --git a/frontend/src/lib/components/icons/GoogleCloudIcon.svelte b/frontend/src/lib/components/icons/GoogleCloudIcon.svelte
index 65a725c8f6..5fb4e21797 100644
--- a/frontend/src/lib/components/icons/GoogleCloudIcon.svelte
+++ b/frontend/src/lib/components/icons/GoogleCloudIcon.svelte
@@ -1,5 +1,9 @@
 <script lang="ts">
-	export let size: number = 16
+	interface Props {
+		size?: number;
+	}
+
+	let { size = 16 }: Props = $props();
 </script>
 
 <svg
diff --git a/frontend/src/lib/components/icons/GoogleFormsIcon.svelte b/frontend/src/lib/components/icons/GoogleFormsIcon.svelte
index 1f552453b9..de25179dc4 100644
--- a/frontend/src/lib/components/icons/GoogleFormsIcon.svelte
+++ b/frontend/src/lib/components/icons/GoogleFormsIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg
diff --git a/frontend/src/lib/components/icons/GoogleIcon.svelte b/frontend/src/lib/components/icons/GoogleIcon.svelte
index 6f8856bace..b9e73ef980 100644
--- a/frontend/src/lib/components/icons/GoogleIcon.svelte
+++ b/frontend/src/lib/components/icons/GoogleIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg {width} {height} viewBox="0 0 168 168" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/frontend/src/lib/components/icons/GraphqlIcon.svelte b/frontend/src/lib/components/icons/GraphqlIcon.svelte
index c33ea33751..292bdbad20 100644
--- a/frontend/src/lib/components/icons/GraphqlIcon.svelte
+++ b/frontend/src/lib/components/icons/GraphqlIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg
diff --git a/frontend/src/lib/components/icons/HackernewsIcon.svelte b/frontend/src/lib/components/icons/HackernewsIcon.svelte
index 1d3fa0cede..5a77fc7c14 100644
--- a/frontend/src/lib/components/icons/HackernewsIcon.svelte
+++ b/frontend/src/lib/components/icons/HackernewsIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg {width} {height} viewBox="0 0 168 168" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/frontend/src/lib/components/icons/HttpIcon.svelte b/frontend/src/lib/components/icons/HttpIcon.svelte
index bf91087e6b..eb0833ed0e 100644
--- a/frontend/src/lib/components/icons/HttpIcon.svelte
+++ b/frontend/src/lib/components/icons/HttpIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg
diff --git a/frontend/src/lib/components/icons/HubspotIcon.svelte b/frontend/src/lib/components/icons/HubspotIcon.svelte
index 2a968e1f81..87161418c2 100644
--- a/frontend/src/lib/components/icons/HubspotIcon.svelte
+++ b/frontend/src/lib/components/icons/HubspotIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" {width} {height} viewBox="0 0 32 32" style="fill:currentcolor;">
diff --git a/frontend/src/lib/components/icons/IpinfoIcon.svelte b/frontend/src/lib/components/icons/IpinfoIcon.svelte
index 0eaa23a983..fad040eb6a 100644
--- a/frontend/src/lib/components/icons/IpinfoIcon.svelte
+++ b/frontend/src/lib/components/icons/IpinfoIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+    interface Props {
+        height?: string;
+        width?: string;
+    }
+
+    let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg {width} {height} viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/frontend/src/lib/components/icons/JavaIcon.svelte b/frontend/src/lib/components/icons/JavaIcon.svelte
index 868aeeccaa..7bdf2ad235 100644
--- a/frontend/src/lib/components/icons/JavaIcon.svelte
+++ b/frontend/src/lib/components/icons/JavaIcon.svelte
@@ -1,6 +1,10 @@
-<script>
-	export let height = 24
-	export let width = 24
+<script lang="ts">
+	interface Props {
+		height?: number;
+		width?: number;
+	}
+
+	let { height = 24, width = 24 }: Props = $props();
 </script>
 
 <svg xmlns="http://www.w3.org/2000/svg" {width} {height} viewBox="-60.6242 20 378.0764 511.359"><path d="M278.577 426.546h-2.038v-1.14h5.486v1.14h-2.024v5.688h-1.424zm10.942.297h-.032l-2.019 5.392h-.924l-2.006-5.392h-.025v5.392h-1.342v-6.828h1.975l1.86 4.835 1.854-4.835h1.968v6.828h-1.31v-5.392zM96.154 286.925s-14.178 8.245 10.09 11.035c29.4 3.354 44.426 2.873 76.825-3.259 0 0 8.518 5.341 20.414 9.967-72.63 31.128-164.376-1.803-107.329-17.743m-8.875-40.62s-15.902 11.771 8.384 14.283c31.406 3.24 56.208 3.505 99.125-4.759 0 0 5.936 6.018 15.27 9.309-87.814 25.678-185.623 2.025-122.779-18.833" fill="#5382a1"/><path d="M162.098 177.4c17.896 20.604-4.702 39.145-4.702 39.145s45.441-23.458 24.572-52.833c-19.491-27.394-34.438-41.005 46.479-87.934 0 0-127.013 31.722-66.349 101.622" fill="#f8981d"/><path d="M258.157 316.97s10.492 8.645-11.555 15.333c-41.923 12.7-174.488 16.535-211.314.506-13.238-5.759 11.587-13.751 19.396-15.428 8.144-1.766 12.798-1.437 12.798-1.437-14.722-10.371-95.157 20.364-40.857 29.166 148.084 24.015 269.943-10.814 231.532-28.14M102.972 204.218s-67.431 16.016-23.879 21.832c18.389 2.462 55.047 1.905 89.193-.956 27.906-2.354 55.927-7.359 55.927-7.359s-9.84 4.214-16.959 9.075c-68.475 18.009-200.756 9.631-162.674-8.79 32.206-15.568 58.392-13.802 58.392-13.802m120.963 67.614c69.608-36.171 37.424-70.931 14.96-66.248-5.506 1.146-7.961 2.139-7.961 2.139s2.044-3.202 5.948-4.588c44.441-15.624 78.619 46.081-14.346 70.52 0 .001 1.077-.962 1.399-1.823" fill="#5382a1"/><path d="M181.968 0s38.55 38.563-36.563 97.862c-60.233 47.568-13.735 74.69-.025 105.678-35.159-31.722-60.961-59.647-43.651-85.637C127.136 79.752 197.522 61.255 181.968 0" fill="#f8981d"/><path d="M109.812 369.847c66.815 4.277 169.417-2.373 171.847-33.988 0 0-4.671 11.985-55.219 21.503-57.028 10.732-127.364 9.479-169.081 2.601.001-.001 8.54 7.068 52.453 9.884m-10.95 120.802c-6.303 5.467-12.96 8.536-18.934 8.536-8.527 0-13.134-5.113-13.134-13.314 0-8.871 4.936-15.357 24.739-15.357h7.328v20.135m17.393 19.623V449.53c0-15.517-8.85-25.756-30.188-25.756-12.457 0-23.369 3.076-32.238 6.999l2.56 10.752c6.983-2.563 16.022-4.949 24.894-4.949 12.292 0 17.58 4.949 17.58 15.181v7.677h-6.135c-29.865 0-43.337 11.593-43.337 28.994 0 15.017 8.878 23.553 25.594 23.553 10.745 0 18.766-4.436 26.264-10.928l1.361 9.22h13.645zm58.044 0h-21.692l-26.106-84.96h18.943l16.199 52.2 3.601 15.699c8.195-22.698 13.991-45.726 16.89-67.899h18.427c-4.937 27.977-13.821 58.685-26.262 84.96m83.213-19.623c-6.315 5.467-12.984 8.536-18.958 8.536-8.512 0-13.131-5.113-13.131-13.314 0-8.871 4.948-15.357 24.749-15.357h7.34v20.135m17.39 19.623V449.53c0-15.517-8.872-25.756-30.185-25.756-12.466 0-23.382 3.076-32.247 6.999l2.556 10.752c6.986-2.563 16.042-4.949 24.907-4.949 12.283 0 17.579 4.949 17.579 15.181v7.677h-6.145c-29.874 0-43.34 11.593-43.34 28.994 0 15.017 8.871 23.553 25.584 23.553 10.751 0 18.769-4.436 26.28-10.928l1.366 9.22h13.645zM30.32 524.7c-4.958 7.239-12.966 12.966-21.733 16.206L0 530.801c6.673-3.424 12.396-8.954 15.055-14.105 2.3-4.581 3.252-10.485 3.252-24.604v-96.995h18.478v95.666c-.001 18.876-1.51 26.501-6.465 33.937" fill="#5382a1"/></svg>
diff --git a/frontend/src/lib/components/icons/JavaScriptIcon.svelte b/frontend/src/lib/components/icons/JavaScriptIcon.svelte
index 23dce0a347..c6a4c75b71 100644
--- a/frontend/src/lib/components/icons/JavaScriptIcon.svelte
+++ b/frontend/src/lib/components/icons/JavaScriptIcon.svelte
@@ -1,6 +1,10 @@
-<script>
-	export let height = '24px'
-	export let width = '24px'
+<script lang="ts">
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg {width} {height} viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" version="1.1">
diff --git a/frontend/src/lib/components/icons/JiraIcon.svelte b/frontend/src/lib/components/icons/JiraIcon.svelte
index a40a9c06bc..6e1319240e 100644
--- a/frontend/src/lib/components/icons/JiraIcon.svelte
+++ b/frontend/src/lib/components/icons/JiraIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg
diff --git a/frontend/src/lib/components/icons/JsonIcon.svelte b/frontend/src/lib/components/icons/JsonIcon.svelte
index 2736d80406..4c0bf3370a 100644
--- a/frontend/src/lib/components/icons/JsonIcon.svelte
+++ b/frontend/src/lib/components/icons/JsonIcon.svelte
@@ -1,6 +1,10 @@
-<script>
-	export let height = '24px'
-	export let width = '24px'
+<script lang="ts">
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg {width} {height} xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"
diff --git a/frontend/src/lib/components/icons/JumpCloudIcon.svelte b/frontend/src/lib/components/icons/JumpCloudIcon.svelte
index 4d058a912c..583310ab9f 100644
--- a/frontend/src/lib/components/icons/JumpCloudIcon.svelte
+++ b/frontend/src/lib/components/icons/JumpCloudIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg version="1.1" id="svg2" x=0 y=0 {width} {height} viewBox="0 0 56 56" style="fill:currentcolor;">
diff --git a/frontend/src/lib/components/icons/KafkaIcon.svelte b/frontend/src/lib/components/icons/KafkaIcon.svelte
index 20324a3395..ce3e1f23f9 100644
--- a/frontend/src/lib/components/icons/KafkaIcon.svelte
+++ b/frontend/src/lib/components/icons/KafkaIcon.svelte
@@ -1,8 +1,11 @@
 <script lang="ts">
-	export let size: number = 16
-	export let color: string | undefined = undefined
-	let clazz = ''
-	export { clazz as class }
+	interface Props {
+		size?: number
+		color?: string | undefined
+		class?: string
+	}
+
+	let { size = 16, color = undefined, class: clazz = '' }: Props = $props()
 </script>
 
 <svg
diff --git a/frontend/src/lib/components/icons/KanidmIcon.svelte b/frontend/src/lib/components/icons/KanidmIcon.svelte
index 18f0e7bddf..6534a24e49 100644
--- a/frontend/src/lib/components/icons/KanidmIcon.svelte
+++ b/frontend/src/lib/components/icons/KanidmIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 150" x="0px" y="0px" {width} {height}
diff --git a/frontend/src/lib/components/icons/KeycloakIcon.svelte b/frontend/src/lib/components/icons/KeycloakIcon.svelte
index 43e0f06c96..8aaecf851d 100644
--- a/frontend/src/lib/components/icons/KeycloakIcon.svelte
+++ b/frontend/src/lib/components/icons/KeycloakIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg {width} {height} viewBox="0 0 500 500" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/frontend/src/lib/components/icons/LinkdingIcon.svelte b/frontend/src/lib/components/icons/LinkdingIcon.svelte
index d5af77333f..cc68b23733 100644
--- a/frontend/src/lib/components/icons/LinkdingIcon.svelte
+++ b/frontend/src/lib/components/icons/LinkdingIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg version="1.1" id="svg2" x=0 y=0 {width} {height} viewBox="0 0 56 56" style="fill:currentcolor;">
diff --git a/frontend/src/lib/components/icons/LinkedinIcon.svelte b/frontend/src/lib/components/icons/LinkedinIcon.svelte
index f2c79ee54a..c139c66ea4 100644
--- a/frontend/src/lib/components/icons/LinkedinIcon.svelte
+++ b/frontend/src/lib/components/icons/LinkedinIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" {width} {height} viewBox="0 0 30 30" style="enable-background:new 0 0 270 270; fill:currentcolor;">
diff --git a/frontend/src/lib/components/icons/MSSqlServerIcon.svelte b/frontend/src/lib/components/icons/MSSqlServerIcon.svelte
index 24fdcda841..0ad4d45ea1 100644
--- a/frontend/src/lib/components/icons/MSSqlServerIcon.svelte
+++ b/frontend/src/lib/components/icons/MSSqlServerIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg {width} {height} viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg">
diff --git a/frontend/src/lib/components/icons/MSTeamsIcon.svelte b/frontend/src/lib/components/icons/MSTeamsIcon.svelte
index c1b67498b2..0caf1558ed 100644
--- a/frontend/src/lib/components/icons/MSTeamsIcon.svelte
+++ b/frontend/src/lib/components/icons/MSTeamsIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg {width} {height} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="none"><path fill="#5059C9" d="M10.765 6.875h3.616c.342 0 .619.276.619.617v3.288a2.272 2.272 0 01-2.274 2.27h-.01a2.272 2.272 0 01-2.274-2.27V7.199c0-.179.145-.323.323-.323zM13.21 6.225c.808 0 1.464-.655 1.464-1.462 0-.808-.656-1.463-1.465-1.463s-1.465.655-1.465 1.463c0 .807.656 1.462 1.465 1.462z"/><path fill="#7B83EB" d="M8.651 6.225a2.114 2.114 0 002.117-2.112A2.114 2.114 0 008.65 2a2.114 2.114 0 00-2.116 2.112c0 1.167.947 2.113 2.116 2.113zM11.473 6.875h-5.97a.611.611 0 00-.596.625v3.75A3.669 3.669 0 008.488 15a3.669 3.669 0 003.582-3.75V7.5a.611.611 0 00-.597-.625z"/><path fill="#000000" d="M8.814 6.875v5.255a.598.598 0 01-.596.595H5.193a3.951 3.951 0 01-.287-1.476V7.5a.61.61 0 01.597-.624h3.31z" opacity=".1"/><path fill="#000000" d="M8.488 6.875v5.58a.6.6 0 01-.596.595H5.347a3.22 3.22 0 01-.267-.65 3.951 3.951 0 01-.172-1.15V7.498a.61.61 0 01.596-.624h2.985z" opacity=".2"/><path fill="#000000" d="M8.488 6.875v4.93a.6.6 0 01-.596.595H5.08a3.951 3.951 0 01-.172-1.15V7.498a.61.61 0 01.596-.624h2.985z" opacity=".2"/><path fill="#000000" d="M8.163 6.875v4.93a.6.6 0 01-.596.595H5.079a3.951 3.951 0 01-.172-1.15V7.498a.61.61 0 01.596-.624h2.66z" opacity=".2"/><path fill="#000000" d="M8.814 5.195v1.024c-.055.003-.107.006-.163.006-.055 0-.107-.003-.163-.006A2.115 2.115 0 016.593 4.6h1.625a.598.598 0 01.596.594z" opacity=".1"/><path fill="#000000" d="M8.488 5.52v.699a2.115 2.115 0 01-1.79-1.293h1.195a.598.598 0 01.595.594z" opacity=".2"/><path fill="#000000" d="M8.488 5.52v.699a2.115 2.115 0 01-1.79-1.293h1.195a.598.598 0 01.595.594z" opacity=".2"/><path fill="#000000" d="M8.163 5.52v.647a2.115 2.115 0 01-1.465-1.242h.87a.598.598 0 01.595.595z" opacity=".2"/><path fill="url(#microsoft-teams-color-16__paint0_linear_2372_494)" d="M1.597 4.925h5.969c.33 0 .597.267.597.596v5.958a.596.596 0 01-.597.596h-5.97A.596.596 0 011 11.479V5.521c0-.33.267-.596.597-.596z"/><path fill="#ffffff" d="M6.152 7.193H4.959v3.243h-.76V7.193H3.01v-.63h3.141v.63z"/><defs><linearGradient id="microsoft-teams-color-16__paint0_linear_2372_494" x1="2.244" x2="6.906" y1="4.46" y2="12.548" gradientUnits="userSpaceOnUse"><stop stop-color="#5A62C3"/><stop offset=".5" stop-color="#4D55BD"/><stop offset="1" stop-color="#3940AB"/></linearGradient></defs></svg>
\ No newline at end of file
diff --git a/frontend/src/lib/components/icons/Mail.svelte b/frontend/src/lib/components/icons/Mail.svelte
index ea112f8f8d..7593f2f228 100644
--- a/frontend/src/lib/components/icons/Mail.svelte
+++ b/frontend/src/lib/components/icons/Mail.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg
diff --git a/frontend/src/lib/components/icons/MailchimpIcon.svelte b/frontend/src/lib/components/icons/MailchimpIcon.svelte
index 9c2710decf..55930c704b 100644
--- a/frontend/src/lib/components/icons/MailchimpIcon.svelte
+++ b/frontend/src/lib/components/icons/MailchimpIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg {width} {height} viewBox="0 0 500 500" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/frontend/src/lib/components/icons/MailgunIcon.svelte b/frontend/src/lib/components/icons/MailgunIcon.svelte
index c06d13b167..e66c234e92 100644
--- a/frontend/src/lib/components/icons/MailgunIcon.svelte
+++ b/frontend/src/lib/components/icons/MailgunIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+    interface Props {
+        height?: string;
+        width?: string;
+    }
+
+    let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg {width} {height} viewBox="-0.5 0 257 257" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
diff --git a/frontend/src/lib/components/icons/MastodonIcon.svelte b/frontend/src/lib/components/icons/MastodonIcon.svelte
index a71f7a50df..36bd6576ce 100644
--- a/frontend/src/lib/components/icons/MastodonIcon.svelte
+++ b/frontend/src/lib/components/icons/MastodonIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg
diff --git a/frontend/src/lib/components/icons/MatrixIcon.svelte b/frontend/src/lib/components/icons/MatrixIcon.svelte
index e3e89601af..5347ac8a9a 100644
--- a/frontend/src/lib/components/icons/MatrixIcon.svelte
+++ b/frontend/src/lib/components/icons/MatrixIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg
diff --git a/frontend/src/lib/components/icons/MicrosoftIcon.svelte b/frontend/src/lib/components/icons/MicrosoftIcon.svelte
index d62b0ae3d9..dc46d8a564 100644
--- a/frontend/src/lib/components/icons/MicrosoftIcon.svelte
+++ b/frontend/src/lib/components/icons/MicrosoftIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg
diff --git a/frontend/src/lib/components/icons/MongodbIcon.svelte b/frontend/src/lib/components/icons/MongodbIcon.svelte
index 3889431ea7..c9b47e830e 100644
--- a/frontend/src/lib/components/icons/MongodbIcon.svelte
+++ b/frontend/src/lib/components/icons/MongodbIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg {width} {height} viewBox="0 0 168 168" xmlns="http://www.w3.org/2000/svg" style="fill:currentcolor;">
diff --git a/frontend/src/lib/components/icons/MqttIcon.svelte b/frontend/src/lib/components/icons/MqttIcon.svelte
index 05b7fa8a7d..293af03a92 100644
--- a/frontend/src/lib/components/icons/MqttIcon.svelte
+++ b/frontend/src/lib/components/icons/MqttIcon.svelte
@@ -1,8 +1,12 @@
 <script lang="ts">
-	export let size: number = 16
-	export let color: string | undefined = undefined
-	let clazz = ''
-	export { clazz as class }
+	interface Props {
+		size?: number;
+		color?: string | undefined;
+		class?: string;
+	}
+
+	let { size = 16, color = undefined, class: clazz = '' }: Props = $props();
+	
 </script>
 
 <svg
diff --git a/frontend/src/lib/components/icons/Mysql.svelte b/frontend/src/lib/components/icons/Mysql.svelte
index 90d9838463..1c0eab3c67 100644
--- a/frontend/src/lib/components/icons/Mysql.svelte
+++ b/frontend/src/lib/components/icons/Mysql.svelte
@@ -1,7 +1,11 @@
 <!-- Used under Fair Use: https://fr.wikipedia.org/wiki/Fichier:MySQL.svg -->
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg
diff --git a/frontend/src/lib/components/icons/NatsIcon.svelte b/frontend/src/lib/components/icons/NatsIcon.svelte
index 18c916d93b..f23f7f8eaa 100644
--- a/frontend/src/lib/components/icons/NatsIcon.svelte
+++ b/frontend/src/lib/components/icons/NatsIcon.svelte
@@ -1,8 +1,12 @@
 <script lang="ts">
-	export let size: number = 16
-	export let color: string | undefined = undefined
-	let clazz = ''
-	export { clazz as class }
+	interface Props {
+		size?: number;
+		color?: string | undefined;
+		class?: string;
+	}
+
+	let { size = 16, color = undefined, class: clazz = '' }: Props = $props();
+	
 </script>
 
 <svg
diff --git a/frontend/src/lib/components/icons/NextcloudIcon.svelte b/frontend/src/lib/components/icons/NextcloudIcon.svelte
index 789a9cf492..ff5e338723 100644
--- a/frontend/src/lib/components/icons/NextcloudIcon.svelte
+++ b/frontend/src/lib/components/icons/NextcloudIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg role="img" viewBox="0 0 24 24" {width} {height} xmlns="http://www.w3.org/2000/svg" style="fill:currentcolor;"
diff --git a/frontend/src/lib/components/icons/NocoDbIcon.svelte b/frontend/src/lib/components/icons/NocoDbIcon.svelte
index 39919cb63a..6b73f61ad6 100644
--- a/frontend/src/lib/components/icons/NocoDbIcon.svelte
+++ b/frontend/src/lib/components/icons/NocoDbIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 <svg version="1.0" xmlns="http://www.w3.org/2000/svg"
 x="0px"
diff --git a/frontend/src/lib/components/icons/NotionIcon.svelte b/frontend/src/lib/components/icons/NotionIcon.svelte
index 50efd6de1e..c12c39c374 100644
--- a/frontend/src/lib/components/icons/NotionIcon.svelte
+++ b/frontend/src/lib/components/icons/NotionIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg
diff --git a/frontend/src/lib/components/icons/NuIcon.svelte b/frontend/src/lib/components/icons/NuIcon.svelte
index 2af6655af8..c356300e58 100644
--- a/frontend/src/lib/components/icons/NuIcon.svelte
+++ b/frontend/src/lib/components/icons/NuIcon.svelte
@@ -1,6 +1,10 @@
-<script>
-	export let height = 24
-	export let width = 24
+<script lang="ts">
+	interface Props {
+		height?: number;
+		width?: number;
+	}
+
+	let { height = 24, width = 24 }: Props = $props();
 </script>
 
 <svg {width} {height} id="svg" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="50 50 300 300" style="display: block;"><path d="M0 0 C6.93 0 13.86 0 21 0 C21 38.61 21 77.22 21 117 C14.22645857 117 8.53138599 116.98586958 2 116 C2 112.04 2 108.08 2 104 C-0.10375 105.546875 -0.10375 105.546875 -2.25 107.125 C-14.08028546 115.39780955 -25.41138365 120.30986454 -40 119 C-49.64829412 117.07689721 -56.55713116 113.55978645 -63.375 106.5625 C-67.57662665 99.93685797 -67.37124042 92.76701998 -67.85671997 85.13790894 C-68.00601713 82.91021723 -68.17880156 80.68508098 -68.35327148 78.45922852 C-70.5354284 49.24476592 -70.5354284 49.24476592 -66.37548828 42.28027344 C-61.37591691 37.48343546 -54.90107126 35 -48 35 C-47.99120064 36.00691895 -47.99120064 36.00691895 -47.98222351 37.03417969 C-47.91811799 44.04275353 -47.83365385 51.05087548 -47.73754883 58.05908203 C-47.70436561 60.67197702 -47.67631329 63.28494255 -47.65356445 65.89794922 C-47.61989792 69.66143761 -47.56757351 73.42428339 -47.51171875 77.1875 C-47.50532883 78.34926758 -47.4989389 79.51103516 -47.49235535 80.70800781 C-47.37651596 87.14857181 -46.86191996 92.1856278 -44 98 C-39.07211074 102.19394831 -34.56906849 102.68837734 -28.1796875 102.44140625 C-18.0472244 101.03481125 -8.20012624 95.20012624 -1 88 C-0.87483363 85.26194796 -0.81392327 82.54788281 -0.79467773 79.80834961 C-0.78477814 78.94988937 -0.77487854 78.09142914 -0.76467896 77.20695496 C-0.73296691 74.35544641 -0.70826836 71.50392118 -0.68359375 68.65234375 C-0.66303259 66.68078669 -0.64203635 64.70923412 -0.62062073 62.73768616 C-0.56531347 57.53778715 -0.5159425 52.3378478 -0.46777344 47.13787842 C-0.41762143 41.83602286 -0.36190256 36.5342262 -0.30664062 31.23242188 C-0.19895325 20.82166293 -0.09804608 10.41085421 0 0 Z " transform="translate(193,170)" style="fill: #4F980A;"/><path d="M0 0 C6.17090994 5.20954713 8.74246099 10.18357236 9.68994141 18.19775391 C10.07290072 23.37522498 10.16346855 28.564741 10.296875 33.75341797 C10.45326878 37.43355901 10.77431278 41.08446193 11.09375 44.75390625 C12.51153769 64.11321466 12.51153769 64.11321466 8.81298828 69.37255859 C3.78222552 73.8354667 -2.76794162 77.0625 -9.5625 77.0625 C-9.56796844 76.03678894 -9.56796844 76.03678894 -9.57354736 74.99035645 C-9.61546478 67.85195329 -9.68487596 60.71418754 -9.77001953 53.57617188 C-9.80037523 50.91458389 -9.81942114 48.2535998 -9.83349609 45.59179688 C-9.85498215 41.75868357 -9.90166563 37.92656398 -9.953125 34.09375 C-9.95435364 32.91010864 -9.95558228 31.72646729 -9.95684814 30.50695801 C-10.07870172 23.58233921 -10.80347291 18.93760458 -14.5625 13.0625 C-19.75665219 8.90717825 -26.22877464 9.37883486 -32.5625 10.0625 C-41.85301864 12.09720036 -49.87659296 17.37659296 -56.5625 24.0625 C-56.78018018 26.86199837 -56.87392652 29.56549727 -56.88134766 32.36767578 C-56.89139328 33.22628204 -56.9014389 34.08488831 -56.91178894 34.96951294 C-56.94275026 37.8156058 -56.95969189 40.66160406 -56.9765625 43.5078125 C-56.99526375 45.47794415 -57.01483636 47.4480677 -57.0352478 49.41818237 C-57.08668529 54.60983518 -57.1262487 59.80151399 -57.16339111 64.99328613 C-57.20335811 70.28855889 -57.25448368 75.5837224 -57.3046875 80.87890625 C-57.40158433 91.27336858 -57.48491405 101.66787557 -57.5625 112.0625 C-64.4925 112.0625 -71.4225 112.0625 -78.5625 112.0625 C-78.5625 73.4525 -78.5625 34.8425 -78.5625 -4.9375 C-68.4375 -4.9375 -68.4375 -4.9375 -64 -4.4375 C-61.8034375 -4.19 -61.8034375 -4.19 -59.5625 -3.9375 C-59.2325 -0.3075 -58.9025 3.3225 -58.5625 7.0625 C-57.88445312 6.61519531 -57.20640625 6.16789062 -56.5078125 5.70703125 C-39.00211665 -5.66439722 -19.20415486 -13.78851193 0 0 Z " transform="translate(134.5625,117.9375)" style="fill: #26B346;"/><path d="M0 0 C3.34699538 1.27754112 6.45190204 2.71552371 9.5703125 4.4765625 C10.89349487 5.22268799 10.89349487 5.22268799 12.2434082 5.98388672 C13.1943335 6.5254541 14.14525879 7.06702148 15.125 7.625 C16.13199951 8.19621582 17.13899902 8.76743164 18.17651367 9.35595703 C27.07885409 14.42878382 35.8930231 19.64600095 44.69506836 24.89038086 C53.88854921 30.36245557 63.13968459 35.72600245 72.42504883 41.04052734 C74.40440628 42.17579125 76.37761289 43.32187523 78.34326172 44.48071289 C80.93162593 46.00735157 80.93162593 46.00735157 83.45751953 47.15795898 C86.67435707 48.77571441 88.55948647 49.84425335 89.87182617 53.28735352 C91.03664976 59.85748883 91.67777526 68.95501885 87.84570312 74.74365234 C84.38870949 77.97907357 80.05500078 79.76703225 75.77783203 81.68554688 C70.84375759 84.02032072 66.1830968 86.84463164 61.4699707 89.59158325 C59.06990521 90.98306075 56.65643471 92.35034265 54.24282837 93.71815491 C46.93425244 97.86215345 39.69175768 102.11067741 32.47402954 106.41061401 C27.65400632 109.2815708 22.8272111 112.14115069 18 115 C16.67452148 115.78552246 16.67452148 115.78552246 15.32226562 116.58691406 C13.05475038 117.92386695 10.77965686 119.2463902 8.5 120.5625 C7.54818848 121.12698853 7.54818848 121.12698853 6.57714844 121.70288086 C4.84375 122.69140625 4.84375 122.69140625 2 124 C-2.20059624 122.59980125 -3.19051525 119.63174123 -5.1875 115.9375 C-5.55552734 115.27427734 -5.92355469 114.61105469 -6.30273438 113.92773438 C-7.21012062 112.28972543 -8.10615573 110.64543779 -9 109 C-5.15078128 104.74717388 -1.23840292 102.22131326 3.8125 99.5625 C5.43879937 98.68208347 7.06373055 97.79913633 8.6875 96.9140625 C9.98300781 96.20878418 9.98300781 96.20878418 11.3046875 95.48925781 C19.14796406 91.15556334 26.8382037 86.54533596 34.56542969 82.00927734 C37.67516142 80.19003565 40.79006514 78.38021857 43.90785217 76.57484436 C46.59478583 75.01828741 49.2792667 73.45752949 51.96347046 71.89627075 C53.27543727 71.13444366 54.58844192 70.37440098 55.90249634 69.61618042 C57.73863704 68.55624679 59.5708615 67.48983218 61.40234375 66.421875 C62.45929443 65.80924805 63.51624512 65.19662109 64.60522461 64.56542969 C67.09869419 63.2225852 67.09869419 63.2225852 68 61 C67.28279785 60.73010254 66.5655957 60.46020508 65.82666016 60.18212891 C62.99143436 58.99641779 60.43187242 57.62543615 57.7734375 56.0859375 C56.24601929 55.20373535 56.24601929 55.20373535 54.68774414 54.30371094 C53.59453857 53.66723633 52.50133301 53.03076172 51.375 52.375 C50.22070176 51.70591662 49.06632197 51.03697392 47.91186523 50.36816406 C38.46416027 44.88618345 29.06684964 39.31977925 19.67797852 33.73779297 C10.16199104 28.08266556 0.59653461 22.51713074 -9 17 C-7.51481201 12.95698825 -5.57122002 9.38853744 -3.375 5.6875 C-2.74335938 4.61886719 -2.11171875 3.55023438 -1.4609375 2.44921875 C-0.97882813 1.64097656 -0.49671875 0.83273438 0 0 Z " transform="translate(255,140)" style="fill: #E4E4E4;"/></svg>
diff --git a/frontend/src/lib/components/icons/OpenaiIcon.svelte b/frontend/src/lib/components/icons/OpenaiIcon.svelte
index d21d281c65..cd7d441b7d 100644
--- a/frontend/src/lib/components/icons/OpenaiIcon.svelte
+++ b/frontend/src/lib/components/icons/OpenaiIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg
diff --git a/frontend/src/lib/components/icons/OracleDBIcon.svelte b/frontend/src/lib/components/icons/OracleDBIcon.svelte
index 86dc7ba47c..39d2611306 100644
--- a/frontend/src/lib/components/icons/OracleDBIcon.svelte
+++ b/frontend/src/lib/components/icons/OracleDBIcon.svelte
@@ -1,6 +1,10 @@
-<script>
-	export let height = '24px'
-	export let width = '24px'
+<script lang="ts">
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg
diff --git a/frontend/src/lib/components/icons/PHPIcon.svelte b/frontend/src/lib/components/icons/PHPIcon.svelte
index c95f04589e..1729042ec7 100644
--- a/frontend/src/lib/components/icons/PHPIcon.svelte
+++ b/frontend/src/lib/components/icons/PHPIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg
diff --git a/frontend/src/lib/components/icons/PaintbrushOff.svelte b/frontend/src/lib/components/icons/PaintbrushOff.svelte
index 3358c19e67..cad5f9a518 100644
--- a/frontend/src/lib/components/icons/PaintbrushOff.svelte
+++ b/frontend/src/lib/components/icons/PaintbrushOff.svelte
@@ -1,5 +1,9 @@
 <script lang="ts">
-	export let size = 24
+	interface Props {
+		size?: number;
+	}
+
+	let { size = 24 }: Props = $props();
 </script>
 
 <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/frontend/src/lib/components/icons/PineconeIcon.svelte b/frontend/src/lib/components/icons/PineconeIcon.svelte
index 7cba578545..06010a30f6 100644
--- a/frontend/src/lib/components/icons/PineconeIcon.svelte
+++ b/frontend/src/lib/components/icons/PineconeIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg
diff --git a/frontend/src/lib/components/icons/PostgresIcon.svelte b/frontend/src/lib/components/icons/PostgresIcon.svelte
index c7d6fe3947..204306bf9c 100644
--- a/frontend/src/lib/components/icons/PostgresIcon.svelte
+++ b/frontend/src/lib/components/icons/PostgresIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg
diff --git a/frontend/src/lib/components/icons/PowershellIcon.svelte b/frontend/src/lib/components/icons/PowershellIcon.svelte
index 1ba5c0db6e..e687da2937 100644
--- a/frontend/src/lib/components/icons/PowershellIcon.svelte
+++ b/frontend/src/lib/components/icons/PowershellIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg
diff --git a/frontend/src/lib/components/icons/PushoverIcon.svelte b/frontend/src/lib/components/icons/PushoverIcon.svelte
index b80dbbcb48..8b3ebeb4e9 100644
--- a/frontend/src/lib/components/icons/PushoverIcon.svelte
+++ b/frontend/src/lib/components/icons/PushoverIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg {width} {height} viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
diff --git a/frontend/src/lib/components/icons/QRCodeIcon.svelte b/frontend/src/lib/components/icons/QRCodeIcon.svelte
index 3a004f3c32..f7d2aacfd6 100644
--- a/frontend/src/lib/components/icons/QRCodeIcon.svelte
+++ b/frontend/src/lib/components/icons/QRCodeIcon.svelte
@@ -1,7 +1,11 @@
 <script lang="ts">
 	import { QrCode } from 'lucide-svelte'
 
-	export let height = 24
+	interface Props {
+		height?: number;
+	}
+
+	let { height = 24 }: Props = $props();
 </script>
 
 <QrCode size={height} />
diff --git a/frontend/src/lib/components/icons/QuickbooksIcon.svelte b/frontend/src/lib/components/icons/QuickbooksIcon.svelte
index 2561789c4e..aec9eebc79 100644
--- a/frontend/src/lib/components/icons/QuickbooksIcon.svelte
+++ b/frontend/src/lib/components/icons/QuickbooksIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg fill="#000000" {width} {height} viewBox="0 0 14 14" role="img" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><path d="m 6.3574454,12.980221 c -2.771173,-0.3002 -4.964916,-2.4641 -5.322984,-5.2506004 -0.04147,-0.3227 -0.04147,-1.1292 0,-1.452 0.261842,-2.0377 1.477656,-3.7499 3.307903,-4.6586 1.451944,-0.72079999 3.206807,-0.81769999 4.720995,-0.2606 1.9314676,0.7107 3.3629446,2.3552 3.8109276,4.378 0.163139,0.7367 0.163139,1.7977 0,2.5344 -0.399836,1.8054004 -1.582178,3.3192004 -3.2161976,4.1176004 -0.581119,0.284 -1.052565,0.4358 -1.690295,0.5444 -0.37024,0.063 -1.232158,0.088 -1.610349,0.047 z m 0.369588,-5.4090004 0,-2.9699 -0.805174,-0.01 c -0.922695,-0.01 -1.197335,0.014 -1.551433,0.1317 -0.775997,0.2573 -1.348379,0.8733 -1.552945,1.6713 -0.08307,0.324 -0.09496,0.8089 -0.02734,1.1152 0.182766,0.8278 0.775652,1.4916 1.582187,1.7713 0.243147,0.084 0.302996,0.094 0.618963,0.1046 l 0.349789,0.011 0,-0.422 0,-0.4219 -0.270591,-0.013 c -0.430318,-0.021 -0.732893,-0.1548 -1.036493,-0.4592 -0.366949,-0.3679 -0.512167,-0.8966 -0.396379,-1.4431 0.09293,-0.4385 0.396426,-0.8211 0.805891,-1.016 0.301106,-0.1433 0.424681,-0.1643 0.964869,-0.1643 l 0.460686,0 0,2.5299 c 0,1.3914 0.0082,2.5381004 0.01824,2.5481004 0.01004,0.01 0.203079,0.015 0.428987,0.011 l 0.410742,-0.01 0,-2.9699004 z m 2.494721,1.7933 c 0.8233966,-0.1334 1.5424896,-0.69 1.8386366,-1.4232 0.13689,-0.3389 0.174945,-0.5432 0.177105,-0.9509 0.0017,-0.3194 -0.0079,-0.4196 -0.05792,-0.6054 -0.189917,-0.7053 -0.652274,-1.2639 -1.3011336,-1.5721 -0.315182,-0.1496 -0.524716,-0.2001 -0.901552,-0.2172 l -0.337261,-0.015 0.0073,0.4328 0.0073,0.4328 0.30359,0.016 c 0.326755,0.017 0.452859,0.052 0.670744,0.1857 0.32218,0.1975 0.5633516,0.483 0.6823896,0.8079 0.07677,0.2096 0.09504,0.6947 0.03513,0.9329 -0.107464,0.4274 -0.3888116,0.7767 -0.7827516,0.9719 -0.287054,0.1422 -0.52924,0.1854 -1.047698,0.1865 l -0.402587,0.001 0,-2.5476 0,-2.5475 -0.435586,0 -0.435586,0 0,2.9699 0,2.9699 0.904171,-2e-4 c 0.505853,0 0.979765,-0.012 1.075766,-0.028 z"/></svg>
\ No newline at end of file
diff --git a/frontend/src/lib/components/icons/ReactIcon.svelte b/frontend/src/lib/components/icons/ReactIcon.svelte
index fc286af4e0..791235b5df 100644
--- a/frontend/src/lib/components/icons/ReactIcon.svelte
+++ b/frontend/src/lib/components/icons/ReactIcon.svelte
@@ -1,6 +1,10 @@
-<script>
-	export let height = '24px'
-	export let width = '24px'
+<script lang="ts">
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg {width} {height} viewBox="0 0 600 600" xmlns="http://www.w3.org/2000/svg" version="1.1">
diff --git a/frontend/src/lib/components/icons/RedditIcon.svelte b/frontend/src/lib/components/icons/RedditIcon.svelte
index e0a31d4566..e5b65d7fc7 100644
--- a/frontend/src/lib/components/icons/RedditIcon.svelte
+++ b/frontend/src/lib/components/icons/RedditIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg {width} {height} viewBox="0 0 168 168" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/frontend/src/lib/components/icons/ResendIcon.svelte b/frontend/src/lib/components/icons/ResendIcon.svelte
index 18d061f8a6..28e51bc152 100644
--- a/frontend/src/lib/components/icons/ResendIcon.svelte
+++ b/frontend/src/lib/components/icons/ResendIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg {width} {height} viewBox="0 0 600 600" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/frontend/src/lib/components/icons/RestIcon.svelte b/frontend/src/lib/components/icons/RestIcon.svelte
index bf91087e6b..eb0833ed0e 100644
--- a/frontend/src/lib/components/icons/RestIcon.svelte
+++ b/frontend/src/lib/components/icons/RestIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg
diff --git a/frontend/src/lib/components/icons/RssIcon.svelte b/frontend/src/lib/components/icons/RssIcon.svelte
index 74083f5ed5..4c340a7adc 100644
--- a/frontend/src/lib/components/icons/RssIcon.svelte
+++ b/frontend/src/lib/components/icons/RssIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg
diff --git a/frontend/src/lib/components/icons/RustIcon.svelte b/frontend/src/lib/components/icons/RustIcon.svelte
index 36b3ed30c1..364dece5be 100644
--- a/frontend/src/lib/components/icons/RustIcon.svelte
+++ b/frontend/src/lib/components/icons/RustIcon.svelte
@@ -1,6 +1,10 @@
-<script>
-	export let height = '24px'
-	export let width = '24px'
+<script lang="ts">
+  interface Props {
+    height?: string;
+    width?: string;
+  }
+
+  let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg
diff --git a/frontend/src/lib/components/icons/S3Icon.svelte b/frontend/src/lib/components/icons/S3Icon.svelte
index aa79085d5e..e4eda669c2 100644
--- a/frontend/src/lib/components/icons/S3Icon.svelte
+++ b/frontend/src/lib/components/icons/S3Icon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg
diff --git a/frontend/src/lib/components/icons/SchedulePollIcon.svelte b/frontend/src/lib/components/icons/SchedulePollIcon.svelte
index df8f258106..90fd9eca1f 100644
--- a/frontend/src/lib/components/icons/SchedulePollIcon.svelte
+++ b/frontend/src/lib/components/icons/SchedulePollIcon.svelte
@@ -1,6 +1,11 @@
-<script>
-	// You can pass props for flexibility (e.g., size, color)
-	export let size = 24
+<script lang="ts">
+	
+	interface Props {
+		// You can pass props for flexibility (e.g., size, color)
+		size?: number;
+	}
+
+	let { size = 24 }: Props = $props();
 </script>
 
 <svg
diff --git a/frontend/src/lib/components/icons/SendflakeIcon.svelte b/frontend/src/lib/components/icons/SendflakeIcon.svelte
index 9376d77391..3dfbe4a81b 100644
--- a/frontend/src/lib/components/icons/SendflakeIcon.svelte
+++ b/frontend/src/lib/components/icons/SendflakeIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg
diff --git a/frontend/src/lib/components/icons/SendgridIcon.svelte b/frontend/src/lib/components/icons/SendgridIcon.svelte
index 4ee7ff749b..e493c42357 100644
--- a/frontend/src/lib/components/icons/SendgridIcon.svelte
+++ b/frontend/src/lib/components/icons/SendgridIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg
diff --git a/frontend/src/lib/components/icons/ShopifyIcon.svelte b/frontend/src/lib/components/icons/ShopifyIcon.svelte
index f6ba949118..5711eb348a 100644
--- a/frontend/src/lib/components/icons/ShopifyIcon.svelte
+++ b/frontend/src/lib/components/icons/ShopifyIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg
diff --git a/frontend/src/lib/components/icons/Slack.svelte b/frontend/src/lib/components/icons/Slack.svelte
index a95b974693..2db4d1871f 100644
--- a/frontend/src/lib/components/icons/Slack.svelte
+++ b/frontend/src/lib/components/icons/Slack.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg {width} {height} version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
diff --git a/frontend/src/lib/components/icons/SnowflakeIcon.svelte b/frontend/src/lib/components/icons/SnowflakeIcon.svelte
index 85ddd68057..585292d545 100644
--- a/frontend/src/lib/components/icons/SnowflakeIcon.svelte
+++ b/frontend/src/lib/components/icons/SnowflakeIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 146.36 139.16" {width} {height} style="fill: currentcolor;"
diff --git a/frontend/src/lib/components/icons/SparklesOffIcon.svelte b/frontend/src/lib/components/icons/SparklesOffIcon.svelte
index 0346e820fc..b32040b720 100644
--- a/frontend/src/lib/components/icons/SparklesOffIcon.svelte
+++ b/frontend/src/lib/components/icons/SparklesOffIcon.svelte
@@ -1,11 +1,16 @@
 <script lang="ts">
-	export let size = '24'
+	interface Props {
+		size?: string
+		class?: string
+	}
+
+	let { size = '24', class: classNames = '' }: Props = $props()
 </script>
 
 <svg
 	width={size}
 	height={size}
-	class={$$props.class}
+	class={classNames}
 	viewBox="0 0 24 24"
 	fill="none"
 	xmlns="http://www.w3.org/2000/svg"
diff --git a/frontend/src/lib/components/icons/SpotifyIcon.svelte b/frontend/src/lib/components/icons/SpotifyIcon.svelte
index ce0da3d0d0..25b851f4d5 100644
--- a/frontend/src/lib/components/icons/SpotifyIcon.svelte
+++ b/frontend/src/lib/components/icons/SpotifyIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg {width} {height} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512">
diff --git a/frontend/src/lib/components/icons/SquareIcon.svelte b/frontend/src/lib/components/icons/SquareIcon.svelte
index 1df73a388b..2720650c74 100644
--- a/frontend/src/lib/components/icons/SquareIcon.svelte
+++ b/frontend/src/lib/components/icons/SquareIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" {width} {height} viewBox="0 0 30 30" style="fill:currentcolor;">
diff --git a/frontend/src/lib/components/icons/StripeIcon.svelte b/frontend/src/lib/components/icons/StripeIcon.svelte
index db3f6ae34b..a06e39c1c9 100644
--- a/frontend/src/lib/components/icons/StripeIcon.svelte
+++ b/frontend/src/lib/components/icons/StripeIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" {width} {height} viewBox="0 0 48 48" style="fill:currentcolor;">
diff --git a/frontend/src/lib/components/icons/SupabaseIcon.svelte b/frontend/src/lib/components/icons/SupabaseIcon.svelte
index 0299482fcf..5e2bed8b61 100644
--- a/frontend/src/lib/components/icons/SupabaseIcon.svelte
+++ b/frontend/src/lib/components/icons/SupabaseIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg {width} {height} viewBox="0 0 168 168" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/frontend/src/lib/components/icons/SurrealdbIcon.svelte b/frontend/src/lib/components/icons/SurrealdbIcon.svelte
index 8a12c6ec32..c882c7ba53 100644
--- a/frontend/src/lib/components/icons/SurrealdbIcon.svelte
+++ b/frontend/src/lib/components/icons/SurrealdbIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg {width} {height} viewBox="0 0 168 168" xmlns="http://www.w3.org/2000/svg" style="fill:currentcolor;">
diff --git a/frontend/src/lib/components/icons/SvelteIcon.svelte b/frontend/src/lib/components/icons/SvelteIcon.svelte
index 6f6dfcc528..c0de67a482 100644
--- a/frontend/src/lib/components/icons/SvelteIcon.svelte
+++ b/frontend/src/lib/components/icons/SvelteIcon.svelte
@@ -1,6 +1,10 @@
-<script>
-	export let height = '24px'
-	export let width = '24px'
+<script lang="ts">
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg {width} {height} viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" version="1.1">
diff --git a/frontend/src/lib/components/icons/TelegramIcon.svelte b/frontend/src/lib/components/icons/TelegramIcon.svelte
index 6d06b2bccd..eaa6118e55 100644
--- a/frontend/src/lib/components/icons/TelegramIcon.svelte
+++ b/frontend/src/lib/components/icons/TelegramIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" {width} {height} viewBox="0 0 50 50" style="fill:currentcolor;">
diff --git a/frontend/src/lib/components/icons/TogglIcon.svelte b/frontend/src/lib/components/icons/TogglIcon.svelte
index 3b4a1a74a5..f621ae5c38 100644
--- a/frontend/src/lib/components/icons/TogglIcon.svelte
+++ b/frontend/src/lib/components/icons/TogglIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg
diff --git a/frontend/src/lib/components/icons/TrelloIcon.svelte b/frontend/src/lib/components/icons/TrelloIcon.svelte
index b0817ce8f8..c93ecc1b70 100644
--- a/frontend/src/lib/components/icons/TrelloIcon.svelte
+++ b/frontend/src/lib/components/icons/TrelloIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg {width} {height} viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid"><defs><linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="a"><stop stop-color="#0091E6" offset="0%"/><stop stop-color="#0079BF" offset="100%"/></linearGradient></defs><rect fill="url(#a)" width="256" height="256" rx="25"/><rect fill="#FFF" x="144.64" y="33.28" width="78.08" height="112" rx="12"/><rect fill="#FFF" x="33.28" y="33.28" width="78.08" height="176" rx="12"/></svg>
\ No newline at end of file
diff --git a/frontend/src/lib/components/icons/TwilioIcon.svelte b/frontend/src/lib/components/icons/TwilioIcon.svelte
index 1e56b9c95e..88a9ff9613 100644
--- a/frontend/src/lib/components/icons/TwilioIcon.svelte
+++ b/frontend/src/lib/components/icons/TwilioIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+    interface Props {
+        height?: string;
+        width?: string;
+    }
+
+    let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg {width} {height} viewBox="0 0 256 256" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
diff --git a/frontend/src/lib/components/icons/TypeformIcon.svelte b/frontend/src/lib/components/icons/TypeformIcon.svelte
index 0e3ad844f5..c9f0101c0b 100644
--- a/frontend/src/lib/components/icons/TypeformIcon.svelte
+++ b/frontend/src/lib/components/icons/TypeformIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg
diff --git a/frontend/src/lib/components/icons/VismaIcon.svelte b/frontend/src/lib/components/icons/VismaIcon.svelte
index b735426965..467d69e196 100644
--- a/frontend/src/lib/components/icons/VismaIcon.svelte
+++ b/frontend/src/lib/components/icons/VismaIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg {width} {height} viewBox="0 0 36 25" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/frontend/src/lib/components/icons/VueIcon.svelte b/frontend/src/lib/components/icons/VueIcon.svelte
index a04b3dd918..30856c5144 100644
--- a/frontend/src/lib/components/icons/VueIcon.svelte
+++ b/frontend/src/lib/components/icons/VueIcon.svelte
@@ -1,6 +1,10 @@
-<script>
-	export let height = '24px'
-	export let width = '24px'
+<script lang="ts">
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg {width} {height} viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" version="1.1">
diff --git a/frontend/src/lib/components/icons/WebdavIcon.svelte b/frontend/src/lib/components/icons/WebdavIcon.svelte
index 31a1213ac6..b2175f8c01 100644
--- a/frontend/src/lib/components/icons/WebdavIcon.svelte
+++ b/frontend/src/lib/components/icons/WebdavIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg {width} {height} viewBox="0 0 168 168" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/frontend/src/lib/components/icons/WindmillIcon.svelte b/frontend/src/lib/components/icons/WindmillIcon.svelte
index 2aef2fd20b..500691faab 100644
--- a/frontend/src/lib/components/icons/WindmillIcon.svelte
+++ b/frontend/src/lib/components/icons/WindmillIcon.svelte
@@ -1,27 +1,32 @@
 <script lang="ts">
 	import { customIcon } from './store'
 
-	export let height = '24px'
-	export let width = '24px'
-	export let white = false
-	export let spin: 'slow' | 'medium' | 'fast' | 'veryfast' | undefined = undefined
+	interface Props {
+		height?: string
+		width?: string
+		white?: boolean
+		spin?: 'slow' | 'medium' | 'fast' | 'veryfast' | undefined
+		class?: string
+	}
+
+	let {
+		height = '24px',
+		width = '24px',
+		white = false,
+		spin = undefined,
+		class: classNames = ''
+	}: Props = $props()
 </script>
 
 {#if customIcon.white || customIcon.normal}
 	{#if white}
-		<img src={customIcon.white} alt="Windmill Custom icon" {width} {height} class={$$props.class} />
+		<img src={customIcon.white} alt="Windmill Custom icon" {width} {height} class={classNames} />
 	{:else}
-		<img
-			src={customIcon.normal}
-			alt="Windmill Custom icon"
-			{width}
-			{height}
-			class={$$props.class}
-		/>
+		<img src={customIcon.normal} alt="Windmill Custom icon" {width} {height} class={classNames} />
 	{/if}
 {:else}
 	<svg
-		class={$$props.class}
+		class={classNames}
 		class:animate-[spin_2s_linear_infinite]={spin === 'veryfast'}
 		class:animate-[spin_5s_linear_infinite]={spin === 'fast'}
 		class:animate-[spin_15s_linear_infinite]={spin === 'medium'}
diff --git a/frontend/src/lib/components/icons/WindmillIcon2.svelte b/frontend/src/lib/components/icons/WindmillIcon2.svelte
index e274fbded0..ef4b525998 100644
--- a/frontend/src/lib/components/icons/WindmillIcon2.svelte
+++ b/frontend/src/lib/components/icons/WindmillIcon2.svelte
@@ -1,10 +1,24 @@
+<!-- @migration-task Error while migrating Svelte code: $$props is used together with named props in a way that cannot be automatically migrated. -->
 <script lang="ts">
+	import { run } from 'svelte/legacy'
+
 	import { customIcon } from './store'
 
-	export let white = false
-	export let size = '24px'
-	export let color: string | undefined = undefined
-	export let spin: 'slow' | 'medium' | 'fast' | 'veryfast' | undefined = undefined
+	interface Props {
+		white?: boolean
+		size?: string
+		color?: string | undefined
+		spin?: 'slow' | 'medium' | 'fast' | 'veryfast' | undefined
+		class?: string
+	}
+
+	let {
+		white = false,
+		size = '24px',
+		color = undefined,
+		spin = undefined,
+		class: classNames = ''
+	}: Props = $props()
 
 	function hslToHex(h, s, l) {
 		s /= 100
@@ -102,9 +116,11 @@
 		return hslToHex(h, s, l)
 	}
 
-	let lessSaturatedColor: string | undefined
+	let lessSaturatedColor: string | undefined = $state()
 
-	$: color ? (lessSaturatedColor = reduceSaturation(color, -16)) : (lessSaturatedColor = undefined)
+	run(() => {
+		color ? (lessSaturatedColor = reduceSaturation(color, -16)) : (lessSaturatedColor = undefined)
+	})
 </script>
 
 {#if customIcon.white || customIcon.normal}
@@ -114,7 +130,7 @@
 			alt="Windmill Custom icon"
 			width={size}
 			height={size}
-			class={$$props.class}
+			class={classNames}
 		/>
 	{:else}
 		<img
@@ -122,12 +138,12 @@
 			alt="Windmill Custom icon"
 			width={size}
 			height={size}
-			class={$$props.class}
+			class={classNames}
 		/>
 	{/if}
 {:else}
 	<svg
-		class={$$props.class}
+		class={classNames}
 		class:animate-[spin_2s_linear_infinite]={spin === 'veryfast'}
 		class:animate-[spin_5s_linear_infinite]={spin === 'fast'}
 		class:animate-[spin_15s_linear_infinite]={spin === 'medium'}
diff --git a/frontend/src/lib/components/icons/XeroIcon.svelte b/frontend/src/lib/components/icons/XeroIcon.svelte
index 4f2427702a..6fe5784ef5 100644
--- a/frontend/src/lib/components/icons/XeroIcon.svelte
+++ b/frontend/src/lib/components/icons/XeroIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg
diff --git a/frontend/src/lib/components/icons/ZammadIcon.svelte b/frontend/src/lib/components/icons/ZammadIcon.svelte
index 2e1b06eba0..de1c744579 100644
--- a/frontend/src/lib/components/icons/ZammadIcon.svelte
+++ b/frontend/src/lib/components/icons/ZammadIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+	interface Props {
+		height?: string;
+		width?: string;
+	}
+
+	let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg {width} {height} viewBox="0 0 168 168" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/frontend/src/lib/components/icons/ZendeskIcon.svelte b/frontend/src/lib/components/icons/ZendeskIcon.svelte
index 59603738ee..c52b7295f2 100644
--- a/frontend/src/lib/components/icons/ZendeskIcon.svelte
+++ b/frontend/src/lib/components/icons/ZendeskIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+    interface Props {
+        height?: string;
+        width?: string;
+    }
+
+    let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg {width} {height} viewBox="0 -30.5 256 256" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
diff --git a/frontend/src/lib/components/icons/ZitadelIcon.svelte b/frontend/src/lib/components/icons/ZitadelIcon.svelte
index 456d456c5f..4548180b9b 100644
--- a/frontend/src/lib/components/icons/ZitadelIcon.svelte
+++ b/frontend/src/lib/components/icons/ZitadelIcon.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let height = '24px'
-	export let width = '24px'
+    interface Props {
+        height?: string;
+        width?: string;
+    }
+
+    let { height = '24px', width = '24px' }: Props = $props();
 </script>
 
 <svg {width} {height} viewBox="0 0 467 467" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
diff --git a/frontend/src/lib/components/icons/brands/Auth0.svelte b/frontend/src/lib/components/icons/brands/Auth0.svelte
index 43e0a89880..8d6696411c 100644
--- a/frontend/src/lib/components/icons/brands/Auth0.svelte
+++ b/frontend/src/lib/components/icons/brands/Auth0.svelte
@@ -1,8 +1,12 @@
 <script lang="ts">
-	export let size: number = 16
-	export let style: string = 'fill: white;'
-	let clazz = ''
-	export { clazz as class }
+	interface Props {
+		size?: number;
+		style?: string;
+		class?: string;
+	}
+
+	let { size = 16, style = 'fill: white;', class: clazz = '' }: Props = $props();
+	
 </script>
 
 <svg
diff --git a/frontend/src/lib/components/icons/brands/Discord.svelte b/frontend/src/lib/components/icons/brands/Discord.svelte
index 9321bf89f9..ed752fd727 100644
--- a/frontend/src/lib/components/icons/brands/Discord.svelte
+++ b/frontend/src/lib/components/icons/brands/Discord.svelte
@@ -1,8 +1,12 @@
 <script lang="ts">
-	export let size: number = 16
-	export let style: string = 'fill: white;'
-	let clazz = ''
-	export { clazz as class }
+	interface Props {
+		size?: number;
+		style?: string;
+		class?: string;
+	}
+
+	let { size = 16, style = 'fill: white;', class: clazz = '' }: Props = $props();
+	
 </script>
 
 <svg
diff --git a/frontend/src/lib/components/icons/brands/Github.svelte b/frontend/src/lib/components/icons/brands/Github.svelte
index 11d9833e0c..b5490236f2 100644
--- a/frontend/src/lib/components/icons/brands/Github.svelte
+++ b/frontend/src/lib/components/icons/brands/Github.svelte
@@ -1,8 +1,12 @@
 <script lang="ts">
-	export let size: number = 16
-	export let style: string = 'fill: white;'
-	let clazz = ''
-	export { clazz as class }
+	interface Props {
+		size?: number;
+		style?: string;
+		class?: string;
+	}
+
+	let { size = 16, style = 'fill: white;', class: clazz = '' }: Props = $props();
+	
 </script>
 
 <svg
diff --git a/frontend/src/lib/components/icons/brands/Gitlab.svelte b/frontend/src/lib/components/icons/brands/Gitlab.svelte
index 27f2966a2f..7cd164c65d 100644
--- a/frontend/src/lib/components/icons/brands/Gitlab.svelte
+++ b/frontend/src/lib/components/icons/brands/Gitlab.svelte
@@ -1,8 +1,12 @@
 <script lang="ts">
-	export let size: number = 16
-	export let style: string = 'fill: white;'
-	let clazz = ''
-	export { clazz as class }
+	interface Props {
+		size?: number;
+		style?: string;
+		class?: string;
+	}
+
+	let { size = 16, style = 'fill: white;', class: clazz = '' }: Props = $props();
+	
 </script>
 
 <svg
diff --git a/frontend/src/lib/components/icons/brands/Google.svelte b/frontend/src/lib/components/icons/brands/Google.svelte
index d348cfa47a..35718b9f53 100644
--- a/frontend/src/lib/components/icons/brands/Google.svelte
+++ b/frontend/src/lib/components/icons/brands/Google.svelte
@@ -1,8 +1,12 @@
 <script lang="ts">
-	export let size: number = 16
-	export let style: string = 'fill: white;'
-	let clazz = ''
-	export { clazz as class }
+	interface Props {
+		size?: number;
+		style?: string;
+		class?: string;
+	}
+
+	let { size = 16, style = 'fill: white;', class: clazz = '' }: Props = $props();
+	
 </script>
 
 <svg
diff --git a/frontend/src/lib/components/icons/brands/Microsoft.svelte b/frontend/src/lib/components/icons/brands/Microsoft.svelte
index 3a49e5e91a..ce7caf236d 100644
--- a/frontend/src/lib/components/icons/brands/Microsoft.svelte
+++ b/frontend/src/lib/components/icons/brands/Microsoft.svelte
@@ -1,8 +1,12 @@
 <script lang="ts">
-	export let size: number = 16
-	export let style: string = 'fill: white;'
-	let clazz = ''
-	export { clazz as class }
+	interface Props {
+		size?: number;
+		style?: string;
+		class?: string;
+	}
+
+	let { size = 16, style = 'fill: white;', class: clazz = '' }: Props = $props();
+	
 </script>
 
 <svg
diff --git a/frontend/src/lib/components/icons/brands/Okta.svelte b/frontend/src/lib/components/icons/brands/Okta.svelte
index e433dd3763..4dacdb51fe 100644
--- a/frontend/src/lib/components/icons/brands/Okta.svelte
+++ b/frontend/src/lib/components/icons/brands/Okta.svelte
@@ -1,8 +1,12 @@
 <script lang="ts">
-	export let size: number = 16
-	export let style: string = 'fill: white;'
-	let clazz = ''
-	export { clazz as class }
+	interface Props {
+		size?: number;
+		style?: string;
+		class?: string;
+	}
+
+	let { size = 16, style = 'fill: white;', class: clazz = '' }: Props = $props();
+	
 </script>
 
 <svg