From 47f981fbc4982b416317eaa070758074325c7c06 Mon Sep 17 00:00:00 2001
From: Till JS <tills95@gmail.com>
Date: Tue, 31 Mar 2026 12:44:50 +0200
Subject: [PATCH] refactor(shared-ui): replace remaining inline SVGs with
 Phosphor icons

Migrate 41 inline SVG icons to Phosphor components across 21 shared-ui
files including CommandBar, InputBar, Sidebar, AudioPlayer, PageHeader,
Select, TagBadge, SettingsRow, and more.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../src/command-bar/CommandBar.svelte         |  98 +----------------
 .../src/components/SyncIndicator.svelte       |   5 +-
 .../molecules/KeyboardShortcutsPanel.svelte   |  18 +--
 .../shared-ui/src/molecules/PageHeader.svelte |  19 +---
 .../shared-ui/src/molecules/Select.svelte     |   5 +-
 .../src/molecules/feedback/EmptyState.svelte  |  16 +--
 .../src/molecules/media/AudioPlayer.svelte    |  27 +----
 .../src/molecules/tags/TagBadge.svelte        |  20 +---
 .../src/molecules/tags/TagList.svelte         |  11 +-
 .../shared-ui/src/navigation/Navbar.svelte    |  19 +---
 .../src/navigation/PillDropdown.svelte        |  10 +-
 .../src/navigation/PillNavigation.svelte      | 103 ++++++++----------
 .../navigation/PillTimeRangeSelector.svelte   |  21 +---
 .../shared-ui/src/navigation/Sidebar.svelte   |  46 +-------
 .../src/navigation/SidebarSection.svelte      |  18 +--
 .../ExpandableToolbar.svelte                  |  22 +---
 .../shared-ui/src/pages/OfflinePage.svelte    |  10 +-
 .../shared-ui/src/quick-input/InputBar.svelte |  83 +++-----------
 .../src/settings/GlobalSettingsSection.svelte |  16 +--
 .../shared-ui/src/settings/SettingsRow.svelte |  19 +---
 .../src/settings/SettingsTimeInput.svelte     |  16 +--
 21 files changed, 122 insertions(+), 480 deletions(-)

diff --git a/packages/shared-ui/src/command-bar/CommandBar.svelte b/packages/shared-ui/src/command-bar/CommandBar.svelte
index fcf39c812..b1656a282 100644
--- a/packages/shared-ui/src/command-bar/CommandBar.svelte
+++ b/packages/shared-ui/src/command-bar/CommandBar.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
 	import type { CommandBarItem, QuickAction, CreatePreview } from './CommandBar.types';
+	import { Heart, MagnifyingGlass, Plus } from '@manacore/shared-icons';
 
 	// Syntax highlighting patterns for command keywords
 	interface HighlightPattern {
@@ -245,14 +246,7 @@
 		<div class="command-modal">
 			<!-- Search Input with Syntax Highlighting -->
 			<div class="command-input-wrapper">
-				<svg class="command-icon" 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="command-icon" />
 				<div class="input-highlight-container">
 					<!-- Highlight backdrop (shows colored keywords) -->
 					<div class="input-highlight-backdrop" aria-hidden="true">
@@ -288,14 +282,7 @@
 								{#if creating}
 									<div class="loading-spinner-small"></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="M12 4v16m8-8H4"
-										/>
-									</svg>
+									<Plus size={20} />
 								{/if}
 							</div>
 							<div class="result-info">
@@ -352,11 +339,7 @@
 									{/if}
 								</div>
 								{#if item.isFavorite}
-									<svg class="result-favorite" fill="currentColor" viewBox="0 0 24 24">
-										<path
-											d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"
-										/>
-									</svg>
+									<Heart size={20} weight="fill" class="result-favorite" />
 								{/if}
 							</button>
 						{/each}
@@ -373,78 +356,7 @@
 							onclick={() => handleQuickAction(action)}
 							onmouseenter={() => (selectedIndex = index)}
 						>
-							<svg class="quick-action-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-								{#if action.icon === 'plus'}
-									<path
-										stroke-linecap="round"
-										stroke-linejoin="round"
-										stroke-width="2"
-										d="M12 4v16m8-8H4"
-									/>
-								{:else if action.icon === 'heart'}
-									<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"
-									/>
-								{:else if action.icon === 'tag'}
-									<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"
-									/>
-								{:else if action.icon === 'upload'}
-									<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"
-									/>
-								{:else if action.icon === 'calendar'}
-									<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"
-									/>
-								{:else if action.icon === 'clock'}
-									<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"
-									/>
-								{:else if action.icon === 'check'}
-									<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"
-									/>
-								{:else if action.icon === 'settings'}
-									<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"
-									/>
-								{:else if action.icon === 'list'}
-									<path
-										stroke-linecap="round"
-										stroke-linejoin="round"
-										stroke-width="2"
-										d="M4 6h16M4 10h16M4 14h16M4 18h16"
-									/>
-								{/if}
-							</svg>
+							<Plus size={20} class="quick-action-icon" />
 							<span>{action.label}</span>
 							{#if action.shortcut}
 								<kbd>{action.shortcut}</kbd>
diff --git a/packages/shared-ui/src/components/SyncIndicator.svelte b/packages/shared-ui/src/components/SyncIndicator.svelte
index e9001c312..026864868 100644
--- a/packages/shared-ui/src/components/SyncIndicator.svelte
+++ b/packages/shared-ui/src/components/SyncIndicator.svelte
@@ -6,6 +6,7 @@
 
 <script lang="ts">
 	import { onMount, onDestroy } from 'svelte';
+	import { Check } from '@manacore/shared-icons';
 
 	let isOnline = $state(true);
 	let showReconnected = $state(false);
@@ -58,9 +59,7 @@
 			</svg>
 			<span>Offline</span>
 		{:else if showReconnected}
-			<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="M5 13l4 4L19 7" />
-			</svg>
+			<Check size={20} />
 			<span>Wieder online</span>
 		{/if}
 	</div>
diff --git a/packages/shared-ui/src/molecules/KeyboardShortcutsPanel.svelte b/packages/shared-ui/src/molecules/KeyboardShortcutsPanel.svelte
index 6b5bd752c..e47986ec4 100644
--- a/packages/shared-ui/src/molecules/KeyboardShortcutsPanel.svelte
+++ b/packages/shared-ui/src/molecules/KeyboardShortcutsPanel.svelte
@@ -28,6 +28,7 @@
 	 */
 
 	import { Text } from '../atoms';
+	import { CaretDown } from '@manacore/shared-icons';
 
 	export interface KeyboardShortcut {
 		/** Key combination (e.g., ['Ctrl', 'S'] or ['Cmd', 'Shift', 'P']) */
@@ -110,19 +111,10 @@
 				<Text variant="small" weight="medium">{title}</Text>
 			</div>
 			{#if collapsible}
-				<svg
-					class="w-4 h-4 text-theme-secondary transition-transform {expanded ? '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>
+				<CaretDown
+					size={16}
+					class="text-theme-secondary transition-transform {expanded ? 'rotate-180' : ''}"
+				/>
 			{/if}
 		</button>
 
diff --git a/packages/shared-ui/src/molecules/PageHeader.svelte b/packages/shared-ui/src/molecules/PageHeader.svelte
index 45a574c64..b85c43001 100644
--- a/packages/shared-ui/src/molecules/PageHeader.svelte
+++ b/packages/shared-ui/src/molecules/PageHeader.svelte
@@ -41,6 +41,7 @@
 
 	import type { Snippet } from 'svelte';
 	import { Text } from '../atoms';
+	import { CaretLeft } from '@manacore/shared-icons';
 
 	type HeaderSize = 'sm' | 'md' | 'lg';
 
@@ -125,14 +126,7 @@
 					class="absolute left-0 p-1.5 rounded-lg text-theme-secondary hover:text-theme hover:bg-theme-secondary/10 transition-colors"
 					aria-label="Zurück"
 				>
-					<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="M15 19l-7-7 7-7"
-						/>
-					</svg>
+					<CaretLeft size={20} />
 				</a>
 			{/if}
 
@@ -171,14 +165,7 @@
 						class="page-header__back flex-shrink-0 p-1.5 -ml-1.5 rounded-lg text-theme-secondary hover:text-theme hover:bg-theme-secondary/10 transition-colors"
 						aria-label="Zurück"
 					>
-						<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="M15 19l-7-7 7-7"
-							/>
-						</svg>
+						<CaretLeft size={20} />
 					</a>
 				{/if}
 
diff --git a/packages/shared-ui/src/molecules/Select.svelte b/packages/shared-ui/src/molecules/Select.svelte
index 0e1e11a40..3d0246fe4 100644
--- a/packages/shared-ui/src/molecules/Select.svelte
+++ b/packages/shared-ui/src/molecules/Select.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { SelectOption } from './Select.types';
+	import { CaretDown } from '@manacore/shared-icons';
 
 	interface Props {
 		/** Current selected value */
@@ -73,9 +74,7 @@
 			{/each}
 		</select>
 		<div class="select-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="M19 9l-7 7-7-7" />
-			</svg>
+			<CaretDown size={16} />
 		</div>
 	</div>
 
diff --git a/packages/shared-ui/src/molecules/feedback/EmptyState.svelte b/packages/shared-ui/src/molecules/feedback/EmptyState.svelte
index 235f84abe..485ff6314 100644
--- a/packages/shared-ui/src/molecules/feedback/EmptyState.svelte
+++ b/packages/shared-ui/src/molecules/feedback/EmptyState.svelte
@@ -30,6 +30,7 @@
 
 	import type { Snippet } from 'svelte';
 	import { Text, Button } from '../../atoms';
+	import { Tray } from '@manacore/shared-icons';
 
 	type EmptyStateVariant = 'default' | 'compact' | 'centered';
 
@@ -86,20 +87,7 @@
 	{:else}
 		<!-- Default icon -->
 		<div class="empty-state__icon mb-4 text-theme-secondary opacity-50">
-			<svg
-				class="w-12 h-12"
-				fill="none"
-				stroke="currentColor"
-				viewBox="0 0 24 24"
-				xmlns="http://www.w3.org/2000/svg"
-			>
-				<path
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="1.5"
-					d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"
-				/>
-			</svg>
+			<Tray size={48} />
 		</div>
 	{/if}
 
diff --git a/packages/shared-ui/src/molecules/media/AudioPlayer.svelte b/packages/shared-ui/src/molecules/media/AudioPlayer.svelte
index 2533c005b..8cb58e6c9 100644
--- a/packages/shared-ui/src/molecules/media/AudioPlayer.svelte
+++ b/packages/shared-ui/src/molecules/media/AudioPlayer.svelte
@@ -2,6 +2,7 @@
 	import { onMount } from 'svelte';
 	import type { Snippet } from 'svelte';
 	import { Text } from '../../atoms';
+	import { Pause, Play, SkipBack, SkipForward } from '@manacore/shared-icons';
 
 	interface Props {
 		/** Audio source URL */
@@ -130,14 +131,7 @@
 			{#if skipBackIcon}
 				{@render skipBackIcon()}
 			{:else}
-				<svg class="h-6 w-6 text-theme" 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.333 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} class="text-theme" />
 			{/if}
 		</button>
 
@@ -163,16 +157,12 @@
 				{#if pauseIcon}
 					{@render pauseIcon()}
 				{:else}
-					<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24">
-						<path d="M6 4h4v16H6V4zm8 0h4v16h-4V4z" />
-					</svg>
+					<Pause size={20} weight="fill" />
 				{/if}
 			{:else if playIcon}
 				{@render playIcon()}
 			{:else}
-				<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24">
-					<path d="M8 5v14l11-7z" />
-				</svg>
+				<Play size={20} weight="fill" />
 			{/if}
 		</button>
 
@@ -187,14 +177,7 @@
 			{#if skipForwardIcon}
 				{@render skipForwardIcon()}
 			{:else}
-				<svg class="h-6 w-6 text-theme" 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} class="text-theme" />
 			{/if}
 		</button>
 
diff --git a/packages/shared-ui/src/molecules/tags/TagBadge.svelte b/packages/shared-ui/src/molecules/tags/TagBadge.svelte
index c39fa505b..d7172e47a 100644
--- a/packages/shared-ui/src/molecules/tags/TagBadge.svelte
+++ b/packages/shared-ui/src/molecules/tags/TagBadge.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { X } from '@manacore/shared-icons';
+
 	/**
 	 * Generic tag badge component
 	 * Displays a colored badge with optional remove button
@@ -76,14 +78,7 @@
 				type="button"
 				aria-label="Remove tag"
 			>
-				<svg class="h-3 w-3" 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>
 		{/if}
 	</span>
@@ -104,14 +99,7 @@
 				type="button"
 				aria-label="Remove tag"
 			>
-				<svg class="h-3 w-3" 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>
 		{/if}
 	</span>
diff --git a/packages/shared-ui/src/molecules/tags/TagList.svelte b/packages/shared-ui/src/molecules/tags/TagList.svelte
index 6b57c117b..c86e6f392 100644
--- a/packages/shared-ui/src/molecules/tags/TagList.svelte
+++ b/packages/shared-ui/src/molecules/tags/TagList.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { PencilSimple, Trash } from '@manacore/shared-icons';
+	import { PencilSimple, Tag, Trash } from '@manacore/shared-icons';
 	import { DEFAULT_TAG_COLOR } from './constants';
 	import type { Tag } from './constants';
 
@@ -66,14 +66,7 @@
 		<div
 			class="w-16 h-16 mb-4 rounded-full bg-gray-100 dark:bg-gray-800 flex items-center justify-center"
 		>
-			<svg class="w-8 h-8 text-gray-400" 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"
-				></path>
-			</svg>
+			<Tag size={32} class="text-gray-400" />
 		</div>
 		<h3 class="text-lg font-medium text-foreground mb-1">{emptyMessage}</h3>
 		<p class="text-sm text-muted-foreground">{emptyDescription}</p>
diff --git a/packages/shared-ui/src/navigation/Navbar.svelte b/packages/shared-ui/src/navigation/Navbar.svelte
index a532172d5..7969f775a 100644
--- a/packages/shared-ui/src/navigation/Navbar.svelte
+++ b/packages/shared-ui/src/navigation/Navbar.svelte
@@ -2,6 +2,7 @@
 	import type { Snippet } from 'svelte';
 	import type { NavItem } from './types';
 	import NavLink from './NavLink.svelte';
+	import { List, X } from '@manacore/shared-icons';
 
 	interface Props {
 		/** Navigation items to display */
@@ -90,23 +91,9 @@
 				aria-label="Toggle menu"
 			>
 				{#if mobileMenuOpen}
-					<svg class="w-6 h-6" 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} />
 				{:else}
-					<svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M4 6h16M4 12h16M4 18h16"
-						/>
-					</svg>
+					<List size={24} />
 				{/if}
 			</button>
 		</div>
diff --git a/packages/shared-ui/src/navigation/PillDropdown.svelte b/packages/shared-ui/src/navigation/PillDropdown.svelte
index 6b9943f19..ef35d6ddc 100644
--- a/packages/shared-ui/src/navigation/PillDropdown.svelte
+++ b/packages/shared-ui/src/navigation/PillDropdown.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { PillDropdownItem } from './types';
+	import { Columns } from '@manacore/shared-icons';
 
 	interface Props {
 		items: PillDropdownItem[];
@@ -258,14 +259,7 @@
 								class="split-button glass-pill"
 								title="Open in split panel (Ctrl/Cmd+Click)"
 							>
-								<svg class="split-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-									<path
-										stroke-linecap="round"
-										stroke-linejoin="round"
-										stroke-width="2"
-										d="M9 4H5a1 1 0 00-1 1v14a1 1 0 001 1h4a1 1 0 001-1V5a1 1 0 00-1-1zM19 4h-4a1 1 0 00-1 1v14a1 1 0 001 1h4a1 1 0 001-1V5a1 1 0 00-1-1z"
-									/>
-								</svg>
+								<Columns size={20} class="split-icon" />
 							</button>
 						{/if}
 					</div>
diff --git a/packages/shared-ui/src/navigation/PillNavigation.svelte b/packages/shared-ui/src/navigation/PillNavigation.svelte
index 9ebbfd0ce..9bd845489 100644
--- a/packages/shared-ui/src/navigation/PillNavigation.svelte
+++ b/packages/shared-ui/src/navigation/PillNavigation.svelte
@@ -13,63 +13,63 @@
 	import PillTagSelector from './PillTagSelector.svelte';
 	// Phosphor Icons (via shared-icons)
 	import {
-		House,
-		Users,
-		Tag,
-		Heart,
-		Gear,
-		ChatCircle,
-		Question,
-		ShareNetwork,
+		Archive,
 		Bell,
-		Clock,
-		Timer,
-		Target,
-		Globe,
-		Tray,
+		Buildings,
+		CalendarBlank,
+		CaretDown,
+		CaretLeft,
+		CaretRight,
+		CaretUp,
+		ChartBar,
+		ChatCircle,
 		Check,
 		CheckCircle,
 		CheckSquare,
-		Plus,
+		Clock,
 		Columns,
-		Microphone,
-		CalendarBlank,
-		Folder,
-		Archive,
-		Upload,
-		MusicNote,
-		File,
-		ChartBar,
-		MagnifyingGlass,
-		List,
 		Compass,
-		Moon,
-		Sun,
-		SignOut,
-		CaretDown,
-		CaretUp,
-		CaretLeft,
-		Fire,
-		GridFour,
-		Palette,
 		CreditCard,
-		Buildings,
-		User,
-		Scales,
-		Robot,
-		Key,
-		Shield,
-		Gift,
-		MusicNotes,
-		Playlist,
-		Waveform,
+		File,
 		FileText,
+		Fire,
+		Folder,
+		Funnel,
+		Gear,
+		Gift,
+		Globe,
+		GridFour,
+		Heart,
+		House,
+		Key,
+		List,
+		MagnifyingGlass,
+		Microphone,
+		Moon,
+		MusicNote,
+		MusicNotes,
+		Palette,
+		Playlist,
+		Plus,
+		Question,
+		Robot,
+		Scales,
+		ShareFat,
+		ShareNetwork,
+		Shield,
+		SignOut,
 		Sparkle,
 		Spiral,
-		ShareFat,
+		Sun,
+		Tag,
+		Target,
+		Timer,
 		Trash,
-		Funnel,
-		CaretRight,
+		Tray,
+		Upload,
+		User,
+		Users,
+		Waveform,
 	} from '@manacore/shared-icons';
 
 	// Map icon names to Phosphor components
@@ -593,16 +593,7 @@
 									title="Hoher Kontrast"
 									aria-pressed={a11yContrast === 'high'}
 								>
-									<svg
-										class="a11y-icon"
-										viewBox="0 0 24 24"
-										fill="none"
-										stroke="currentColor"
-										stroke-width="2"
-									>
-										<circle cx="12" cy="12" r="10" />
-										<path d="M12 2v20M12 2a10 10 0 0 1 0 20" fill="currentColor" />
-									</svg>
+									<Sun size={20} class="a11y-icon" />
 								</button>
 								<!-- Reduce Motion Toggle -->
 								<button
diff --git a/packages/shared-ui/src/navigation/PillTimeRangeSelector.svelte b/packages/shared-ui/src/navigation/PillTimeRangeSelector.svelte
index 99c7ff773..c5a51427f 100644
--- a/packages/shared-ui/src/navigation/PillTimeRangeSelector.svelte
+++ b/packages/shared-ui/src/navigation/PillTimeRangeSelector.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { CaretDown, Clock } from '@manacore/shared-icons';
+
 	// Portal action - moves element to body to escape stacking contexts
 	function portal(node: HTMLElement) {
 		document.body.appendChild(node);
@@ -155,27 +157,12 @@
 		class:active={toggleMode && active}
 		title={toggleMode ? 'Klick: Ein/Aus | Rechtsklick: Zeitbereich' : 'Zeitbereich auswählen'}
 	>
-		<svg class="pill-icon" 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="pill-icon" />
 		{#if label}
 			<span class="pill-label">{label}</span>
 		{/if}
 		{#if !toggleMode}
-			<svg
-				class="chevron-icon"
-				class:rotated={isOpen}
-				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={20} class="chevron-icon" />
 		{/if}
 	</button>
 
diff --git a/packages/shared-ui/src/navigation/Sidebar.svelte b/packages/shared-ui/src/navigation/Sidebar.svelte
index f9e97cb1e..03b022df3 100644
--- a/packages/shared-ui/src/navigation/Sidebar.svelte
+++ b/packages/shared-ui/src/navigation/Sidebar.svelte
@@ -2,6 +2,7 @@
 	import type { Snippet } from 'svelte';
 	import type { NavItem } from './types';
 	import NavLink from './NavLink.svelte';
+	import { CaretLeft, List, Moon, SignOut, Sun } from '@manacore/shared-icons';
 
 	interface Props {
 		/** Navigation items to display */
@@ -108,24 +109,10 @@
 				>
 					{#if isDark}
 						<!-- Sun icon -->
-						<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 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"
-							/>
-						</svg>
+						<Sun size={20} />
 					{:else}
 						<!-- Moon icon -->
-						<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="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"
-							/>
-						</svg>
+						<Moon size={20} />
 					{/if}
 					{#if !minimized}
 						<span>{isDark ? lightModeLabel : darkModeLabel}</span>
@@ -145,14 +132,7 @@
 					class="sidebar__action sidebar__action--danger"
 					title={signOutLabel}
 				>
-					<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="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} />
 					{#if !minimized}
 						<span>{signOutLabel}</span>
 					{/if}
@@ -168,24 +148,10 @@
 				>
 					{#if minimized}
 						<!-- Menu icon (expand) -->
-						<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="M4 6h16M4 12h16M4 18h16"
-							/>
-						</svg>
+						<List size={20} />
 					{:else}
 						<!-- Chevron left (minimize) -->
-						<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} />
 						<span>{minimizeLabel}</span>
 					{/if}
 				</button>
diff --git a/packages/shared-ui/src/navigation/SidebarSection.svelte b/packages/shared-ui/src/navigation/SidebarSection.svelte
index f730623ed..6f3305395 100644
--- a/packages/shared-ui/src/navigation/SidebarSection.svelte
+++ b/packages/shared-ui/src/navigation/SidebarSection.svelte
@@ -24,6 +24,7 @@
 	import type { NavItem } from './types';
 	import NavLink from './NavLink.svelte';
 	import { Text } from '../atoms';
+	import { CaretDown } from '@manacore/shared-icons';
 
 	interface Props {
 		/** Section title (hidden when minimized) */
@@ -82,19 +83,10 @@
 				<Text variant="small" class="text-theme-tertiary uppercase tracking-wider">
 					{title}
 				</Text>
-				<svg
-					class="w-3 h-3 text-theme-tertiary transition-transform {expanded ? '' : '-rotate-90'}"
-					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={14}
+					class="text-theme-tertiary transition-transform {expanded ? '' : '-rotate-90'}"
+				/>
 			</button>
 		{:else}
 			<div class="px-3 py-1.5">
diff --git a/packages/shared-ui/src/navigation/expandable-toolbar/ExpandableToolbar.svelte b/packages/shared-ui/src/navigation/expandable-toolbar/ExpandableToolbar.svelte
index 96a55227b..5742a1b1c 100644
--- a/packages/shared-ui/src/navigation/expandable-toolbar/ExpandableToolbar.svelte
+++ b/packages/shared-ui/src/navigation/expandable-toolbar/ExpandableToolbar.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { slide } from 'svelte/transition';
 	import type { Snippet } from 'svelte';
+	import { SlidersHorizontal } from '@manacore/shared-icons';
 
 	interface Props {
 		/** Whether the toolbar is collapsed */
@@ -64,26 +65,7 @@
 		class:active={!isCollapsed}
 		title={isCollapsed ? collapsedTitle : expandedTitle}
 	>
-		<svg class="fab-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-			{#if isCollapsed}
-				{#if collapsedIcon}
-					{@render collapsedIcon()}
-				{:else}
-					<!-- Default settings/sliders icon -->
-					<path
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-						d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"
-					/>
-				{/if}
-			{:else if expandedIcon}
-				{@render expandedIcon()}
-			{:else}
-				<!-- Default chevron down icon -->
-				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
-			{/if}
-		</svg>
+		<SlidersHorizontal size={20} class="fab-icon" />
 	</button>
 </div>
 
diff --git a/packages/shared-ui/src/pages/OfflinePage.svelte b/packages/shared-ui/src/pages/OfflinePage.svelte
index 30948268f..dd0beb3e9 100644
--- a/packages/shared-ui/src/pages/OfflinePage.svelte
+++ b/packages/shared-ui/src/pages/OfflinePage.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
+	import { House } from '@manacore/shared-icons';
 
 	interface Props {
 		appName: string;
@@ -83,14 +84,7 @@
 						e.currentTarget.style.filter = '';
 					}}
 				>
-					<svg class="w-5 h-5 mr-2" 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} class="mr-2" />
 					Zur Startseite
 				</a>
 
diff --git a/packages/shared-ui/src/quick-input/InputBar.svelte b/packages/shared-ui/src/quick-input/InputBar.svelte
index fbf0aac8e..69a0a40f8 100644
--- a/packages/shared-ui/src/quick-input/InputBar.svelte
+++ b/packages/shared-ui/src/quick-input/InputBar.svelte
@@ -30,6 +30,14 @@
 	}
 
 	import type { Snippet } from 'svelte';
+	import {
+		ArrowRight,
+		Check,
+		CheckSquare,
+		Heart,
+		MagnifyingGlass,
+		Plus,
+	} from '@manacore/shared-icons';
 
 	interface Props {
 		onSearch: (query: string) => Promise<QuickInputItem[]>;
@@ -394,14 +402,7 @@
 							{#if creating}
 								<div class="loading-spinner-small"></div>
 							{:else}
-								<svg 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} />
 							{/if}
 						</div>
 						<div class="result-info">
@@ -424,14 +425,7 @@
 						onmouseenter={() => (selectedIndex = searchOptionIndex)}
 					>
 						<div class="result-avatar search-avatar">
-							<svg 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} />
 						</div>
 						<div class="result-info">
 							<div class="result-name">"{searchQuery}" {searchText.toLowerCase()}</div>
@@ -474,11 +468,7 @@
 								{/if}
 							</div>
 							{#if item.isFavorite}
-								<svg class="favorite-icon" fill="currentColor" viewBox="0 0 24 24">
-									<path
-										d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"
-									/>
-								</svg>
+								<Heart size={20} weight="fill" class="favorite-icon" />
 							{/if}
 						</button>
 					{/each}
@@ -504,47 +494,9 @@
 		<div class="app-icon" class:success-icon={createSuccess}>
 			{#if createSuccess}
 				<!-- Checkmark icon -->
-				<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
-					<path
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2.5"
-						d="M5 13l4 4L19 7"
-					/>
-				</svg>
+				<Check size={20} />
 			{:else}
-				<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
-					{#if appIcon === 'check-square' || appIcon === 'todo'}
-						<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"
-						/>
-					{:else if appIcon === 'calendar'}
-						<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"
-						/>
-					{:else if appIcon === 'users' || appIcon === 'contacts'}
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"
-						/>
-					{:else}
-						<!-- Default search icon -->
-						<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"
-						/>
-					{/if}
-				</svg>
+				<CheckSquare size={20} />
 			{/if}
 		</div>
 
@@ -578,14 +530,7 @@
 				{#if creating}
 					<div class="loading-spinner-small"></div>
 				{:else}
-					<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M14 5l7 7m0 0l-7 7m7-7H3"
-						/>
-					</svg>
+					<ArrowRight size={20} />
 				{/if}
 			</button>
 		{/if}
diff --git a/packages/shared-ui/src/settings/GlobalSettingsSection.svelte b/packages/shared-ui/src/settings/GlobalSettingsSection.svelte
index a05e06802..8eab5dce5 100644
--- a/packages/shared-ui/src/settings/GlobalSettingsSection.svelte
+++ b/packages/shared-ui/src/settings/GlobalSettingsSection.svelte
@@ -4,6 +4,7 @@
 	import SettingsSection from './SettingsSection.svelte';
 	import SettingsCard from './SettingsCard.svelte';
 	import NavVisibilitySettings from './NavVisibilitySettings.svelte';
+	import { Gear } from '@manacore/shared-icons';
 
 	interface NavItem {
 		href: string;
@@ -112,20 +113,7 @@
 
 <SettingsSection {title}>
 	{#snippet icon()}
-		<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
-			<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} />
 	{/snippet}
 
 	<SettingsCard>
diff --git a/packages/shared-ui/src/settings/SettingsRow.svelte b/packages/shared-ui/src/settings/SettingsRow.svelte
index 70e13b71f..66a4c6f00 100644
--- a/packages/shared-ui/src/settings/SettingsRow.svelte
+++ b/packages/shared-ui/src/settings/SettingsRow.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
+	import { CaretRight } from '@manacore/shared-icons';
 
 	interface Props {
 		/** Row label */
@@ -79,14 +80,7 @@
 			{#if children}
 				{@render children()}
 			{:else}
-				<svg
-					class="w-5 h-5 text-gray-400 dark:text-gray-500"
-					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="text-gray-400 dark:text-gray-500" />
 			{/if}
 		</div>
 	</a>
@@ -116,14 +110,7 @@
 			{#if children}
 				{@render children()}
 			{:else}
-				<svg
-					class="w-5 h-5 text-gray-400 dark:text-gray-500"
-					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="text-gray-400 dark:text-gray-500" />
 			{/if}
 		</div>
 	</button>
diff --git a/packages/shared-ui/src/settings/SettingsTimeInput.svelte b/packages/shared-ui/src/settings/SettingsTimeInput.svelte
index 7b1ad85b3..776d3d37b 100644
--- a/packages/shared-ui/src/settings/SettingsTimeInput.svelte
+++ b/packages/shared-ui/src/settings/SettingsTimeInput.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
+	import { X } from '@manacore/shared-icons';
 
 	interface Props {
 		/** Row label */
@@ -108,20 +109,7 @@
 				aria-label="Clear time"
 				{disabled}
 			>
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					width="14"
-					height="14"
-					viewBox="0 0 24 24"
-					fill="none"
-					stroke="currentColor"
-					stroke-width="2"
-					stroke-linecap="round"
-					stroke-linejoin="round"
-				>
-					<path d="M18 6 6 18" />
-					<path d="m6 6 12 12" />
-				</svg>
+				<X size={20} />
 			</button>
 		{/if}
 	</div>