diff --git a/packages/shared-auth-ui/src/components/AuthGateModal.svelte b/packages/shared-auth-ui/src/components/AuthGateModal.svelte
index c6faeb4df..29849f8eb 100644
--- a/packages/shared-auth-ui/src/components/AuthGateModal.svelte
+++ b/packages/shared-auth-ui/src/components/AuthGateModal.svelte
@@ -135,7 +135,7 @@
 	});
 
 	// Icon for action type
-	const ActionIcon = $derived(() => {
+	const actionIcon = $derived.by(() => {
 		switch (action) {
 			case 'save':
 				return CloudArrowUp;
@@ -235,8 +235,7 @@
 			<div
 				class="bg-primary/10 mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full"
 			>
-				{@const Icon = ActionIcon()}
-				<Icon size={32} class="text-primary" />
+				<svelte:component this={actionIcon} size={32} class="text-primary" />
 			</div>
 
 			<!-- Title -->
diff --git a/packages/shared-ui/src/dnd/ActionZone.svelte b/packages/shared-ui/src/dnd/ActionZone.svelte
index 8dfbb44ca..6df0a59ba 100644
--- a/packages/shared-ui/src/dnd/ActionZone.svelte
+++ b/packages/shared-ui/src/dnd/ActionZone.svelte
@@ -60,8 +60,7 @@
 		role="button"
 		tabindex="-1"
 	>
-		{@const Icon = iconComponent}
-		<Icon size={20} weight="bold" />
+		<svelte:component this={iconComponent} size={20} weight="bold" />
 		{#if label}
 			<span class="action-label">{label}</span>
 		{/if}