frontend/src/lib/components/SortDropdown.svelte

@@ -47,6 +47,20 @@ function toggleDir() {
 		class="-ml-px flex items-center justify-center border border-line bg-muted px-3 py-2.5 text-sm font-bold text-ink-2 transition hover:text-ink focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
 		aria-label={dir === 'asc' ? m.sort_dir_asc() : m.sort_dir_desc()}
 	>
-		{dir === 'asc' ? '↑' : '↓'}
+		{#if dir === 'asc'}
+			<img
+				src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Long-Arrow/Long-Arrow-Up-MD.svg"
+				alt=""
+				aria-hidden="true"
+				class="h-5 w-5 opacity-60"
+			/>
+		{:else}
+			<img
+				src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Long-Arrow/Long-Arrow-Down-MD.svg"
+				alt=""
+				aria-hidden="true"
+				class="h-5 w-5 opacity-60"
+			/>
+		{/if}
 	</button>
 </div>

frontend/src/lib/components/SortDropdown.svelte.spec.ts

@@ -22,15 +22,19 @@ describe('SortDropdown', () => {
 		await expect.element(btn).toBeInTheDocument();
 	});
 
-	it('direction button shows ↑ when dir is asc', async () => {
+	it('direction button shows up arrow when dir is asc', async () => {
 		render(SortDropdown, { sort: 'DATE', dir: 'asc' });
-		const btn = page.getByRole('button');
-		await expect.element(btn).toHaveTextContent('↑');
+		await expect.element(page.getByRole('button')).toBeInTheDocument();
+		const img = document.querySelector('button img') as HTMLImageElement;
+		expect(img).not.toBeNull();
+		expect(img.src).toContain('Long-Arrow-Up');
 	});
 
-	it('direction button shows ↓ when dir is desc', async () => {
+	it('direction button shows down arrow when dir is desc', async () => {
 		render(SortDropdown, { sort: 'DATE', dir: 'desc' });
-		const btn = page.getByRole('button');
-		await expect.element(btn).toHaveTextContent('↓');
+		await expect.element(page.getByRole('button')).toBeInTheDocument();
+		const img = document.querySelector('button img') as HTMLImageElement;
+		expect(img).not.toBeNull();
+		expect(img.src).toContain('Long-Arrow-Down');
 	});
 });

frontend/src/routes/briefwechsel/CorrespondenzPersonBar.svelte

@@ -102,6 +102,7 @@ function handleSuggestionSelect(id: string) {
 			stroke-linecap="round"
 			stroke-linejoin="round"
 			aria-hidden="true"
+			class="rotate-90"
 		>
 			<path d="M7 16V4m0 0L3 8m4-4l4 4" />
 			<path d="M17 8v12m0 0l4-4m-4 4l-4-4" />