diff --git a/apps/chat/apps/web/src/lib/components/templates/TemplateForm.svelte b/apps/chat/apps/web/src/lib/components/templates/TemplateForm.svelte
index 834f40bdd..726a54112 100644
--- a/apps/chat/apps/web/src/lib/components/templates/TemplateForm.svelte
+++ b/apps/chat/apps/web/src/lib/components/templates/TemplateForm.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { Check, X } from '@manacore/shared-icons';
 	import type { Template, AIModel } from '@chat/types';
 	import { chatService } from '$lib/services/chat';
 	import { onMount } from 'svelte';
@@ -183,14 +184,7 @@
 						aria-label="Farbe {color}"
 					>
 						{#if selectedColor === color}
-							<svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-								<path
-									stroke-linecap="round"
-									stroke-linejoin="round"
-									stroke-width="3"
-									d="M5 13l4 4L19 7"
-								/>
-							</svg>
+							<Check size={16} weight="bold" class="text-white" />
 						{/if}
 					</button>
 				{/each}
@@ -238,23 +232,9 @@
                  {documentMode ? 'bg-primary' : 'bg-muted-foreground'}"
 				>
 					{#if documentMode}
-						<svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-							<path
-								stroke-linecap="round"
-								stroke-linejoin="round"
-								stroke-width="2"
-								d="M5 13l4 4L19 7"
-							/>
-						</svg>
+						<Check size={16} class="text-white" />
 					{:else}
-						<svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-							<path
-								stroke-linecap="round"
-								stroke-linejoin="round"
-								stroke-width="2"
-								d="M6 18L18 6M6 6l12 12"
-							/>
-						</svg>
+						<X size={16} class="text-white" />
 					{/if}
 				</div>
 			</button>
diff --git a/apps/chat/apps/web/src/routes/(protected)/settings/+page.svelte b/apps/chat/apps/web/src/routes/(protected)/settings/+page.svelte
index 83a9c13ff..ce312456c 100644
--- a/apps/chat/apps/web/src/routes/(protected)/settings/+page.svelte
+++ b/apps/chat/apps/web/src/routes/(protected)/settings/+page.svelte
@@ -105,14 +105,7 @@
 				border={false}
 			>
 				{#snippet icon()}
-					<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
-						/>
-					</svg>
+					<Trash />
 				{/snippet}
 			</SettingsDangerButton>
 		</SettingsDangerZone>
@@ -121,14 +114,7 @@
 	<!-- About Section -->
 	<SettingsSection title="Über die App">
 		{#snippet icon()}
-			<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
-				<path
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-				/>
-			</svg>
+			<Info />
 		{/snippet}
 
 		<SettingsCard>
diff --git a/apps/chat/apps/web/src/routes/(protected)/spaces/[id]/+page.svelte b/apps/chat/apps/web/src/routes/(protected)/spaces/[id]/+page.svelte
index debfbfa97..bc630a11a 100644
--- a/apps/chat/apps/web/src/routes/(protected)/spaces/[id]/+page.svelte
+++ b/apps/chat/apps/web/src/routes/(protected)/spaces/[id]/+page.svelte
@@ -9,6 +9,7 @@
 	import { chatService } from '$lib/services/chat';
 	import { PageHeader } from '@manacore/shared-ui';
 	import type { Space, Conversation, AIModel } from '@chat/types';
+	import { ChatCircle } from '@manacore/shared-icons';
 
 	const spaceId = $derived($page.params.id ?? '');
 
@@ -128,19 +129,7 @@
 
 				{#if conversations.length === 0}
 					<div class="text-center py-12 bg-surface rounded-xl border border-border">
-						<svg
-							class="w-12 h-12 text-muted-foreground mx-auto mb-3"
-							fill="none"
-							stroke="currentColor"
-							viewBox="0 0 24 24"
-						>
-							<path
-								stroke-linecap="round"
-								stroke-linejoin="round"
-								stroke-width="1.5"
-								d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
-							/>
-						</svg>
+						<ChatCircle size={48} class="text-muted-foreground mx-auto mb-3" />
 						<p class="text-muted-foreground">Noch keine Konversationen in diesem Space.</p>
 					</div>
 				{:else}
diff --git a/apps/citycorners/apps/web/src/routes/(app)/cities/[slug]/+page.svelte b/apps/citycorners/apps/web/src/routes/(app)/cities/[slug]/+page.svelte
index 6a739ee49..154b38cea 100644
--- a/apps/citycorners/apps/web/src/routes/(app)/cities/[slug]/+page.svelte
+++ b/apps/citycorners/apps/web/src/routes/(app)/cities/[slug]/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { getContext } from 'svelte';
+	import { CaretLeft, Plus, MapPin, MapTrifold, UsersThree, Heart } from '@manacore/shared-icons';
 	import { _ } from 'svelte-i18n';
 	import { page } from '$app/stores';
 	import { authStore } from '$lib/stores/auth.svelte';
@@ -71,9 +72,7 @@
 	<div>
 		<div class="mb-1 flex items-center gap-2">
 			<a href="/" class="text-foreground-secondary hover:text-primary transition-colors">
-				<svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
-					<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
-				</svg>
+				<CaretLeft size={16} />
 			</a>
 			<h1 class="text-2xl font-bold text-foreground">{city?.name}</h1>
 		</div>
@@ -93,9 +92,7 @@
 		class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-primary text-white shadow-md transition-all hover:bg-primary/90 hover:shadow-lg"
 		title={$_('add.title')}
 	>
-		<svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
-			<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
-		</svg>
+		<Plus size={20} weight="bold" />
 	</a>
 </header>
 
@@ -106,24 +103,7 @@
 			<!-- Location count -->
 			<div class="flex items-center gap-2">
 				<div class="flex h-9 w-9 items-center justify-center rounded-lg bg-primary/10 text-primary">
-					<svg
-						class="h-5 w-5"
-						fill="none"
-						stroke="currentColor"
-						stroke-width="2"
-						viewBox="0 0 24 24"
-					>
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z"
-						/>
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z"
-						/>
-					</svg>
+					<MapPin size={20} />
 				</div>
 				<div>
 					<p class="text-lg font-semibold text-foreground">{stats.locationCount}</p>
@@ -139,19 +119,7 @@
 					<div
 						class="flex h-9 w-9 items-center justify-center rounded-lg bg-green-500/10 text-green-600 dark:text-green-400"
 					>
-						<svg
-							class="h-5 w-5"
-							fill="none"
-							stroke="currentColor"
-							stroke-width="2"
-							viewBox="0 0 24 24"
-						>
-							<path
-								stroke-linecap="round"
-								stroke-linejoin="round"
-								d="M9 6.75V15m6-6v8.25m.503 3.498l4.875-2.437c.381-.19.622-.58.622-1.006V4.82c0-.836-.88-1.38-1.628-1.006l-3.869 1.934c-.317.159-.69.159-1.006 0L9.503 3.252a1.125 1.125 0 00-1.006 0L3.622 5.689C3.24 5.88 3 6.27 3 6.695V19.18c0 .836.88 1.38 1.628 1.006l3.869-1.934c.317-.159.69-.159 1.006 0l4.994 2.497c.317.158.69.158 1.006 0z"
-							/>
-						</svg>
+						<MapTrifold size={20} />
 					</div>
 					<div>
 						<p class="text-lg font-semibold text-foreground">{stats.hasCoordinates}</p>
@@ -168,19 +136,7 @@
 					<div
 						class="flex h-9 w-9 items-center justify-center rounded-lg bg-amber-500/10 text-amber-600 dark:text-amber-400"
 					>
-						<svg
-							class="h-5 w-5"
-							fill="none"
-							stroke="currentColor"
-							stroke-width="2"
-							viewBox="0 0 24 24"
-						>
-							<path
-								stroke-linecap="round"
-								stroke-linejoin="round"
-								d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"
-							/>
-						</svg>
+						<UsersThree size={20} />
 					</div>
 					<div>
 						<p class="text-lg font-semibold text-foreground">{stats.contributorCount}</p>
@@ -276,25 +232,9 @@
 						title={favoriteIds.has(location.id) ? $_('favorites.remove') : $_('favorites.add')}
 					>
 						{#if favoriteIds.has(location.id)}
-							<svg class="h-5 w-5 text-red-500" fill="currentColor" viewBox="0 0 24 24">
-								<path
-									d="M11.645 20.91l-.007-.003-.022-.012a15.247 15.247 0 01-.383-.218 25.18 25.18 0 01-4.244-3.17C4.688 15.36 2.25 12.174 2.25 8.25 2.25 5.322 4.714 3 7.688 3A5.5 5.5 0 0112 5.052 5.5 5.5 0 0116.313 3c2.973 0 5.437 2.322 5.437 5.25 0 3.925-2.438 7.111-4.739 9.256a25.175 25.175 0 01-4.244 3.17 15.247 15.247 0 01-.383.219l-.022.012-.007.004-.003.001a.752.752 0 01-.704 0l-.003-.001z"
-								/>
-							</svg>
+							<Heart size={20} weight="fill" class="text-red-500" />
 						{:else}
-							<svg
-								class="h-5 w-5 text-white"
-								fill="none"
-								stroke="currentColor"
-								stroke-width="2"
-								viewBox="0 0 24 24"
-							>
-								<path
-									stroke-linecap="round"
-									stroke-linejoin="round"
-									d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z"
-								/>
-							</svg>
+							<Heart size={20} class="text-white" />
 						{/if}
 					</button>
 				{/if}
diff --git a/apps/citycorners/apps/web/src/routes/(app)/cities/[slug]/add/+page.svelte b/apps/citycorners/apps/web/src/routes/(app)/cities/[slug]/add/+page.svelte
index 9e888bdb5..d6afed1d0 100644
--- a/apps/citycorners/apps/web/src/routes/(app)/cities/[slug]/add/+page.svelte
+++ b/apps/citycorners/apps/web/src/routes/(app)/cities/[slug]/add/+page.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
 	import { getContext } from 'svelte';
+	import { CaretLeft } from '@manacore/shared-icons';
 	import { _ } from 'svelte-i18n';
 	import { page } from '$app/stores';
 	import { authStore } from '$lib/stores/auth.svelte';
@@ -191,9 +192,7 @@
 			href="/cities/{citySlug}"
 			class="text-foreground-secondary hover:text-primary transition-colors"
 		>
-			<svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
-				<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
-			</svg>
+			<CaretLeft size={16} />
 		</a>
 		<h1 class="text-2xl font-bold text-foreground">{$_('add.title')}</h1>
 	</div>
diff --git a/apps/citycorners/apps/web/src/routes/(app)/cities/[slug]/locations/[id]/+page.svelte b/apps/citycorners/apps/web/src/routes/(app)/cities/[slug]/locations/[id]/+page.svelte
index 785e9c488..4faacb2e2 100644
--- a/apps/citycorners/apps/web/src/routes/(app)/cities/[slug]/locations/[id]/+page.svelte
+++ b/apps/citycorners/apps/web/src/routes/(app)/cities/[slug]/locations/[id]/+page.svelte
@@ -3,6 +3,20 @@
 	import { goto } from '$app/navigation';
 	import { page } from '$app/stores';
 	import { browser } from '$app/environment';
+	import {
+		CaretLeft,
+		Check,
+		ShareNetwork,
+		Heart,
+		Plus,
+		MapPin,
+		PencilSimple,
+		Trash,
+		MapTrifold,
+		NavigationArrow,
+		ArrowSquareOut,
+		Star,
+	} from '@manacore/shared-icons';
 	import { _ } from 'svelte-i18n';
 	import { authStore } from '$lib/stores/auth.svelte';
 	import { favoritesStore } from '$lib/stores/favorites.svelte';
@@ -299,9 +313,7 @@
 				href="/cities/{citySlug}"
 				class="flex h-10 w-10 items-center justify-center rounded-full bg-black/30 text-white backdrop-blur-sm transition-colors hover:bg-black/50"
 			>
-				<svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
-					<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
-				</svg>
+				<CaretLeft size={20} />
 			</a>
 		</div>
 
@@ -313,29 +325,9 @@
 				title={$_('detail.share')}
 			>
 				{#if shareSuccess}
-					<svg
-						class="h-5 w-5 text-green-400"
-						fill="none"
-						stroke="currentColor"
-						stroke-width="2"
-						viewBox="0 0 24 24"
-					>
-						<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
-					</svg>
+					<Check size={20} class="text-green-400" />
 				{:else}
-					<svg
-						class="h-5 w-5"
-						fill="none"
-						stroke="currentColor"
-						stroke-width="2"
-						viewBox="0 0 24 24"
-					>
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							d="M7.217 10.907a2.25 2.25 0 100 2.186m0-2.186c.18.324.283.696.283 1.093s-.103.77-.283 1.093m0-2.186l9.566-5.314m-9.566 7.5l9.566 5.314m0 0a2.25 2.25 0 103.935 2.186 2.25 2.25 0 00-3.935-2.186zm0-12.814a2.25 2.25 0 103.933-2.185 2.25 2.25 0 00-3.933 2.185z"
-						/>
-					</svg>
+					<ShareNetwork size={20} />
 				{/if}
 			</button>
 
@@ -346,25 +338,9 @@
 					title={favoriteIds.has(location.id) ? $_('favorites.remove') : $_('favorites.add')}
 				>
 					{#if favoriteIds.has(location.id)}
-						<svg class="h-5 w-5 text-red-500" fill="currentColor" viewBox="0 0 24 24">
-							<path
-								d="M11.645 20.91l-.007-.003-.022-.012a15.247 15.247 0 01-.383-.218 25.18 25.18 0 01-4.244-3.17C4.688 15.36 2.25 12.174 2.25 8.25 2.25 5.322 4.714 3 7.688 3A5.5 5.5 0 0112 5.052 5.5 5.5 0 0116.313 3c2.973 0 5.437 2.322 5.437 5.25 0 3.925-2.438 7.111-4.739 9.256a25.175 25.175 0 01-4.244 3.17 15.247 15.247 0 01-.383.219l-.022.012-.007.004-.003.001a.752.752 0 01-.704 0l-.003-.001z"
-							/>
-						</svg>
+						<Heart size={20} weight="fill" class="text-red-500" />
 					{:else}
-						<svg
-							class="h-5 w-5 text-white"
-							fill="none"
-							stroke="currentColor"
-							stroke-width="2"
-							viewBox="0 0 24 24"
-						>
-							<path
-								stroke-linecap="round"
-								stroke-linejoin="round"
-								d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z"
-							/>
-						</svg>
+						<Heart size={20} class="text-white" />
 					{/if}
 				</button>
 			{/if}
@@ -421,15 +397,7 @@
 					class="flex h-16 w-20 flex-shrink-0 items-center justify-center rounded-lg border-2 border-dashed border-border text-foreground-secondary transition-colors hover:border-primary hover:text-primary"
 					title={$_('gallery.addPhoto')}
 				>
-					<svg
-						class="h-5 w-5"
-						fill="none"
-						stroke="currentColor"
-						stroke-width="2"
-						viewBox="0 0 24 24"
-					>
-						<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
-					</svg>
+					<Plus size={20} />
 				</button>
 			{/if}
 		</div>
@@ -476,24 +444,7 @@
 			<h1 class="text-3xl font-bold text-foreground">{location.name}</h1>
 			{#if location.address}
 				<p class="mt-2 flex items-center gap-1.5 text-foreground-secondary">
-					<svg
-						class="h-4 w-4 flex-shrink-0"
-						fill="none"
-						stroke="currentColor"
-						stroke-width="2"
-						viewBox="0 0 24 24"
-					>
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z"
-						/>
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z"
-						/>
-					</svg>
+					<MapPin size={16} class="flex-shrink-0" />
 					{location.address}
 				</p>
 			{/if}
@@ -562,17 +513,13 @@
 						<div class="flex items-center gap-1.5">
 							<div class="flex items-center gap-0.5">
 								{#each Array(5) as _, i}
-									<svg
-										class="h-4 w-4 {i < Math.round(location.reviewStats.averageRating)
+									<Star
+										size={16}
+										weight="fill"
+										class={i < Math.round(location.reviewStats.averageRating)
 											? 'text-amber-400'
-											: 'text-gray-300 dark:text-gray-600'}"
-										fill="currentColor"
-										viewBox="0 0 20 20"
-									>
-										<path
-											d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
-										/>
-									</svg>
+											: 'text-gray-300 dark:text-gray-600'}
+									/>
 								{/each}
 							</div>
 							<span class="text-sm font-medium text-foreground">
@@ -608,17 +555,13 @@
 								onclick={() => (reviewRating = star)}
 								class="transition-transform hover:scale-110"
 							>
-								<svg
-									class="h-8 w-8 {star <= reviewRating
+								<Star
+									size={32}
+									weight="fill"
+									class={star <= reviewRating
 										? 'text-amber-400'
-										: 'text-gray-300 dark:text-gray-600'}"
-									fill="currentColor"
-									viewBox="0 0 20 20"
-								>
-									<path
-										d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
-									/>
-								</svg>
+										: 'text-gray-300 dark:text-gray-600'}
+								/>
 							</button>
 						{/each}
 					</div>
@@ -645,17 +588,13 @@
 							<div class="flex items-center justify-between">
 								<div class="flex items-center gap-1">
 									{#each Array(5) as _, i}
-										<svg
-											class="h-4 w-4 {i < review.rating
+										<Star
+											size={16}
+											weight="fill"
+											class={i < review.rating
 												? 'text-amber-400'
-												: 'text-gray-300 dark:text-gray-600'}"
-											fill="currentColor"
-											viewBox="0 0 20 20"
-										>
-											<path
-												d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
-											/>
-										</svg>
+												: 'text-gray-300 dark:text-gray-600'}
+										/>
 									{/each}
 								</div>
 								<div class="flex items-center gap-2">
@@ -690,38 +629,14 @@
 					href="/cities/{citySlug}/locations/{location.id}/edit"
 					class="flex items-center gap-2 rounded-lg border border-border bg-background-card px-4 py-2.5 text-sm font-medium text-foreground-secondary transition-colors hover:bg-background-card-hover hover:text-foreground"
 				>
-					<svg
-						class="h-4 w-4"
-						fill="none"
-						stroke="currentColor"
-						stroke-width="2"
-						viewBox="0 0 24 24"
-					>
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10"
-						/>
-					</svg>
+					<PencilSimple size={16} />
 					{$_('detail.edit')}
 				</a>
 				<button
 					onclick={() => (showDeleteConfirm = true)}
 					class="flex items-center gap-2 rounded-lg border border-red-200 bg-red-50 px-4 py-2.5 text-sm font-medium text-red-600 transition-colors hover:bg-red-100 dark:border-red-800 dark:bg-red-950/30 dark:text-red-400 dark:hover:bg-red-950/50"
 				>
-					<svg
-						class="h-4 w-4"
-						fill="none"
-						stroke="currentColor"
-						stroke-width="2"
-						viewBox="0 0 24 24"
-					>
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"
-						/>
-					</svg>
+					<Trash size={16} />
 					{$_('detail.delete')}
 				</button>
 			</div>
@@ -760,19 +675,7 @@
 						href="/cities/{citySlug}/map"
 						class="flex flex-1 items-center justify-center gap-2 bg-background-card px-4 py-2.5 text-sm text-foreground-secondary transition-colors hover:text-primary"
 					>
-						<svg
-							class="h-4 w-4"
-							fill="none"
-							stroke="currentColor"
-							stroke-width="2"
-							viewBox="0 0 24 24"
-						>
-							<path
-								stroke-linecap="round"
-								stroke-linejoin="round"
-								d="M9 6.75V15m6-6v8.25m.503 3.498l4.875-2.437c.381-.19.622-.58.622-1.006V4.82c0-.836-.88-1.38-1.628-1.006l-3.869 1.934c-.317.159-.69.159-1.006 0L9.503 3.252a1.125 1.125 0 00-1.006 0L3.622 5.689C3.24 5.88 3 6.27 3 6.695V19.18c0 .836.88 1.38 1.628 1.006l3.869-1.934c.317-.159.69-.159 1.006 0l4.994 2.497c.317.158.69.158 1.006 0z"
-							/>
-						</svg>
+						<MapTrifold size={16} />
 						{$_('detail.showOnMap')}
 					</a>
 					<a
@@ -781,19 +684,7 @@
 						rel="noopener noreferrer"
 						class="flex flex-1 items-center justify-center gap-2 bg-background-card px-4 py-2.5 text-sm text-foreground-secondary transition-colors hover:text-primary"
 					>
-						<svg
-							class="h-4 w-4"
-							fill="none"
-							stroke="currentColor"
-							stroke-width="2"
-							viewBox="0 0 24 24"
-						>
-							<path
-								stroke-linecap="round"
-								stroke-linejoin="round"
-								d="M6 12L3.269 3.126A59.768 59.768 0 0121.485 12 59.77 59.77 0 013.27 20.876L5.999 12zm0 0h7.5"
-							/>
-						</svg>
+						<NavigationArrow size={16} />
 						{$_('detail.directions')}
 					</a>
 					<a
@@ -802,19 +693,7 @@
 						rel="noopener noreferrer"
 						class="flex flex-1 items-center justify-center gap-2 bg-background-card px-4 py-2.5 text-sm text-foreground-secondary transition-colors hover:text-primary"
 					>
-						<svg
-							class="h-4 w-4"
-							fill="none"
-							stroke="currentColor"
-							stroke-width="2"
-							viewBox="0 0 24 24"
-						>
-							<path
-								stroke-linecap="round"
-								stroke-linejoin="round"
-								d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"
-							/>
-						</svg>
+						<ArrowSquareOut size={16} />
 						{$_('detail.openInMaps')}
 					</a>
 				</div>
diff --git a/apps/citycorners/apps/web/src/routes/(app)/cities/[slug]/locations/[id]/edit/+page.svelte b/apps/citycorners/apps/web/src/routes/(app)/cities/[slug]/locations/[id]/edit/+page.svelte
index c8ceeba19..949190758 100644
--- a/apps/citycorners/apps/web/src/routes/(app)/cities/[slug]/locations/[id]/edit/+page.svelte
+++ b/apps/citycorners/apps/web/src/routes/(app)/cities/[slug]/locations/[id]/edit/+page.svelte
@@ -2,6 +2,7 @@
 	import { onMount, getContext } from 'svelte';
 	import { goto } from '$app/navigation';
 	import { page } from '$app/stores';
+	import { CaretLeft } from '@manacore/shared-icons';
 	import { _ } from 'svelte-i18n';
 	import { authStore } from '$lib/stores/auth.svelte';
 	import { locationCollection, type LocalCity } from '$lib/data/local-store';
@@ -92,9 +93,7 @@
 			href="/cities/{citySlug}/locations/{$page.params.id}"
 			class="text-foreground-secondary hover:text-primary transition-colors"
 		>
-			<svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
-				<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
-			</svg>
+			<CaretLeft size={16} />
 		</a>
 		<h1 class="text-2xl font-bold text-foreground">{$_('edit.title')}</h1>
 	</div>
diff --git a/apps/citycorners/apps/web/src/routes/(app)/cities/[slug]/map/+page.svelte b/apps/citycorners/apps/web/src/routes/(app)/cities/[slug]/map/+page.svelte
index b5d45aba9..5cf8780cd 100644
--- a/apps/citycorners/apps/web/src/routes/(app)/cities/[slug]/map/+page.svelte
+++ b/apps/citycorners/apps/web/src/routes/(app)/cities/[slug]/map/+page.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { onMount, getContext } from 'svelte';
 	import { browser } from '$app/environment';
+	import { CaretLeft, GlobeSimple } from '@manacore/shared-icons';
 	import { _ } from 'svelte-i18n';
 	import { page } from '$app/stores';
 	import { useAllLocations, filterByCity } from '$lib/data/queries';
@@ -207,15 +208,7 @@
 					href="/cities/{citySlug}"
 					class="text-foreground-secondary hover:text-primary transition-colors"
 				>
-					<svg
-						class="h-4 w-4"
-						fill="none"
-						stroke="currentColor"
-						stroke-width="2"
-						viewBox="0 0 24 24"
-					>
-						<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
-					</svg>
+					<CaretLeft size={16} />
 				</a>
 				<h1 class="text-2xl font-bold text-foreground">{$_('map.title')}</h1>
 			</div>
@@ -232,13 +225,7 @@
 					class="h-5 w-5 border-2 border-primary border-t-transparent rounded-full animate-spin"
 				></div>
 			{:else}
-				<svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
-					<path
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						d="M12 21a9.004 9.004 0 008.716-6.747M12 21a9.004 9.004 0 01-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 017.843 4.582M12 3a8.997 8.997 0 00-7.843 4.582m15.686 0A11.953 11.953 0 0112 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0121 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0112 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 013 12c0-1.605.42-3.113 1.157-4.418"
-					/>
-				</svg>
+				<GlobeSimple size={20} />
 			{/if}
 		</button>
 	</header>
diff --git a/apps/citycorners/apps/web/src/routes/(app)/favorites/+page.svelte b/apps/citycorners/apps/web/src/routes/(app)/favorites/+page.svelte
index 4589b64ef..68f691fab 100644
--- a/apps/citycorners/apps/web/src/routes/(app)/favorites/+page.svelte
+++ b/apps/citycorners/apps/web/src/routes/(app)/favorites/+page.svelte
@@ -224,11 +224,7 @@
 							onclick={(e) => handleRemove(e, location.id)}
 							title={$_('favorites.remove')}
 						>
-							<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
-								<path
-									d="M11.645 20.91l-.007-.003-.022-.012a15.247 15.247 0 01-.383-.218 25.18 25.18 0 01-4.244-3.17C4.688 15.36 2.25 12.174 2.25 8.25 2.25 5.322 4.714 3 7.688 3A5.5 5.5 0 0112 5.052 5.5 5.5 0 0116.313 3c2.973 0 5.437 2.322 5.437 5.25 0 3.925-2.438 7.111-4.739 9.256a25.175 25.175 0 01-4.244 3.17 15.247 15.247 0 01-.383.219l-.022.012-.007.004-.003.001a.752.752 0 01-.704 0l-.003-.001z"
-								/>
-							</svg>
+							<Heart size={20} weight="fill" />
 						</button>
 					</a>
 				{/each}
diff --git a/apps/clock/apps/web/src/routes/(app)/stopwatch/+page.svelte b/apps/clock/apps/web/src/routes/(app)/stopwatch/+page.svelte
index a1df14fff..283eb529b 100644
--- a/apps/clock/apps/web/src/routes/(app)/stopwatch/+page.svelte
+++ b/apps/clock/apps/web/src/routes/(app)/stopwatch/+page.svelte
@@ -2,6 +2,7 @@
 	import { _ } from 'svelte-i18n';
 	import { PageHeader } from '@manacore/shared-ui';
 	import {
+	import { Clock } from '@manacore/shared-icons';
 		stopwatchesStore,
 		formatTime,
 		formatLapTime,
@@ -72,20 +73,7 @@
 	<!-- Empty State -->
 	<div class="flex flex-col items-center justify-center py-16 text-center">
 		<div class="w-24 h-24 mb-6 rounded-full bg-muted flex items-center justify-center">
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				class="h-12 w-12 text-muted-foreground"
-				fill="none"
-				viewBox="0 0 24 24"
-				stroke="currentColor"
-			>
-				<path
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="1.5"
-					d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
-				/>
-			</svg>
+			<Clock size={20} class="text-muted-foreground" />
 		</div>
 		<h2 class="text-xl font-medium text-foreground mb-2">{$_('stopwatch.noStopwatches')}</h2>
 		<p class="text-muted-foreground mb-6 max-w-sm">{$_('stopwatch.noStopwatchesDescription')}</p>
diff --git a/apps/inventar/apps/web/src/lib/components/fields/SchemaEditor.svelte b/apps/inventar/apps/web/src/lib/components/fields/SchemaEditor.svelte
index e1c67484c..ba2742f0c 100644
--- a/apps/inventar/apps/web/src/lib/components/fields/SchemaEditor.svelte
+++ b/apps/inventar/apps/web/src/lib/components/fields/SchemaEditor.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { FieldDefinition, FieldType } from '@inventar/shared';
 	import { _ } from 'svelte-i18n';
+	import { Plus, Trash } from '@manacore/shared-icons';
 
 	interface Props {
 		fields: FieldDefinition[];
@@ -199,14 +200,7 @@
 					class="mt-1 text-[hsl(var(--muted-foreground))] hover:text-red-500"
 					title={$_('field.removeField')}
 				>
-					<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
-						/>
-					</svg>
+					<Trash size={20} />
 				</button>
 			</div>
 		</div>
@@ -217,9 +211,7 @@
 		onclick={addField}
 		class="flex w-full items-center justify-center gap-2 rounded-lg border-2 border-dashed border-[hsl(var(--border))] py-3 text-sm text-[hsl(var(--muted-foreground))] transition-colors hover:border-[hsl(var(--primary))] hover:text-[hsl(var(--primary))]"
 	>
-		<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-			<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
-		</svg>
+		<Plus size={20} />
 		{$_('collection.addField')}
 	</button>
 </div>
diff --git a/apps/inventar/apps/web/src/routes/(app)/+page.svelte b/apps/inventar/apps/web/src/routes/(app)/+page.svelte
index b4f25f823..6e8690ff8 100644
--- a/apps/inventar/apps/web/src/routes/(app)/+page.svelte
+++ b/apps/inventar/apps/web/src/routes/(app)/+page.svelte
@@ -10,6 +10,7 @@
 		getTotalItemCount,
 	} from '$lib/data/queries';
 	import type { Collection, Item } from '@inventar/shared';
+	import { Plus, Trash } from '@manacore/shared-icons';
 
 	const collectionsCtx: { readonly value: Collection[] } = getContext('collections');
 	const itemsCtx: { readonly value: Item[] } = getContext('items');
@@ -53,9 +54,7 @@
 			href="/collections/new"
 			class="flex items-center gap-2 rounded-lg bg-[hsl(var(--primary))] px-4 py-2 text-sm font-medium text-[hsl(var(--primary-foreground))] transition-colors hover:opacity-90"
 		>
-			<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
-			</svg>
+			<Plus size={20} />
 			{$_('collection.create')}
 		</a>
 	</div>
@@ -104,14 +103,7 @@
 							onclick={(e) => handleDelete(e, collection.id)}
 							class="rounded p-1 text-[hsl(var(--muted-foreground))] opacity-0 transition-opacity hover:text-red-500 group-hover:opacity-100"
 						>
-							<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-								<path
-									stroke-linecap="round"
-									stroke-linejoin="round"
-									stroke-width="2"
-									d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
-								/>
-							</svg>
+							<Trash size={20} />
 						</button>
 					</div>
 
diff --git a/apps/inventar/apps/web/src/routes/(app)/collections/new/+page.svelte b/apps/inventar/apps/web/src/routes/(app)/collections/new/+page.svelte
index fdd2d0d68..50d6ef50f 100644
--- a/apps/inventar/apps/web/src/routes/(app)/collections/new/+page.svelte
+++ b/apps/inventar/apps/web/src/routes/(app)/collections/new/+page.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
 	import { _ } from 'svelte-i18n';
+	import { CaretLeft } from '@manacore/shared-icons';
 	import { collectionsStore } from '$lib/stores/collections.svelte';
 	import { DEFAULT_TEMPLATES } from '@inventar/shared';
 	import type { CollectionSchema, Template } from '@inventar/shared';
@@ -49,9 +50,7 @@
 			onclick={() => (step === 'details' && selectedTemplate ? (step = 'template') : goto('/'))}
 			class="text-[hsl(var(--muted-foreground))] hover:text-[hsl(var(--foreground))]"
 		>
-			<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
-			</svg>
+			<CaretLeft size={20} />
 		</button>
 		<h1 class="text-2xl font-bold text-[hsl(var(--foreground))]">{$_('collection.create')}</h1>
 	</div>
diff --git a/apps/inventar/apps/web/src/routes/(app)/items/+page.svelte b/apps/inventar/apps/web/src/routes/(app)/items/+page.svelte
index c18586eed..1193bf26a 100644
--- a/apps/inventar/apps/web/src/routes/(app)/items/+page.svelte
+++ b/apps/inventar/apps/web/src/routes/(app)/items/+page.svelte
@@ -7,6 +7,7 @@
 	import type { Collection, Item, ItemStatus } from '@inventar/shared';
 	import StatusBadge from '$lib/components/StatusBadge.svelte';
 	import ViewModeToggle from '$lib/components/ViewModeToggle.svelte';
+	import { MagnifyingGlass } from '@manacore/shared-icons';
 
 	const collectionsCtx: { readonly value: Collection[] } = getContext('collections');
 	const itemsCtx: { readonly value: Item[] } = getContext('items');
@@ -53,19 +54,10 @@
 	<!-- Search & Filters -->
 	<div class="space-y-3">
 		<div class="relative">
-			<svg
-				class="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-[hsl(var(--muted-foreground))]"
-				fill="none"
-				stroke="currentColor"
-				viewBox="0 0 24 24"
-			>
-				<path
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
-				/>
-			</svg>
+			<MagnifyingGlass
+				size={20}
+				class="absolute left-3 top-1/2 -translate-y-1/2 text-[hsl(var(--muted-foreground))]"
+			/>
 			<input
 				type="text"
 				bind:value={searchQuery}
diff --git a/apps/inventar/apps/web/src/routes/(app)/items/[id]/+page.svelte b/apps/inventar/apps/web/src/routes/(app)/items/[id]/+page.svelte
index 32ea759c0..b7706ab60 100644
--- a/apps/inventar/apps/web/src/routes/(app)/items/[id]/+page.svelte
+++ b/apps/inventar/apps/web/src/routes/(app)/items/[id]/+page.svelte
@@ -2,6 +2,7 @@
 	import { page } from '$app/stores';
 	import { goto } from '$app/navigation';
 	import { _ } from 'svelte-i18n';
+	import { CaretLeft } from '@manacore/shared-icons';
 	import { getContext } from 'svelte';
 	import { itemsStore } from '$lib/stores/items.svelte';
 	import {
@@ -101,14 +102,7 @@
 					onclick={() => goto(collection ? `/collections/${collection.id}` : '/items')}
 					class="text-[hsl(var(--muted-foreground))] hover:text-[hsl(var(--foreground))]"
 				>
-					<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M15 19l-7-7 7-7"
-						/>
-					</svg>
+					<CaretLeft size={20} />
 				</button>
 				{#if !editing}
 					<div>
diff --git a/apps/inventar/apps/web/src/routes/(app)/locations/+page.svelte b/apps/inventar/apps/web/src/routes/(app)/locations/+page.svelte
index 296b53784..819b05faa 100644
--- a/apps/inventar/apps/web/src/routes/(app)/locations/+page.svelte
+++ b/apps/inventar/apps/web/src/routes/(app)/locations/+page.svelte
@@ -4,6 +4,7 @@
 	import { locationsStore } from '$lib/stores/locations.svelte';
 	import { getLocationTree } from '$lib/data/queries';
 	import type { Location } from '@inventar/shared';
+	import { Plus } from '@manacore/shared-icons';
 
 	const locationsCtx: { readonly value: Location[] } = getContext('locations');
 
@@ -65,9 +66,7 @@
 			onclick={() => startCreate()}
 			class="flex items-center gap-2 rounded-lg bg-[hsl(var(--primary))] px-4 py-2 text-sm font-medium text-[hsl(var(--primary-foreground))]"
 		>
-			<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
-			</svg>
+			<Plus size={20} />
 			{$_('location.create')}
 		</button>
 	</div>
diff --git a/apps/inventar/apps/web/src/routes/(app)/search/+page.svelte b/apps/inventar/apps/web/src/routes/(app)/search/+page.svelte
index 17dff0ae7..5f5cdedfc 100644
--- a/apps/inventar/apps/web/src/routes/(app)/search/+page.svelte
+++ b/apps/inventar/apps/web/src/routes/(app)/search/+page.svelte
@@ -5,6 +5,7 @@
 	import { getFilteredItems, getCollectionById } from '$lib/data/queries';
 	import type { Collection, Item } from '@inventar/shared';
 	import StatusBadge from '$lib/components/StatusBadge.svelte';
+	import { MagnifyingGlass } from '@manacore/shared-icons';
 
 	const collectionsCtx: { readonly value: Collection[] } = getContext('collections');
 	const itemsCtx: { readonly value: Item[] } = getContext('items');
@@ -23,19 +24,10 @@
 	<h1 class="text-2xl font-bold text-[hsl(var(--foreground))]">{$_('nav.search')}</h1>
 
 	<div class="relative">
-		<svg
-			class="absolute left-3 top-1/2 h-5 w-5 -translate-y-1/2 text-[hsl(var(--muted-foreground))]"
-			fill="none"
-			stroke="currentColor"
-			viewBox="0 0 24 24"
-		>
-			<path
-				stroke-linecap="round"
-				stroke-linejoin="round"
-				stroke-width="2"
-				d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
-			/>
-		</svg>
+		<MagnifyingGlass
+			size={20}
+			class="absolute left-3 top-1/2 -translate-y-1/2 text-[hsl(var(--muted-foreground))]"
+		/>
 		<input
 			type="text"
 			bind:value={query}
diff --git a/apps/inventar/apps/web/src/routes/(app)/settings/+page.svelte b/apps/inventar/apps/web/src/routes/(app)/settings/+page.svelte
index 54a47b2b5..22b0db866 100644
--- a/apps/inventar/apps/web/src/routes/(app)/settings/+page.svelte
+++ b/apps/inventar/apps/web/src/routes/(app)/settings/+page.svelte
@@ -4,6 +4,7 @@
 	import { userSettings } from '$lib/stores/user-settings.svelte';
 	import { APP_VERSION } from '$lib/version';
 	import {
+	import { Envelope, SignOut, Tag, User } from '@manacore/shared-icons';
 		SettingsPage,
 		SettingsSection,
 		SettingsCard,
@@ -26,14 +27,7 @@
 <SettingsPage title="Einstellungen" subtitle="Verwalte dein Konto und passe die App an.">
 	<SettingsSection title="Konto">
 		{#snippet icon()}
-			<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
-				<path
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
-				/>
-			</svg>
+			<User size={20} />
 		{/snippet}
 		<SettingsCard>
 			<SettingsRow
@@ -42,14 +36,7 @@
 				border={false}
 			>
 				{#snippet icon()}
-					<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
-						/>
-					</svg>
+					<Envelope size={20} />
 				{/snippet}
 			</SettingsRow>
 		</SettingsCard>
@@ -83,14 +70,7 @@
 		<SettingsCard>
 			<SettingsRow label="Version" border={false}>
 				{#snippet icon()}
-					<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"
-						/>
-					</svg>
+					<Tag size={20} />
 				{/snippet}
 				<span class="text-[hsl(var(--muted-foreground))]">{APP_VERSION}</span>
 			</SettingsRow>
@@ -106,14 +86,7 @@
 			border={false}
 		>
 			{#snippet icon()}
-				<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
-					<path
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-						d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
-					/>
-				</svg>
+				<SignOut size={20} />
 			{/snippet}
 		</SettingsDangerButton>
 	</SettingsDangerZone>
diff --git a/apps/manacore/apps/web/src/lib/components/admin/QuickLinks.svelte b/apps/manacore/apps/web/src/lib/components/admin/QuickLinks.svelte
index 8b23a3dbd..0b710bcf1 100644
--- a/apps/manacore/apps/web/src/lib/components/admin/QuickLinks.svelte
+++ b/apps/manacore/apps/web/src/lib/components/admin/QuickLinks.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { CaretRight } from '@manacore/shared-icons';
+
 	interface Link {
 		name: string;
 		url: string;
@@ -36,14 +38,10 @@
 					<p class="font-medium text-sm truncate">{link.name}</p>
 					<p class="text-xs text-muted-foreground truncate">{link.description}</p>
 				</div>
-				<svg
-					class="h-4 w-4 text-muted-foreground group-hover:text-foreground transition-colors"
-					fill="none"
-					viewBox="0 0 24 24"
-					stroke="currentColor"
-				>
-					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
-				</svg>
+				<CaretRight
+					size={20}
+					class="text-muted-foreground group-hover:text-foreground transition-colors"
+				/>
 			</a>
 		{/each}
 	</div>
diff --git a/apps/manacore/apps/web/src/lib/components/dashboard/WidgetContainer.svelte b/apps/manacore/apps/web/src/lib/components/dashboard/WidgetContainer.svelte
index 0e7cdd904..77c0c59f7 100644
--- a/apps/manacore/apps/web/src/lib/components/dashboard/WidgetContainer.svelte
+++ b/apps/manacore/apps/web/src/lib/components/dashboard/WidgetContainer.svelte
@@ -8,6 +8,7 @@
 
 	import { _ } from 'svelte-i18n';
 	import { Card } from '@manacore/shared-ui';
+	import { DotsSixVertical, Trash } from '@manacore/shared-icons';
 	import type { WidgetConfig, WidgetSize } from '$lib/types/dashboard';
 	import { getWidgetMeta } from '$lib/types/dashboard';
 	import { dashboardStore } from '$lib/stores/dashboard.svelte';
@@ -54,14 +55,7 @@
 			<div
 				class="flex cursor-grab items-center justify-center gap-2 border-b border-border py-2 active:cursor-grabbing"
 			>
-				<svg class="h-5 w-5 text-muted-foreground" viewBox="0 0 24 24" fill="currentColor">
-					<circle cx="9" cy="5" r="1.5" />
-					<circle cx="15" cy="5" r="1.5" />
-					<circle cx="9" cy="12" r="1.5" />
-					<circle cx="15" cy="12" r="1.5" />
-					<circle cx="9" cy="19" r="1.5" />
-					<circle cx="15" cy="19" r="1.5" />
-				</svg>
+				<DotsSixVertical size={20} class="text-muted-foreground" />
 				<span class="text-sm font-medium">{meta?.icon} {$_(widget.title)}</span>
 			</div>
 
@@ -88,17 +82,7 @@
 					onclick={handleRemove}
 					class="flex items-center gap-1 rounded-lg px-3 py-1.5 text-sm font-medium text-destructive hover:bg-destructive/10"
 				>
-					<svg
-						class="h-4 w-4"
-						viewBox="0 0 24 24"
-						fill="none"
-						stroke="currentColor"
-						stroke-width="2"
-					>
-						<path d="M3 6h18" />
-						<path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" />
-						<path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" />
-					</svg>
+					<Trash size={16} />
 					{$_('dashboard.remove_widget')}
 				</button>
 			</div>
diff --git a/apps/manacore/apps/web/src/lib/components/dashboard/WidgetError.svelte b/apps/manacore/apps/web/src/lib/components/dashboard/WidgetError.svelte
index 5f5e733c7..c83ff03a7 100644
--- a/apps/manacore/apps/web/src/lib/components/dashboard/WidgetError.svelte
+++ b/apps/manacore/apps/web/src/lib/components/dashboard/WidgetError.svelte
@@ -6,6 +6,7 @@
 	 */
 
 	import { _ } from 'svelte-i18n';
+	import { ArrowsClockwise } from '@manacore/shared-icons';
 
 	interface Props {
 		/** Error message to display */
@@ -42,10 +43,7 @@
 			</svg>
 			{$_('common.loading')}
 		{:else}
-			<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-				<path d="M1 4v6h6" />
-				<path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10" />
-			</svg>
+			<ArrowsClockwise size={16} />
 			{$_('dashboard.retry')}
 		{/if}
 	</button>
diff --git a/apps/manacore/apps/web/src/lib/components/landing/LandingEditor.svelte b/apps/manacore/apps/web/src/lib/components/landing/LandingEditor.svelte
index eb21efd1b..76910d657 100644
--- a/apps/manacore/apps/web/src/lib/components/landing/LandingEditor.svelte
+++ b/apps/manacore/apps/web/src/lib/components/landing/LandingEditor.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { Button, Card } from '@manacore/shared-ui';
+	import { ArrowSquareOut } from '@manacore/shared-icons';
 	import SectionEditor from './SectionEditor.svelte';
 	import RepeatableField from './RepeatableField.svelte';
 	import { saveLandingConfig, publishLanding } from '$lib/api/services/landing';
@@ -500,14 +501,7 @@
 				class="ml-auto text-sm text-primary-600 hover:underline flex items-center gap-1"
 			>
 				{config.publishedUrl}
-				<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-					<path
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-						d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
-					/>
-				</svg>
+				<ArrowSquareOut size={16} />
 			</a>
 		{/if}
 	</div>
diff --git a/apps/manacore/apps/web/src/lib/components/landing/RepeatableField.svelte b/apps/manacore/apps/web/src/lib/components/landing/RepeatableField.svelte
index f8aa4ed43..a054473e4 100644
--- a/apps/manacore/apps/web/src/lib/components/landing/RepeatableField.svelte
+++ b/apps/manacore/apps/web/src/lib/components/landing/RepeatableField.svelte
@@ -1,6 +1,7 @@
 <script lang="ts" generics="T">
 	import { Button } from '@manacore/shared-ui';
 	import type { Snippet } from 'svelte';
+	import { Plus, X } from '@manacore/shared-icons';
 
 	let {
 		items = [],
@@ -26,14 +27,7 @@
 				class="absolute top-2 right-2 p-1 text-gray-400 hover:text-red-500 transition-colors"
 				title="Remove"
 			>
-				<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-					<path
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-						d="M6 18L18 6M6 6l12 12"
-					/>
-				</svg>
+				<X size={20} />
 			</button>
 			{@render renderItem(item, index)}
 		</div>
@@ -44,9 +38,7 @@
 		onclick={onAdd}
 		class="w-full flex items-center justify-center gap-2 py-2 px-4 border border-dashed border-gray-300 dark:border-gray-600 rounded-lg text-sm text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 hover:border-gray-400 dark:hover:border-gray-500 transition-colors"
 	>
-		<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-			<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
-		</svg>
+		<Plus size={20} />
 		{addLabel}
 	</button>
 </div>
diff --git a/apps/manacore/apps/web/src/lib/components/landing/SectionEditor.svelte b/apps/manacore/apps/web/src/lib/components/landing/SectionEditor.svelte
index 2d20ec52e..366fe283f 100644
--- a/apps/manacore/apps/web/src/lib/components/landing/SectionEditor.svelte
+++ b/apps/manacore/apps/web/src/lib/components/landing/SectionEditor.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
+	import { CaretDown } from '@manacore/shared-icons';
 
 	let {
 		title,
@@ -17,14 +18,10 @@
 		class="w-full flex items-center justify-between px-4 py-3 bg-gray-50 dark:bg-gray-800/50 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
 	>
 		<span class="font-medium text-sm text-gray-900 dark:text-white">{title}</span>
-		<svg
-			class="h-5 w-5 text-gray-500 transition-transform {isExpanded ? 'rotate-180' : ''}"
-			fill="none"
-			viewBox="0 0 24 24"
-			stroke="currentColor"
-		>
-			<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
-		</svg>
+		<CaretDown
+			size={20}
+			class="text-gray-500 transition-transform {isExpanded ? 'rotate-180' : ''}"
+		/>
 	</button>
 
 	{#if isExpanded}
diff --git a/apps/manacore/apps/web/src/lib/components/my-data/DeleteConfirmationModal.svelte b/apps/manacore/apps/web/src/lib/components/my-data/DeleteConfirmationModal.svelte
index 32bc20187..c6efe8cf9 100644
--- a/apps/manacore/apps/web/src/lib/components/my-data/DeleteConfirmationModal.svelte
+++ b/apps/manacore/apps/web/src/lib/components/my-data/DeleteConfirmationModal.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { DeleteUserDataResponse } from '$lib/api/services/admin';
+	import { Check, Warning, XCircle } from '@manacore/shared-icons';
 
 	interface Props {
 		show: boolean;
@@ -49,19 +50,7 @@
 						<div
 							class="h-10 w-10 rounded-full bg-green-100 dark:bg-green-900/30 flex items-center justify-center"
 						>
-							<svg
-								class="h-5 w-5 text-green-600"
-								fill="none"
-								viewBox="0 0 24 24"
-								stroke="currentColor"
-							>
-								<path
-									stroke-linecap="round"
-									stroke-linejoin="round"
-									stroke-width="2"
-									d="M5 13l4 4L19 7"
-								/>
-							</svg>
+							<Check size={20} class="text-green-600" />
 						</div>
 						<h3 class="text-lg font-semibold">Daten geloscht</h3>
 					</div>
@@ -116,19 +105,7 @@
 						<div
 							class="h-10 w-10 rounded-full bg-red-100 dark:bg-red-900/30 flex items-center justify-center"
 						>
-							<svg
-								class="h-5 w-5 text-red-600"
-								fill="none"
-								viewBox="0 0 24 24"
-								stroke="currentColor"
-							>
-								<path
-									stroke-linecap="round"
-									stroke-linejoin="round"
-									stroke-width="2"
-									d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
-								/>
-							</svg>
+							<Warning size={20} class="text-red-600" />
 						</div>
 						<h3 class="text-lg font-semibold text-red-600">Alle Daten loschen?</h3>
 					</div>
@@ -149,43 +126,19 @@
 
 					<ul class="text-sm text-muted-foreground mb-6 space-y-2">
 						<li class="flex items-center gap-2">
-							<svg class="h-4 w-4 text-red-500" fill="currentColor" viewBox="0 0 20 20">
-								<path
-									fill-rule="evenodd"
-									d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
-									clip-rule="evenodd"
-								/>
-							</svg>
+							<XCircle size={16} weight="fill" class="text-red-500" />
 							<span>Alle Projektdaten (Chats, Todos, Termine, Kontakte, etc.)</span>
 						</li>
 						<li class="flex items-center gap-2">
-							<svg class="h-4 w-4 text-red-500" fill="currentColor" viewBox="0 0 20 20">
-								<path
-									fill-rule="evenodd"
-									d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
-									clip-rule="evenodd"
-								/>
-							</svg>
+							<XCircle size={16} weight="fill" class="text-red-500" />
 							<span>Alle Sessions und Anmeldedaten</span>
 						</li>
 						<li class="flex items-center gap-2">
-							<svg class="h-4 w-4 text-red-500" fill="currentColor" viewBox="0 0 20 20">
-								<path
-									fill-rule="evenodd"
-									d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
-									clip-rule="evenodd"
-								/>
-							</svg>
+							<XCircle size={16} weight="fill" class="text-red-500" />
 							<span>Credits und Transaktionshistorie</span>
 						</li>
 						<li class="flex items-center gap-2">
-							<svg class="h-4 w-4 text-red-500" fill="currentColor" viewBox="0 0 20 20">
-								<path
-									fill-rule="evenodd"
-									d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
-									clip-rule="evenodd"
-								/>
-							</svg>
+							<XCircle size={16} weight="fill" class="text-red-500" />
 							<span>Dein Nutzerkonto</span>
 						</li>
 					</ul>
diff --git a/apps/manacore/apps/web/src/lib/components/my-data/QRExportModal.svelte b/apps/manacore/apps/web/src/lib/components/my-data/QRExportModal.svelte
index 5ee634822..e99886c6d 100644
--- a/apps/manacore/apps/web/src/lib/components/my-data/QRExportModal.svelte
+++ b/apps/manacore/apps/web/src/lib/components/my-data/QRExportModal.svelte
@@ -4,6 +4,7 @@
 	import { qrExportService, type QRExportResult } from '$lib/api/services/qr-export';
 	import type { UserDataSummary } from '$lib/api/services/my-data';
 	import { WallpaperModal } from '@manacore/wallpaper-generator/svelte';
+	import { DownloadSimple, Image, Warning, QrCode } from '@manacore/shared-icons';
 
 	interface Props {
 		show: boolean;
@@ -119,14 +120,7 @@
 				<!-- Header -->
 				<div class="flex items-center gap-3 mb-6">
 					<div class="h-10 w-10 rounded-full bg-primary/10 flex items-center justify-center">
-						<svg class="h-5 w-5 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-							<path
-								stroke-linecap="round"
-								stroke-linejoin="round"
-								stroke-width="2"
-								d="M12 4v1m6 11h2m-6 0h-2v4m0-11v3m0 0h.01M12 12h4.01M16 20h4M4 12h4m12 0h.01M5 8h2a1 1 0 001-1V5a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1zm12 0h2a1 1 0 001-1V5a1 1 0 00-1-1h-2a1 1 0 00-1 1v2a1 1 0 001 1zM5 20h2a1 1 0 001-1v-2a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1z"
-							/>
-						</svg>
+						<QrCode size={20} class="text-primary" />
 					</div>
 					<div>
 						<h3 class="text-lg font-semibold">QR-Code Export</h3>
@@ -150,19 +144,7 @@
 					<div
 						class="rounded-lg border border-red-200 bg-red-50 dark:border-red-800 dark:bg-red-900/20 p-4 text-center"
 					>
-						<svg
-							class="h-8 w-8 text-red-500 mx-auto mb-2"
-							fill="none"
-							viewBox="0 0 24 24"
-							stroke="currentColor"
-						>
-							<path
-								stroke-linecap="round"
-								stroke-linejoin="round"
-								stroke-width="2"
-								d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
-							/>
-						</svg>
+						<Warning size={20} class="text-red-500 mx-auto mb-2" />
 						<p class="text-red-600 dark:text-red-400 mb-4">{error}</p>
 						<button
 							onclick={loadExportData}
@@ -226,28 +208,14 @@
 								onclick={downloadPNG}
 								class="flex-1 flex items-center justify-center gap-2 px-4 py-2 border rounded-lg hover:bg-muted transition-colors"
 							>
-								<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-									<path
-										stroke-linecap="round"
-										stroke-linejoin="round"
-										stroke-width="2"
-										d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
-									/>
-								</svg>
+								<DownloadSimple size={20} />
 								PNG
 							</button>
 							<button
 								onclick={downloadSVG}
 								class="flex-1 flex items-center justify-center gap-2 px-4 py-2 border rounded-lg hover:bg-muted transition-colors"
 							>
-								<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-									<path
-										stroke-linecap="round"
-										stroke-linejoin="round"
-										stroke-width="2"
-										d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
-									/>
-								</svg>
+								<DownloadSimple size={20} />
 								SVG
 							</button>
 						</div>
@@ -257,14 +225,7 @@
 							onclick={openWallpaperModal}
 							class="w-full flex items-center justify-center gap-2 px-4 py-2 bg-primary/10 text-primary border border-primary/20 rounded-lg hover:bg-primary/20 transition-colors"
 						>
-							<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-								<path
-									stroke-linecap="round"
-									stroke-linejoin="round"
-									stroke-width="2"
-									d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
-								/>
-							</svg>
+							<Image size={20} />
 							Als Wallpaper
 						</button>
 					</div>
diff --git a/apps/manacore/apps/web/src/lib/components/onboarding/OnboardingWizard.svelte b/apps/manacore/apps/web/src/lib/components/onboarding/OnboardingWizard.svelte
index 4249f6ffd..d01288c35 100644
--- a/apps/manacore/apps/web/src/lib/components/onboarding/OnboardingWizard.svelte
+++ b/apps/manacore/apps/web/src/lib/components/onboarding/OnboardingWizard.svelte
@@ -7,6 +7,7 @@
 	import AppsStep from './steps/AppsStep.svelte';
 	import CreditsStep from './steps/CreditsStep.svelte';
 	import CompleteStep from './steps/CompleteStep.svelte';
+	import { Check } from '@manacore/shared-icons';
 
 	interface Props {
 		onComplete: () => void;
@@ -123,14 +124,7 @@
 									: 'bg-muted text-muted-foreground'}"
 						>
 							{#if index < currentStep}
-								<svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-									<path
-										stroke-linecap="round"
-										stroke-linejoin="round"
-										stroke-width="2"
-										d="M5 13l4 4L19 7"
-									/>
-								</svg>
+								<Check size={20} />
 							{:else}
 								{index + 1}
 							{/if}
diff --git a/apps/manacore/apps/web/src/lib/components/onboarding/steps/AppsStep.svelte b/apps/manacore/apps/web/src/lib/components/onboarding/steps/AppsStep.svelte
index cf0651f67..129cf5b36 100644
--- a/apps/manacore/apps/web/src/lib/components/onboarding/steps/AppsStep.svelte
+++ b/apps/manacore/apps/web/src/lib/components/onboarding/steps/AppsStep.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { Info } from '@manacore/shared-icons';
 	// Apps overview step - shows available Mana apps
 
 	const APPS = [
@@ -105,14 +106,7 @@
 	<div class="mt-8 p-4 rounded-xl bg-primary/5 border border-primary/20">
 		<div class="flex gap-3">
 			<div class="h-10 w-10 rounded-lg bg-primary/10 flex items-center justify-center shrink-0">
-				<svg class="h-5 w-5 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-					<path
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-						d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-					/>
-				</svg>
+				<Info size={20} class="text-primary" />
 			</div>
 			<div>
 				<h4 class="font-medium">Ein Konto, alle Apps</h4>
diff --git a/apps/manacore/apps/web/src/lib/components/onboarding/steps/CompleteStep.svelte b/apps/manacore/apps/web/src/lib/components/onboarding/steps/CompleteStep.svelte
index 50aa8631f..70f1e3e45 100644
--- a/apps/manacore/apps/web/src/lib/components/onboarding/steps/CompleteStep.svelte
+++ b/apps/manacore/apps/web/src/lib/components/onboarding/steps/CompleteStep.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { Check, Gear, House, SquaresFour, CurrencyCircleDollar } from '@manacore/shared-icons';
+
 	// Completion step with celebration
 </script>
 
@@ -8,9 +10,7 @@
 		<div
 			class="inline-flex h-24 w-24 rounded-full bg-gradient-to-br from-green-400 to-emerald-500 items-center justify-center shadow-lg shadow-green-500/25 animate-bounce"
 		>
-			<svg class="h-12 w-12 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
-			</svg>
+			<Check size={20} class="text-white" />
 		</div>
 
 		<!-- Confetti-like decorations -->
@@ -40,14 +40,7 @@
 				<div
 					class="h-10 w-10 rounded-lg bg-primary/10 flex items-center justify-center group-hover:bg-primary/20 transition-colors"
 				>
-					<svg class="h-5 w-5 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
-						/>
-					</svg>
+					<House size={20} class="text-primary" />
 				</div>
 				<div>
 					<div class="font-semibold group-hover:text-primary transition-colors">Dashboard</div>
@@ -64,19 +57,7 @@
 				<div
 					class="h-10 w-10 rounded-lg bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center group-hover:bg-blue-200 dark:group-hover:bg-blue-900/50 transition-colors"
 				>
-					<svg
-						class="h-5 w-5 text-blue-600 dark:text-blue-400"
-						fill="none"
-						viewBox="0 0 24 24"
-						stroke="currentColor"
-					>
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"
-						/>
-					</svg>
+					<SquaresFour size={20} class="text-blue-600 dark:text-blue-400" />
 				</div>
 				<div>
 					<div class="font-semibold group-hover:text-blue-600 transition-colors">Alle Apps</div>
@@ -93,19 +74,7 @@
 				<div
 					class="h-10 w-10 rounded-lg bg-yellow-100 dark:bg-yellow-900/30 flex items-center justify-center group-hover:bg-yellow-200 dark:group-hover:bg-yellow-900/50 transition-colors"
 				>
-					<svg
-						class="h-5 w-5 text-yellow-600 dark:text-yellow-400"
-						fill="none"
-						viewBox="0 0 24 24"
-						stroke="currentColor"
-					>
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-						/>
-					</svg>
+					<CurrencyCircleDollar size={20} class="text-yellow-600 dark:text-yellow-400" />
 				</div>
 				<div>
 					<div class="font-semibold group-hover:text-yellow-600 transition-colors">Credits</div>
@@ -122,25 +91,7 @@
 				<div
 					class="h-10 w-10 rounded-lg bg-gray-100 dark:bg-gray-800 flex items-center justify-center group-hover:bg-gray-200 dark:group-hover:bg-gray-700 transition-colors"
 				>
-					<svg
-						class="h-5 w-5 text-gray-600 dark:text-gray-400"
-						fill="none"
-						viewBox="0 0 24 24"
-						stroke="currentColor"
-					>
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
-						/>
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
-						/>
-					</svg>
+					<Gear size={20} class="text-gray-600 dark:text-gray-400" />
 				</div>
 				<div>
 					<div
diff --git a/apps/manacore/apps/web/src/lib/components/onboarding/steps/CreditsStep.svelte b/apps/manacore/apps/web/src/lib/components/onboarding/steps/CreditsStep.svelte
index 911505e71..15706d51c 100644
--- a/apps/manacore/apps/web/src/lib/components/onboarding/steps/CreditsStep.svelte
+++ b/apps/manacore/apps/web/src/lib/components/onboarding/steps/CreditsStep.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { Check, CurrencyCircleDollar, Gift, Lightbulb } from '@manacore/shared-icons';
+
 	// Credits explanation step
 </script>
 
@@ -7,14 +9,7 @@
 		<div
 			class="inline-flex h-16 w-16 rounded-2xl bg-gradient-to-br from-yellow-400 to-orange-500 items-center justify-center mb-4 shadow-lg shadow-orange-500/25"
 		>
-			<svg class="h-8 w-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-				<path
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-				/>
-			</svg>
+			<CurrencyCircleDollar size={32} class="text-white" />
 		</div>
 		<h2 class="text-2xl font-bold mb-2">Das Credits-System</h2>
 		<p class="text-muted-foreground">Einfach und transparent für alle AI-Features.</p>
@@ -32,51 +27,15 @@
 			</h3>
 			<ul class="space-y-2 text-sm text-muted-foreground">
 				<li class="flex items-start gap-2">
-					<svg
-						class="h-4 w-4 text-green-500 mt-0.5 shrink-0"
-						fill="none"
-						viewBox="0 0 24 24"
-						stroke="currentColor"
-					>
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M5 13l4 4L19 7"
-						/>
-					</svg>
+					<Check size={20} class="text-green-500 mt-0.5 shrink-0" />
 					<span>Du hast ein Credit-Guthaben für alle Mana-Apps</span>
 				</li>
 				<li class="flex items-start gap-2">
-					<svg
-						class="h-4 w-4 text-green-500 mt-0.5 shrink-0"
-						fill="none"
-						viewBox="0 0 24 24"
-						stroke="currentColor"
-					>
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M5 13l4 4L19 7"
-						/>
-					</svg>
+					<Check size={20} class="text-green-500 mt-0.5 shrink-0" />
 					<span>AI-Features wie Chat, Bildgenerierung etc. kosten Credits</span>
 				</li>
 				<li class="flex items-start gap-2">
-					<svg
-						class="h-4 w-4 text-green-500 mt-0.5 shrink-0"
-						fill="none"
-						viewBox="0 0 24 24"
-						stroke="currentColor"
-					>
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M5 13l4 4L19 7"
-						/>
-					</svg>
+					<Check size={20} class="text-green-500 mt-0.5 shrink-0" />
 					<span>Einfache Preisregel: <strong class="text-foreground">1 Mana = 1 Cent</strong></span>
 				</li>
 			</ul>
@@ -90,14 +49,7 @@
 				<span
 					class="h-6 w-6 rounded-full bg-green-500 flex items-center justify-center text-sm text-white"
 				>
-					<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M12 8v13m0-13V6a2 2 0 112 2h-2zm0 0V5.5A2.5 2.5 0 109.5 8H12zm-7 4h14M5 12a2 2 0 110-4h14a2 2 0 110 4M5 12v7a2 2 0 002 2h10a2 2 0 002-2v-7"
-						/>
-					</svg>
+					<Gift size={16} />
 				</span>
 				Gratis-Credits
 			</h3>
@@ -147,19 +99,7 @@
 			class="p-4 rounded-xl bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800"
 		>
 			<div class="flex gap-3">
-				<svg
-					class="h-5 w-5 text-blue-500 shrink-0 mt-0.5"
-					fill="none"
-					viewBox="0 0 24 24"
-					stroke="currentColor"
-				>
-					<path
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-						d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"
-					/>
-				</svg>
+				<Lightbulb size={20} class="text-blue-500 shrink-0 mt-0.5" />
 				<p class="text-sm text-blue-800 dark:text-blue-200">
 					<strong>Tipp:</strong> Mit einer Mana Quelle M erhältst du monatlich 1.000 Mana ab 9,99€/Monat.
 				</p>
diff --git a/apps/manacore/apps/web/src/lib/components/onboarding/steps/ProfileStep.svelte b/apps/manacore/apps/web/src/lib/components/onboarding/steps/ProfileStep.svelte
index 9a8dfeffd..1a1889440 100644
--- a/apps/manacore/apps/web/src/lib/components/onboarding/steps/ProfileStep.svelte
+++ b/apps/manacore/apps/web/src/lib/components/onboarding/steps/ProfileStep.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { authStore } from '$lib/stores/auth.svelte';
 	import { profileService } from '$lib/api/profile';
+	import { Camera, Check } from '@manacore/shared-icons';
 
 	let { nameValue = $bindable('') }: { nameValue?: string } = $props();
 
@@ -123,20 +124,7 @@
 				<div
 					class="absolute inset-0 rounded-full bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center"
 				>
-					<svg class="h-8 w-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"
-						/>
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"
-						/>
-					</svg>
+					<Camera size={20} class="text-white" />
 				</div>
 			</button>
 
@@ -176,14 +164,7 @@
 				class="p-3 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg"
 			>
 				<p class="text-sm text-green-600 dark:text-green-400 flex items-center gap-2">
-					<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M5 13l4 4L19 7"
-						/>
-					</svg>
+					<Check size={20} />
 					Profil gespeichert!
 				</p>
 			</div>
@@ -205,14 +186,7 @@
 					</svg>
 					Speichern...
 				{:else}
-					<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M5 13l4 4L19 7"
-						/>
-					</svg>
+					<Check size={20} />
 					Jetzt speichern
 				{/if}
 			</button>
diff --git a/apps/manacore/apps/web/src/lib/components/onboarding/steps/WelcomeStep.svelte b/apps/manacore/apps/web/src/lib/components/onboarding/steps/WelcomeStep.svelte
index d44f26615..99722e812 100644
--- a/apps/manacore/apps/web/src/lib/components/onboarding/steps/WelcomeStep.svelte
+++ b/apps/manacore/apps/web/src/lib/components/onboarding/steps/WelcomeStep.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { Palette, SquaresFour, CurrencyCircleDollar } from '@manacore/shared-icons';
+
 	// Welcome step - introduces ManaCore
 </script>
 
@@ -24,19 +26,7 @@
 			<div
 				class="h-8 w-8 rounded-md bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center flex-shrink-0"
 			>
-				<svg
-					class="h-4 w-4 text-blue-600 dark:text-blue-400"
-					fill="none"
-					viewBox="0 0 24 24"
-					stroke="currentColor"
-				>
-					<path
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-						d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"
-					/>
-				</svg>
+				<SquaresFour size={16} class="text-blue-600 dark:text-blue-400" />
 			</div>
 			<div>
 				<h3 class="font-medium text-sm">Alle Apps</h3>
@@ -48,19 +38,7 @@
 			<div
 				class="h-8 w-8 rounded-md bg-green-100 dark:bg-green-900/30 flex items-center justify-center flex-shrink-0"
 			>
-				<svg
-					class="h-4 w-4 text-green-600 dark:text-green-400"
-					fill="none"
-					viewBox="0 0 24 24"
-					stroke="currentColor"
-				>
-					<path
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-						d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-					/>
-				</svg>
+				<CurrencyCircleDollar size={16} class="text-green-600 dark:text-green-400" />
 			</div>
 			<div>
 				<h3 class="font-medium text-sm">Credits-System</h3>
@@ -72,19 +50,7 @@
 			<div
 				class="h-8 w-8 rounded-md bg-purple-100 dark:bg-purple-900/30 flex items-center justify-center flex-shrink-0"
 			>
-				<svg
-					class="h-4 w-4 text-purple-600 dark:text-purple-400"
-					fill="none"
-					viewBox="0 0 24 24"
-					stroke="currentColor"
-				>
-					<path
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-						d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01"
-					/>
-				</svg>
+				<Palette size={20} class="text-purple-600 dark:text-purple-400" />
 			</div>
 			<div>
 				<h3 class="font-medium text-sm">Personalisierung</h3>
diff --git a/apps/manacore/apps/web/src/lib/components/profile/ChangePasswordModal.svelte b/apps/manacore/apps/web/src/lib/components/profile/ChangePasswordModal.svelte
index 000a131df..e296dc62b 100644
--- a/apps/manacore/apps/web/src/lib/components/profile/ChangePasswordModal.svelte
+++ b/apps/manacore/apps/web/src/lib/components/profile/ChangePasswordModal.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { profileService } from '$lib/api/profile';
+	import { Key, Eye, EyeSlash } from '@manacore/shared-icons';
 
 	interface Props {
 		show: boolean;
@@ -86,14 +87,7 @@
 					<div
 						class="h-10 w-10 rounded-full bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center"
 					>
-						<svg class="h-5 w-5 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-							<path
-								stroke-linecap="round"
-								stroke-linejoin="round"
-								stroke-width="2"
-								d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"
-							/>
-						</svg>
+						<Key size={20} class="text-blue-600" />
 					</div>
 					<h3 class="text-lg font-semibold">Passwort ändern</h3>
 				</div>
@@ -118,14 +112,9 @@
 									class="absolute right-2 top-1/2 -translate-y-1/2 p-1 text-muted-foreground hover:text-foreground"
 								>
 									{#if showCurrentPassword}
-										<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-											<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" />
-										</svg>
+										<EyeSlash size={20} />
 									{:else}
-										<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-											<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
-											<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
-										</svg>
+										<Eye size={20} />
 									{/if}
 								</button>
 							</div>
@@ -150,14 +139,9 @@
 									class="absolute right-2 top-1/2 -translate-y-1/2 p-1 text-muted-foreground hover:text-foreground"
 								>
 									{#if showNewPassword}
-										<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-											<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" />
-										</svg>
+										<EyeSlash size={20} />
 									{:else}
-										<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-											<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
-											<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
-										</svg>
+										<Eye size={20} />
 									{/if}
 								</button>
 							</div>
@@ -178,7 +162,9 @@
 						</div>
 
 						{#if error}
-							<div class="p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
+							<div
+								class="p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg"
+							>
 								<p class="text-sm text-red-600 dark:text-red-400">{error}</p>
 							</div>
 						{/if}
diff --git a/apps/manacore/apps/web/src/lib/components/profile/DeleteAccountModal.svelte b/apps/manacore/apps/web/src/lib/components/profile/DeleteAccountModal.svelte
index e6053a76b..2f51319d0 100644
--- a/apps/manacore/apps/web/src/lib/components/profile/DeleteAccountModal.svelte
+++ b/apps/manacore/apps/web/src/lib/components/profile/DeleteAccountModal.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { profileService } from '$lib/api/profile';
+	import { Warning, XCircle } from '@manacore/shared-icons';
 
 	interface Props {
 		show: boolean;
@@ -78,14 +79,7 @@
 					<div
 						class="h-10 w-10 rounded-full bg-red-100 dark:bg-red-900/30 flex items-center justify-center"
 					>
-						<svg class="h-5 w-5 text-red-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-							<path
-								stroke-linecap="round"
-								stroke-linejoin="round"
-								stroke-width="2"
-								d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
-							/>
-						</svg>
+						<Warning size={20} class="text-red-600" />
 					</div>
 					<h3 class="text-lg font-semibold text-red-600">Konto löschen</h3>
 				</div>
@@ -104,43 +98,19 @@
 
 					<ul class="text-sm text-muted-foreground mb-6 space-y-2">
 						<li class="flex items-center gap-2">
-							<svg class="h-4 w-4 text-red-500 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
-								<path
-									fill-rule="evenodd"
-									d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
-									clip-rule="evenodd"
-								/>
-							</svg>
+							<XCircle size={16} weight="fill" class="text-red-500 flex-shrink-0" />
 							<span>Alle Projektdaten (Chats, Todos, Termine, etc.)</span>
 						</li>
 						<li class="flex items-center gap-2">
-							<svg class="h-4 w-4 text-red-500 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
-								<path
-									fill-rule="evenodd"
-									d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
-									clip-rule="evenodd"
-								/>
-							</svg>
+							<XCircle size={16} weight="fill" class="text-red-500 flex-shrink-0" />
 							<span>Alle verbleibenden Credits</span>
 						</li>
 						<li class="flex items-center gap-2">
-							<svg class="h-4 w-4 text-red-500 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
-								<path
-									fill-rule="evenodd"
-									d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
-									clip-rule="evenodd"
-								/>
-							</svg>
+							<XCircle size={16} weight="fill" class="text-red-500 flex-shrink-0" />
 							<span>Dein aktives Abonnement (wird gekündigt)</span>
 						</li>
 						<li class="flex items-center gap-2">
-							<svg class="h-4 w-4 text-red-500 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
-								<path
-									fill-rule="evenodd"
-									d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
-									clip-rule="evenodd"
-								/>
-							</svg>
+							<XCircle size={16} weight="fill" class="text-red-500 flex-shrink-0" />
 							<span>Dein Nutzerkonto</span>
 						</li>
 					</ul>
@@ -159,7 +129,9 @@
 					</div>
 
 					{#if error}
-						<div class="mb-4 p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
+						<div
+							class="mb-4 p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg"
+						>
 							<p class="text-sm text-red-600 dark:text-red-400">{error}</p>
 						</div>
 					{/if}
@@ -212,7 +184,9 @@
 						</div>
 
 						{#if error}
-							<div class="p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
+							<div
+								class="p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg"
+							>
 								<p class="text-sm text-red-600 dark:text-red-400">{error}</p>
 							</div>
 						{/if}
diff --git a/apps/manacore/apps/web/src/lib/components/profile/EditProfileModal.svelte b/apps/manacore/apps/web/src/lib/components/profile/EditProfileModal.svelte
index 70f9f4de0..b21011f12 100644
--- a/apps/manacore/apps/web/src/lib/components/profile/EditProfileModal.svelte
+++ b/apps/manacore/apps/web/src/lib/components/profile/EditProfileModal.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { profileService, type UserProfile } from '$lib/api/profile';
+	import { PencilSimple } from '@manacore/shared-icons';
 
 	interface Props {
 		show: boolean;
@@ -146,14 +147,7 @@
 			<div class="p-6">
 				<div class="flex items-center gap-3 mb-6">
 					<div class="h-10 w-10 rounded-full bg-primary/10 flex items-center justify-center">
-						<svg class="h-5 w-5 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-							<path
-								stroke-linecap="round"
-								stroke-linejoin="round"
-								stroke-width="2"
-								d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
-							/>
-						</svg>
+						<PencilSimple size={20} class="text-primary" />
 					</div>
 					<h3 class="text-lg font-semibold">Profil bearbeiten</h3>
 				</div>
diff --git a/apps/manacore/apps/web/src/routes/(app)/admin/+layout.svelte b/apps/manacore/apps/web/src/routes/(app)/admin/+layout.svelte
index 71b63cf33..b0359e1c8 100644
--- a/apps/manacore/apps/web/src/routes/(app)/admin/+layout.svelte
+++ b/apps/manacore/apps/web/src/routes/(app)/admin/+layout.svelte
@@ -3,6 +3,7 @@
 	import { goto } from '$app/navigation';
 	import type { Snippet } from 'svelte';
 	import { authStore } from '$lib/stores/auth.svelte';
+	import { ShieldCheck } from '@manacore/shared-icons';
 
 	let { children }: { children: Snippet } = $props();
 
@@ -50,19 +51,7 @@
 				<p class="text-muted-foreground">System monitoring and management</p>
 			</div>
 			<div class="flex items-center gap-2 px-3 py-1.5 rounded-full bg-red-100 dark:bg-red-900/30">
-				<svg
-					class="h-4 w-4 text-red-600 dark:text-red-400"
-					fill="none"
-					viewBox="0 0 24 24"
-					stroke="currentColor"
-				>
-					<path
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-						d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"
-					/>
-				</svg>
+				<ShieldCheck size={20} class="text-red-600 dark:text-red-400" />
 				<span class="text-sm font-medium text-red-600 dark:text-red-400">Admin</span>
 			</div>
 		</div>
diff --git a/apps/manacore/apps/web/src/routes/(app)/admin/system/+page.svelte b/apps/manacore/apps/web/src/routes/(app)/admin/system/+page.svelte
index 34c0431d1..594b85542 100644
--- a/apps/manacore/apps/web/src/routes/(app)/admin/system/+page.svelte
+++ b/apps/manacore/apps/web/src/routes/(app)/admin/system/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
+	import { ArrowSquareOut } from '@manacore/shared-icons';
 	import QuickLinks from '$lib/components/admin/QuickLinks.svelte';
 
 	interface ServiceHealth {
@@ -124,14 +125,7 @@
 								rel="noopener noreferrer"
 								class="text-muted-foreground hover:text-foreground"
 							>
-								<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-									<path
-										stroke-linecap="round"
-										stroke-linejoin="round"
-										stroke-width="2"
-										d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
-									/>
-								</svg>
+								<ArrowSquareOut size={16} />
 							</a>
 						{/if}
 					</div>
diff --git a/apps/manacore/apps/web/src/routes/(app)/admin/user-data/+page.svelte b/apps/manacore/apps/web/src/routes/(app)/admin/user-data/+page.svelte
index ac620b480..500cb3073 100644
--- a/apps/manacore/apps/web/src/routes/(app)/admin/user-data/+page.svelte
+++ b/apps/manacore/apps/web/src/routes/(app)/admin/user-data/+page.svelte
@@ -2,6 +2,7 @@
 	import { onMount } from 'svelte';
 	import { goto } from '$app/navigation';
 	import { adminService, type UserListItem } from '$lib/api/services/admin';
+	import { MagnifyingGlass } from '@manacore/shared-icons';
 
 	let users = $state<UserListItem[]>([]);
 	let loading = $state(true);
@@ -84,19 +85,10 @@
 	<!-- Search -->
 	<div class="flex items-center gap-4">
 		<div class="relative flex-1 max-w-md">
-			<svg
-				class="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground"
-				fill="none"
-				viewBox="0 0 24 24"
-				stroke="currentColor"
-			>
-				<path
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
-				/>
-			</svg>
+			<MagnifyingGlass
+				size={20}
+				class="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground"
+			/>
 			<input
 				type="text"
 				placeholder="Nach Email oder Name suchen..."
diff --git a/apps/manacore/apps/web/src/routes/(app)/admin/user-data/[userId]/+page.svelte b/apps/manacore/apps/web/src/routes/(app)/admin/user-data/[userId]/+page.svelte
index f42feaaf7..e5d7b62cc 100644
--- a/apps/manacore/apps/web/src/routes/(app)/admin/user-data/[userId]/+page.svelte
+++ b/apps/manacore/apps/web/src/routes/(app)/admin/user-data/[userId]/+page.svelte
@@ -2,6 +2,7 @@
 	import { onMount } from 'svelte';
 	import { page } from '$app/stores';
 	import { goto } from '$app/navigation';
+	import { CaretLeft, Check, Warning, CheckCircle, WarningCircle } from '@manacore/shared-icons';
 	import StatCard from '$lib/components/admin/StatCard.svelte';
 	import ProjectDataCard from '$lib/components/admin/ProjectDataCard.svelte';
 	import {
@@ -86,9 +87,7 @@
 			class="p-2 rounded-lg hover:bg-muted transition-colors"
 			aria-label="Zuruck zur Nutzerliste"
 		>
-			<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
-			</svg>
+			<CaretLeft size={20} />
 		</button>
 		<div class="flex-1">
 			<h1 class="text-2xl font-bold">Nutzerdaten</h1>
@@ -150,24 +149,12 @@
 						</span>
 						{#if userData.user.emailVerified}
 							<span class="text-xs text-green-600 flex items-center gap-1">
-								<svg class="h-3 w-3" fill="currentColor" viewBox="0 0 20 20">
-									<path
-										fill-rule="evenodd"
-										d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
-										clip-rule="evenodd"
-									/>
-								</svg>
+								<CheckCircle size={12} weight="fill" />
 								Email verifiziert
 							</span>
 						{:else}
 							<span class="text-xs text-yellow-600 flex items-center gap-1">
-								<svg class="h-3 w-3" fill="currentColor" viewBox="0 0 20 20">
-									<path
-										fill-rule="evenodd"
-										d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
-										clip-rule="evenodd"
-									/>
-								</svg>
+								<WarningCircle size={12} weight="fill" />
 								Email nicht verifiziert
 							</span>
 						{/if}
@@ -267,19 +254,7 @@
 						<div
 							class="h-10 w-10 rounded-full bg-green-100 dark:bg-green-900/30 flex items-center justify-center"
 						>
-							<svg
-								class="h-5 w-5 text-green-600"
-								fill="none"
-								viewBox="0 0 24 24"
-								stroke="currentColor"
-							>
-								<path
-									stroke-linecap="round"
-									stroke-linejoin="round"
-									stroke-width="2"
-									d="M5 13l4 4L19 7"
-								/>
-							</svg>
+							<Check size={20} class="text-green-600" />
 						</div>
 						<h3 class="text-lg font-semibold">Loschung abgeschlossen</h3>
 					</div>
@@ -325,19 +300,7 @@
 						<div
 							class="h-10 w-10 rounded-full bg-red-100 dark:bg-red-900/30 flex items-center justify-center"
 						>
-							<svg
-								class="h-5 w-5 text-red-600"
-								fill="none"
-								viewBox="0 0 24 24"
-								stroke="currentColor"
-							>
-								<path
-									stroke-linecap="round"
-									stroke-linejoin="round"
-									stroke-width="2"
-									d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
-								/>
-							</svg>
+							<Warning size={20} class="text-red-600" />
 						</div>
 						<h3 class="text-lg font-semibold text-red-600">Daten unwiderruflich loschen?</h3>
 					</div>
diff --git a/apps/manacore/apps/web/src/routes/(app)/admin/users/+page.svelte b/apps/manacore/apps/web/src/routes/(app)/admin/users/+page.svelte
index 3ea2cc296..f7d41a564 100644
--- a/apps/manacore/apps/web/src/routes/(app)/admin/users/+page.svelte
+++ b/apps/manacore/apps/web/src/routes/(app)/admin/users/+page.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
 	import UserTable from '$lib/components/admin/UserTable.svelte';
+	import { MagnifyingGlass } from '@manacore/shared-icons';
 
 	interface User {
 		id: string;
@@ -99,19 +100,10 @@
 	<!-- Search & Filters -->
 	<div class="flex items-center gap-4">
 		<div class="relative flex-1 max-w-md">
-			<svg
-				class="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground"
-				fill="none"
-				viewBox="0 0 24 24"
-				stroke="currentColor"
-			>
-				<path
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
-				/>
-			</svg>
+			<MagnifyingGlass
+				size={20}
+				class="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground"
+			/>
 			<input
 				type="text"
 				placeholder="Search users..."
diff --git a/apps/manacore/apps/web/src/routes/(app)/api-keys/+page.svelte b/apps/manacore/apps/web/src/routes/(app)/api-keys/+page.svelte
index 622e9ae4f..c7f8c9f85 100644
--- a/apps/manacore/apps/web/src/routes/(app)/api-keys/+page.svelte
+++ b/apps/manacore/apps/web/src/routes/(app)/api-keys/+page.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
 	import { Button, Input, Card, PageHeader, Badge } from '@manacore/shared-ui';
+	import { Check, Copy, Info, Key, Plus, Prohibit } from '@manacore/shared-icons';
 	import { authStore } from '$lib/stores/auth.svelte';
 	import { apiKeysService, type ApiKey, type ApiKeyWithSecret } from '$lib/api/api-keys';
 
@@ -133,14 +134,7 @@
 	>
 		{#snippet actions()}
 			<Button onclick={() => (showCreateModal = true)}>
-				<svg class="h-4 w-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-					<path
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-						d="M12 4v16m8-8H4"
-					/>
-				</svg>
+				<Plus size={16} class="mr-2" />
 				Create API Key
 			</Button>
 		{/snippet}
@@ -169,14 +163,7 @@
 						<div
 							class="flex h-10 w-10 items-center justify-center rounded-full bg-green-100 dark:bg-green-900/20 text-green-600 dark:text-green-400"
 						>
-							<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-								<path
-									stroke-linecap="round"
-									stroke-linejoin="round"
-									stroke-width="2"
-									d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"
-								/>
-							</svg>
+							<Key size={20} />
 						</div>
 						<div>
 							<h2 class="text-lg font-semibold">Active Keys</h2>
@@ -188,19 +175,7 @@
 
 					{#if activeKeys.length === 0}
 						<div class="text-center py-8 text-muted-foreground">
-							<svg
-								class="h-12 w-12 mx-auto mb-4 opacity-50"
-								fill="none"
-								stroke="currentColor"
-								viewBox="0 0 24 24"
-							>
-								<path
-									stroke-linecap="round"
-									stroke-linejoin="round"
-									stroke-width="2"
-									d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"
-								/>
-							</svg>
+							<Key size={48} class="mx-auto mb-4 opacity-50" />
 							<p class="font-medium">No API keys yet</p>
 							<p class="text-sm mt-1">Create your first API key to get started</p>
 						</div>
@@ -214,7 +189,9 @@
 											<Badge variant="secondary">{key.scopes.join(', ')}</Badge>
 											<Badge variant="outline">{key.rateLimitRequests}/min</Badge>
 										</div>
-										<div class="flex items-center gap-4 mt-1 text-sm text-muted-foreground flex-wrap">
+										<div
+											class="flex items-center gap-4 mt-1 text-sm text-muted-foreground flex-wrap"
+										>
 											<code class="bg-muted px-2 py-0.5 rounded font-mono text-xs"
 												>{key.keyPrefix}</code
 											>
@@ -245,14 +222,7 @@
 							<div
 								class="flex h-10 w-10 items-center justify-center rounded-full bg-red-100 dark:bg-red-900/20 text-red-600 dark:text-red-400"
 							>
-								<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-									<path
-										stroke-linecap="round"
-										stroke-linejoin="round"
-										stroke-width="2"
-										d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"
-									/>
-								</svg>
+								<Prohibit size={20} />
 							</div>
 							<div>
 								<h2 class="text-lg font-semibold">Revoked Keys</h2>
@@ -293,14 +263,7 @@
 						<div
 							class="flex h-10 w-10 items-center justify-center rounded-full bg-blue-100 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400"
 						>
-							<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-								<path
-									stroke-linecap="round"
-									stroke-linejoin="round"
-									stroke-width="2"
-									d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-								/>
-							</svg>
+							<Info size={20} />
 						</div>
 						<div>
 							<h2 class="text-lg font-semibold">How to Use</h2>
@@ -350,14 +313,7 @@
 					<div
 						class="flex h-12 w-12 mx-auto mb-4 items-center justify-center rounded-full bg-green-100 dark:bg-green-900/20 text-green-600 dark:text-green-400"
 					>
-						<svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-							<path
-								stroke-linecap="round"
-								stroke-linejoin="round"
-								stroke-width="2"
-								d="M5 13l4 4L19 7"
-							/>
-						</svg>
+						<Check size={20} />
 					</div>
 
 					<h3 class="text-lg font-semibold mb-2">API Key Created</h3>
@@ -376,28 +332,9 @@
 							onclick={() => copyToClipboard(createdKey!.key)}
 						>
 							{#if copied}
-								<svg
-									class="h-5 w-5 text-green-600"
-									fill="none"
-									stroke="currentColor"
-									viewBox="0 0 24 24"
-								>
-									<path
-										stroke-linecap="round"
-										stroke-linejoin="round"
-										stroke-width="2"
-										d="M5 13l4 4L19 7"
-									/>
-								</svg>
+								<Check size={20} class="text-green-600" />
 							{:else}
-								<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-									<path
-										stroke-linecap="round"
-										stroke-linejoin="round"
-										stroke-width="2"
-										d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
-									/>
-								</svg>
+								<Copy size={20} />
 							{/if}
 						</button>
 					</div>
@@ -444,7 +381,9 @@
 							<span class="text-sm">Text-to-Speech (tts)</span>
 						</label>
 					</div>
-					<p class="mt-1 text-xs text-muted-foreground">Select which services this key can access</p>
+					<p class="mt-1 text-xs text-muted-foreground">
+						Select which services this key can access
+					</p>
 				</div>
 
 				<!-- Rate Limit -->
diff --git a/apps/manacore/apps/web/src/routes/(app)/dashboard/+page.svelte b/apps/manacore/apps/web/src/routes/(app)/dashboard/+page.svelte
index f6041b8b5..212ff6b31 100644
--- a/apps/manacore/apps/web/src/routes/(app)/dashboard/+page.svelte
+++ b/apps/manacore/apps/web/src/routes/(app)/dashboard/+page.svelte
@@ -8,6 +8,7 @@
 	import TilingLayout from '$lib/components/dashboard/TilingLayout.svelte';
 	import { collectLeaves } from '$lib/utils/tiling-tree';
 	import TilePanel from '$lib/components/dashboard/TilePanel.svelte';
+	import { Check, PencilSimple } from '@manacore/shared-icons';
 
 	let isMobile = $state(false);
 
@@ -53,29 +54,12 @@
 			>
 				{#if tilingStore.isEditing}
 					<span class="flex items-center gap-2">
-						<svg
-							class="h-4 w-4"
-							viewBox="0 0 24 24"
-							fill="none"
-							stroke="currentColor"
-							stroke-width="2"
-						>
-							<path d="M5 13l4 4L19 7" />
-						</svg>
+						<Check size={20} />
 						{$_('dashboard.done')}
 					</span>
 				{:else}
 					<span class="flex items-center gap-2">
-						<svg
-							class="h-4 w-4"
-							viewBox="0 0 24 24"
-							fill="none"
-							stroke="currentColor"
-							stroke-width="2"
-						>
-							<path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
-							<path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
-						</svg>
+						<PencilSimple size={16} />
 						{$_('dashboard.customize')}
 					</span>
 				{/if}
diff --git a/apps/manacore/apps/web/src/routes/(app)/gifts/+page.svelte b/apps/manacore/apps/web/src/routes/(app)/gifts/+page.svelte
index f92fa9427..b7928ee0f 100644
--- a/apps/manacore/apps/web/src/routes/(app)/gifts/+page.svelte
+++ b/apps/manacore/apps/web/src/routes/(app)/gifts/+page.svelte
@@ -2,6 +2,7 @@
 	import { onMount } from 'svelte';
 	import { page } from '$app/stores';
 	import { Card, PageHeader } from '@manacore/shared-ui';
+	import { ClipboardText, X } from '@manacore/shared-icons';
 	import {
 		giftsService,
 		type GiftListItem,
@@ -365,14 +366,7 @@
 											class="p-2 rounded hover:bg-surface-hover text-muted-foreground hover:text-foreground"
 											title="Link kopieren"
 										>
-											<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-												<path
-													stroke-linecap="round"
-													stroke-linejoin="round"
-													stroke-width="2"
-													d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"
-												></path>
-											</svg>
+											<ClipboardText size={16} />
 										</button>
 										{#if gift.status === 'active'}
 											<button
@@ -398,19 +392,7 @@
 														></path>
 													</svg>
 												{:else}
-													<svg
-														class="h-4 w-4"
-														fill="none"
-														stroke="currentColor"
-														viewBox="0 0 24 24"
-													>
-														<path
-															stroke-linecap="round"
-															stroke-linejoin="round"
-															stroke-width="2"
-															d="M6 18L18 6M6 6l12 12"
-														></path>
-													</svg>
+													<X size={20} />
 												{/if}
 											</button>
 										{/if}
diff --git a/apps/manacore/apps/web/src/routes/(app)/organizations/+page.svelte b/apps/manacore/apps/web/src/routes/(app)/organizations/+page.svelte
index 21f31f8bd..da39f3625 100644
--- a/apps/manacore/apps/web/src/routes/(app)/organizations/+page.svelte
+++ b/apps/manacore/apps/web/src/routes/(app)/organizations/+page.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { Card, Button, PageHeader } from '@manacore/shared-ui';
 	import type { PageData } from './$types';
+	import { Plus } from '@manacore/shared-icons';
 
 	let { data }: { data: PageData } = $props();
 
@@ -30,14 +31,7 @@
 	>
 		{#snippet actions()}
 			<Button variant="primary">
-				<svg class="mr-2 h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-					<path
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-						d="M12 4v16m8-8H4"
-					/>
-				</svg>
+				<Plus size={20} class="mr-2" />
 				Create Organization
 			</Button>
 		{/snippet}
diff --git a/apps/manacore/apps/web/src/routes/(app)/settings/my-data/+page.svelte b/apps/manacore/apps/web/src/routes/(app)/settings/my-data/+page.svelte
index b0c71827f..f7d3f84de 100644
--- a/apps/manacore/apps/web/src/routes/(app)/settings/my-data/+page.svelte
+++ b/apps/manacore/apps/web/src/routes/(app)/settings/my-data/+page.svelte
@@ -2,6 +2,17 @@
 	import { onMount } from 'svelte';
 	import { goto } from '$app/navigation';
 	import { Card, PageHeader } from '@manacore/shared-ui';
+	import {
+		QrCode,
+		DownloadSimple,
+		Info,
+		ShieldCheck,
+		CurrencyCircleDollar,
+		Clock,
+		Warning,
+		CheckCircle,
+		WarningCircle,
+	} from '@manacore/shared-icons';
 	import Breadcrumbs from '$lib/components/Breadcrumbs.svelte';
 	import StatCard from '$lib/components/admin/StatCard.svelte';
 	import ProjectDataCard from '$lib/components/admin/ProjectDataCard.svelte';
@@ -117,14 +128,7 @@
 					class="flex items-center gap-2 px-4 py-2 border rounded-lg hover:bg-muted transition-colors"
 					title="Als QR-Code exportieren"
 				>
-					<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M12 4v1m6 11h2m-6 0h-2v4m0-11v3m0 0h.01M12 12h4.01M16 20h4M4 12h4m12 0h.01M5 8h2a1 1 0 001-1V5a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1zm12 0h2a1 1 0 001-1V5a1 1 0 00-1-1h-2a1 1 0 00-1 1v2a1 1 0 001 1zM5 20h2a1 1 0 001-1v-2a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1z"
-						/>
-					</svg>
+					<QrCode size={16} />
 					<span>QR-Code</span>
 				</button>
 				<button
@@ -149,14 +153,7 @@
 							></path>
 						</svg>
 					{:else}
-						<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-							<path
-								stroke-linecap="round"
-								stroke-linejoin="round"
-								stroke-width="2"
-								d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
-							/>
-						</svg>
+						<DownloadSimple size={16} />
 					{/if}
 					<span>{exporting ? 'Exportiere...' : 'Daten exportieren'}</span>
 				</button>
@@ -169,19 +166,7 @@
 		class="rounded-lg border bg-blue-50 dark:bg-blue-900/20 border-blue-200 dark:border-blue-800 p-4"
 	>
 		<div class="flex items-start gap-3">
-			<svg
-				class="h-5 w-5 text-blue-500 mt-0.5 shrink-0"
-				fill="none"
-				viewBox="0 0 24 24"
-				stroke="currentColor"
-			>
-				<path
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-				/>
-			</svg>
+			<Info size={20} class="text-blue-500 mt-0.5 shrink-0" />
 			<div class="flex-1">
 				<p class="text-sm text-blue-800 dark:text-blue-200">
 					Hier siehst du alle Daten, die wir uber dich speichern. Mehr Informationen findest du in
@@ -245,24 +230,12 @@
 							</span>
 							{#if userData.user.emailVerified}
 								<span class="text-xs text-green-600 flex items-center gap-1">
-									<svg class="h-3 w-3" fill="currentColor" viewBox="0 0 20 20">
-										<path
-											fill-rule="evenodd"
-											d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
-											clip-rule="evenodd"
-										/>
-									</svg>
+									<CheckCircle size={12} weight="fill" />
 									Email verifiziert
 								</span>
 							{:else}
 								<span class="text-xs text-yellow-600 flex items-center gap-1">
-									<svg class="h-3 w-3" fill="currentColor" viewBox="0 0 20 20">
-										<path
-											fill-rule="evenodd"
-											d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
-											clip-rule="evenodd"
-										/>
-									</svg>
+									<WarningCircle size={12} weight="fill" />
 									Email nicht verifiziert
 								</span>
 							{/if}
@@ -293,19 +266,7 @@
 			<Card>
 				<div class="p-6">
 					<h3 class="text-lg font-semibold mb-4 flex items-center gap-2">
-						<svg
-							class="h-5 w-5 text-blue-500"
-							fill="none"
-							viewBox="0 0 24 24"
-							stroke="currentColor"
-						>
-							<path
-								stroke-linecap="round"
-								stroke-linejoin="round"
-								stroke-width="2"
-								d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"
-							/>
-						</svg>
+						<ShieldCheck size={20} class="text-blue-500" />
 						Authentifizierung
 					</h3>
 					<div class="space-y-3">
@@ -337,19 +298,7 @@
 			<Card>
 				<div class="p-6">
 					<h3 class="text-lg font-semibold mb-4 flex items-center gap-2">
-						<svg
-							class="h-5 w-5 text-yellow-500"
-							fill="none"
-							viewBox="0 0 24 24"
-							stroke="currentColor"
-						>
-							<path
-								stroke-linecap="round"
-								stroke-linejoin="round"
-								stroke-width="2"
-								d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-							/>
-						</svg>
+						<CurrencyCircleDollar size={20} class="text-yellow-500" />
 						Credits
 					</h3>
 					<div class="space-y-3">
@@ -388,14 +337,7 @@
 		<Card>
 			<div class="p-6">
 				<h3 class="text-lg font-semibold mb-4 flex items-center gap-2">
-					<svg class="h-5 w-5 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
-						/>
-					</svg>
+					<Clock size={20} class="text-gray-500" />
 					Aufbewahrungsfristen
 				</h3>
 				<p class="text-sm text-muted-foreground mb-4">So lange speichern wir deine Daten:</p>
@@ -431,14 +373,7 @@
 					<div
 						class="h-10 w-10 rounded-full bg-red-100 dark:bg-red-900/30 flex items-center justify-center"
 					>
-						<svg class="h-5 w-5 text-red-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-							<path
-								stroke-linecap="round"
-								stroke-linejoin="round"
-								stroke-width="2"
-								d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
-							/>
-						</svg>
+						<Warning size={20} class="text-red-600" />
 					</div>
 					<div>
 						<h3 class="text-lg font-semibold text-red-600">Gefahrenzone</h3>
diff --git a/apps/manacore/apps/web/src/routes/(app)/subscription/+page.svelte b/apps/manacore/apps/web/src/routes/(app)/subscription/+page.svelte
index 7d06f9cd6..6ae8692b6 100644
--- a/apps/manacore/apps/web/src/routes/(app)/subscription/+page.svelte
+++ b/apps/manacore/apps/web/src/routes/(app)/subscription/+page.svelte
@@ -2,6 +2,7 @@
 	import { onMount } from 'svelte';
 	import { page } from '$app/stores';
 	import { Card, PageHeader } from '@manacore/shared-ui';
+	import { Check } from '@manacore/shared-icons';
 	import {
 		subscriptionsService,
 		type SubscriptionPlan,
@@ -87,15 +88,30 @@
 	function getStatusBadge(status: string): { text: string; class: string } {
 		switch (status) {
 			case 'active':
-				return { text: 'Aktiv', class: 'bg-green-100 text-green-800 dark:bg-green-900/20 dark:text-green-400' };
+				return {
+					text: 'Aktiv',
+					class: 'bg-green-100 text-green-800 dark:bg-green-900/20 dark:text-green-400',
+				};
 			case 'canceled':
-				return { text: 'Gekündigt', class: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/20 dark:text-yellow-400' };
+				return {
+					text: 'Gekündigt',
+					class: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/20 dark:text-yellow-400',
+				};
 			case 'past_due':
-				return { text: 'Überfällig', class: 'bg-red-100 text-red-800 dark:bg-red-900/20 dark:text-red-400' };
+				return {
+					text: 'Überfällig',
+					class: 'bg-red-100 text-red-800 dark:bg-red-900/20 dark:text-red-400',
+				};
 			case 'trialing':
-				return { text: 'Testphase', class: 'bg-blue-100 text-blue-800 dark:bg-blue-900/20 dark:text-blue-400' };
+				return {
+					text: 'Testphase',
+					class: 'bg-blue-100 text-blue-800 dark:bg-blue-900/20 dark:text-blue-400',
+				};
 			default:
-				return { text: status, class: 'bg-gray-100 text-gray-800 dark:bg-gray-900/20 dark:text-gray-400' };
+				return {
+					text: status,
+					class: 'bg-gray-100 text-gray-800 dark:bg-gray-900/20 dark:text-gray-400',
+				};
 		}
 	}
 
@@ -113,7 +129,10 @@
 			const { url } = await subscriptionsService.createCheckout(plan.id, billingInterval);
 			window.location.href = url;
 		} catch (e) {
-			showToast(e instanceof Error ? e.message : 'Fehler beim Erstellen der Checkout-Session', 'error');
+			showToast(
+				e instanceof Error ? e.message : 'Fehler beim Erstellen der Checkout-Session',
+				'error'
+			);
 		} finally {
 			processingPlanId = null;
 		}
@@ -132,7 +151,11 @@
 	}
 
 	async function handleCancelSubscription() {
-		if (!confirm('Möchtest du dein Abonnement wirklich kündigen? Du kannst es bis zum Ende der Laufzeit weiter nutzen.')) {
+		if (
+			!confirm(
+				'Möchtest du dein Abonnement wirklich kündigen? Du kannst es bis zum Ende der Laufzeit weiter nutzen.'
+			)
+		) {
 			return;
 		}
 
@@ -179,7 +202,9 @@
 
 	{#if loading}
 		<div class="flex items-center justify-center py-12">
-			<div class="h-8 w-8 animate-spin rounded-full border-4 border-primary border-t-transparent"></div>
+			<div
+				class="h-8 w-8 animate-spin rounded-full border-4 border-primary border-t-transparent"
+			></div>
 		</div>
 	{:else if error}
 		<Card>
@@ -220,8 +245,19 @@
 						>
 							{#if openingPortal}
 								<svg class="animate-spin h-4 w-4" fill="none" viewBox="0 0 24 24">
-									<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-									<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+									<circle
+										class="opacity-25"
+										cx="12"
+										cy="12"
+										r="10"
+										stroke="currentColor"
+										stroke-width="4"
+									></circle>
+									<path
+										class="opacity-75"
+										fill="currentColor"
+										d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+									></path>
 								</svg>
 							{/if}
 							Zahlungsmethode verwalten
@@ -272,13 +308,13 @@
 					<div>
 						<div class="flex items-center gap-3">
 							<h2 class="text-xl font-bold">Free Plan</h2>
-							<span class="px-2 py-0.5 text-xs font-medium rounded-full bg-gray-100 text-gray-800 dark:bg-gray-900/20 dark:text-gray-400">
+							<span
+								class="px-2 py-0.5 text-xs font-medium rounded-full bg-gray-100 text-gray-800 dark:bg-gray-900/20 dark:text-gray-400"
+							>
 								Aktuell
 							</span>
 						</div>
-						<p class="text-sm text-muted-foreground mt-1">
-							150 Mana / Monat
-						</p>
+						<p class="text-sm text-muted-foreground mt-1">150 Mana / Monat</p>
 					</div>
 					<p class="text-sm text-muted-foreground">
 						Upgrade auf einen bezahlten Plan für mehr Mana und Features.
@@ -314,7 +350,8 @@
 				<div class="inline-flex items-center gap-2 p-1 bg-muted rounded-lg">
 					<button
 						onclick={() => (billingInterval = 'month')}
-						class="px-4 py-2 rounded-md text-sm font-medium transition-colors {billingInterval === 'month'
+						class="px-4 py-2 rounded-md text-sm font-medium transition-colors {billingInterval ===
+						'month'
 							? 'bg-background shadow-sm'
 							: 'hover:text-foreground'}"
 					>
@@ -322,7 +359,8 @@
 					</button>
 					<button
 						onclick={() => (billingInterval = 'year')}
-						class="px-4 py-2 rounded-md text-sm font-medium transition-colors {billingInterval === 'year'
+						class="px-4 py-2 rounded-md text-sm font-medium transition-colors {billingInterval ===
+						'year'
 							? 'bg-background shadow-sm'
 							: 'hover:text-foreground'}"
 					>
@@ -336,12 +374,18 @@
 			<div class="grid gap-6 md:grid-cols-3">
 				{#each plans as plan}
 					{@const isCurrentPlan = currentSubscription?.plan?.id === plan.id}
-					{@const price = billingInterval === 'year' ? plan.priceYearlyEuroCents : plan.priceMonthlyEuroCents}
-					{@const savings = getSavingsPercent(plan.priceMonthlyEuroCents, plan.priceYearlyEuroCents)}
+					{@const price =
+						billingInterval === 'year' ? plan.priceYearlyEuroCents : plan.priceMonthlyEuroCents}
+					{@const savings = getSavingsPercent(
+						plan.priceMonthlyEuroCents,
+						plan.priceYearlyEuroCents
+					)}
 					<Card>
 						<div class="text-center p-2">
 							{#if isCurrentPlan}
-								<span class="inline-block px-3 py-1 text-xs font-medium rounded-full bg-primary/10 text-primary mb-4">
+								<span
+									class="inline-block px-3 py-1 text-xs font-medium rounded-full bg-primary/10 text-primary mb-4"
+								>
 									Dein Plan
 								</span>
 							{/if}
@@ -375,9 +419,7 @@
 								<ul class="mt-6 space-y-3 text-left">
 									{#each plan.features as feature}
 										<li class="flex items-start gap-2 text-sm">
-											<svg class="h-5 w-5 text-green-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-												<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
-											</svg>
+											<Check size={20} class="text-green-500 flex-shrink-0" />
 											<span>{feature}</span>
 										</li>
 									{/each}
@@ -389,13 +431,24 @@
 								disabled={isCurrentPlan || processingPlanId === plan.id || plan.isDefault}
 								class="mt-6 w-full py-2 px-4 rounded-lg font-medium transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2
 									{isCurrentPlan || plan.isDefault
-										? 'bg-muted text-muted-foreground'
-										: 'bg-primary text-primary-foreground hover:bg-primary/90'}"
+									? 'bg-muted text-muted-foreground'
+									: 'bg-primary text-primary-foreground hover:bg-primary/90'}"
 							>
 								{#if processingPlanId === plan.id}
 									<svg class="animate-spin h-4 w-4" fill="none" viewBox="0 0 24 24">
-										<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-										<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+										<circle
+											class="opacity-25"
+											cx="12"
+											cy="12"
+											r="10"
+											stroke="currentColor"
+											stroke-width="4"
+										></circle>
+										<path
+											class="opacity-75"
+											fill="currentColor"
+											d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+										></path>
 									</svg>
 									Wird verarbeitet...
 								{:else if isCurrentPlan}
@@ -445,11 +498,15 @@
 										</td>
 										<td class="py-3 pr-4">
 											{#if invoice.status === 'paid'}
-												<span class="px-2 py-0.5 text-xs font-medium rounded-full bg-green-100 text-green-800 dark:bg-green-900/20 dark:text-green-400">
+												<span
+													class="px-2 py-0.5 text-xs font-medium rounded-full bg-green-100 text-green-800 dark:bg-green-900/20 dark:text-green-400"
+												>
 													Bezahlt
 												</span>
 											{:else}
-												<span class="px-2 py-0.5 text-xs font-medium rounded-full bg-yellow-100 text-yellow-800 dark:bg-yellow-900/20 dark:text-yellow-400">
+												<span
+													class="px-2 py-0.5 text-xs font-medium rounded-full bg-yellow-100 text-yellow-800 dark:bg-yellow-900/20 dark:text-yellow-400"
+												>
 													{invoice.status}
 												</span>
 											{/if}
@@ -480,7 +537,8 @@
 <!-- Toast Notification -->
 {#if toastMessage}
 	<div
-		class="fixed bottom-4 right-4 z-50 px-4 py-3 rounded-lg shadow-lg animate-fade-in {toastType === 'success'
+		class="fixed bottom-4 right-4 z-50 px-4 py-3 rounded-lg shadow-lg animate-fade-in {toastType ===
+		'success'
 			? 'bg-green-600 text-white'
 			: 'bg-red-600 text-white'}"
 	>
diff --git a/apps/manacore/apps/web/src/routes/email-verified/+page.svelte b/apps/manacore/apps/web/src/routes/email-verified/+page.svelte
index 469bb4f01..ba6e18afd 100644
--- a/apps/manacore/apps/web/src/routes/email-verified/+page.svelte
+++ b/apps/manacore/apps/web/src/routes/email-verified/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
+	import { Check } from '@manacore/shared-icons';
 </script>
 
 <svelte:head>
@@ -14,14 +15,7 @@
 		<div
 			class="mx-auto mb-6 flex h-20 w-20 items-center justify-center rounded-full bg-green-100 dark:bg-green-900/30"
 		>
-			<svg
-				class="h-10 w-10 text-green-600 dark:text-green-400"
-				fill="none"
-				stroke="currentColor"
-				viewBox="0 0 24 24"
-			>
-				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
-			</svg>
+			<Check size={20} class="text-green-600 dark:text-green-400" />
 		</div>
 
 		<h1 class="mb-4 text-2xl font-bold text-gray-900 dark:text-white">E-Mail bestätigt!</h1>
diff --git a/apps/manacore/apps/web/src/routes/verification-failed/+page.svelte b/apps/manacore/apps/web/src/routes/verification-failed/+page.svelte
index d10b6ec0f..0c2e26ebd 100644
--- a/apps/manacore/apps/web/src/routes/verification-failed/+page.svelte
+++ b/apps/manacore/apps/web/src/routes/verification-failed/+page.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
 	import { page } from '$app/stores';
+	import { X } from '@manacore/shared-icons';
 
 	// Get error from URL query params
 	const error = $derived($page.url.searchParams.get('error') || 'unknown_error');
@@ -30,19 +31,7 @@
 		<div
 			class="mx-auto mb-6 flex h-20 w-20 items-center justify-center rounded-full bg-red-100 dark:bg-red-900/30"
 		>
-			<svg
-				class="h-10 w-10 text-red-600 dark:text-red-400"
-				fill="none"
-				stroke="currentColor"
-				viewBox="0 0 24 24"
-			>
-				<path
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="M6 18L18 6M6 6l12 12"
-				/>
-			</svg>
+			<X size={20} class="text-red-600 dark:text-red-400" />
 		</div>
 
 		<h1 class="mb-4 text-2xl font-bold text-gray-900 dark:text-white">
diff --git a/apps/manadeck/apps/web/src/routes/(app)/settings/+page.svelte b/apps/manadeck/apps/web/src/routes/(app)/settings/+page.svelte
index 0096eeaa1..e5dd159af 100644
--- a/apps/manadeck/apps/web/src/routes/(app)/settings/+page.svelte
+++ b/apps/manadeck/apps/web/src/routes/(app)/settings/+page.svelte
@@ -9,6 +9,7 @@
 		SettingsRow,
 		GlobalSettingsSection,
 	} from '@manacore/shared-ui';
+	import { Info } from '@manacore/shared-icons';
 
 	onMount(async () => {
 		await userSettings.load();
@@ -26,14 +27,7 @@
 	<!-- About Section -->
 	<SettingsSection title="Über">
 		{#snippet icon()}
-			<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
-				<path
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-				/>
-			</svg>
+			<Info />
 		{/snippet}
 
 		<SettingsCard>
diff --git a/apps/matrix/apps/web/src/lib/components/chat/ForwardMessageDialog.svelte b/apps/matrix/apps/web/src/lib/components/chat/ForwardMessageDialog.svelte
index 08874c1ee..287b03bfd 100644
--- a/apps/matrix/apps/web/src/lib/components/chat/ForwardMessageDialog.svelte
+++ b/apps/matrix/apps/web/src/lib/components/chat/ForwardMessageDialog.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { matrixStore, type SimpleMessage, type SimpleRoom } from '$lib/matrix';
-	import { X, MagnifyingGlass, PaperPlaneTilt, User, Users } from '@manacore/shared-icons';
+	import { Check, MagnifyingGlass, PaperPlaneTilt, User, Users, X } from '@manacore/shared-icons';
 
 	interface Props {
 		open: boolean;
@@ -125,19 +125,7 @@
 									: 'border-black/20 dark:border-white/20'}"
 							>
 								{#if selectedRooms.has(room.id)}
-									<svg
-										class="w-3 h-3 text-white"
-										fill="none"
-										viewBox="0 0 24 24"
-										stroke="currentColor"
-									>
-										<path
-											stroke-linecap="round"
-											stroke-linejoin="round"
-											stroke-width="3"
-											d="M5 13l4 4L19 7"
-										/>
-									</svg>
+									<Check size={14} class="text-white" />
 								{/if}
 							</div>
 
diff --git a/apps/matrix/apps/web/src/routes/(app)/chat/[roomId]/+page.svelte b/apps/matrix/apps/web/src/routes/(app)/chat/[roomId]/+page.svelte
index 50ccb8cf7..eb244ab66 100644
--- a/apps/matrix/apps/web/src/routes/(app)/chat/[roomId]/+page.svelte
+++ b/apps/matrix/apps/web/src/routes/(app)/chat/[roomId]/+page.svelte
@@ -2,6 +2,7 @@
 	import { page } from '$app/stores';
 	import { matrixStore, type SimpleMessage } from '$lib/matrix';
 	import { RoomHeader, Timeline, MessageInput, DropZoneOverlay } from '$lib/components/chat';
+	import { CaretLeft } from '@manacore/shared-icons';
 	import RoomSettingsPanel from '$lib/components/chat/RoomSettingsPanel.svelte';
 	import SearchDialog from '$lib/components/chat/SearchDialog.svelte';
 	import ForwardMessageDialog from '$lib/components/chat/ForwardMessageDialog.svelte';
@@ -249,14 +250,7 @@
 			<div
 				class="w-10 h-10 rounded-full bg-primary/20 backdrop-blur-sm flex items-center justify-center"
 			>
-				<svg class="w-5 h-5 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-					<path
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-						d="M15 19l-7-7 7-7"
-					/>
-				</svg>
+				<CaretLeft size={20} class="text-primary" />
 			</div>
 		</div>
 	{/if}
diff --git a/apps/moodlit/apps/web/src/routes/(app)/moods/+page.svelte b/apps/moodlit/apps/web/src/routes/(app)/moods/+page.svelte
index bde3160c2..1353233ef 100644
--- a/apps/moodlit/apps/web/src/routes/(app)/moods/+page.svelte
+++ b/apps/moodlit/apps/web/src/routes/(app)/moods/+page.svelte
@@ -3,6 +3,7 @@
 	import { moodCollection } from '$lib/data/local-store';
 	import type { LocalMood } from '$lib/data/local-store';
 	import { toast } from 'svelte-sonner';
+	import { X } from '@manacore/shared-icons';
 
 	const moods = useLiveQuery(() => moodCollection.getAll());
 
@@ -156,14 +157,7 @@
 							}}
 							class="absolute right-2 top-2 rounded-full p-1 text-gray-500 opacity-0 hover:bg-gray-800 hover:text-red-400 group-hover:opacity-100"
 						>
-							<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"
-								><path
-									stroke-linecap="round"
-									stroke-linejoin="round"
-									stroke-width="2"
-									d="M6 18L18 6M6 6l12 12"
-								/></svg
-							>
+							<X size={16} />
 						</button>
 					{/if}
 				</button>
diff --git a/apps/moodlit/apps/web/src/routes/(app)/sequences/+page.svelte b/apps/moodlit/apps/web/src/routes/(app)/sequences/+page.svelte
index 33f56440f..e551a3af2 100644
--- a/apps/moodlit/apps/web/src/routes/(app)/sequences/+page.svelte
+++ b/apps/moodlit/apps/web/src/routes/(app)/sequences/+page.svelte
@@ -2,6 +2,7 @@
 	import { useLiveQuery } from '@manacore/local-store/svelte';
 	import { sequenceCollection, moodCollection } from '$lib/data/local-store';
 	import { toast } from 'svelte-sonner';
+	import { Trash } from '@manacore/shared-icons';
 
 	const sequences = useLiveQuery(() => sequenceCollection.getAll());
 	const moods = useLiveQuery(() => moodCollection.getAll());
@@ -100,14 +101,7 @@
 							onclick={() => deleteSequence(seq.id, seq.name)}
 							class="rounded p-1 text-gray-500 opacity-0 hover:text-red-400 group-hover:opacity-100"
 						>
-							<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"
-								><path
-									stroke-linecap="round"
-									stroke-linejoin="round"
-									stroke-width="2"
-									d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
-								/></svg
-							>
+							<Trash size={16} />
 						</button>
 					</div>
 				</div>
diff --git a/apps/mukke/apps/web/src/lib/components/BeatLibrary.svelte b/apps/mukke/apps/web/src/lib/components/BeatLibrary.svelte
index 6abeff92c..19c8a1d50 100644
--- a/apps/mukke/apps/web/src/lib/components/BeatLibrary.svelte
+++ b/apps/mukke/apps/web/src/lib/components/BeatLibrary.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
 	import { authStore } from '$lib/stores/auth.svelte';
+	import { MusicNote, Pause, Play } from '@manacore/shared-icons';
 
 	interface LibraryBeat {
 		id: string;
@@ -134,14 +135,7 @@
 	{:else if beats.length === 0}
 		<div class="text-center py-12 text-foreground-secondary">
 			<div class="w-16 h-16 mx-auto mb-4 opacity-50">
-				<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" class="w-full h-full">
-					<path
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-						d="M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 10l12-3"
-					/>
-				</svg>
+				<MusicNote size={20} class="w-full h-full" />
 			</div>
 			<p>No beats available in the library yet.</p>
 			<p class="text-sm mt-2">Upload your own beat instead.</p>
@@ -159,13 +153,9 @@
 						aria-label={previewingBeat === beat.id ? 'Stop preview' : 'Play preview'}
 					>
 						{#if previewingBeat === beat.id}
-							<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
-								<path d="M6 4h4v16H6V4zm8 0h4v16h-4V4z" />
-							</svg>
+							<Pause size={20} weight="fill" />
 						{:else}
-							<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
-								<path d="M8 5v14l11-7z" />
-							</svg>
+							<Play size={20} weight="fill" />
 						{/if}
 					</button>
 
diff --git a/apps/mukke/apps/web/src/lib/components/BeatUploader.svelte b/apps/mukke/apps/web/src/lib/components/BeatUploader.svelte
index 0c01d149f..ad70bad98 100644
--- a/apps/mukke/apps/web/src/lib/components/BeatUploader.svelte
+++ b/apps/mukke/apps/web/src/lib/components/BeatUploader.svelte
@@ -3,6 +3,7 @@
 	import { audioStore } from '$lib/stores/audio.svelte';
 	import { detectBpmFromFile } from '$lib/utils/bpm-detector';
 	import BeatLibrary from './BeatLibrary.svelte';
+	import { MusicNote, Upload, Warning } from '@manacore/shared-icons';
 
 	interface Props {
 		projectId: string;
@@ -138,14 +139,7 @@
 				: 'text-foreground-secondary hover:text-foreground'}"
 		>
 			<span class="flex items-center justify-center gap-2">
-				<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-					<path
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-						d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
-					/>
-				</svg>
+				<Upload size={16} />
 				Upload
 			</span>
 			{#if activeTab === 'upload'}
@@ -160,14 +154,7 @@
 				: 'text-foreground-secondary hover:text-foreground'}"
 		>
 			<span class="flex items-center justify-center gap-2">
-				<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-					<path
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-						d="M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 10l12-3"
-					/>
-				</svg>
+				<MusicNote size={16} />
 				Library
 			</span>
 			{#if activeTab === 'library'}
@@ -198,19 +185,7 @@
 				<div class="space-y-4">
 					<div class="w-16 h-16 mx-auto">
 						{#if isDetectingBpm}
-							<svg
-								class="w-full h-full text-primary animate-pulse"
-								fill="none"
-								stroke="currentColor"
-								viewBox="0 0 24 24"
-							>
-								<path
-									stroke-linecap="round"
-									stroke-linejoin="round"
-									stroke-width="2"
-									d="M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 10l12-3"
-								/>
-							</svg>
+							<MusicNote size={20} class="w-full h-full text-primary animate-pulse" />
 						{:else}
 							<div
 								class="w-full h-full border-4 border-primary border-t-transparent rounded-full animate-spin"
@@ -230,14 +205,7 @@
 			{:else}
 				<label for="beat-upload" class="cursor-pointer block">
 					<div class="w-16 h-16 mx-auto mb-4 text-foreground-secondary">
-						<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" class="w-full h-full">
-							<path
-								stroke-linecap="round"
-								stroke-linejoin="round"
-								stroke-width="2"
-								d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
-							/>
-						</svg>
+						<Upload size={20} class="w-full h-full" />
 					</div>
 					<p class="text-lg font-medium mb-2">Upload a Beat</p>
 					<p class="text-foreground-secondary text-sm">
@@ -271,19 +239,7 @@
 			</div>
 		{:else if transcriptionError}
 			<div class="flex items-center gap-3 p-4 bg-red-500/10 rounded-lg border border-red-500/30">
-				<svg
-					class="w-5 h-5 text-red-500 flex-shrink-0"
-					fill="none"
-					stroke="currentColor"
-					viewBox="0 0 24 24"
-				>
-					<path
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-						d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
-					/>
-				</svg>
+				<Warning size={20} class="text-red-500" />
 				<div class="flex-1">
 					<p class="text-sm font-medium text-red-500">Transcription failed</p>
 					<p class="text-xs text-foreground-secondary">{transcriptionError}</p>
diff --git a/apps/mukke/apps/web/src/lib/components/FullPlayer.svelte b/apps/mukke/apps/web/src/lib/components/FullPlayer.svelte
index 652bef728..4c0263e0e 100644
--- a/apps/mukke/apps/web/src/lib/components/FullPlayer.svelte
+++ b/apps/mukke/apps/web/src/lib/components/FullPlayer.svelte
@@ -2,6 +2,16 @@
 	import { playerStore } from '$lib/stores/player.svelte';
 	import VisualizerRenderer from '$lib/visualizer/VisualizerRenderer.svelte';
 	import { visualizerStore } from '$lib/visualizer/registry.svelte';
+	import {
+		CaretDown,
+		Pause,
+		Play,
+		Playlist,
+		Repeat,
+		SkipForward,
+		SpeakerHigh,
+		X,
+	} from '@manacore/shared-icons';
 
 	let innerHeight = $state(typeof window !== 'undefined' ? window.innerHeight : 800);
 
@@ -49,14 +59,7 @@
 					class="p-2 rounded-lg bg-white/10 hover:bg-white/20 backdrop-blur-sm transition-colors text-white"
 					aria-label="Close player"
 				>
-					<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M19 9l-7 7-7-7"
-						/>
-					</svg>
+					<CaretDown size={24} />
 				</button>
 				<div class="text-sm text-white/70">Now Playing</div>
 				<!-- Visualizer switcher -->
@@ -128,11 +131,7 @@
 							: 'text-white/40 hover:text-white/70'}"
 						aria-label="Toggle shuffle"
 					>
-						<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
-							<path
-								d="M10.59 9.17L5.41 4 4 5.41l5.17 5.17 1.42-1.41zM14.5 4l2.04 2.04L4 18.59 5.41 20 17.96 7.46 20 9.5V4h-5.5zm.33 9.41l-1.41 1.41 3.13 3.13L14.5 20H20v-5.5l-2.04 2.04-3.13-3.13z"
-							/>
-						</svg>
+						<X size={20} weight="fill" />
 					</button>
 
 					<!-- Previous -->
@@ -141,9 +140,7 @@
 						class="p-2 rounded-full hover:bg-white/10 transition-colors text-white"
 						aria-label="Previous track"
 					>
-						<svg class="w-7 h-7" fill="currentColor" viewBox="0 0 24 24">
-							<path d="M6 6h2v12H6zm3.5 6l8.5 6V6z" />
-						</svg>
+						<SkipForward size={20} weight="fill" />
 					</button>
 
 					<!-- Play/Pause -->
@@ -153,13 +150,9 @@
 						aria-label={playerStore.isPlaying ? 'Pause' : 'Play'}
 					>
 						{#if playerStore.isPlaying}
-							<svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
-								<path d="M6 4h4v16H6V4zm8 0h4v16h-4V4z" />
-							</svg>
+							<Pause size={32} weight="fill" />
 						{:else}
-							<svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
-								<path d="M8 5v14l11-7z" />
-							</svg>
+							<Play size={32} weight="fill" />
 						{/if}
 					</button>
 
@@ -169,9 +162,7 @@
 						class="p-2 rounded-full hover:bg-white/10 transition-colors text-white"
 						aria-label="Next track"
 					>
-						<svg class="w-7 h-7" fill="currentColor" viewBox="0 0 24 24">
-							<path d="M6 18l8.5-6L6 6v12zm2-8.14L11.03 12 8 14.14V9.86zM16 6h2v12h-2z" />
-						</svg>
+						<Play size={20} weight="fill" />
 					</button>
 
 					<!-- Repeat -->
@@ -182,9 +173,7 @@
 							: 'text-white/40 hover:text-white/70'}"
 						aria-label="Toggle repeat ({playerStore.repeatMode})"
 					>
-						<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
-							<path d="M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4z" />
-						</svg>
+						<Repeat size={20} weight="fill" />
 						{#if playerStore.repeatMode === 'one'}
 							<span
 								class="absolute -top-1 -right-1 text-[10px] font-bold bg-white text-black rounded-full w-4 h-4 flex items-center justify-center"
@@ -196,11 +185,7 @@
 
 				<!-- Volume + Queue row -->
 				<div class="flex items-center justify-center gap-4">
-					<svg class="w-4 h-4 text-white/50 shrink-0" fill="currentColor" viewBox="0 0 24 24">
-						<path
-							d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"
-						/>
-					</svg>
+					<SpeakerHigh size={16} weight="fill" class="text-white/50 shrink-0" />
 					<input
 						type="range"
 						min="0"
@@ -217,11 +202,7 @@
 							: 'text-white/40 hover:text-white/70'}"
 						aria-label="Toggle queue"
 					>
-						<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
-							<path
-								d="M15 6H3v2h12V6zm0 4H3v2h12v-2zM3 16h8v-2H3v2zM17 6v8.18c-.31-.11-.65-.18-1-.18-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3V8h3V6h-5z"
-							/>
-						</svg>
+						<Playlist size={20} weight="fill" />
 					</button>
 				</div>
 			</div>
diff --git a/apps/mukke/apps/web/src/lib/components/MarkerTimeline.svelte b/apps/mukke/apps/web/src/lib/components/MarkerTimeline.svelte
index e053ce4ef..9052aef8a 100644
--- a/apps/mukke/apps/web/src/lib/components/MarkerTimeline.svelte
+++ b/apps/mukke/apps/web/src/lib/components/MarkerTimeline.svelte
@@ -3,6 +3,7 @@
 	import { audioStore } from '$lib/stores/audio.svelte';
 	import { editorStore } from '$lib/stores/editor.svelte';
 	import { MARKER_COLORS, type MarkerType } from '@mukke/shared';
+	import { ArrowsClockwise, Trash } from '@manacore/shared-icons';
 
 	interface Props {
 		onMarkerClick?: (markerId: string) => void;
@@ -175,27 +176,13 @@
 							? 'Stop Loop (L)'
 							: 'Loop Region (L)'}
 					>
-						<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-							<path
-								stroke-linecap="round"
-								stroke-linejoin="round"
-								stroke-width="2"
-								d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
-							/>
-						</svg>
+						<ArrowsClockwise size={16} />
 					</button>
 					<button
 						onclick={() => handleDeleteMarker(selectedMarker.id)}
 						class="p-1 text-red-500 hover:bg-red-500/10 rounded"
 					>
-						<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-							<path
-								stroke-linecap="round"
-								stroke-linejoin="round"
-								stroke-width="2"
-								d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
-							/>
-						</svg>
+						<Trash size={16} />
 					</button>
 				</div>
 			</div>
diff --git a/apps/mukke/apps/web/src/lib/components/MiniPlayer.svelte b/apps/mukke/apps/web/src/lib/components/MiniPlayer.svelte
index 012bae65a..73b083139 100644
--- a/apps/mukke/apps/web/src/lib/components/MiniPlayer.svelte
+++ b/apps/mukke/apps/web/src/lib/components/MiniPlayer.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { playerStore } from '$lib/stores/player.svelte';
 	import FrequencyBars from '$lib/visualizer/FrequencyBars.svelte';
+	import { MusicNote, Pause, Play, X } from '@manacore/shared-icons';
 
 	let progress = $derived(
 		playerStore.duration > 0 ? (playerStore.currentTime / playerStore.duration) * 100 : 0
@@ -35,14 +36,7 @@
 					class="ml-auto p-0.5 hover:text-red-400 shrink-0"
 					aria-label="Dismiss error"
 				>
-					<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M6 18L18 6M6 6l12 12"
-						/>
-					</svg>
+					<X size={16} />
 				</button>
 			</div>
 		{/if}
@@ -64,11 +58,7 @@
 				class="flex items-center gap-3 flex-1 min-w-0"
 			>
 				<div class="w-12 h-12 rounded bg-background flex items-center justify-center shrink-0">
-					<svg class="w-6 h-6 text-foreground-secondary" fill="currentColor" viewBox="0 0 24 24">
-						<path
-							d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z"
-						/>
-					</svg>
+					<MusicNote size={24} weight="fill" class="text-foreground-secondary" />
 				</div>
 
 				<!-- Song info -->
@@ -91,13 +81,9 @@
 					aria-label={playerStore.isPlaying ? 'Pause' : 'Play'}
 				>
 					{#if playerStore.isPlaying}
-						<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
-							<path d="M6 4h4v16H6V4zm8 0h4v16h-4V4z" />
-						</svg>
+						<Pause size={20} weight="fill" />
 					{:else}
-						<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
-							<path d="M8 5v14l11-7z" />
-						</svg>
+						<Play size={20} weight="fill" />
 					{/if}
 				</button>
 
@@ -107,9 +93,7 @@
 					class="p-2 rounded-lg hover:bg-surface-hover transition-colors text-foreground-secondary"
 					aria-label="Next track"
 				>
-					<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
-						<path d="M6 18l8.5-6L6 6v12zm2-8.14L11.03 12 8 14.14V9.86zM16 6h2v12h-2z" />
-					</svg>
+					<Play size={20} weight="fill" />
 				</button>
 			</div>
 		</div>
diff --git a/apps/mukke/apps/web/src/lib/components/PlaybackControls.svelte b/apps/mukke/apps/web/src/lib/components/PlaybackControls.svelte
index 17f87cd21..c4ead97d7 100644
--- a/apps/mukke/apps/web/src/lib/components/PlaybackControls.svelte
+++ b/apps/mukke/apps/web/src/lib/components/PlaybackControls.svelte
@@ -2,6 +2,7 @@
 	import { audioStore } from '$lib/stores/audio.svelte';
 	import { editorStore } from '$lib/stores/editor.svelte';
 	import { formatTime } from '$lib/utils/time-format';
+	import { Pause, Play, SkipBack, SkipForward } from '@manacore/shared-icons';
 
 	interface Props {
 		onPlay?: () => void;
@@ -49,13 +50,9 @@
 			aria-label={audioStore.isPlaying ? 'Pause' : 'Play'}
 		>
 			{#if audioStore.isPlaying}
-				<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
-					<path d="M6 4h4v16H6V4zm8 0h4v16h-4V4z" />
-				</svg>
+				<Pause size={20} weight="fill" />
 			{:else}
-				<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
-					<path d="M8 5v14l11-7z" />
-				</svg>
+				<Play size={20} weight="fill" />
 			{/if}
 		</button>
 
@@ -104,14 +101,7 @@
 				class="p-2 rounded-lg hover:bg-surface-hover transition-colors"
 				aria-label="Skip backward 5 seconds"
 			>
-				<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-					<path
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-						d="M12.066 11.2a1 1 0 000 1.6l5.334 4A1 1 0 0019 16V8a1 1 0 00-1.6-.8l-5.334 4zM4.066 11.2a1 1 0 000 1.6l5.334 4A1 1 0 0011 16V8a1 1 0 00-1.6-.8l-5.334 4z"
-					/>
-				</svg>
+				<SkipForward size={20} />
 			</button>
 
 			<button
@@ -120,13 +110,9 @@
 				aria-label={audioStore.isPlaying ? 'Pause' : 'Play'}
 			>
 				{#if audioStore.isPlaying}
-					<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
-						<path d="M6 4h4v16H6V4zm8 0h4v16h-4V4z" />
-					</svg>
+					<Pause size={24} weight="fill" />
 				{:else}
-					<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
-						<path d="M8 5v14l11-7z" />
-					</svg>
+					<Play size={24} weight="fill" />
 				{/if}
 			</button>
 
@@ -135,14 +121,7 @@
 				class="p-2 rounded-lg hover:bg-surface-hover transition-colors"
 				aria-label="Skip forward 5 seconds"
 			>
-				<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-					<path
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-						d="M11.933 12.8a1 1 0 000-1.6L6.6 7.2A1 1 0 005 8v8a1 1 0 001.6.8l5.333-4zM19.933 12.8a1 1 0 000-1.6l-5.333-4A1 1 0 0013 8v8a1 1 0 001.6.8l5.333-4z"
-					/>
-				</svg>
+				<SkipBack size={20} />
 			</button>
 		</div>
 
diff --git a/apps/mukke/apps/web/src/lib/components/QueuePanel.svelte b/apps/mukke/apps/web/src/lib/components/QueuePanel.svelte
index 8b627cd27..c16d32244 100644
--- a/apps/mukke/apps/web/src/lib/components/QueuePanel.svelte
+++ b/apps/mukke/apps/web/src/lib/components/QueuePanel.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { playerStore } from '$lib/stores/player.svelte';
+	import { X } from '@manacore/shared-icons';
 
 	function formatTime(s: number | null): string {
 		if (!s || !isFinite(s)) return '0:00';
@@ -27,14 +28,7 @@
 				class="p-2 rounded-lg hover:bg-surface-hover transition-colors text-foreground-secondary"
 				aria-label="Close queue"
 			>
-				<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-					<path
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-						d="M6 18L18 6M6 6l12 12"
-					/>
-				</svg>
+				<X size={20} />
 			</button>
 		</div>
 
@@ -96,14 +90,7 @@
 								class="p-1.5 rounded-lg hover:bg-surface-hover transition-colors text-foreground-secondary hover:text-foreground shrink-0"
 								aria-label="Remove from queue"
 							>
-								<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-									<path
-										stroke-linecap="round"
-										stroke-linejoin="round"
-										stroke-width="2"
-										d="M6 18L18 6M6 6l12 12"
-									/>
-								</svg>
+								<X size={16} />
 							</button>
 						{/if}
 					</div>
diff --git a/apps/mukke/apps/web/src/lib/components/SongEditor.svelte b/apps/mukke/apps/web/src/lib/components/SongEditor.svelte
index 7e08aa3f0..62942ecb7 100644
--- a/apps/mukke/apps/web/src/lib/components/SongEditor.svelte
+++ b/apps/mukke/apps/web/src/lib/components/SongEditor.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { Song } from '@mukke/shared';
 	import { libraryStore } from '$lib/stores/library.svelte';
+	import { X } from '@manacore/shared-icons';
 
 	interface Props {
 		song: Song;
@@ -123,14 +124,7 @@
 					onclick={onclose}
 					class="p-1 text-foreground-secondary hover:text-foreground transition-colors"
 				>
-					<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M6 18L18 6M6 6l12 12"
-						/>
-					</svg>
+					<X size={20} />
 				</button>
 			</div>
 
diff --git a/apps/mukke/apps/web/src/lib/visualizer/ButterchurnViz.svelte b/apps/mukke/apps/web/src/lib/visualizer/ButterchurnViz.svelte
index b659e027f..ade6b08a5 100644
--- a/apps/mukke/apps/web/src/lib/visualizer/ButterchurnViz.svelte
+++ b/apps/mukke/apps/web/src/lib/visualizer/ButterchurnViz.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { playerStore } from '$lib/stores/player.svelte';
 	import { connectAnalyzer, getAudioContext, getSourceNode, resumeAudioContext } from './analyzer';
+	import { CaretLeft, CaretRight } from '@manacore/shared-icons';
 
 	interface Props {
 		height?: number;
@@ -159,9 +160,7 @@
 				class="p-1.5 rounded-full bg-black/50 text-white hover:bg-black/70 transition-colors"
 				aria-label="Previous preset"
 			>
-				<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
-					<path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" />
-				</svg>
+				<CaretRight size={16} weight="fill" />
 			</button>
 
 			<span class="text-xs text-white/80 bg-black/50 px-2 py-1 rounded truncate max-w-[60%]">
@@ -173,9 +172,7 @@
 				class="p-1.5 rounded-full bg-black/50 text-white hover:bg-black/70 transition-colors"
 				aria-label="Next preset"
 			>
-				<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
-					<path d="M8.59 16.59L10 18l6-6-6-6-1.41 1.41L13.17 12z" />
-				</svg>
+				<CaretLeft size={16} weight="fill" />
 			</button>
 		</div>
 	{/if}
diff --git a/apps/mukke/apps/web/src/routes/(app)/dashboard/+page.svelte b/apps/mukke/apps/web/src/routes/(app)/dashboard/+page.svelte
index 2f8cbbeee..c640e7cc4 100644
--- a/apps/mukke/apps/web/src/routes/(app)/dashboard/+page.svelte
+++ b/apps/mukke/apps/web/src/routes/(app)/dashboard/+page.svelte
@@ -3,6 +3,7 @@
 	import { goto } from '$app/navigation';
 	import { libraryStore } from '$lib/stores/library.svelte';
 	import { projectStore } from '$lib/stores/project.svelte';
+	import { DownloadSimple, Note, Plus } from '@manacore/shared-icons';
 
 	let statsLoading = $state(true);
 	let projectsLoading = $state(true);
@@ -80,28 +81,14 @@
 				href="/upload"
 				class="inline-flex items-center gap-2 px-4 py-2.5 bg-primary text-white rounded-lg hover:bg-primary-hover transition-colors font-medium"
 			>
-				<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-					<path
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-						d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"
-					/>
-				</svg>
+				<DownloadSimple size={20} />
 				Upload Songs
 			</a>
 			<a
 				href="/projects"
 				class="inline-flex items-center gap-2 px-4 py-2.5 bg-surface border border-border text-foreground rounded-lg hover:bg-background transition-colors font-medium"
 			>
-				<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-					<path
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-						d="M12 4v16m8-8H4"
-					/>
-				</svg>
+				<Plus size={20} />
 				Create Project
 			</a>
 		</div>
@@ -125,19 +112,7 @@
 			</div>
 		{:else if projectStore.projects.length === 0}
 			<div class="text-center py-12 bg-surface rounded-lg">
-				<svg
-					class="w-12 h-12 text-foreground-secondary mx-auto mb-3"
-					fill="none"
-					stroke="currentColor"
-					viewBox="0 0 24 24"
-				>
-					<path
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-						d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
-					/>
-				</svg>
+				<Note size={48} class="text-foreground-secondary mx-auto mb-3" />
 				<p class="text-foreground-secondary mb-2">No projects yet</p>
 				<a href="/projects" class="text-sm text-primary hover:underline"
 					>Create your first project</a
diff --git a/apps/mukke/apps/web/src/routes/(app)/editor/[id]/+page.svelte b/apps/mukke/apps/web/src/routes/(app)/editor/[id]/+page.svelte
index 95258f641..92ad0ffb0 100644
--- a/apps/mukke/apps/web/src/routes/(app)/editor/[id]/+page.svelte
+++ b/apps/mukke/apps/web/src/routes/(app)/editor/[id]/+page.svelte
@@ -16,6 +16,7 @@
 	import BeatUploader from '$lib/components/BeatUploader.svelte';
 	import { ThemeToggle } from '@manacore/shared-theme-ui';
 	import { theme } from '$lib/stores/theme.svelte';
+	import { ArrowLeft, DownloadSimple, MusicNote } from '@manacore/shared-icons';
 
 	let waveformEditor: WaveformEditor;
 	let showExportMenu = $state(false);
@@ -268,14 +269,7 @@
 					href="/"
 					class="text-foreground-secondary hover:text-foreground transition-colors shrink-0"
 				>
-					<svg class="w-5 h-5 md:w-6 md:h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M10 19l-7-7m0 0l7-7m-7 7h18"
-						/>
-					</svg>
+					<ArrowLeft size={20} class="md: md:" />
 				</a>
 				<div class="min-w-0">
 					<h1 class="font-semibold text-sm md:text-base truncate">
@@ -305,14 +299,7 @@
 								class="w-4 h-4 border-2 border-foreground border-t-transparent rounded-full animate-spin"
 							></div>
 						{:else}
-							<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-								<path
-									stroke-linecap="round"
-									stroke-linejoin="round"
-									stroke-width="2"
-									d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
-								/>
-							</svg>
+							<DownloadSimple size={16} />
 						{/if}
 						<span class="hidden sm:inline">Export</span>
 					</button>
@@ -370,14 +357,7 @@
 							<div
 								class="flex items-center gap-2 text-xs md:text-sm text-foreground-secondary truncate"
 							>
-								<svg class="w-4 h-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-									<path
-										stroke-linecap="round"
-										stroke-linejoin="round"
-										stroke-width="2"
-										d="M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 10l12-3"
-									/>
-								</svg>
+								<MusicNote size={16} class="shrink-0" />
 								<span class="truncate">{projectStore.currentBeat.filename}</span>
 							</div>
 							<button
diff --git a/apps/mukke/apps/web/src/routes/(app)/library/+page.svelte b/apps/mukke/apps/web/src/routes/(app)/library/+page.svelte
index 512d3760c..0c9f431f4 100644
--- a/apps/mukke/apps/web/src/routes/(app)/library/+page.svelte
+++ b/apps/mukke/apps/web/src/routes/(app)/library/+page.svelte
@@ -10,6 +10,7 @@
 	import type { Song } from '@mukke/shared';
 	import { useAllSongs } from '$lib/data/queries';
 	import type { LocalSong } from '$lib/data/local-store';
+	import { Heart, MusicNote, Pause, PencilSimple, Play, User } from '@manacore/shared-icons';
 
 	// Live query — auto-updates on IndexedDB changes
 	const allSongs = useAllSongs();
@@ -185,19 +186,7 @@
 		{#if libraryStore.activeTab === 'songs'}
 			{#if songs.length === 0}
 				<div class="text-center py-16">
-					<svg
-						class="w-12 h-12 text-foreground-secondary mx-auto mb-3"
-						fill="none"
-						stroke="currentColor"
-						viewBox="0 0 24 24"
-					>
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 10l12-3"
-						/>
-					</svg>
+					<MusicNote size={48} class="text-foreground-secondary mx-auto mb-3" />
 					<p class="text-foreground-secondary mb-2">No songs in your library</p>
 					<a href="/upload" class="text-sm text-primary hover:underline">Upload your first song</a>
 				</div>
@@ -247,39 +236,26 @@
 										}}
 									/>
 								{:else}
-									<svg
-										class="w-5 h-5 text-foreground-secondary transition-opacity {playerStore
-											.currentSong?.id === song.id && playerStore.isPlaying
+									<MusicNote
+										size={20}
+										class="text-foreground-secondary transition-opacity {playerStore.currentSong
+											?.id === song.id && playerStore.isPlaying
 											? 'opacity-0'
 											: 'group-hover:opacity-0'}"
-										fill="none"
-										stroke="currentColor"
-										viewBox="0 0 24 24"
-									>
-										<path
-											stroke-linecap="round"
-											stroke-linejoin="round"
-											stroke-width="2"
-											d="M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 10l12-3"
-										/>
-									</svg>
+									/>
 								{/if}
 								<!-- Playing indicator or play icon on hover -->
 								{#if playerStore.currentSong?.id === song.id && playerStore.isPlaying}
 									<div
 										class="absolute inset-0 flex items-center justify-center bg-black/40 rounded"
 									>
-										<svg class="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 24 24">
-											<path d="M6 4h4v16H6V4zm8 0h4v16h-4V4z" />
-										</svg>
+										<Pause size={20} weight="fill" class="text-white" />
 									</div>
 								{:else}
 									<div
 										class="absolute inset-0 items-center justify-center bg-black/40 rounded hidden group-hover:flex"
 									>
-										<svg class="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 24 24">
-											<path d="M8 5v14l11-7z" />
-										</svg>
+										<Play size={20} weight="fill" class="text-white" />
 									</div>
 								{/if}
 							</div>
@@ -298,28 +274,14 @@
 								class="p-1 text-foreground-secondary hover:text-primary transition-colors"
 								title="Edit metadata"
 							>
-								<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-									<path
-										stroke-linecap="round"
-										stroke-linejoin="round"
-										stroke-width="2"
-										d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"
-									/>
-								</svg>
+								<PencilSimple size={16} />
 							</button>
 							<button
 								onclick={(e) => openInEditor(song.id, e)}
 								class="p-1 text-foreground-secondary hover:text-primary transition-colors"
 								title="Open in Editor"
 							>
-								<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-									<path
-										stroke-linecap="round"
-										stroke-linejoin="round"
-										stroke-width="2"
-										d="M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 10l12-3"
-									/>
-								</svg>
+								<MusicNote size={16} />
 							</button>
 							<button
 								onclick={(e) => handleToggleFavorite(song.id, e)}
@@ -328,19 +290,7 @@
 									: 'text-foreground-secondary hover:text-red-500'}"
 								title={song.favorite ? 'Remove from favorites' : 'Add to favorites'}
 							>
-								<svg
-									class="w-4 h-4"
-									fill={song.favorite ? 'currentColor' : 'none'}
-									stroke="currentColor"
-									viewBox="0 0 24 24"
-								>
-									<path
-										stroke-linecap="round"
-										stroke-linejoin="round"
-										stroke-width="2"
-										d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
-									/>
-								</svg>
+								<Heart size={16} />
 							</button>
 						</div>
 					{/each}
@@ -375,19 +325,7 @@
 										}}
 									/>
 								{:else}
-									<svg
-										class="w-12 h-12 text-foreground-secondary"
-										fill="none"
-										stroke="currentColor"
-										viewBox="0 0 24 24"
-									>
-										<path
-											stroke-linecap="round"
-											stroke-linejoin="round"
-											stroke-width="2"
-											d="M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 10l12-3"
-										/>
-									</svg>
+									<MusicNote size={48} class="text-foreground-secondary" />
 								{/if}
 							</div>
 							<h3 class="font-medium truncate group-hover:text-primary transition-colors">
@@ -420,14 +358,7 @@
 								<div
 									class="w-10 h-10 rounded-full bg-background flex items-center justify-center text-foreground-secondary"
 								>
-									<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-										<path
-											stroke-linecap="round"
-											stroke-linejoin="round"
-											stroke-width="2"
-											d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
-										/>
-									</svg>
+									<User size={20} />
 								</div>
 								<span class="font-medium">{artist.artist}</span>
 							</div>
diff --git a/apps/mukke/apps/web/src/routes/(app)/library/albums/[name]/+page.svelte b/apps/mukke/apps/web/src/routes/(app)/library/albums/[name]/+page.svelte
index a2a9f2057..c251005a4 100644
--- a/apps/mukke/apps/web/src/routes/(app)/library/albums/[name]/+page.svelte
+++ b/apps/mukke/apps/web/src/routes/(app)/library/albums/[name]/+page.svelte
@@ -3,6 +3,7 @@
 	import { playerStore } from '$lib/stores/player.svelte';
 	import { authStore } from '$lib/stores/auth.svelte';
 	import type { Song } from '@mukke/shared';
+	import { CaretLeft, MusicNote } from '@manacore/shared-icons';
 
 	function getBackendUrl(): string {
 		let baseUrl = 'http://localhost:3010';
@@ -89,9 +90,7 @@
 		href="/library"
 		class="inline-flex items-center gap-1 text-sm text-foreground-secondary hover:text-foreground mb-6 transition-colors"
 	>
-		<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-			<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
-		</svg>
+		<CaretLeft size={16} />
 		Back to Library
 	</a>
 
@@ -114,19 +113,7 @@
 				{#if coverUrl}
 					<img src={coverUrl} alt={albumName} class="w-full h-full object-cover" />
 				{:else}
-					<svg
-						class="w-16 h-16 text-foreground-secondary"
-						fill="none"
-						stroke="currentColor"
-						viewBox="0 0 24 24"
-					>
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 10l12-3"
-						/>
-					</svg>
+					<MusicNote size={20} class="text-foreground-secondary" />
 				{/if}
 			</div>
 			<div>
diff --git a/apps/mukke/apps/web/src/routes/(app)/library/artists/[name]/+page.svelte b/apps/mukke/apps/web/src/routes/(app)/library/artists/[name]/+page.svelte
index c4b13cf05..d1b124fdf 100644
--- a/apps/mukke/apps/web/src/routes/(app)/library/artists/[name]/+page.svelte
+++ b/apps/mukke/apps/web/src/routes/(app)/library/artists/[name]/+page.svelte
@@ -3,6 +3,7 @@
 	import { playerStore } from '$lib/stores/player.svelte';
 	import { authStore } from '$lib/stores/auth.svelte';
 	import type { Song } from '@mukke/shared';
+	import { CaretLeft, User } from '@manacore/shared-icons';
 
 	function getBackendUrl(): string {
 		let baseUrl = 'http://localhost:3010';
@@ -77,9 +78,7 @@
 		href="/library"
 		class="inline-flex items-center gap-1 text-sm text-foreground-secondary hover:text-foreground mb-6 transition-colors"
 	>
-		<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-			<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
-		</svg>
+		<CaretLeft size={16} />
 		Back to Library
 	</a>
 
@@ -97,19 +96,7 @@
 		<!-- Artist header -->
 		<div class="flex items-end gap-6 mb-8">
 			<div class="w-36 h-36 bg-surface rounded-full flex items-center justify-center flex-shrink-0">
-				<svg
-					class="w-14 h-14 text-foreground-secondary"
-					fill="none"
-					stroke="currentColor"
-					viewBox="0 0 24 24"
-				>
-					<path
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-						d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
-					/>
-				</svg>
+				<User size={20} class="text-foreground-secondary" />
 			</div>
 			<div>
 				<h1 class="text-3xl font-bold mb-1">{artistName}</h1>
diff --git a/apps/mukke/apps/web/src/routes/(app)/library/genres/[name]/+page.svelte b/apps/mukke/apps/web/src/routes/(app)/library/genres/[name]/+page.svelte
index 2b6aa761e..88fc721a0 100644
--- a/apps/mukke/apps/web/src/routes/(app)/library/genres/[name]/+page.svelte
+++ b/apps/mukke/apps/web/src/routes/(app)/library/genres/[name]/+page.svelte
@@ -3,6 +3,7 @@
 	import { playerStore } from '$lib/stores/player.svelte';
 	import { authStore } from '$lib/stores/auth.svelte';
 	import type { Song } from '@mukke/shared';
+	import { CaretLeft } from '@manacore/shared-icons';
 
 	function getBackendUrl(): string {
 		let baseUrl = 'http://localhost:3010';
@@ -77,9 +78,7 @@
 		href="/library"
 		class="inline-flex items-center gap-1 text-sm text-foreground-secondary hover:text-foreground mb-6 transition-colors"
 	>
-		<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-			<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
-		</svg>
+		<CaretLeft size={16} />
 		Back to Library
 	</a>
 
diff --git a/apps/mukke/apps/web/src/routes/(app)/playlists/+page.svelte b/apps/mukke/apps/web/src/routes/(app)/playlists/+page.svelte
index aafa4b8de..371e49a48 100644
--- a/apps/mukke/apps/web/src/routes/(app)/playlists/+page.svelte
+++ b/apps/mukke/apps/web/src/routes/(app)/playlists/+page.svelte
@@ -2,6 +2,7 @@
 	import { playlistStore } from '$lib/stores/playlist.svelte';
 	import { MukkeEvents } from '@manacore/shared-utils/analytics';
 	import { useAllPlaylists } from '$lib/data/queries';
+	import { List, MusicNote, Plus, Trash } from '@manacore/shared-icons';
 
 	// Live query — auto-updates on IndexedDB changes
 	const allPlaylists = useAllPlaylists();
@@ -51,28 +52,14 @@
 			onclick={() => (showCreateModal = true)}
 			class="flex items-center gap-2 px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors text-sm font-medium"
 		>
-			<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
-			</svg>
+			<Plus size={16} />
 			Create Playlist
 		</button>
 	</div>
 
 	{#if allPlaylists.value.length === 0}
 		<div class="text-center py-16">
-			<svg
-				class="w-12 h-12 text-foreground-secondary mx-auto mb-3"
-				fill="none"
-				stroke="currentColor"
-				viewBox="0 0 24 24"
-			>
-				<path
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="M4 6h16M4 10h16M4 14h16M4 18h16"
-				/>
-			</svg>
+			<List size={48} class="text-foreground-secondary mx-auto mb-3" />
 			<p class="text-foreground-secondary mb-3">No playlists yet</p>
 			<button onclick={() => (showCreateModal = true)} class="text-sm text-primary hover:underline">
 				Create your first playlist
@@ -91,19 +78,7 @@
 						{#if playlist.coverArtPath && false}
 							<img src={false} alt={playlist.name} class="w-full h-full object-cover" />
 						{:else}
-							<svg
-								class="w-12 h-12 text-foreground-secondary"
-								fill="none"
-								stroke="currentColor"
-								viewBox="0 0 24 24"
-							>
-								<path
-									stroke-linecap="round"
-									stroke-linejoin="round"
-									stroke-width="2"
-									d="M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 10l12-3"
-								/>
-							</svg>
+							<MusicNote size={48} class="text-foreground-secondary" />
 						{/if}
 					</div>
 					<h3 class="font-medium truncate group-hover:text-primary transition-colors">
@@ -119,14 +94,7 @@
 						class="absolute top-3 right-3 p-1.5 rounded-lg bg-background/80 text-foreground-secondary hover:text-red-500 opacity-0 group-hover:opacity-100 transition-opacity"
 						title="Delete playlist"
 					>
-						<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-							<path
-								stroke-linecap="round"
-								stroke-linejoin="round"
-								stroke-width="2"
-								d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
-							/>
-						</svg>
+						<Trash size={16} />
 					</button>
 				</a>
 			{/each}
diff --git a/apps/mukke/apps/web/src/routes/(app)/playlists/[id]/+page.svelte b/apps/mukke/apps/web/src/routes/(app)/playlists/[id]/+page.svelte
index 5131fdb01..f65e4cdff 100644
--- a/apps/mukke/apps/web/src/routes/(app)/playlists/[id]/+page.svelte
+++ b/apps/mukke/apps/web/src/routes/(app)/playlists/[id]/+page.svelte
@@ -5,6 +5,7 @@
 	import { playerStore } from '$lib/stores/player.svelte';
 	import { MukkeEvents } from '@manacore/shared-utils/analytics';
 	import type { Song } from '@mukke/shared';
+	import { CaretLeft, FileText, MusicNote, Play, Plus, X } from '@manacore/shared-icons';
 
 	let isEditingName = $state(false);
 	let editName = $state('');
@@ -86,9 +87,7 @@
 		href="/playlists"
 		class="inline-flex items-center gap-1 text-sm text-foreground-secondary hover:text-foreground transition-colors mb-4"
 	>
-		<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-			<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
-		</svg>
+		<CaretLeft size={16} />
 		Back to Playlists
 	</a>
 
@@ -147,9 +146,7 @@
 				disabled={playlistStore.currentPlaylist.songs.length === 0}
 				class="flex items-center gap-2 px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors text-sm font-medium disabled:opacity-50"
 			>
-				<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
-					<path d="M8 5v14l11-7z" />
-				</svg>
+				<Play size={16} weight="fill" />
 				Play All
 			</button>
 			<button
@@ -157,28 +154,14 @@
 				disabled={playlistStore.currentPlaylist.songs.length === 0}
 				class="flex items-center gap-2 px-4 py-2 bg-surface border border-border rounded-lg hover:bg-background transition-colors text-sm font-medium disabled:opacity-50"
 			>
-				<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-					<path
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-						d="M4 4h7l5 5v11H4V4zm10 0h6v6m-6-6l6 6M4 20l6-6"
-					/>
-				</svg>
+				<FileText size={16} />
 				Shuffle
 			</button>
 			<a
 				href="/library"
 				class="flex items-center gap-2 px-4 py-2 bg-surface border border-border rounded-lg hover:bg-background transition-colors text-sm font-medium"
 			>
-				<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-					<path
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-						d="M12 4v16m8-8H4"
-					/>
-				</svg>
+				<Plus size={16} />
 				Add Songs
 			</a>
 		</div>
@@ -186,19 +169,7 @@
 		<!-- Song list -->
 		{#if playlistStore.currentPlaylist.songs.length === 0}
 			<div class="text-center py-16">
-				<svg
-					class="w-12 h-12 text-foreground-secondary mx-auto mb-3"
-					fill="none"
-					stroke="currentColor"
-					viewBox="0 0 24 24"
-				>
-					<path
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-						d="M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 10l12-3"
-					/>
-				</svg>
+				<MusicNote size={48} class="text-foreground-secondary mx-auto mb-3" />
 				<p class="text-foreground-secondary mb-2">No songs in this playlist</p>
 				<a href="/library" class="text-sm text-primary hover:underline">
 					Browse your library to add songs
@@ -238,19 +209,7 @@
 									class="w-full h-full object-cover"
 								/>
 							{:else}
-								<svg
-									class="w-5 h-5 text-foreground-secondary"
-									fill="none"
-									stroke="currentColor"
-									viewBox="0 0 24 24"
-								>
-									<path
-										stroke-linecap="round"
-										stroke-linejoin="round"
-										stroke-width="2"
-										d="M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 10l12-3"
-									/>
-								</svg>
+								<MusicNote size={20} class="text-foreground-secondary" />
 							{/if}
 						</div>
 						<span class="truncate font-medium">{song.title}</span>
@@ -264,14 +223,7 @@
 							class="p-1 text-foreground-secondary hover:text-red-500 transition-colors"
 							title="Remove from playlist"
 						>
-							<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-								<path
-									stroke-linecap="round"
-									stroke-linejoin="round"
-									stroke-width="2"
-									d="M6 18L18 6M6 6l12 12"
-								/>
-							</svg>
+							<X size={16} />
 						</button>
 					</div>
 				{/each}
diff --git a/apps/mukke/apps/web/src/routes/(app)/projects/+page.svelte b/apps/mukke/apps/web/src/routes/(app)/projects/+page.svelte
index aea745c31..b86ef6399 100644
--- a/apps/mukke/apps/web/src/routes/(app)/projects/+page.svelte
+++ b/apps/mukke/apps/web/src/routes/(app)/projects/+page.svelte
@@ -3,6 +3,7 @@
 	import { goto } from '$app/navigation';
 	import { projectStore } from '$lib/stores/project.svelte';
 	import { MukkeEvents } from '@manacore/shared-utils/analytics';
+	import { MusicNote, Plus, Trash } from '@manacore/shared-icons';
 
 	let showCreateModal = $state(false);
 	let newProjectTitle = $state('');
@@ -58,9 +59,7 @@
 			onclick={() => (showCreateModal = true)}
 			class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary-hover transition-colors flex items-center gap-2"
 		>
-			<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
-			</svg>
+			<Plus size={20} />
 			New Project
 		</button>
 	</div>
@@ -74,19 +73,7 @@
 	{:else if projectStore.projects.length === 0}
 		<div class="text-center py-16">
 			<div class="w-16 h-16 bg-surface rounded-full flex items-center justify-center mx-auto mb-4">
-				<svg
-					class="w-8 h-8 text-foreground-secondary"
-					fill="none"
-					stroke="currentColor"
-					viewBox="0 0 24 24"
-				>
-					<path
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-						d="M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 10l12-3"
-					/>
-				</svg>
+				<MusicNote size={32} class="text-foreground-secondary" />
 			</div>
 			<h3 class="text-lg font-medium mb-2">No projects yet</h3>
 			<p class="text-foreground-secondary mb-4">Create your first project to get started</p>
@@ -112,14 +99,7 @@
 							onclick={(e) => handleDeleteProject(project.id, e)}
 							class="p-1 text-foreground-secondary hover:text-red-500 opacity-0 group-hover:opacity-100 transition-opacity"
 						>
-							<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-								<path
-									stroke-linecap="round"
-									stroke-linejoin="round"
-									stroke-width="2"
-									d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
-								/>
-							</svg>
+							<Trash size={16} />
 						</button>
 					</div>
 					{#if project.description}
diff --git a/apps/mukke/apps/web/src/routes/(app)/search/+page.svelte b/apps/mukke/apps/web/src/routes/(app)/search/+page.svelte
index 19a39b140..b9859ab6f 100644
--- a/apps/mukke/apps/web/src/routes/(app)/search/+page.svelte
+++ b/apps/mukke/apps/web/src/routes/(app)/search/+page.svelte
@@ -3,6 +3,7 @@
 	import { playerStore } from '$lib/stores/player.svelte';
 	import { playlistStore } from '$lib/stores/playlist.svelte';
 	import type { Song } from '@mukke/shared';
+	import { Heart, MagnifyingGlass, Note, Plus } from '@manacore/shared-icons';
 
 	let query = $state('');
 	let results = $state<Song[]>([]);
@@ -80,19 +81,10 @@
 
 	<!-- Search input -->
 	<div class="relative mb-6">
-		<svg
-			class="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-foreground-secondary"
-			fill="none"
-			stroke="currentColor"
-			viewBox="0 0 24 24"
-		>
-			<path
-				stroke-linecap="round"
-				stroke-linejoin="round"
-				stroke-width="2"
-				d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
-			/>
-		</svg>
+		<MagnifyingGlass
+			size={20}
+			class="absolute left-3 top-1/2 -translate-y-1/2 text-foreground-secondary"
+		/>
 		<input
 			type="text"
 			bind:value={query}
@@ -113,19 +105,7 @@
 	{:else if !hasSearched}
 		<!-- Empty state before searching -->
 		<div class="text-center py-16">
-			<svg
-				class="w-12 h-12 text-foreground-secondary mx-auto mb-3"
-				fill="none"
-				stroke="currentColor"
-				viewBox="0 0 24 24"
-			>
-				<path
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
-				/>
-			</svg>
+			<MagnifyingGlass size={48} class="text-foreground-secondary mx-auto mb-3" />
 			<p class="text-foreground-secondary">Search your music library</p>
 		</div>
 	{:else if results.length === 0}
@@ -176,19 +156,7 @@
 								: 'text-foreground-secondary hover:text-red-500'}"
 							title={song.favorite ? 'Remove from favorites' : 'Add to favorites'}
 						>
-							<svg
-								class="w-4 h-4"
-								fill={song.favorite ? 'currentColor' : 'none'}
-								stroke="currentColor"
-								viewBox="0 0 24 24"
-							>
-								<path
-									stroke-linecap="round"
-									stroke-linejoin="round"
-									stroke-width="2"
-									d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
-								/>
-							</svg>
+							<Heart size={16} />
 						</button>
 						<!-- Add to Playlist -->
 						<div class="relative">
@@ -197,14 +165,7 @@
 								class="p-1 text-foreground-secondary hover:text-foreground transition-colors"
 								title="Add to playlist"
 							>
-								<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-									<path
-										stroke-linecap="round"
-										stroke-linejoin="round"
-										stroke-width="2"
-										d="M12 4v16m8-8H4"
-									/>
-								</svg>
+								<Plus size={16} />
 							</button>
 							{#if activePlaylistDropdown === song.id}
 								<div
@@ -232,14 +193,7 @@
 							class="p-1 text-foreground-secondary hover:text-foreground transition-colors"
 							title="Open in editor"
 						>
-							<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-								<path
-									stroke-linecap="round"
-									stroke-linejoin="round"
-									stroke-width="2"
-									d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
-								/>
-							</svg>
+							<Note size={16} />
 						</a>
 					</div>
 				</div>
diff --git a/apps/mukke/apps/web/src/routes/(app)/upload/+page.svelte b/apps/mukke/apps/web/src/routes/(app)/upload/+page.svelte
index 825383031..03cb404d2 100644
--- a/apps/mukke/apps/web/src/routes/(app)/upload/+page.svelte
+++ b/apps/mukke/apps/web/src/routes/(app)/upload/+page.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { libraryStore } from '$lib/stores/library.svelte';
 	import { MukkeEvents } from '@manacore/shared-utils/analytics';
+	import { Check, DownloadSimple, Plus, X } from '@manacore/shared-icons';
 
 	interface UploadFile {
 		file: File;
@@ -159,27 +160,13 @@
 		ondrop={handleDrop}
 		role="region"
 	>
-		<svg
-			class="w-12 h-12 mx-auto mb-4 text-foreground-secondary"
-			fill="none"
-			stroke="currentColor"
-			viewBox="0 0 24 24"
-		>
-			<path
-				stroke-linecap="round"
-				stroke-linejoin="round"
-				stroke-width="2"
-				d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"
-			/>
-		</svg>
+		<DownloadSimple size={48} class="mx-auto mb-4 text-foreground-secondary" />
 		<p class="text-foreground-secondary mb-2">Drag and drop audio files here</p>
 		<p class="text-sm text-foreground-secondary mb-4">or</p>
 		<label
 			class="inline-flex items-center gap-2 px-4 py-2.5 bg-primary text-white rounded-lg hover:bg-primary-hover transition-colors font-medium cursor-pointer"
 		>
-			<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
-			</svg>
+			<Plus size={20} />
 			Browse Files
 			<input type="file" accept="audio/*" multiple class="hidden" onchange={handleFileInput} />
 		</label>
@@ -198,19 +185,7 @@
 									class="w-5 h-5 border-2 border-primary border-t-transparent rounded-full animate-spin flex-shrink-0"
 								></div>
 							{:else if uf.status === 'uploaded'}
-								<svg
-									class="w-5 h-5 text-green-500 flex-shrink-0"
-									fill="none"
-									stroke="currentColor"
-									viewBox="0 0 24 24"
-								>
-									<path
-										stroke-linecap="round"
-										stroke-linejoin="round"
-										stroke-width="2"
-										d="M5 13l4 4L19 7"
-									/>
-								</svg>
+								<Check size={20} class="text-green-500" />
 							{:else if uf.status === 'error'}
 								<svg
 									class="w-5 h-5 text-red-500 flex-shrink-0"
@@ -234,14 +209,7 @@
 							onclick={() => removeFile(uf.id)}
 							class="p-1 text-foreground-secondary hover:text-foreground flex-shrink-0"
 						>
-							<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-								<path
-									stroke-linecap="round"
-									stroke-linejoin="round"
-									stroke-width="2"
-									d="M6 18L18 6M6 6l12 12"
-								/>
-							</svg>
+							<X size={16} />
 						</button>
 					</div>
 
diff --git a/apps/news/apps/web/src/routes/(protected)/saved/+page.svelte b/apps/news/apps/web/src/routes/(protected)/saved/+page.svelte
index 951556c7b..a00ac50e2 100644
--- a/apps/news/apps/web/src/routes/(protected)/saved/+page.svelte
+++ b/apps/news/apps/web/src/routes/(protected)/saved/+page.svelte
@@ -4,6 +4,7 @@
 	import type { LocalArticle } from '$lib/data/local-store';
 	import { authStore } from '$lib/stores/auth.svelte';
 	import { toast } from 'svelte-sonner';
+	import { Archive, Trash } from '@manacore/shared-icons';
 
 	const NEWS_SERVER = import.meta.env.PUBLIC_NEWS_SERVER_URL || 'http://localhost:3071';
 
@@ -154,28 +155,14 @@
 								class="rounded-lg p-2 text-gray-500 opacity-0 transition-all hover:bg-gray-800 hover:text-gray-300 group-hover:opacity-100"
 								title={article.isArchived ? 'Wiederherstellen' : 'Archivieren'}
 							>
-								<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-									<path
-										stroke-linecap="round"
-										stroke-linejoin="round"
-										stroke-width="2"
-										d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4"
-									/>
-								</svg>
+								<Archive size={16} />
 							</button>
 							<button
 								onclick={() => deleteArticle(article)}
 								class="rounded-lg p-2 text-gray-500 opacity-0 transition-all hover:bg-gray-800 hover:text-red-400 group-hover:opacity-100"
 								title="Löschen"
 							>
-								<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-									<path
-										stroke-linecap="round"
-										stroke-linejoin="round"
-										stroke-width="2"
-										d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
-									/>
-								</svg>
+								<Trash size={16} />
 							</button>
 						</div>
 					</div>
diff --git a/apps/picture/apps/web/src/routes/app/settings/+page.svelte b/apps/picture/apps/web/src/routes/app/settings/+page.svelte
index ef2d3e90b..ae3098e9c 100644
--- a/apps/picture/apps/web/src/routes/app/settings/+page.svelte
+++ b/apps/picture/apps/web/src/routes/app/settings/+page.svelte
@@ -9,6 +9,7 @@
 		SettingsRow,
 		GlobalSettingsSection,
 	} from '@manacore/shared-ui';
+	import { Info } from '@manacore/shared-icons';
 
 	onMount(async () => {
 		await userSettings.load();
@@ -26,14 +27,7 @@
 	<!-- About Section -->
 	<SettingsSection title="Über">
 		{#snippet icon()}
-			<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
-				<path
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-				/>
-			</svg>
+			<Info />
 		{/snippet}
 
 		<SettingsCard>
diff --git a/apps/playground/apps/web/src/lib/components/chat/MessageList.svelte b/apps/playground/apps/web/src/lib/components/chat/MessageList.svelte
index 1615c8bd0..f0da2620b 100644
--- a/apps/playground/apps/web/src/lib/components/chat/MessageList.svelte
+++ b/apps/playground/apps/web/src/lib/components/chat/MessageList.svelte
@@ -3,6 +3,7 @@
 	import type { ChatMessage, ComparisonMessage } from '$lib/types';
 	import MessageBubble from './MessageBubble.svelte';
 	import ComparisonMessageBubble from './ComparisonMessageBubble.svelte';
+	import { ChatCircle } from '@manacore/shared-icons';
 
 	let scrollContainer: HTMLDivElement | undefined = $state();
 
@@ -18,20 +19,7 @@
 	{#if chatStore.messages.length === 0}
 		<div class="flex h-full flex-col items-center justify-center">
 			<div class="mb-4 rounded-full p-4" style="background-color: var(--color-surface);">
-				<svg
-					class="h-12 w-12"
-					fill="none"
-					stroke="currentColor"
-					viewBox="0 0 24 24"
-					style="color: var(--color-text-muted);"
-				>
-					<path
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="1.5"
-						d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
-					/>
-				</svg>
+				<ChatCircle size={20} />
 			</div>
 			<h2 class="mb-2 text-lg font-medium">Start a conversation</h2>
 			<p class="max-w-md text-center text-sm" style="color: var(--color-text-muted);">
diff --git a/apps/skilltree/apps/web/src/lib/components/SkillTemplates.svelte b/apps/skilltree/apps/web/src/lib/components/SkillTemplates.svelte
index a4a315f35..0a3e165ce 100644
--- a/apps/skilltree/apps/web/src/lib/components/SkillTemplates.svelte
+++ b/apps/skilltree/apps/web/src/lib/components/SkillTemplates.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { Skill, SkillBranch } from '$lib/types';
 	import { BRANCH_INFO } from '$lib/types';
-	import { X, Plus, Sparkle } from '@manacore/shared-icons';
+	import { X, Plus, Sparkle, Check } from '@manacore/shared-icons';
 
 	interface Props {
 		onClose: () => void;
@@ -184,14 +184,7 @@
 											: 'bg-gray-700 text-gray-300 hover:bg-gray-600'}"
 									>
 										{#if isAdded}
-											<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-												<path
-													stroke-linecap="round"
-													stroke-linejoin="round"
-													stroke-width="2"
-													d="M5 13l4 4L19 7"
-												/>
-											</svg>
+											<Check size={16} />
 										{:else}
 											<Plus class="h-4 w-4" />
 										{/if}
diff --git a/apps/storage/apps/web/src/routes/settings/+page.svelte b/apps/storage/apps/web/src/routes/settings/+page.svelte
index db4cf7f73..9635b3da4 100644
--- a/apps/storage/apps/web/src/routes/settings/+page.svelte
+++ b/apps/storage/apps/web/src/routes/settings/+page.svelte
@@ -13,6 +13,7 @@
 		SettingsRow,
 		GlobalSettingsSection,
 	} from '@manacore/shared-ui';
+	import { Palette, Database, Info } from '@manacore/shared-icons';
 
 	let stats = $state<StorageStats | null>(null);
 	let maxStorage = 10 * 1024 * 1024 * 1024; // 10 GB
@@ -43,14 +44,7 @@
 	<!-- Appearance Section -->
 	<SettingsSection title="Darstellung">
 		{#snippet icon()}
-			<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-				<path
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01"
-				/>
-			</svg>
+			<Palette />
 		{/snippet}
 
 		<SettingsCard>
@@ -96,14 +90,7 @@
 	<!-- Storage Section -->
 	<SettingsSection title="Speicher">
 		{#snippet icon()}
-			<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-				<path
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4"
-				/>
-			</svg>
+			<Database />
 		{/snippet}
 
 		<SettingsCard>
@@ -133,14 +120,7 @@
 	<!-- About Section -->
 	<SettingsSection title="Über">
 		{#snippet icon()}
-			<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-				<path
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-				/>
-			</svg>
+			<Info />
 		{/snippet}
 
 		<SettingsCard>
diff --git a/apps/times/apps/web/src/lib/components/EntryForm.svelte b/apps/times/apps/web/src/lib/components/EntryForm.svelte
index d71005f78..ebb2b8eaf 100644
--- a/apps/times/apps/web/src/lib/components/EntryForm.svelte
+++ b/apps/times/apps/web/src/lib/components/EntryForm.svelte
@@ -2,6 +2,7 @@
 	import { getContext } from 'svelte';
 	import { _ } from 'svelte-i18n';
 	import { timeEntryCollection } from '$lib/data/local-store';
+	import { X, CurrencyDollar } from '@manacore/shared-icons';
 	import type { Project, Client } from '@times/shared';
 	import {
 		parseMultiEntryInput,
@@ -180,14 +181,7 @@
 					onclick={onClose}
 					class="rounded-lg p-1 text-[hsl(var(--muted-foreground))] hover:text-[hsl(var(--foreground))]"
 				>
-					<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M6 18L18 6M6 6l12 12"
-						/>
-					</svg>
+					<X size={20} />
 				</button>
 			</div>
 
@@ -309,14 +303,7 @@
 							? 'bg-[hsl(var(--primary)/0.1)] text-[hsl(var(--primary))]'
 							: 'text-[hsl(var(--muted-foreground))]'}"
 					>
-						<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-							<path
-								stroke-linecap="round"
-								stroke-linejoin="round"
-								stroke-width="2"
-								d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-							/>
-						</svg>
+						<CurrencyDollar size={16} />
 						{isBillable ? $_('entry.billable') : $_('entry.notBillable')}
 					</button>
 				</div>
diff --git a/apps/times/apps/web/src/lib/components/EntryItem.svelte b/apps/times/apps/web/src/lib/components/EntryItem.svelte
index 68bedabf6..ee83b9fa4 100644
--- a/apps/times/apps/web/src/lib/components/EntryItem.svelte
+++ b/apps/times/apps/web/src/lib/components/EntryItem.svelte
@@ -3,6 +3,7 @@
 	import { _ } from 'svelte-i18n';
 	import { timeEntryCollection } from '$lib/data/local-store';
 	import { formatDurationCompact } from '$lib/data/queries';
+	import { CurrencyDollar } from '@manacore/shared-icons';
 	import type { TimeEntry, Project, Client } from '@times/shared';
 	import ConfirmDialog from './ConfirmDialog.svelte';
 
@@ -184,14 +185,7 @@
 						? 'bg-[hsl(var(--primary)/0.1)] text-[hsl(var(--primary))]'
 						: 'text-[hsl(var(--muted-foreground))] hover:text-[hsl(var(--foreground))]'}"
 				>
-					<svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-						/>
-					</svg>
+					<CurrencyDollar size={14} />
 					{editIsBillable ? $_('entry.billable') : $_('entry.notBillable')}
 				</button>
 
diff --git a/apps/times/apps/web/src/lib/components/EntryList.svelte b/apps/times/apps/web/src/lib/components/EntryList.svelte
index d1f96cf83..15db4fd1e 100644
--- a/apps/times/apps/web/src/lib/components/EntryList.svelte
+++ b/apps/times/apps/web/src/lib/components/EntryList.svelte
@@ -3,6 +3,7 @@
 	import EntryItem from './EntryItem.svelte';
 	import { groupEntriesByDate, getTotalDuration, formatDurationCompact } from '$lib/data/queries';
 	import type { TimeEntry } from '@times/shared';
+	import { Clock } from '@manacore/shared-icons';
 
 	let { entries }: { entries: TimeEntry[] } = $props();
 
@@ -33,19 +34,7 @@
 	<div
 		class="rounded-xl border border-dashed border-[hsl(var(--border))] p-8 text-center text-[hsl(var(--muted-foreground))]"
 	>
-		<svg
-			class="mx-auto mb-3 h-10 w-10 opacity-50"
-			fill="none"
-			stroke="currentColor"
-			viewBox="0 0 24 24"
-		>
-			<path
-				stroke-linecap="round"
-				stroke-linejoin="round"
-				stroke-width="1.5"
-				d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
-			/>
-		</svg>
+		<Clock size={20} class="mx-auto mb-3 opacity-50" />
 		<p>{$_('entry.noEntries')}</p>
 	</div>
 {:else}
diff --git a/apps/times/apps/web/src/lib/components/TimerCard.svelte b/apps/times/apps/web/src/lib/components/TimerCard.svelte
index fa64fdc0a..ccdb495ef 100644
--- a/apps/times/apps/web/src/lib/components/TimerCard.svelte
+++ b/apps/times/apps/web/src/lib/components/TimerCard.svelte
@@ -3,6 +3,7 @@
 	import { _ } from 'svelte-i18n';
 	import { timerStore } from '$lib/stores/timer.svelte';
 	import { formatDuration } from '$lib/data/queries';
+	import { CurrencyDollar, Pause, Play } from '@manacore/shared-icons';
 	import type { Project, Client } from '@times/shared';
 
 	const allProjects = getContext<{ value: Project[] }>('projects');
@@ -148,14 +149,7 @@
 				: 'border-[hsl(var(--border))] text-[hsl(var(--muted-foreground))]'}"
 			title={isBillable ? $_('entry.billable') : $_('entry.notBillable')}
 		>
-			<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-				<path
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-				/>
-			</svg>
+			<CurrencyDollar size={16} />
 		</button>
 	</div>
 
@@ -168,17 +162,12 @@
 	>
 		{#if timerStore.isRunning}
 			<span class="flex items-center justify-center gap-2">
-				<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
-					<rect x="6" y="4" width="4" height="16" rx="1" />
-					<rect x="14" y="4" width="4" height="16" rx="1" />
-				</svg>
+				<Pause size={20} weight="fill" />
 				{$_('timer.stop')}
 			</span>
 		{:else}
 			<span class="flex items-center justify-center gap-2">
-				<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
-					<polygon points="5 3 19 12 5 21 5 3" />
-				</svg>
+				<Play size={20} weight="fill" />
 				{$_('timer.start')}
 			</span>
 		{/if}
diff --git a/apps/times/apps/web/src/lib/components/TimerIndicator.svelte b/apps/times/apps/web/src/lib/components/TimerIndicator.svelte
index 3768c69de..82c9a9362 100644
--- a/apps/times/apps/web/src/lib/components/TimerIndicator.svelte
+++ b/apps/times/apps/web/src/lib/components/TimerIndicator.svelte
@@ -3,6 +3,7 @@
 	import { _ } from 'svelte-i18n';
 	import { timerStore } from '$lib/stores/timer.svelte';
 	import { formatDuration } from '$lib/data/queries';
+	import { Stop } from '@manacore/shared-icons';
 	import type { Project } from '@times/shared';
 
 	const allProjects = getContext<{ value: Project[] }>('projects');
@@ -54,9 +55,7 @@
 			class="flex h-5 w-5 items-center justify-center rounded bg-red-500 text-white transition-colors hover:bg-red-600"
 			title={$_('timer.stop')}
 		>
-			<svg class="h-2.5 w-2.5" fill="currentColor" viewBox="0 0 24 24">
-				<rect x="6" y="6" width="12" height="12" rx="1" />
-			</svg>
+			<Stop size={10} weight="fill" />
 		</button>
 	</div>
 {/if}
diff --git a/apps/times/apps/web/src/routes/(app)/clients/+page.svelte b/apps/times/apps/web/src/routes/(app)/clients/+page.svelte
index 533a8d157..4ff30bf60 100644
--- a/apps/times/apps/web/src/routes/(app)/clients/+page.svelte
+++ b/apps/times/apps/web/src/routes/(app)/clients/+page.svelte
@@ -6,6 +6,7 @@
 	import type { Client, Project, TimeEntry } from '@times/shared';
 	import { PROJECT_COLORS } from '@times/shared/constants';
 	import ConfirmDialog from '$lib/components/ConfirmDialog.svelte';
+	import { CaretRight } from '@manacore/shared-icons';
 
 	const allClients = getContext<{ value: Client[] }>('clients');
 	const allProjects = getContext<{ value: Project[] }>('projects');
@@ -317,14 +318,7 @@
 				onclick={() => (showArchived = !showArchived)}
 				class="flex items-center gap-2 text-sm text-[hsl(var(--muted-foreground))]"
 			>
-				<svg
-					class="h-4 w-4 transition-transform {showArchived ? 'rotate-90' : ''}"
-					fill="none"
-					stroke="currentColor"
-					viewBox="0 0 24 24"
-				>
-					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
-				</svg>
+				<CaretRight size={20} class="transition-transform {showArchived ? 'rotate-90' : ''}" />
 				{$_('project.archived')} ({archivedClients.length})
 			</button>
 			{#if showArchived}
diff --git a/apps/times/apps/web/src/routes/(app)/projects/+page.svelte b/apps/times/apps/web/src/routes/(app)/projects/+page.svelte
index 0a1ea835f..20e53ee47 100644
--- a/apps/times/apps/web/src/routes/(app)/projects/+page.svelte
+++ b/apps/times/apps/web/src/routes/(app)/projects/+page.svelte
@@ -6,6 +6,7 @@
 	import type { Project, Client, TimeEntry } from '@times/shared';
 	import { PROJECT_COLORS } from '@times/shared/constants';
 	import ConfirmDialog from '$lib/components/ConfirmDialog.svelte';
+	import { CaretRight } from '@manacore/shared-icons';
 
 	const allProjects = getContext<{ value: Project[] }>('projects');
 	const allClients = getContext<{ value: Client[] }>('clients');
@@ -330,14 +331,7 @@
 				onclick={() => (showArchived = !showArchived)}
 				class="flex items-center gap-2 text-sm text-[hsl(var(--muted-foreground))]"
 			>
-				<svg
-					class="h-4 w-4 transition-transform {showArchived ? 'rotate-90' : ''}"
-					fill="none"
-					stroke="currentColor"
-					viewBox="0 0 24 24"
-				>
-					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
-				</svg>
+				<CaretRight size={20} class="transition-transform {showArchived ? 'rotate-90' : ''}" />
 				{$_('project.archived')} ({archivedProjects.length})
 			</button>
 
diff --git a/apps/times/apps/web/src/routes/offline/+page.svelte b/apps/times/apps/web/src/routes/offline/+page.svelte
index fef063e96..a072d9d48 100644
--- a/apps/times/apps/web/src/routes/offline/+page.svelte
+++ b/apps/times/apps/web/src/routes/offline/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { _ } from 'svelte-i18n';
+	import { Clock } from '@manacore/shared-icons';
 </script>
 
 <svelte:head>
@@ -11,19 +12,7 @@
 		<div
 			class="mx-auto mb-6 flex h-20 w-20 items-center justify-center rounded-2xl bg-[hsl(var(--muted))]"
 		>
-			<svg
-				class="h-10 w-10 text-[hsl(var(--muted-foreground))]"
-				fill="none"
-				stroke="currentColor"
-				viewBox="0 0 24 24"
-			>
-				<path
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
-				/>
-			</svg>
+			<Clock size={20} class="text-[hsl(var(--muted-foreground))]" />
 		</div>
 		<h1 class="mb-2 text-2xl font-bold text-[hsl(var(--foreground))]">Offline</h1>
 		<p class="mb-6 text-[hsl(var(--muted-foreground))]">
diff --git a/apps/todo/apps/web/src/lib/components/QuickAddTask.svelte b/apps/todo/apps/web/src/lib/components/QuickAddTask.svelte
index 9f099c910..bf3526ecf 100644
--- a/apps/todo/apps/web/src/lib/components/QuickAddTask.svelte
+++ b/apps/todo/apps/web/src/lib/components/QuickAddTask.svelte
@@ -21,6 +21,7 @@
 	import { PRIORITY_OPTIONS } from '@todo/shared';
 	import { format, addDays } from 'date-fns';
 	import { de } from 'date-fns/locale';
+	import { CalendarBlank, Folder, Plus, Flag, ArrowRight } from '@manacore/shared-icons';
 
 	let inputValue = $state('');
 	let isLoading = $state(false);
@@ -266,9 +267,7 @@
 	<div class="quick-add-wrapper">
 		<!-- Plus icon -->
 		<div class="quick-add-icon">
-			<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
-			</svg>
+			<Plus size={16} />
 		</div>
 
 		<!-- Input -->
@@ -296,14 +295,7 @@
 					}}
 					title="Fälligkeitsdatum"
 				>
-					<svg class="option-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
-						/>
-					</svg>
+					<CalendarBlank size={20} class="option-icon" />
 					<span class="option-label">{dateLabel()}</span>
 				</button>
 
@@ -335,20 +327,7 @@
 					}}
 					title="Priorität"
 				>
-					<svg
-						class="option-icon"
-						fill="none"
-						viewBox="0 0 24 24"
-						stroke={currentPriority.color}
-						style="color: {currentPriority.color}"
-					>
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M3 21v-4m0 0V5a2 2 0 012-2h6.5l1 1H21l-3 6 3 6h-8.5l-1-1H5a2 2 0 00-2 2zm9-13.5V9"
-						/>
-					</svg>
+					<Flag size={16} color={currentPriority.color} />
 				</button>
 
 				{#if showPriorityPicker}
@@ -380,20 +359,7 @@
 					}}
 					title="Projekt"
 				>
-					<svg
-						class="option-icon"
-						fill="none"
-						viewBox="0 0 24 24"
-						stroke={selectedProject?.color || 'currentColor'}
-						style={selectedProject ? `color: ${selectedProject.color}` : ''}
-					>
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"
-						/>
-					</svg>
+					<Folder size={20} class="option-icon" />
 				</button>
 
 				{#if showProjectPicker}
@@ -432,14 +398,7 @@
 						class="animate-spin h-4 w-4 border-2 border-white border-r-transparent rounded-full"
 					></div>
 				{:else}
-					<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M13 7l5 5m0 0l-5 5m5-5H6"
-						/>
-					</svg>
+					<ArrowRight size={16} />
 				{/if}
 			</button>
 		</div>
diff --git a/apps/todo/apps/web/src/lib/components/SubtaskList.svelte b/apps/todo/apps/web/src/lib/components/SubtaskList.svelte
index b545e79ee..6de47df9c 100644
--- a/apps/todo/apps/web/src/lib/components/SubtaskList.svelte
+++ b/apps/todo/apps/web/src/lib/components/SubtaskList.svelte
@@ -2,6 +2,7 @@
 	import type { Subtask } from '@todo/shared';
 	import { dndzone } from 'svelte-dnd-action';
 	import { flip } from 'svelte/animate';
+	import { Check, Plus, X, DotsSixVertical } from '@manacore/shared-icons';
 
 	interface Props {
 		subtasks: Subtask[];
@@ -113,14 +114,7 @@
 				<div class="subtask-item" animate:flip={{ duration: 200 }}>
 					<!-- Drag handle -->
 					<div class="drag-handle" aria-label="Ziehen zum Sortieren">
-						<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-							<path
-								stroke-linecap="round"
-								stroke-linejoin="round"
-								stroke-width="2"
-								d="M4 8h16M4 16h16"
-							/>
-						</svg>
+						<DotsSixVertical size={16} />
 					</div>
 
 					<!-- Checkbox -->
@@ -131,14 +125,7 @@
 						onclick={() => toggleComplete(subtask.id)}
 					>
 						{#if subtask.isCompleted}
-							<svg class="check-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-								<path
-									stroke-linecap="round"
-									stroke-linejoin="round"
-									stroke-width="3"
-									d="M5 13l4 4L19 7"
-								/>
-							</svg>
+							<Check size={20} class="check-icon" />
 						{/if}
 					</button>
 
@@ -169,14 +156,7 @@
 						onclick={() => deleteSubtask(subtask.id)}
 						title="Löschen"
 					>
-						<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-							<path
-								stroke-linecap="round"
-								stroke-linejoin="round"
-								stroke-width="2"
-								d="M6 18L18 6M6 6l12 12"
-							/>
-						</svg>
+						<X size={16} />
 					</button>
 				</div>
 			{/each}
@@ -186,9 +166,7 @@
 	<!-- Add new subtask -->
 	<div class="add-subtask">
 		<div class="add-icon">
-			<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
-			</svg>
+			<Plus size={16} />
 		</div>
 		<input
 			type="text"
diff --git a/apps/todo/apps/web/src/lib/components/TaskEditModal.svelte b/apps/todo/apps/web/src/lib/components/TaskEditModal.svelte
index 5f05cffca..66d3c638f 100644
--- a/apps/todo/apps/web/src/lib/components/TaskEditModal.svelte
+++ b/apps/todo/apps/web/src/lib/components/TaskEditModal.svelte
@@ -27,6 +27,7 @@
 	import { ContactSelector, focusTrap } from '@manacore/shared-ui';
 	import { ManaLinkList, ManaLinkPicker } from '@manacore/shared-links/ui';
 	import { searchCrossApp } from '$lib/data/cross-app-search';
+	import { X } from '@manacore/shared-icons';
 
 	interface Props {
 		task: Task;
@@ -188,14 +189,7 @@
 			<div class="modal-header">
 				<h2 class="modal-title">Aufgabe bearbeiten</h2>
 				<button type="button" class="close-btn" onclick={onClose} title="Schließen">
-					<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M6 18L18 6M6 6l12 12"
-						/>
-					</svg>
+					<X size={20} />
 				</button>
 			</div>
 
diff --git a/apps/todo/apps/web/src/lib/components/TaskFilters.svelte b/apps/todo/apps/web/src/lib/components/TaskFilters.svelte
index 8597f50c9..f3671954e 100644
--- a/apps/todo/apps/web/src/lib/components/TaskFilters.svelte
+++ b/apps/todo/apps/web/src/lib/components/TaskFilters.svelte
@@ -10,7 +10,15 @@
 
 	const tagsCtx: { readonly value: Tag[] } = getContext('tags');
 	import type { SortBy, SortOrder } from '$lib/stores/view.svelte';
-	import { X, DotsThree } from '@manacore/shared-icons';
+	import {
+		CaretDown,
+		Check,
+		CheckCircle,
+		Columns,
+		DotsThree,
+		MagnifyingGlass,
+		X,
+	} from '@manacore/shared-icons';
 
 	interface Props {
 		// Layout
@@ -135,14 +143,7 @@
 			<!-- Kanban View Button -->
 			{#if showKanbanNav}
 				<button class="glass-pill" onclick={() => goto('/kanban')} title="Kanban-Ansicht">
-					<svg class="pill-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7m0 10a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2"
-						/>
-					</svg>
+					<Columns size={18} />
 					<span class="pill-label">Kanban</span>
 				</button>
 			{/if}
@@ -183,19 +184,7 @@
 					onclick={onToggleCompleted}
 					title={isCompletedVisible ? 'Erledigte ausblenden' : 'Erledigte anzeigen'}
 				>
-					<svg
-						class="pill-icon"
-						fill={isCompletedVisible ? 'currentColor' : 'none'}
-						stroke="currentColor"
-						viewBox="0 0 24 24"
-					>
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
-						/>
-					</svg>
+					<CheckCircle size={20} class="pill-icon" />
 					<span class="pill-label">Erledigt</span>
 				</button>
 			{/if}
@@ -239,19 +228,10 @@
 			{#if showSearch}
 				<div class="flex items-center gap-4">
 					<div class="relative flex-1 max-w-xs">
-						<svg
-							class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground"
-							fill="none"
-							viewBox="0 0 24 24"
-							stroke="currentColor"
-						>
-							<path
-								stroke-linecap="round"
-								stroke-linejoin="round"
-								stroke-width="2"
-								d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
-							/>
-						</svg>
+						<MagnifyingGlass
+							size={16}
+							class="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground"
+						/>
 						<input
 							type="text"
 							value={searchQuery}
@@ -264,14 +244,7 @@
 								class="absolute right-2 top-1/2 -translate-y-1/2 p-1 text-muted-foreground hover:text-foreground rounded-full hover:bg-muted transition-colors"
 								onclick={() => onSearchChange('')}
 							>
-								<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-									<path
-										stroke-linecap="round"
-										stroke-linejoin="round"
-										stroke-width="2"
-										d="M6 18L18 6M6 6l12 12"
-									/>
-								</svg>
+								<X size={16} />
 							</button>
 						{/if}
 					</div>
@@ -281,14 +254,7 @@
 							class="ml-auto px-3 py-2 text-sm text-muted-foreground hover:text-foreground hover:bg-muted rounded-lg transition-colors flex items-center gap-2"
 							onclick={onClearFilters}
 						>
-							<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-								<path
-									stroke-linecap="round"
-									stroke-linejoin="round"
-									stroke-width="2"
-									d="M6 18L18 6M6 6l12 12"
-								/>
-							</svg>
+							<X size={16} />
 							Zurücksetzen
 						</button>
 					{/if}
@@ -368,21 +334,12 @@
 							{:else}
 								<span class="text-muted-foreground">Auswählen</span>
 							{/if}
-							<svg
-								class="w-4 h-4 text-muted-foreground transition-transform {showLabelsDropdown
+							<CaretDown
+								size={16}
+								class="text-muted-foreground transition-transform {showLabelsDropdown
 									? 'rotate-180'
 									: ''}"
-								fill="none"
-								viewBox="0 0 24 24"
-								stroke="currentColor"
-							>
-								<path
-									stroke-linecap="round"
-									stroke-linejoin="round"
-									stroke-width="2"
-									d="M19 9l-7 7-7-7"
-								/>
-							</svg>
+							/>
 						</button>
 
 						{#if showLabelsDropdown}
@@ -410,19 +367,7 @@
 												></div>
 												<span class="flex-1 text-left truncate">{label.name}</span>
 												{#if selectedLabelIds.includes(label.id)}
-													<svg
-														class="w-4 h-4 text-primary flex-shrink-0"
-														fill="none"
-														viewBox="0 0 24 24"
-														stroke="currentColor"
-													>
-														<path
-															stroke-linecap="round"
-															stroke-linejoin="round"
-															stroke-width="2"
-															d="M5 13l4 4L19 7"
-														/>
-													</svg>
+													<Check size={16} class="text-primary" />
 												{/if}
 											</button>
 										{/each}
diff --git a/apps/todo/apps/web/src/lib/components/TaskItem.svelte b/apps/todo/apps/web/src/lib/components/TaskItem.svelte
index b84def48d..f59a5f743 100644
--- a/apps/todo/apps/web/src/lib/components/TaskItem.svelte
+++ b/apps/todo/apps/web/src/lib/components/TaskItem.svelte
@@ -20,6 +20,7 @@
 	import { ContactAvatar, ContactSelector } from '@manacore/shared-ui';
 	import SubtaskList from './SubtaskList.svelte';
 	import {
+	import { Check, CheckSquare, DotsSixVertical } from '@manacore/shared-icons';
 		PrioritySelector,
 		StorypointsSelector,
 		DurationPicker,
@@ -381,14 +382,7 @@
 	>
 		<!-- Drag handle -->
 		<div class="drag-handle">
-			<svg class="drag-icon" viewBox="0 0 24 24" fill="currentColor">
-				<circle cx="9" cy="6" r="1.5" />
-				<circle cx="15" cy="6" r="1.5" />
-				<circle cx="9" cy="12" r="1.5" />
-				<circle cx="15" cy="12" r="1.5" />
-				<circle cx="9" cy="18" r="1.5" />
-				<circle cx="15" cy="18" r="1.5" />
-			</svg>
+			<DotsSixVertical size={16} class="drag-icon" />
 		</div>
 
 		<!-- Checkbox with priority fill -->
@@ -400,20 +394,7 @@
 			onclick={handleToggleClick}
 		>
 			{#if task.isCompleted || isAnimatingComplete}
-				<svg
-					class="check-icon"
-					class:animate-check={isAnimatingComplete}
-					fill="none"
-					viewBox="0 0 24 24"
-					stroke="currentColor"
-				>
-					<path
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="3"
-						d="M5 13l4 4L19 7"
-					/>
-				</svg>
+				<Check size={20} class="check-icon" />
 			{:else if task.priority === 'urgent'}
 				<span class="priority-bang">!</span>
 			{/if}
@@ -441,14 +422,7 @@
 				<div class="task-meta">
 					{#if subtaskProgress()}
 						<span class="meta-item">
-							<svg class="meta-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-								<path
-									stroke-linecap="round"
-									stroke-linejoin="round"
-									stroke-width="2"
-									d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"
-								/>
-							</svg>
+							<CheckSquare size={20} class="meta-icon" />
 							{subtaskProgress()}
 						</span>
 					{/if}
diff --git a/apps/todo/apps/web/src/lib/components/TodoToolbarContent.svelte b/apps/todo/apps/web/src/lib/components/TodoToolbarContent.svelte
index cee058841..25f9ed5f3 100644
--- a/apps/todo/apps/web/src/lib/components/TodoToolbarContent.svelte
+++ b/apps/todo/apps/web/src/lib/components/TodoToolbarContent.svelte
@@ -9,6 +9,7 @@
 	import { viewStore, type SortBy } from '$lib/stores/view.svelte';
 	import { todoSettings } from '$lib/stores/settings.svelte';
 	import { PillToolbarButton, PillToolbarDivider, PillViewSwitcher } from '@manacore/shared-ui';
+	import { CheckCircle, Columns, Funnel } from '@manacore/shared-icons';
 
 	interface Props {
 		/** Vertical layout (for sidebar mode) */
@@ -91,14 +92,7 @@
 		}}
 		title="Ansicht wechseln"
 	>
-		<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
-			<path
-				stroke-linecap="round"
-				stroke-linejoin="round"
-				stroke-width="2"
-				d="M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7m0 10a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2"
-			/>
-		</svg>
+		<Columns size={20} />
 	</PillToolbarButton>
 
 	{#if !vertical}
@@ -114,14 +108,7 @@
 			active={activeFilterCount > 0}
 			title="Filter"
 		>
-			<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
-				<path
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"
-				/>
-			</svg>
+			<Funnel size={20} />
 			{#if activeFilterCount > 0}
 				<span class="filter-count">{activeFilterCount}</span>
 			{/if}
@@ -191,14 +178,7 @@
 		active={showCompleted}
 		title={showCompleted ? 'Erledigte ausblenden' : 'Erledigte anzeigen'}
 	>
-		<svg fill={showCompleted ? 'currentColor' : 'none'} stroke="currentColor" viewBox="0 0 24 24">
-			<path
-				stroke-linecap="round"
-				stroke-linejoin="round"
-				stroke-width="2"
-				d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
-			/>
-		</svg>
+		<CheckCircle size={20} />
 	</PillToolbarButton>
 </div>
 
diff --git a/apps/todo/apps/web/src/lib/components/board-views/ViewEditorModal.svelte b/apps/todo/apps/web/src/lib/components/board-views/ViewEditorModal.svelte
index 0a4f34672..507d9909a 100644
--- a/apps/todo/apps/web/src/lib/components/board-views/ViewEditorModal.svelte
+++ b/apps/todo/apps/web/src/lib/components/board-views/ViewEditorModal.svelte
@@ -1,6 +1,40 @@
 <script lang="ts">
 	import { dndzone, SHADOW_PLACEHOLDER_ITEM_ID, type DndEvent } from 'svelte-dnd-action';
 	import type { LocalBoardView, ViewColumn } from '$lib/data/local-store';
+	import {
+		X,
+		Plus,
+		Columns,
+		GridFour,
+		Flag,
+		Folder,
+		CalendarBlank,
+		List,
+		Star,
+		Tag,
+		Clock,
+		Crosshair,
+		Lightning,
+		Heart,
+		DotsSixVertical,
+	} from '@manacore/shared-icons';
+	import type { ComponentType } from 'svelte';
+
+	// Map icon names to Phosphor components
+	const phosphorIconMap: Record<string, ComponentType> = {
+		columns: Columns,
+		'grid-four': GridFour,
+		flag: Flag,
+		folders: Folder,
+		calendar: CalendarBlank,
+		list: List,
+		star: Star,
+		tag: Tag,
+		clock: Clock,
+		target: Crosshair,
+		lightning: Lightning,
+		heart: Heart,
+	};
 
 	interface Props {
 		open: boolean;
@@ -30,24 +64,6 @@
 		{ value: 'heart', label: 'Herz' },
 	] as const;
 
-	const iconPathMap: Record<string, string> = {
-		columns: 'M9 4h6v16H9zM3 4h4v16H3zM17 4h4v16h-4z',
-		'grid-four': 'M3 3h8v8H3zM13 3h8v8h-8zM3 13h8v8H3zM13 13h8v8h-8z',
-		flag: 'M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1zM4 22v-7',
-		folders: 'M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z',
-		calendar:
-			'M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z',
-		list: 'M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01',
-		star: 'M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z',
-		tag: 'M20.59 13.41l-7.17 7.17a2 2 0 01-2.83 0L2 12V2h10l8.59 8.59a2 2 0 010 2.82zM7 7h.01',
-		clock: 'M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10zM12 6v6l4 2',
-		target:
-			'M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10zM12 18a6 6 0 100-12 6 6 0 000 12zM12 14a2 2 0 100-4 2 2 0 000 4z',
-		lightning: 'M13 2L3 14h9l-1 10 10-12h-9l1-10z',
-		heart:
-			'M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z',
-	};
-
 	// ─── GroupBy options ────────────────────────────────────
 	const groupByOptions = [
 		{ value: 'status', label: 'Status' },
@@ -324,15 +340,7 @@
 			<div class="modal-header">
 				<h2 class="modal-title">{isEditMode ? 'View bearbeiten' : 'Neue View'}</h2>
 				<button type="button" class="close-btn" onclick={onClose} aria-label="Schließen">
-					<svg
-						class="h-5 w-5"
-						viewBox="0 0 24 24"
-						fill="none"
-						stroke="currentColor"
-						stroke-width="2"
-					>
-						<path d="M18 6L6 18M6 6l12 12" />
-					</svg>
+					<X size={20} />
 				</button>
 			</div>
 
@@ -363,18 +371,9 @@
 								onclick={() => (icon = opt.value)}
 								title={opt.label}
 							>
-								{#if iconPathMap[opt.value]}
-									<svg
-										class="h-5 w-5"
-										viewBox="0 0 24 24"
-										fill="none"
-										stroke="currentColor"
-										stroke-width="1.5"
-										stroke-linecap="round"
-										stroke-linejoin="round"
-									>
-										<path d={iconPathMap[opt.value]} />
-									</svg>
+								{#if phosphorIconMap[opt.value]}
+									{@const IconComp = phosphorIconMap[opt.value]}
+									<IconComp size={20} />
 								{/if}
 								<span class="icon-label">{opt.label}</span>
 							</button>
@@ -402,15 +401,7 @@
 							class:selected={layout === 'kanban'}
 							onclick={() => (layout = 'kanban')}
 						>
-							<svg
-								class="h-4 w-4"
-								viewBox="0 0 24 24"
-								fill="none"
-								stroke="currentColor"
-								stroke-width="2"
-							>
-								<path d={iconPathMap.columns} />
-							</svg>
+							<Columns size={16} />
 							Kanban
 						</button>
 						<button
@@ -419,15 +410,7 @@
 							class:selected={layout === 'grid'}
 							onclick={() => (layout = 'grid')}
 						>
-							<svg
-								class="h-4 w-4"
-								viewBox="0 0 24 24"
-								fill="none"
-								stroke="currentColor"
-								stroke-width="2"
-							>
-								<path d={iconPathMap['grid-four']} />
-							</svg>
+							<GridFour size={16} />
 							Grid
 						</button>
 					</div>
@@ -439,15 +422,7 @@
 						<label class="field-label">Spalten</label>
 						{#if columnsEditable}
 							<button type="button" class="add-col-btn" onclick={addColumn}>
-								<svg
-									class="h-3.5 w-3.5"
-									viewBox="0 0 24 24"
-									fill="none"
-									stroke="currentColor"
-									stroke-width="2"
-								>
-									<path d="M12 5v14M5 12h14" />
-								</svg>
+								<Plus size={14} />
 								Hinzufügen
 							</button>
 						{/if}
@@ -482,16 +457,7 @@
 									<!-- Drag handle -->
 									{#if columnsEditable}
 										<span class="drag-handle" aria-label="Spalte verschieben">
-											<svg class="h-4 w-4" viewBox="0 0 24 24" fill="currentColor">
-												<circle cx="9" cy="5" r="1.5" />
-												<circle cx="15" cy="5" r="1.5" />
-												<circle cx="9" cy="10" r="1.5" />
-												<circle cx="15" cy="10" r="1.5" />
-												<circle cx="9" cy="15" r="1.5" />
-												<circle cx="15" cy="15" r="1.5" />
-												<circle cx="9" cy="20" r="1.5" />
-												<circle cx="15" cy="20" r="1.5" />
-											</svg>
+											<DotsSixVertical size={16} weight="bold" />
 										</span>
 									{/if}
 
@@ -540,15 +506,7 @@
 											onclick={() => removeColumn(col.id)}
 											title="Spalte entfernen"
 										>
-											<svg
-												class="h-3.5 w-3.5"
-												viewBox="0 0 24 24"
-												fill="none"
-												stroke="currentColor"
-												stroke-width="2"
-											>
-												<path d="M18 6L6 18M6 6l12 12" />
-											</svg>
+											<X size={14} />
 										</button>
 									{/if}
 								</div>
diff --git a/apps/todo/apps/web/src/lib/components/board-views/ViewSelector.svelte b/apps/todo/apps/web/src/lib/components/board-views/ViewSelector.svelte
index bb9554aff..1f26e24ca 100644
--- a/apps/todo/apps/web/src/lib/components/board-views/ViewSelector.svelte
+++ b/apps/todo/apps/web/src/lib/components/board-views/ViewSelector.svelte
@@ -1,6 +1,40 @@
 <script lang="ts">
 	import { dndzone, SHADOW_PLACEHOLDER_ITEM_ID, type DndEvent } from 'svelte-dnd-action';
 	import type { LocalBoardView } from '$lib/data/local-store';
+	import {
+		DotsThreeVertical,
+		Plus,
+		PencilSimple,
+		Columns,
+		GridFour,
+		Flag,
+		Folder,
+		CalendarBlank,
+		List,
+		Star,
+		Tag,
+		Clock,
+		Crosshair,
+		Lightning,
+		Heart,
+	} from '@manacore/shared-icons';
+	import type { ComponentType } from 'svelte';
+
+	// Map icon names to Phosphor components
+	const phosphorIconMap: Record<string, ComponentType> = {
+		columns: Columns,
+		'grid-four': GridFour,
+		flag: Flag,
+		folders: Folder,
+		calendar: CalendarBlank,
+		list: List,
+		star: Star,
+		tag: Tag,
+		clock: Clock,
+		target: Crosshair,
+		lightning: Lightning,
+		heart: Heart,
+	};
 
 	interface Props {
 		views: LocalBoardView[];
@@ -37,25 +71,6 @@
 	let contextMenuViewId = $state<string | null>(null);
 	let contextMenuPos = $state({ x: 0, y: 0 });
 
-	// Map icon names to simple SVG representations
-	const iconMap: Record<string, string> = {
-		columns: 'M9 4h6v16H9zM3 4h4v16H3zM17 4h4v16h-4z',
-		'grid-four': 'M3 3h8v8H3zM13 3h8v8h-8zM3 13h8v8H3zM13 13h8v8h-8z',
-		flag: 'M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1zM4 22v-7',
-		folders: 'M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z',
-		calendar:
-			'M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z',
-		list: 'M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01',
-		star: 'M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z',
-		tag: 'M20.59 13.41l-7.17 7.17a2 2 0 01-2.83 0L2 12V2h10l8.59 8.59a2 2 0 010 2.82zM7 7h.01',
-		clock: 'M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10zM12 6v6l4 2',
-		target:
-			'M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10zM12 18a6 6 0 100-12 6 6 0 000 12zM12 14a2 2 0 100-4 2 2 0 000 4z',
-		lightning: 'M13 2L3 14h9l-1 10 10-12h-9l1-10z',
-		heart:
-			'M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z',
-	};
-
 	function handleContextMenu(e: MouseEvent, view: LocalBoardView) {
 		e.preventDefault();
 		e.stopPropagation();
@@ -107,18 +122,9 @@
 					onclick={() => onSelect(view.id)}
 					oncontextmenu={(e) => handleContextMenu(e, view)}
 				>
-					{#if view.icon && iconMap[view.icon]}
-						<svg
-							class="h-4 w-4 mr-1.5"
-							viewBox="0 0 24 24"
-							fill="none"
-							stroke="currentColor"
-							stroke-width="2"
-							stroke-linecap="round"
-							stroke-linejoin="round"
-						>
-							<path d={iconMap[view.icon]} />
-						</svg>
+					{#if view.icon && phosphorIconMap[view.icon]}
+						{@const IconComponent = phosphorIconMap[view.icon]}
+						<span class="mr-1.5"><IconComponent size={16} /></span>
 					{:else if view.icon}
 						<span class="mr-1.5 text-sm">{view.icon}</span>
 					{/if}
@@ -131,11 +137,7 @@
 							onclick={(e) => handleMoreClick(e, view)}
 							aria-label="View-Optionen"
 						>
-							<svg class="h-3 w-3" viewBox="0 0 24 24" fill="currentColor">
-								<circle cx="12" cy="5" r="2" />
-								<circle cx="12" cy="12" r="2" />
-								<circle cx="12" cy="19" r="2" />
-							</svg>
+							<DotsThreeVertical size={12} weight="bold" />
 						</button>
 					{/if}
 				</button>
@@ -144,17 +146,7 @@
 
 		{#if onCreate}
 			<button type="button" class="view-pill add-pill" onclick={onCreate}>
-				<svg
-					class="h-4 w-4"
-					viewBox="0 0 24 24"
-					fill="none"
-					stroke="currentColor"
-					stroke-width="2"
-					stroke-linecap="round"
-					stroke-linejoin="round"
-				>
-					<path d="M12 5v14M5 12h14" />
-				</svg>
+				<Plus size={16} />
 			</button>
 		{/if}
 	</div>
@@ -168,10 +160,7 @@
 		role="menu"
 	>
 		<button type="button" class="context-item" role="menuitem" onclick={handleEditClick}>
-			<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-				<path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7" />
-				<path d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z" />
-			</svg>
+			<PencilSimple size={16} />
 			Bearbeiten
 		</button>
 	</div>
diff --git a/apps/todo/apps/web/src/lib/components/form/DurationPicker.svelte b/apps/todo/apps/web/src/lib/components/form/DurationPicker.svelte
index c0be0f92a..8c71116d2 100644
--- a/apps/todo/apps/web/src/lib/components/form/DurationPicker.svelte
+++ b/apps/todo/apps/web/src/lib/components/form/DurationPicker.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { DurationUnit, EffectiveDuration } from '@todo/shared';
+	import { X } from '@manacore/shared-icons';
 
 	interface Props {
 		value: EffectiveDuration | null;
@@ -96,14 +97,7 @@
 		</button>
 		{#if value !== null}
 			<button type="button" class="duration-clear" onclick={clear} title="Zurücksetzen">
-				<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-					<path
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-						d="M6 18L18 6M6 6l12 12"
-					/>
-				</svg>
+				<X size={16} />
 			</button>
 		{/if}
 	</div>
diff --git a/apps/todo/apps/web/src/lib/components/form/FunRatingPicker.svelte b/apps/todo/apps/web/src/lib/components/form/FunRatingPicker.svelte
index 2d2fbbbd6..97d1d3be9 100644
--- a/apps/todo/apps/web/src/lib/components/form/FunRatingPicker.svelte
+++ b/apps/todo/apps/web/src/lib/components/form/FunRatingPicker.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { X } from '@manacore/shared-icons';
+
 	interface Props {
 		value: number | null;
 		onChange: (value: number | null) => void;
@@ -38,14 +40,7 @@
 		{/each}
 		{#if value !== null}
 			<button type="button" class="fun-rating-clear" onclick={handleClear} title="Zurücksetzen">
-				<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-					<path
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-						d="M6 18L18 6M6 6l12 12"
-					/>
-				</svg>
+				<X size={16} />
 			</button>
 		{/if}
 	</div>
diff --git a/apps/todo/apps/web/src/lib/components/form/StorypointsSelector.svelte b/apps/todo/apps/web/src/lib/components/form/StorypointsSelector.svelte
index 553bc7305..6234d6bbe 100644
--- a/apps/todo/apps/web/src/lib/components/form/StorypointsSelector.svelte
+++ b/apps/todo/apps/web/src/lib/components/form/StorypointsSelector.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { X } from '@manacore/shared-icons';
+
 	interface Props {
 		value: number | null;
 		onChange: (value: number | null) => void;
@@ -31,14 +33,7 @@
 	{/each}
 	{#if value !== null}
 		<button type="button" class="storypoint-clear" onclick={handleClear} title="Zurücksetzen">
-			<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-				<path
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="M6 18L18 6M6 6l12 12"
-				/>
-			</svg>
+			<X size={16} />
 		</button>
 	{/if}
 </div>
diff --git a/apps/todo/apps/web/src/lib/components/form/TagSelector.svelte b/apps/todo/apps/web/src/lib/components/form/TagSelector.svelte
index b385a3406..8c260ff0e 100644
--- a/apps/todo/apps/web/src/lib/components/form/TagSelector.svelte
+++ b/apps/todo/apps/web/src/lib/components/form/TagSelector.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { getContext } from 'svelte';
 	import type { Tag } from '@manacore/shared-tags';
+	import { CaretDown, Check } from '@manacore/shared-icons';
 
 	const tagsCtx: { readonly value: Tag[] } = getContext('tags');
 
@@ -52,9 +53,7 @@
 				{/if}
 			</div>
 		{/if}
-		<svg class="dropdown-arrow" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-			<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
-		</svg>
+		<CaretDown size={20} class="dropdown-arrow" />
 	</button>
 
 	{#if showDropdown}
@@ -71,14 +70,7 @@
 					<span class="tag-dot" style="background-color: {tag.color}"></span>
 					<span class="tag-name">{tag.name}</span>
 					{#if selectedIds.includes(tag.id)}
-						<svg class="check-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-							<path
-								stroke-linecap="round"
-								stroke-linejoin="round"
-								stroke-width="2"
-								d="M5 13l4 4L19 7"
-							/>
-						</svg>
+						<Check size={20} class="check-icon" />
 					{/if}
 				</button>
 			{/each}
diff --git a/apps/todo/apps/web/src/lib/components/kanban/KanbanTaskCard.svelte b/apps/todo/apps/web/src/lib/components/kanban/KanbanTaskCard.svelte
index ae1774d77..535d27cc1 100644
--- a/apps/todo/apps/web/src/lib/components/kanban/KanbanTaskCard.svelte
+++ b/apps/todo/apps/web/src/lib/components/kanban/KanbanTaskCard.svelte
@@ -4,6 +4,14 @@
 	import { de } from 'date-fns/locale';
 	import { ConfirmationModal, ContactAvatar } from '@manacore/shared-ui';
 	import TaskEditModal from '../TaskEditModal.svelte';
+	import {
+		ArrowsClockwise,
+		CalendarBlank,
+		Check,
+		CheckSquare,
+		Note,
+		Trash,
+	} from '@manacore/shared-icons';
 
 	interface Props {
 		task: Task;
@@ -172,14 +180,7 @@
 	{#if onToggleComplete}
 		<button class="task-checkbox" class:checked={task.isCompleted} onclick={onToggleComplete}>
 			{#if task.isCompleted}
-				<svg class="check-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-					<path
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="3"
-						d="M5 13l4 4L19 7"
-					/>
-				</svg>
+				<Check size={20} class="check-icon" />
 			{/if}
 		</button>
 	{/if}
@@ -210,28 +211,14 @@
 			<div class="task-meta">
 				{#if dueDateText()}
 					<span class="meta-item" class:overdue={isOverdue()}>
-						<svg class="meta-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-							<path
-								stroke-linecap="round"
-								stroke-linejoin="round"
-								stroke-width="2"
-								d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
-							/>
-						</svg>
+						<CalendarBlank size={20} class="meta-icon" />
 						{dueDateText()}
 					</span>
 				{/if}
 
 				{#if subtaskProgress()}
 					<span class="meta-item">
-						<svg class="meta-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-							<path
-								stroke-linecap="round"
-								stroke-linejoin="round"
-								stroke-width="2"
-								d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"
-							/>
-						</svg>
+						<CheckSquare size={20} class="meta-icon" />
 						{subtaskProgress()}
 					</span>
 				{/if}
@@ -286,46 +273,16 @@
 		onclick={(e) => e.stopPropagation()}
 	>
 		<button class="context-item" onclick={handleContextEdit}>
-			<svg class="context-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-				<path
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
-				/>
-			</svg>
+			<Note size={20} class="context-icon" />
 			Bearbeiten
 		</button>
 		<button class="context-item" onclick={handleContextToggleComplete}>
-			<svg class="context-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-				{#if task.isCompleted}
-					<path
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-						d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
-					/>
-				{:else}
-					<path
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-						d="M5 13l4 4L19 7"
-					/>
-				{/if}
-			</svg>
+			<ArrowsClockwise size={20} class="context-icon" />
 			{task.isCompleted ? 'Wiederherstellen' : 'Erledigen'}
 		</button>
 		<div class="context-divider"></div>
 		<button class="context-item danger" onclick={handleContextDelete}>
-			<svg class="context-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-				<path
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
-				/>
-			</svg>
+			<Trash size={20} class="context-icon" />
 			Löschen
 		</button>
 	</div>
diff --git a/apps/todo/apps/web/src/lib/components/kanban/QuickAddTaskInline.svelte b/apps/todo/apps/web/src/lib/components/kanban/QuickAddTaskInline.svelte
index 413380df3..8c881167d 100644
--- a/apps/todo/apps/web/src/lib/components/kanban/QuickAddTaskInline.svelte
+++ b/apps/todo/apps/web/src/lib/components/kanban/QuickAddTaskInline.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { Plus, X } from '@manacore/shared-icons';
+
 	interface Props {
 		onAdd: (title: string) => void;
 		placeholder?: string;
@@ -54,14 +56,7 @@
 					onmousedown={(e) => e.preventDefault()}
 					onclick={handleSubmit}
 				>
-					<svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M12 4v16m8-8H4"
-						/>
-					</svg>
+					<Plus size={14} />
 					Hinzufügen
 				</button>
 				<button
@@ -72,14 +67,7 @@
 						isAdding = false;
 					}}
 				>
-					<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M6 18L18 6M6 6l12 12"
-						/>
-					</svg>
+					<X size={16} />
 				</button>
 			</div>
 		</div>
@@ -91,14 +79,7 @@
 			<div
 				class="w-5 h-5 rounded-full border-2 border-dashed border-current group-hover:border-primary group-hover:text-primary flex items-center justify-center transition-colors"
 			>
-				<svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-					<path
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-						d="M12 4v16m8-8H4"
-					/>
-				</svg>
+				<Plus size={14} />
 			</div>
 			<span class="group-hover:text-foreground transition-colors">Aufgabe hinzufügen</span>
 		</button>
diff --git a/apps/todo/apps/web/src/routes/(app)/+layout.svelte b/apps/todo/apps/web/src/routes/(app)/+layout.svelte
index bbd5fc114..99f104b0e 100644
--- a/apps/todo/apps/web/src/routes/(app)/+layout.svelte
+++ b/apps/todo/apps/web/src/routes/(app)/+layout.svelte
@@ -54,6 +54,7 @@
 	import { todoStore, taskCollection } from '$lib/data/local-store';
 	import { useAllTasks, useAllProjects, getActiveProjects } from '$lib/data/task-queries';
 	import SyncIndicator from '$lib/components/SyncIndicator.svelte';
+	import { List, X } from '@manacore/shared-icons';
 
 	// Live queries — auto-update when IndexedDB changes (local writes, sync, other tabs)
 	const allTasks = useAllTasks();
@@ -537,24 +538,10 @@
 				>
 					{#if isPillNavCollapsed}
 						<!-- Menu icon -->
-						<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" class="fab-icon">
-							<path
-								stroke-linecap="round"
-								stroke-linejoin="round"
-								stroke-width="2"
-								d="M4 6h16M4 12h16M4 18h16"
-							/>
-						</svg>
+						<List size={20} class="fab-icon" />
 					{:else}
 						<!-- Close icon -->
-						<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" class="fab-icon">
-							<path
-								stroke-linecap="round"
-								stroke-linejoin="round"
-								stroke-width="2"
-								d="M6 18L18 6M6 6l12 12"
-							/>
-						</svg>
+						<X size={20} class="fab-icon" />
 					{/if}
 				</button>
 			{/if}
diff --git a/apps/todo/apps/web/src/routes/(app)/+page.svelte b/apps/todo/apps/web/src/routes/(app)/+page.svelte
index 62d9d1356..b3c492a08 100644
--- a/apps/todo/apps/web/src/routes/(app)/+page.svelte
+++ b/apps/todo/apps/web/src/routes/(app)/+page.svelte
@@ -7,6 +7,7 @@
 	import { boardViewsStore } from '$lib/stores/board-views.svelte';
 	import { todoSettings } from '$lib/stores/settings.svelte';
 	import TaskFilters from '$lib/components/TaskFilters.svelte';
+	import { Funnel, FloppyDisk } from '@manacore/shared-icons';
 
 	// Live query for board views
 	const boardViews = useAllBoardViews();
@@ -193,9 +194,7 @@
 				? 'active'
 				: ''}"
 		>
-			<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-				<path d="M22 3H2l8 9.46V19l4 2v-8.54L22 3z" />
-			</svg>
+			<Funnel size={16} />
 			Filter
 			{#if hasActiveFilters}
 				<span
@@ -230,17 +229,7 @@
 			{#if hasActiveFilters}
 				<div class="mt-2 flex items-center gap-2">
 					<button type="button" class="save-filter-btn" onclick={saveFiltersToView}>
-						<svg
-							class="h-3.5 w-3.5"
-							viewBox="0 0 24 24"
-							fill="none"
-							stroke="currentColor"
-							stroke-width="2"
-						>
-							<path d="M19 21H5a2 2 0 01-2-2V5a2 2 0 012-2h11l5 5v11a2 2 0 01-2 2z" />
-							<polyline points="17 21 17 13 7 13 7 21" />
-							<polyline points="7 3 7 8 15 8" />
-						</svg>
+						<FloppyDisk size={14} />
 						Filter speichern
 					</button>
 					{#if activeView?.filter}
diff --git a/apps/todo/apps/web/src/routes/(app)/settings/+page.svelte b/apps/todo/apps/web/src/routes/(app)/settings/+page.svelte
index 48321add6..036ea18dd 100644
--- a/apps/todo/apps/web/src/routes/(app)/settings/+page.svelte
+++ b/apps/todo/apps/web/src/routes/(app)/settings/+page.svelte
@@ -30,34 +30,39 @@
 		GlobalSettingsSection,
 	} from '@manacore/shared-ui';
 	import {
-		User,
-		EnvelopeSimple,
-		ShieldCheck,
-		Rows,
-		ListBullets,
-		ClipboardText,
-		SortAscending,
-		Clock,
-		FolderSimple,
 		Archive,
-		Lightning,
-		Trash,
-		SquaresFour,
-		House,
-		Hash,
-		ChartBar,
-		Columns,
-		Tag,
-		WarningCircle,
 		Bell,
+		ChartBar,
+		ClipboardText,
+		Clock,
+		Columns,
+		Envelope,
+		EnvelopeSimple,
 		Eye,
-		Timer,
-		SealCheck,
 		Fire,
+		FolderSimple,
 		GraduationCap,
-		Key,
+		GridFour,
+		Hash,
+		House,
 		Info,
+		Key,
+		Lightning,
+		ListBullets,
+		MapPin,
+		Rows,
+		SealCheck,
+		ShieldCheck,
 		SignOut,
+		SortAscending,
+		SquaresFour,
+		Stack,
+		Tag,
+		Timer,
+		Trash,
+		User,
+		Warning,
+		WarningCircle,
 	} from '@manacore/shared-icons';
 
 	// Use shared priority options (without color)
@@ -173,14 +178,7 @@
 	<!-- Page Layout Section -->
 	<SettingsSection title="Seiten-Ansicht">
 		{#snippet icon()}
-			<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
-				<path
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"
-				/>
-			</svg>
+			<Rows size={20} />
 		{/snippet}
 
 		<SettingsCard>
@@ -192,14 +190,7 @@
 				onchange={(v: string | number | null) => todoSettings.set('pageMode', v as PageMode)}
 			>
 				{#snippet icon()}
-					<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M4 6h16M4 10h16M4 14h16M4 18h16"
-						/>
-					</svg>
+					<ListBullets size={20} />
 				{/snippet}
 			</SettingsSelect>
 		</SettingsCard>
@@ -208,14 +199,7 @@
 	<!-- Task Behavior Section -->
 	<SettingsSection title="Task-Verhalten">
 		{#snippet icon()}
-			<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
-				<path
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"
-				/>
-			</svg>
+			<ClipboardText size={20} />
 		{/snippet}
 
 		<SettingsCard>
@@ -228,14 +212,7 @@
 					todoSettings.set('defaultPriority', v as TaskPriority)}
 			>
 				{#snippet icon()}
-					<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M3 4h13M3 8h9m-9 4h6m4 0l4-4m0 0l4 4m-4-4v12"
-						/>
-					</svg>
+					<SortAscending size={20} />
 				{/snippet}
 			</SettingsSelect>
 
@@ -246,14 +223,7 @@
 				onchange={(v: string | null) => todoSettings.set('defaultDueTime', v)}
 			>
 				{#snippet icon()}
-					<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
-						/>
-					</svg>
+					<Clock size={20} />
 				{/snippet}
 			</SettingsTimeInput>
 
@@ -266,14 +236,7 @@
 					todoSettings.set('quickAddProject', v as string | null)}
 			>
 				{#snippet icon()}
-					<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"
-						/>
-					</svg>
+					<FolderSimple size={20} />
 				{/snippet}
 			</SettingsSelect>
 
@@ -287,14 +250,7 @@
 				placeholder="Aus"
 			>
 				{#snippet icon()}
-					<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4"
-						/>
-					</svg>
+					<Archive size={20} />
 				{/snippet}
 			</SettingsNumberInput>
 
@@ -305,14 +261,7 @@
 				onToggle={(v) => todoSettings.set('smartDurationEnabled', v)}
 			>
 				{#snippet icon()}
-					<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M13 10V3L4 14h7v7l9-11h-7z"
-						/>
-					</svg>
+					<Lightning size={20} />
 				{/snippet}
 			</SettingsToggle>
 
@@ -325,14 +274,7 @@
 					onchange={(v) => todoSettings.set('defaultTaskDuration', Number(v))}
 				>
 					{#snippet icon()}
-						<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
-							<path
-								stroke-linecap="round"
-								stroke-linejoin="round"
-								stroke-width="2"
-								d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
-							/>
-						</svg>
+						<Clock size={20} />
 					{/snippet}
 				</SettingsSelect>
 			{/if}
@@ -345,14 +287,7 @@
 				border={false}
 			>
 				{#snippet icon()}
-					<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
-						/>
-					</svg>
+					<Trash size={20} />
 				{/snippet}
 			</SettingsToggle>
 		</SettingsCard>
@@ -361,14 +296,7 @@
 	<!-- View & Display Section -->
 	<SettingsSection title="Ansicht & Darstellung">
 		{#snippet icon()}
-			<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
-				<path
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z"
-				/>
-			</svg>
+			<SquaresFour size={20} />
 		{/snippet}
 
 		<SettingsCard>
@@ -380,14 +308,7 @@
 				onchange={(v: string | number | null) => todoSettings.set('defaultView', v as TodoView)}
 			>
 				{#snippet icon()}
-					<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
-						/>
-					</svg>
+					<House size={20} />
 				{/snippet}
 			</SettingsSelect>
 
@@ -398,14 +319,7 @@
 				onToggle={(v) => todoSettings.set('showTaskCounts', v)}
 			>
 				{#snippet icon()}
-					<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M7 20l4-16m2 16l4-16M6 9h14M4 15h14"
-						/>
-					</svg>
+					<Hash size={20} />
 				{/snippet}
 			</SettingsToggle>
 
@@ -416,14 +330,7 @@
 				onToggle={(v) => todoSettings.set('compactMode', v)}
 			>
 				{#snippet icon()}
-					<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M4 6h16M4 10h16M4 14h16M4 18h16"
-						/>
-					</svg>
+					<ListBullets size={20} />
 				{/snippet}
 			</SettingsToggle>
 
@@ -434,14 +341,7 @@
 				onToggle={(v) => todoSettings.set('showSubtaskProgress', v)}
 			>
 				{#snippet icon()}
-					<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"
-						/>
-					</svg>
+					<ChartBar size={20} />
 				{/snippet}
 			</SettingsToggle>
 
@@ -453,14 +353,7 @@
 				border={false}
 			>
 				{#snippet icon()}
-					<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"
-						/>
-					</svg>
+					<Stack size={20} />
 				{/snippet}
 			</SettingsToggle>
 		</SettingsCard>
@@ -469,14 +362,7 @@
 	<!-- Kanban Section -->
 	<SettingsSection title="Kanban-Board">
 		{#snippet icon()}
-			<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
-				<path
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7m0 10a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2"
-				/>
-			</svg>
+			<Columns size={20} />
 		{/snippet}
 
 		<SettingsCard>
@@ -489,14 +375,7 @@
 					todoSettings.set('kanbanCardSize', v as KanbanCardSize)}
 			>
 				{#snippet icon()}
-					<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M4 5a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM14 5a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1V5zM4 15a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1H5a1 1 0 01-1-1v-4zM14 15a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1v-4z"
-						/>
-					</svg>
+					<GridFour size={20} />
 				{/snippet}
 			</SettingsSelect>
 
@@ -507,14 +386,7 @@
 				onToggle={(v) => todoSettings.set('showLabelsOnCards', v)}
 			>
 				{#snippet icon()}
-					<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"
-						/>
-					</svg>
+					<Tag size={20} />
 				{/snippet}
 			</SettingsToggle>
 
@@ -529,14 +401,7 @@
 				border={false}
 			>
 				{#snippet icon()}
-					<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
-						/>
-					</svg>
+					<Warning size={20} />
 				{/snippet}
 			</SettingsNumberInput>
 		</SettingsCard>
@@ -545,14 +410,7 @@
 	<!-- Notifications Section -->
 	<SettingsSection title="Benachrichtigungen">
 		{#snippet icon()}
-			<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
-				<path
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"
-				/>
-			</svg>
+			<Bell size={20} />
 		{/snippet}
 
 		<SettingsCard>
@@ -565,14 +423,7 @@
 					todoSettings.set('defaultReminderMinutes', v as number | null)}
 			>
 				{#snippet icon()}
-					<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
-						/>
-					</svg>
+					<Clock size={20} />
 				{/snippet}
 			</SettingsSelect>
 
@@ -583,14 +434,7 @@
 				onToggle={(v) => todoSettings.set('dailyDigestEnabled', v)}
 			>
 				{#snippet icon()}
-					<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
-						/>
-					</svg>
+					<Envelope size={20} />
 				{/snippet}
 			</SettingsToggle>
 
@@ -602,14 +446,7 @@
 				border={false}
 			>
 				{#snippet icon()}
-					<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
-						/>
-					</svg>
+					<Warning size={20} />
 				{/snippet}
 			</SettingsToggle>
 		</SettingsCard>
@@ -618,14 +455,7 @@
 	<!-- Productivity Section -->
 	<SettingsSection title="Produktivität">
 		{#snippet icon()}
-			<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
-				<path
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="M13 10V3L4 14h7v7l9-11h-7z"
-				/>
-			</svg>
+			<Lightning size={20} />
 		{/snippet}
 
 		<SettingsCard>
@@ -636,20 +466,7 @@
 				onToggle={(v) => todoSettings.set('focusMode', v)}
 			>
 				{#snippet icon()}
-					<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
-						/>
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
-						/>
-					</svg>
+					<MapPin size={20} />
 				{/snippet}
 			</SettingsToggle>
 
@@ -660,14 +477,7 @@
 				onToggle={(v) => todoSettings.set('pomodoroEnabled', v)}
 			>
 				{#snippet icon()}
-					<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
-						/>
-					</svg>
+					<Clock size={20} />
 				{/snippet}
 			</SettingsToggle>
 
@@ -681,14 +491,7 @@
 				placeholder="Kein Ziel"
 			>
 				{#snippet icon()}
-					<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"
-						/>
-					</svg>
+					<SealCheck size={20} />
 				{/snippet}
 			</SettingsNumberInput>
 
@@ -700,20 +503,7 @@
 				border={false}
 			>
 				{#snippet icon()}
-					<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M17.657 18.657A8 8 0 016.343 7.343S7 9 9 10c0-2 .5-5 2.986-7C14 5 16.09 5.777 17.656 7.343A7.975 7.975 0 0120 13a7.975 7.975 0 01-2.343 5.657z"
-						/>
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M9.879 16.121A3 3 0 1012.015 11L11 14H9c0 .768.293 1.536.879 2.121z"
-						/>
-					</svg>
+					<Fire size={20} />
 				{/snippet}
 			</SettingsToggle>
 		</SettingsCard>
@@ -722,14 +512,7 @@
 	<!-- Keyboard Shortcuts Section -->
 	<SettingsSection title="Tastenkürzel">
 		{#snippet icon()}
-			<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
-				<path
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222"
-				/>
-			</svg>
+			<GraduationCap size={20} />
 		{/snippet}
 
 		<SettingsCard>
@@ -741,14 +524,7 @@
 				border={false}
 			>
 				{#snippet icon()}
-					<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"
-						/>
-					</svg>
+					<Key size={20} />
 				{/snippet}
 			</SettingsToggle>
 		</SettingsCard>
@@ -757,27 +533,13 @@
 	<!-- About Section -->
 	<SettingsSection title="Über">
 		{#snippet icon()}
-			<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
-				<path
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-				/>
-			</svg>
+			<Info size={20} />
 		{/snippet}
 
 		<SettingsCard>
 			<SettingsRow label="Version" border={false}>
 				{#snippet icon()}
-					<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"
-						/>
-					</svg>
+					<Tag size={20} />
 				{/snippet}
 				<span class="text-[hsl(var(--muted-foreground))]">1.0.0</span>
 			</SettingsRow>
@@ -794,14 +556,7 @@
 			border={false}
 		>
 			{#snippet icon()}
-				<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
-					<path
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-						d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
-					/>
-				</svg>
+				<SignOut size={20} />
 			{/snippet}
 		</SettingsDangerButton>
 	</SettingsDangerZone>
diff --git a/apps/uload/apps/web/src/routes/(app)/my/analytics/[id]/+page.svelte b/apps/uload/apps/web/src/routes/(app)/my/analytics/[id]/+page.svelte
index 8362d89e1..000b93094 100644
--- a/apps/uload/apps/web/src/routes/(app)/my/analytics/[id]/+page.svelte
+++ b/apps/uload/apps/web/src/routes/(app)/my/analytics/[id]/+page.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { page } from '$app/stores';
 	import { onMount } from 'svelte';
+	import { CaretLeft } from '@manacore/shared-icons';
 	import { useLiveQuery } from '@manacore/local-store/svelte';
 	import { linkCollection } from '$lib/data/local-store';
 	import { authStore } from '$lib/stores/auth.svelte';
@@ -68,9 +69,7 @@
 			class="rounded-lg p-2 hover:bg-gray-100 dark:hover:bg-gray-700"
 			title="Zurück"
 		>
-			<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
-			</svg>
+			<CaretLeft size={20} />
 		</a>
 		<div>
 			<h1 class="text-3xl font-bold">Analytics</h1>
diff --git a/apps/uload/apps/web/src/routes/(app)/my/links/+page.svelte b/apps/uload/apps/web/src/routes/(app)/my/links/+page.svelte
index 2d67c313e..40bb7e4d3 100644
--- a/apps/uload/apps/web/src/routes/(app)/my/links/+page.svelte
+++ b/apps/uload/apps/web/src/routes/(app)/my/links/+page.svelte
@@ -3,6 +3,16 @@
 	import { linkCollection, tagCollection, folderCollection } from '$lib/data/local-store';
 	import type { LocalLink } from '$lib/data/local-store';
 	import { toast } from 'svelte-sonner';
+	import {
+		CaretRight,
+		ChartBar,
+		Copy,
+		QrCode,
+		PencilSimple,
+		Lightning,
+		Trash,
+		X,
+	} from '@manacore/shared-icons';
 
 	const QR_API = 'https://api.qrserver.com/v1/create-qr-code';
 
@@ -296,19 +306,9 @@
 					onclick={() => (showAdvanced = !showAdvanced)}
 					class="mt-2 flex items-center gap-1 text-sm text-indigo-600 hover:text-indigo-700"
 				>
-					<svg
-						class="h-4 w-4 transition-transform {showAdvanced ? 'rotate-90' : ''}"
-						fill="none"
-						stroke="currentColor"
-						viewBox="0 0 24 24"
+					<span class="transition-transform {showAdvanced ? 'rotate-90' : ''}"
+						><CaretRight size={16} /></span
 					>
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M9 5l7 7-7 7"
-						/>
-					</svg>
 					Erweitert
 				</button>
 				{#if showAdvanced}
@@ -357,19 +357,9 @@
 					onclick={() => (showUtm = !showUtm)}
 					class="mt-3 flex items-center gap-1 text-sm text-indigo-600 hover:text-indigo-700"
 				>
-					<svg
-						class="h-4 w-4 transition-transform {showUtm ? 'rotate-90' : ''}"
-						fill="none"
-						stroke="currentColor"
-						viewBox="0 0 24 24"
+					<span class="transition-transform {showUtm ? 'rotate-90' : ''}"
+						><CaretRight size={16} /></span
 					>
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M9 5l7 7-7 7"
-						/>
-					</svg>
 					UTM-Parameter
 				</button>
 				{#if showUtm}
@@ -559,14 +549,7 @@
 									class="flex items-center gap-1 rounded-lg px-2 py-1.5 text-sm font-medium opacity-60 transition-all hover:bg-gray-100 hover:opacity-100 dark:hover:bg-gray-700"
 									title="Analytics"
 								>
-									<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-										<path
-											stroke-linecap="round"
-											stroke-linejoin="round"
-											stroke-width="2"
-											d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"
-										/>
-									</svg>
+									<ChartBar size={16} />
 									{link.clickCount}
 								</a>
 								<button
@@ -574,75 +557,35 @@
 									class="rounded-lg p-2 opacity-0 transition-all hover:bg-gray-100 group-hover:opacity-100 dark:hover:bg-gray-700"
 									title="Link kopieren"
 								>
-									<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-										<path
-											stroke-linecap="round"
-											stroke-linejoin="round"
-											stroke-width="2"
-											d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
-										/>
-									</svg>
+									<Copy size={16} />
 								</button>
 								<button
 									onclick={() => (qrLink = link)}
 									class="rounded-lg p-2 opacity-0 transition-all hover:bg-gray-100 group-hover:opacity-100 dark:hover:bg-gray-700"
 									title="QR-Code"
 								>
-									<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-										<path
-											stroke-linecap="round"
-											stroke-linejoin="round"
-											stroke-width="2"
-											d="M12 4v1m6 11h2m-6 0h-2v4m0-11v3m0 0h.01M12 12h4.01M16 20h4M4 12h4m12 0h.01M5 8h2a1 1 0 001-1V5a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1zm12 0h2a1 1 0 001-1V5a1 1 0 00-1-1h-2a1 1 0 00-1 1v2a1 1 0 001 1zM5 20h2a1 1 0 001-1v-2a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1z"
-										/>
-									</svg>
+									<QrCode size={16} />
 								</button>
 								<button
 									onclick={() => openEdit(link)}
 									class="rounded-lg p-2 opacity-0 transition-all hover:bg-gray-100 group-hover:opacity-100 dark:hover:bg-gray-700"
 									title="Bearbeiten"
 								>
-									<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-										<path
-											stroke-linecap="round"
-											stroke-linejoin="round"
-											stroke-width="2"
-											d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
-										/>
-									</svg>
+									<PencilSimple size={16} />
 								</button>
 								<button
 									onclick={() => toggleActive(link)}
 									class="rounded-lg p-2 opacity-0 transition-all hover:bg-gray-100 group-hover:opacity-100 dark:hover:bg-gray-700"
 									title={link.isActive ? 'Deaktivieren' : 'Aktivieren'}
 								>
-									<svg
-										class="h-4 w-4 {link.isActive ? 'text-green-500' : 'text-gray-400'}"
-										fill="none"
-										stroke="currentColor"
-										viewBox="0 0 24 24"
-									>
-										<path
-											stroke-linecap="round"
-											stroke-linejoin="round"
-											stroke-width="2"
-											d="M13 10V3L4 14h7v7l9-11h-7z"
-										/>
-									</svg>
+									<Lightning size={16} class={link.isActive ? 'text-green-500' : 'text-gray-400'} />
 								</button>
 								<button
 									onclick={() => deleteLink(link)}
 									class="rounded-lg p-2 opacity-0 transition-all hover:bg-red-50 hover:text-red-600 group-hover:opacity-100 dark:hover:bg-red-900/20"
 									title="Löschen"
 								>
-									<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-										<path
-											stroke-linecap="round"
-											stroke-linejoin="round"
-											stroke-width="2"
-											d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
-										/>
-									</svg>
+									<Trash size={16} />
 								</button>
 							</div>
 						</div>
@@ -669,14 +612,7 @@
 					onclick={() => (editingLink = null)}
 					class="rounded-lg p-1 hover:bg-gray-100 dark:hover:bg-gray-700"
 				>
-					<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M6 18L18 6M6 6l12 12"
-						/>
-					</svg>
+					<X size={20} />
 				</button>
 			</div>
 
@@ -786,14 +722,7 @@
 					onclick={() => (qrLink = null)}
 					class="rounded-lg p-1 hover:bg-gray-100 dark:hover:bg-gray-700"
 				>
-					<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M6 18L18 6M6 6l12 12"
-						/>
-					</svg>
+					<X size={20} />
 				</button>
 			</div>
 
diff --git a/apps/uload/apps/web/src/routes/(app)/my/tags/+page.svelte b/apps/uload/apps/web/src/routes/(app)/my/tags/+page.svelte
index 9e6a49470..9116fb35a 100644
--- a/apps/uload/apps/web/src/routes/(app)/my/tags/+page.svelte
+++ b/apps/uload/apps/web/src/routes/(app)/my/tags/+page.svelte
@@ -3,6 +3,7 @@
 	import { tagCollection, linkTagCollection } from '$lib/data/local-store';
 	import type { LocalTag } from '$lib/data/local-store';
 	import { toast } from 'svelte-sonner';
+	import { PencilSimple, Trash } from '@manacore/shared-icons';
 
 	const tags = useLiveQuery(() => tagCollection.getAll({}, { sortBy: 'name' }));
 	const linkTags = useLiveQuery(() => linkTagCollection.getAll());
@@ -156,27 +157,13 @@
 									onclick={() => (editingTag = { ...tag })}
 									class="rounded p-1 opacity-0 transition-all hover:bg-gray-100 group-hover:opacity-100 dark:hover:bg-gray-700"
 								>
-									<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-										<path
-											stroke-linecap="round"
-											stroke-linejoin="round"
-											stroke-width="2"
-											d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
-										/>
-									</svg>
+									<PencilSimple size={16} />
 								</button>
 								<button
 									onclick={() => deleteTag(tag)}
 									class="rounded p-1 opacity-0 transition-all hover:bg-red-50 hover:text-red-600 group-hover:opacity-100 dark:hover:bg-red-900/20"
 								>
-									<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-										<path
-											stroke-linecap="round"
-											stroke-linejoin="round"
-											stroke-width="2"
-											d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
-										/>
-									</svg>
+									<Trash size={16} />
 								</button>
 							</div>
 						</div>
diff --git a/apps/wisekeep/apps/web/src/routes/(protected)/playlists/+page.svelte b/apps/wisekeep/apps/web/src/routes/(protected)/playlists/+page.svelte
index c8815a604..083f7528b 100644
--- a/apps/wisekeep/apps/web/src/routes/(protected)/playlists/+page.svelte
+++ b/apps/wisekeep/apps/web/src/routes/(protected)/playlists/+page.svelte
@@ -2,6 +2,7 @@
 	import { useLiveQuery } from '@manacore/local-store/svelte';
 	import { playlistCollection } from '$lib/data/local-store';
 	import { toast } from 'svelte-sonner';
+	import { Trash } from '@manacore/shared-icons';
 
 	const playlists = useLiveQuery(() => playlistCollection.getAll({}, { sortBy: 'order' }));
 
@@ -81,14 +82,7 @@
 						onclick={() => deletePlaylist(pl.id, pl.name)}
 						class="rounded p-1 text-gray-500 opacity-0 hover:bg-gray-800 hover:text-red-400 group-hover:opacity-100"
 					>
-						<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"
-							><path
-								stroke-linecap="round"
-								stroke-linejoin="round"
-								stroke-width="2"
-								d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
-							/></svg
-						>
+						<Trash size={16} />
 					</button>
 				</div>
 			{/each}
diff --git a/apps/wisekeep/apps/web/src/routes/(protected)/transcripts/+page.svelte b/apps/wisekeep/apps/web/src/routes/(protected)/transcripts/+page.svelte
index a6a753b2e..85be81e00 100644
--- a/apps/wisekeep/apps/web/src/routes/(protected)/transcripts/+page.svelte
+++ b/apps/wisekeep/apps/web/src/routes/(protected)/transcripts/+page.svelte
@@ -3,6 +3,7 @@
 	import { transcriptCollection } from '$lib/data/local-store';
 	import type { LocalTranscript } from '$lib/data/local-store';
 	import { toast } from 'svelte-sonner';
+	import { CaretDown } from '@manacore/shared-icons';
 
 	const transcripts = useLiveQuery(() => transcriptCollection.getAll({ isArchived: false }));
 
@@ -82,21 +83,12 @@
 								<span>{t.language.toUpperCase()}</span>
 							</div>
 						</div>
-						<svg
-							class="h-5 w-5 shrink-0 text-gray-500 transition-transform {expandedId === t.id
+						<CaretDown
+							size={20}
+							class="shrink-0 text-gray-500 transition-transform {expandedId === t.id
 								? 'rotate-180'
 								: ''}"
-							fill="none"
-							stroke="currentColor"
-							viewBox="0 0 24 24"
-						>
-							<path
-								stroke-linecap="round"
-								stroke-linejoin="round"
-								stroke-width="2"
-								d="M19 9l-7 7-7-7"
-							/>
-						</svg>
+						/>
 					</button>
 					{#if expandedId === t.id}
 						<div class="border-t border-gray-800 p-4">
diff --git a/apps/zitare/apps/web/src/lib/components/LanguageSelector.svelte b/apps/zitare/apps/web/src/lib/components/LanguageSelector.svelte
index 6a47444cd..0b501b600 100644
--- a/apps/zitare/apps/web/src/lib/components/LanguageSelector.svelte
+++ b/apps/zitare/apps/web/src/lib/components/LanguageSelector.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { locale } from 'svelte-i18n';
 	import { setLocale, supportedLocales } from '$lib/i18n';
+	import { CaretDown } from '@manacore/shared-icons';
 
 	const languageLabels: Record<string, string> = {
 		de: 'Deutsch',
@@ -21,9 +22,7 @@
 		class="flex items-center gap-1 px-3 py-2 rounded-lg text-sm text-foreground-secondary hover:text-foreground hover:bg-surface transition-colors"
 	>
 		{languageLabels[$locale || 'de']}
-		<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-			<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
-		</svg>
+		<CaretDown size={16} />
 	</button>
 
 	{#if isOpen}
diff --git a/apps/zitare/apps/web/src/lib/components/QuoteCard.svelte b/apps/zitare/apps/web/src/lib/components/QuoteCard.svelte
index 6d48ab15c..73a57c4f5 100644
--- a/apps/zitare/apps/web/src/lib/components/QuoteCard.svelte
+++ b/apps/zitare/apps/web/src/lib/components/QuoteCard.svelte
@@ -9,6 +9,7 @@
 	import { _ } from 'svelte-i18n';
 	import { getContext } from 'svelte';
 	import { isFavorite as checkIsFavorite, type Favorite } from '$lib/data/queries';
+	import { Info, ShareNetwork, Heart } from '@manacore/shared-icons';
 
 	interface Props {
 		quote: Quote;
@@ -126,14 +127,7 @@
 						class="inline-flex ml-1 text-foreground-muted hover:text-primary transition-colors align-middle"
 						aria-label="Info"
 					>
-						<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-							<path
-								stroke-linecap="round"
-								stroke-linejoin="round"
-								stroke-width="2"
-								d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-							/>
-						</svg>
+						<Info size={16} />
 					</button>
 				{/if}
 			</p>
@@ -158,22 +152,10 @@
 		<div class="flex items-center gap-2">
 			<button
 				onclick={shareQuote}
-				class="p-2 rounded-full hover:bg-surface-hover transition-colors"
+				class="p-2 rounded-full hover:bg-surface-hover transition-colors text-foreground-secondary"
 				aria-label={$_('home.share')}
 			>
-				<svg
-					class="w-5 h-5 text-foreground-secondary"
-					fill="none"
-					viewBox="0 0 24 24"
-					stroke="currentColor"
-				>
-					<path
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-						d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z"
-					/>
-				</svg>
+				<ShareNetwork size={20} />
 			</button>
 
 			{#if authStore.isAuthenticated}
@@ -182,21 +164,12 @@
 					class="p-2 rounded-full hover:bg-surface-hover transition-colors"
 					aria-label={isFavorite ? $_('home.unfavorite') : $_('home.favorite')}
 				>
-					<svg
-						class="w-5 h-5 transition-colors {isFavorite
+					<Heart
+						size={20}
+						class="transition-colors {isFavorite
 							? 'text-red-500 fill-red-500'
 							: 'text-foreground-secondary'}"
-						fill={isFavorite ? 'currentColor' : 'none'}
-						viewBox="0 0 24 24"
-						stroke="currentColor"
-					>
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
-						/>
-					</svg>
+					/>
 				</button>
 			{/if}
 		</div>
diff --git a/apps/zitare/apps/web/src/routes/(app)/+page.svelte b/apps/zitare/apps/web/src/routes/(app)/+page.svelte
index 502b1f161..a0faef7d5 100644
--- a/apps/zitare/apps/web/src/routes/(app)/+page.svelte
+++ b/apps/zitare/apps/web/src/routes/(app)/+page.svelte
@@ -4,6 +4,7 @@
 	import { zitareSettings } from '$lib/stores/settings.svelte';
 	import { ZitareEvents } from '@manacore/shared-utils/analytics';
 	import QuoteCard from '$lib/components/QuoteCard.svelte';
+	import { ArrowsClockwise } from '@manacore/shared-icons';
 
 	let isRefreshing = $state(false);
 
@@ -47,19 +48,7 @@
 			disabled={isRefreshing}
 			class="inline-flex items-center gap-2 px-6 py-3 bg-primary text-white rounded-full font-medium hover:bg-primary-hover transition-colors disabled:opacity-50"
 		>
-			<svg
-				class="w-5 h-5 {isRefreshing ? 'animate-spin' : ''}"
-				fill="none"
-				viewBox="0 0 24 24"
-				stroke="currentColor"
-			>
-				<path
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
-				/>
-			</svg>
+			<ArrowsClockwise size={20} class={isRefreshing ? 'animate-spin' : ''} />
 			{$_('home.newQuote')}
 		</button>
 	</div>
diff --git a/apps/zitare/apps/web/src/routes/(app)/category/[category]/+page.svelte b/apps/zitare/apps/web/src/routes/(app)/category/[category]/+page.svelte
index 1b2da9342..4f6853ab3 100644
--- a/apps/zitare/apps/web/src/routes/(app)/category/[category]/+page.svelte
+++ b/apps/zitare/apps/web/src/routes/(app)/category/[category]/+page.svelte
@@ -6,6 +6,7 @@
 	import { quotesStore } from '$lib/stores/quotes.svelte';
 	import { zitareSettings } from '$lib/stores/settings.svelte';
 	import QuoteCard from '$lib/components/QuoteCard.svelte';
+	import { CaretLeft, MagnifyingGlass } from '@manacore/shared-icons';
 
 	// Get category from URL
 	let category = $derived($page.params.category as Category);
@@ -68,9 +69,7 @@
 		onclick={() => goto('/categories')}
 		class="flex items-center gap-2 text-foreground-secondary hover:text-foreground mb-6 transition-colors"
 	>
-		<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-			<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
-		</svg>
+		<CaretLeft size={20} />
 		{$_('categories.title')}
 	</button>
 
@@ -83,19 +82,9 @@
 		<!-- Search & Sort Bar -->
 		<div class="flex gap-3 mb-8">
 			<div class="relative flex-1">
-				<svg
-					class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-foreground-muted"
-					fill="none"
-					viewBox="0 0 24 24"
-					stroke="currentColor"
-				>
-					<path
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-						d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
-					/>
-				</svg>
+				<div class="absolute left-3 top-1/2 -translate-y-1/2 text-foreground-muted">
+					<MagnifyingGlass size={16} />
+				</div>
 				<input
 					type="text"
 					placeholder={$_('categories.searchInCategory')}
diff --git a/apps/zitare/apps/web/src/routes/(app)/favorites/+page.svelte b/apps/zitare/apps/web/src/routes/(app)/favorites/+page.svelte
index a76ba8533..8dd1d26a9 100644
--- a/apps/zitare/apps/web/src/routes/(app)/favorites/+page.svelte
+++ b/apps/zitare/apps/web/src/routes/(app)/favorites/+page.svelte
@@ -9,6 +9,7 @@
 	import { zitareSettings } from '$lib/stores/settings.svelte';
 	import QuoteCard from '$lib/components/QuoteCard.svelte';
 	import { ContextMenu, type ContextMenuItem } from '@manacore/shared-ui';
+	import { Heart, User } from '@manacore/shared-icons';
 
 	const allFavorites: { readonly value: Favorite[] } = getContext('favorites');
 
@@ -91,19 +92,7 @@
 	{#if !authStore.isAuthenticated}
 		<!-- Not logged in -->
 		<div class="text-center py-12 bg-surface-elevated rounded-2xl">
-			<svg
-				class="w-16 h-16 mx-auto text-foreground-muted mb-4"
-				fill="none"
-				viewBox="0 0 24 24"
-				stroke="currentColor"
-			>
-				<path
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="1.5"
-					d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
-				/>
-			</svg>
+			<User size={20} class="mx-auto text-foreground-muted mb-4" />
 			<p class="text-foreground-secondary mb-4">{$_('favorites.loginPrompt')}</p>
 			<button
 				onclick={() => goto('/login')}
@@ -115,19 +104,7 @@
 	{:else if favoriteQuotes.length === 0}
 		<!-- Empty state -->
 		<div class="text-center py-12 bg-surface-elevated rounded-2xl">
-			<svg
-				class="w-16 h-16 mx-auto text-foreground-muted mb-4"
-				fill="none"
-				viewBox="0 0 24 24"
-				stroke="currentColor"
-			>
-				<path
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="1.5"
-					d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
-				/>
-			</svg>
+			<Heart size={20} class="mx-auto text-foreground-muted mb-4" />
 			<p class="text-lg font-medium text-foreground mb-2">{$_('favorites.empty')}</p>
 			<p class="text-foreground-secondary">{$_('favorites.emptyDescription')}</p>
 		</div>
diff --git a/apps/zitare/apps/web/src/routes/(app)/lists/+page.svelte b/apps/zitare/apps/web/src/routes/(app)/lists/+page.svelte
index 553b7fafa..6b2452c8a 100644
--- a/apps/zitare/apps/web/src/routes/(app)/lists/+page.svelte
+++ b/apps/zitare/apps/web/src/routes/(app)/lists/+page.svelte
@@ -7,6 +7,7 @@
 	import { listsStore } from '$lib/stores/lists.svelte';
 	import { type QuoteList } from '$lib/data/queries';
 	import { ZitareEvents } from '@manacore/shared-utils/analytics';
+	import { Plus, Trash, X, User, Archive } from '@manacore/shared-icons';
 
 	const allLists: { readonly value: QuoteList[] } = getContext('lists');
 
@@ -73,14 +74,7 @@
 				onclick={() => (showCreateModal = true)}
 				class="flex items-center gap-2 px-4 py-2 bg-primary text-white rounded-full font-medium hover:bg-primary-hover transition-colors"
 			>
-				<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-					<path
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-						d="M12 4v16m8-8H4"
-					/>
-				</svg>
+				<Plus size={20} weight="bold" />
 				{$_('lists.create')}
 			</button>
 		{/if}
@@ -88,19 +82,9 @@
 
 	{#if !authStore.isAuthenticated}
 		<div class="text-center py-12 bg-surface-elevated rounded-2xl">
-			<svg
-				class="w-16 h-16 mx-auto text-foreground-muted mb-4"
-				fill="none"
-				viewBox="0 0 24 24"
-				stroke="currentColor"
-			>
-				<path
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="1.5"
-					d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
-				/>
-			</svg>
+			<div class="w-16 h-16 mx-auto text-foreground-muted mb-4 flex items-center justify-center">
+				<User size={64} />
+			</div>
 			<p class="text-foreground-secondary mb-4">{$_('lists.loginPrompt')}</p>
 			<button
 				onclick={() => goto('/login')}
@@ -111,19 +95,9 @@
 		</div>
 	{:else if allLists.value.length === 0}
 		<div class="text-center py-12 bg-surface-elevated rounded-2xl">
-			<svg
-				class="w-16 h-16 mx-auto text-foreground-muted mb-4"
-				fill="none"
-				viewBox="0 0 24 24"
-				stroke="currentColor"
-			>
-				<path
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="1.5"
-					d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"
-				/>
-			</svg>
+			<div class="w-16 h-16 mx-auto text-foreground-muted mb-4 flex items-center justify-center">
+				<Archive size={64} />
+			</div>
 			<p class="text-lg font-medium text-foreground mb-2">{$_('lists.empty')}</p>
 			<p class="text-foreground-secondary">{$_('lists.emptyDescription')}</p>
 		</div>
@@ -162,14 +136,7 @@
 									class="w-5 h-5 border-2 border-red-400 border-t-transparent rounded-full animate-spin"
 								></div>
 							{:else}
-								<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-									<path
-										stroke-linecap="round"
-										stroke-linejoin="round"
-										stroke-width="2"
-										d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
-									/>
-								</svg>
+								<Trash size={20} />
 							{/if}
 						</button>
 					</div>
@@ -189,14 +156,7 @@
 					onclick={() => (showCreateModal = false)}
 					class="p-2 text-foreground-secondary hover:text-foreground transition-colors"
 				>
-					<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M6 18L18 6M6 6l12 12"
-						/>
-					</svg>
+					<X size={20} />
 				</button>
 			</div>
 			<div class="p-6 space-y-4">
diff --git a/apps/zitare/apps/web/src/routes/(app)/lists/[id]/+page.svelte b/apps/zitare/apps/web/src/routes/(app)/lists/[id]/+page.svelte
index 0d22a0a23..2783aca39 100644
--- a/apps/zitare/apps/web/src/routes/(app)/lists/[id]/+page.svelte
+++ b/apps/zitare/apps/web/src/routes/(app)/lists/[id]/+page.svelte
@@ -307,14 +307,7 @@
 			<div class="modal-header">
 				<h3>{$_('lists.detail.editModal.title')}</h3>
 				<button class="close-btn" onclick={closeEditModal} aria-label={$_('common.close')}>
-					<svg width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M6 18L18 6M6 6l12 12"
-						/>
-					</svg>
+					<X size={24} />
 				</button>
 			</div>
 
@@ -342,14 +335,7 @@
 				</div>
 
 				<button class="danger-btn" onclick={handleDeleteList}>
-					<svg width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
-						/>
-					</svg>
+					<Trash size={20} />
 					{$_('lists.detail.editModal.deleteList')}
 				</button>
 			</div>
@@ -385,14 +371,7 @@
 			<div class="modal-header">
 				<h3>{$_('lists.detail.addModal.title')}</h3>
 				<button class="close-btn" onclick={closeAddQuotesModal} aria-label={$_('common.close')}>
-					<svg width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M6 18L18 6M6 6l12 12"
-						/>
-					</svg>
+					<X size={24} />
 				</button>
 			</div>