diff --git a/src/lib/components/Checklist.svelte b/src/lib/components/Checklist.svelte
index 308b62c..88a2657 100644
--- a/src/lib/components/Checklist.svelte
+++ b/src/lib/components/Checklist.svelte
@@ -1,4 +1,7 @@
 <script lang="ts">
+	import XIcon from 'lucide-svelte/icons/x';
+	import Plus from 'lucide-svelte/icons/plus';
+
 	interface ChecklistItem {
 		text: string;
 		checked: boolean;
@@ -101,9 +104,7 @@
 				aria-label="Remove item"
 				data-testid="checklist-remove"
 			>
-				<svg class="h-4 w-4 text-[var(--text-muted)]" 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>
+				<XIcon class="h-4 w-4 text-[var(--text-muted)]" />
 			</button>
 		</div>
 	{/each}
@@ -112,9 +113,7 @@
 		class="flex items-center gap-2 text-sm text-[var(--text-muted)] hover:text-[var(--text)]"
 		data-testid="checklist-add"
 	>
-		<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 class="h-4 w-4" />
 		Add item
 	</button>
 </div>
diff --git a/src/lib/components/ImageUpload.svelte b/src/lib/components/ImageUpload.svelte
index 45a359d..3cc047f 100644
--- a/src/lib/components/ImageUpload.svelte
+++ b/src/lib/components/ImageUpload.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import XIcon from 'lucide-svelte/icons/x';
 	import type { Attachment } from '$lib/types/index.js';
 
 	interface Props {
@@ -69,9 +70,7 @@
 						aria-label="Remove attachment"
 						data-testid="remove-attachment"
 					>
-						<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>
+						<XIcon class="h-3 w-3" />
 					</button>
 				</div>
 			{/each}
diff --git a/src/lib/components/Layout/Header.svelte b/src/lib/components/Layout/Header.svelte
index 93422c4..15aac27 100644
--- a/src/lib/components/Layout/Header.svelte
+++ b/src/lib/components/Layout/Header.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import SearchBar from '../SearchBar.svelte';
 	import SyncIndicator from '../SyncIndicator.svelte';
+	import Menu from 'lucide-svelte/icons/menu';
 
 	interface Props {
 		onMenuToggle: () => void;
@@ -15,9 +16,7 @@
 		class="rounded-sm p-2 hover:bg-[var(--border)]/10"
 		aria-label="Toggle sidebar"
 	>
-		<svg class="h-6 w-6 text-[var(--text)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-			<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
-		</svg>
+		<Menu class="h-6 w-6 text-[var(--text)]" />
 	</button>
 
 	<div class="flex items-center gap-2">
diff --git a/src/lib/components/NoteCard.svelte b/src/lib/components/NoteCard.svelte
index fbb334a..030fe98 100644
--- a/src/lib/components/NoteCard.svelte
+++ b/src/lib/components/NoteCard.svelte
@@ -3,6 +3,11 @@
 	import { renderMarkdown } from '$lib/utils/markdown.js';
 	import { togglePin, trashNote, archiveNote, unarchiveNote, restoreNote, deleteNote, updateNote, currentFilter } from '$lib/stores/notes.js';
 	import type { Note } from '$lib/types/index.js';
+	import Undo2 from 'lucide-svelte/icons/undo-2';
+	import Trash2 from 'lucide-svelte/icons/trash-2';
+	import Bookmark from 'lucide-svelte/icons/bookmark';
+	import Archive from 'lucide-svelte/icons/archive';
+	import ArchiveRestore from 'lucide-svelte/icons/archive-restore';
 
 	interface ChecklistItem {
 		text: string;
@@ -117,9 +122,7 @@
 				title="Restore"
 				data-testid="restore-btn"
 			>
-				<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="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6" />
-				</svg>
+				<Undo2 class="h-4 w-4" />
 			</button>
 			<button
 				onclick={stop(() => deleteNote(note.id))}
@@ -127,9 +130,7 @@
 				title="Delete forever"
 				data-testid="delete-forever-btn"
 			>
-				<svg class="h-4 w-4 text-red-500" 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>
+				<Trash2 class="h-4 w-4 text-[#b44]" />
 			</button>
 		{:else}
 			<button
@@ -138,9 +139,7 @@
 				title={note.pinned ? 'Unpin' : 'Pin'}
 				data-testid="pin-btn"
 			>
-				<svg class="h-4 w-4 {note.pinned ? 'text-[var(--primary)]' : ''}" fill={note.pinned ? 'currentColor' : 'none'} stroke="currentColor" viewBox="0 0 24 24">
-					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z" />
-				</svg>
+				<Bookmark class="h-4 w-4 {note.pinned ? 'fill-[var(--primary)] text-[var(--primary)]' : ''}" />
 			</button>
 			{#if $currentFilter === 'archived'}
 				<button
@@ -149,9 +148,7 @@
 					title="Unarchive"
 					data-testid="unarchive-btn"
 				>
-					<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>
+					<ArchiveRestore class="h-4 w-4" />
 				</button>
 			{:else}
 				<button
@@ -160,9 +157,7 @@
 					title="Archive"
 					data-testid="archive-btn"
 				>
-					<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 class="h-4 w-4" />
 				</button>
 			{/if}
 			<button
@@ -171,9 +166,7 @@
 				title="Delete"
 				data-testid="trash-btn"
 			>
-				<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>
+				<Trash2 class="h-4 w-4" />
 			</button>
 		{/if}
 	</div>
diff --git a/src/lib/components/NoteEditor.svelte b/src/lib/components/NoteEditor.svelte
index 89fda0a..5937e55 100644
--- a/src/lib/components/NoteEditor.svelte
+++ b/src/lib/components/NoteEditor.svelte
@@ -7,6 +7,9 @@
 	import { NOTE_COLORS } from '$lib/utils/colors.js';
 	import type { Editor } from '@tiptap/core';
 	import type { Note, NoteColor } from '$lib/types/index.js';
+	import Palette from 'lucide-svelte/icons/palette';
+	import ListChecks from 'lucide-svelte/icons/list-checks';
+	import Code from 'lucide-svelte/icons/code';
 
 	interface Props {
 		note: Note | null;
@@ -133,9 +136,7 @@
 						title="Background color"
 						data-testid="color-picker-toggle"
 					>
-						<svg class="h-5 w-5 text-[var(--text-muted)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-							<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 class="h-5 w-5 text-[var(--text-muted)]" />
 					</button>
 					{#if showColorPicker}
 						<div class="absolute left-0 top-full mt-2 rounded-sm border border-[var(--border)] bg-[var(--bg-surface)] p-2">
@@ -151,9 +152,7 @@
 					title="Checklist mode"
 					data-testid="checklist-toggle"
 				>
-					<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="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>
+					<ListChecks class="h-5 w-5" />
 				</button>
 
 				<!-- Raw markdown mode toggle -->
@@ -163,9 +162,7 @@
 					title="Markdown mode"
 					data-testid="markdown-toggle"
 				>
-					<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="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
-					</svg>
+					<Code class="h-5 w-5" />
 				</button>
 			</div>
 
diff --git a/src/lib/components/SearchBar.svelte b/src/lib/components/SearchBar.svelte
index 5213d6d..02c8549 100644
--- a/src/lib/components/SearchBar.svelte
+++ b/src/lib/components/SearchBar.svelte
@@ -1,6 +1,8 @@
 <script lang="ts">
 	import { notes, loadNotes, currentFilter } from '$lib/stores/notes.js';
 	import type { Note } from '$lib/types/index.js';
+	import Search from 'lucide-svelte/icons/search';
+	import X from 'lucide-svelte/icons/x';
 
 	let query = $state('');
 	let originalNotes: Note[] = [];
@@ -38,9 +40,7 @@
 
 <div class="relative max-w-2xl">
 	<div class="flex items-center rounded-sm border border-[var(--border-subtle)] bg-[var(--bg-base)] px-4 py-2 focus-within:border-[var(--primary)]">
-		<svg class="mr-3 h-5 w-5 text-[var(--text-muted)]" 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>
+		<Search class="mr-3 h-5 w-5 text-[var(--text-muted)]" />
 		<input
 			type="text"
 			placeholder="Search crumbs..."
@@ -51,9 +51,7 @@
 		/>
 		{#if query}
 			<button onclick={clearSearch} class="ml-2 text-[var(--text-muted)] hover:text-[var(--text)]" aria-label="Clear search">
-				<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 class="h-5 w-5" />
 			</button>
 		{/if}
 	</div>
diff --git a/todo.md b/todo.md
index 5e6697f..17ce89f 100644
--- a/todo.md
+++ b/todo.md
@@ -1,5 +1,4 @@
 - [x] use colors for the cloud status icon that fit more into the colour scheme
 - [x] do we actually have a colour palette and theme ?
-- [ ] choose diffent icon for the background colour
-- [ ] make sure we use only lucid icons everywhere
-- [ ]
+- [x] choose diffent icon for the background colour
+- [x] make sure we use only lucid icons everywhere