diff --git a/frontend/src/lib/components/DocumentTopBar.svelte b/frontend/src/lib/components/DocumentTopBar.svelte
index 16325051..7375f1bc 100644
--- a/frontend/src/lib/components/DocumentTopBar.svelte
+++ b/frontend/src/lib/components/DocumentTopBar.svelte
@@ -101,10 +101,16 @@ const compactMeta = $derived.by(() => {
 			<button
 				onclick={() => (annotateMode = !annotateMode)}
 				aria-label={annotateMode ? m.doc_panel_annotate_stop() : m.doc_panel_annotate()}
-				class="rounded px-3 py-1.5 font-sans text-xs font-medium transition {annotateMode
+				class="flex items-center gap-1.5 rounded px-3 py-1.5 font-sans text-xs font-medium transition {annotateMode
 					? 'bg-brand-navy text-white'
 					: 'border border-brand-navy text-brand-navy hover:bg-brand-navy hover:text-white'}"
 			>
+				<img
+					src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Note-Add-MD.svg"
+					alt=""
+					aria-hidden="true"
+					class="h-4 w-4 {annotateMode ? 'invert' : ''}"
+				/>
 				{annotateMode ? m.doc_panel_annotate_stop() : m.doc_panel_annotate()}
 			</button>
 		{/if}