diff --git a/web/src/lib/components/ui/Combobox.svelte b/web/src/lib/components/ui/Combobox.svelte
index 94f8fbde..eafc1a4c 100644
--- a/web/src/lib/components/ui/Combobox.svelte
+++ b/web/src/lib/components/ui/Combobox.svelte
@@ -7,13 +7,12 @@
 		slots: {
 			root: "relative inline-block w-full",
 			trigger: "flex min-h-9 cursor-pointer items-center gap-2 px-2.5 py-1",
-			value: "min-w-0 flex-1 truncate typography-paragraph-regular text-left",
+			value: "min-w-0 flex-1 truncate text-left typography-paragraph-regular",
 			panel:
 				"combobox-panel fixed z-50 m-0 hidden max-h-[min(24rem,calc(100dvh-1rem))] w-72 max-w-[calc(100vw-1rem)] flex-col overflow-hidden rounded-sm border border-border-default bg-background-default p-0 text-foreground-default shadow-regular open:flex dark:shadow-none",
 			search: "shrink-0 border-b border-border-default p-2",
 			list: "min-h-0 flex-1 overflow-y-auto p-1",
-			groupHeading:
-				"px-2 pt-2 pb-1 font-semibold text-foreground-muted first:pt-1",
+			groupHeading: "px-2 pt-2 pb-1 font-semibold text-foreground-muted first:pt-1",
 			option:
 				"flex w-full cursor-pointer items-center gap-2 rounded-sm bg-transparent px-2 py-1.5 text-left aria-disabled:cursor-not-allowed aria-disabled:text-foreground-disabled data-active:bg-background-subtle dark:data-active:bg-background-subtle",
 			check: "size-4 shrink-0 text-foreground-default",
@@ -36,7 +35,8 @@
 	import Check from "$icon/check";
 	import ChevronsUpDown from "$icon/chevrons-up-down";
 	import Search from "$icon/search";
-	import type { Snippet } from "svelte";
+	import type { Component, Snippet } from "svelte";
+	import type { SvelteHTMLElements } from "svelte/elements";
 	import { tick } from "svelte";
 	import Input from "./Input.svelte";
 	import { selectField, type SelectAlign, type SelectOption } from "./selectField";
@@ -53,6 +53,8 @@
 		emptyLabel?: string;
 		/** names the trigger and the listbox for screen readers */
 		label?: string;
+		/** decorative glyph on the trigger's leading edge, standing for the current selection */
+		icon?: Component<SvelteHTMLElements["svg"]>;
 		/** take filtering over, e.g. to query a server: `options` is then rendered as given */
 		onSearch?: (query: string) => void;
 		loading?: boolean;
@@ -75,6 +77,7 @@
 		searchPlaceholder = "Filter…",
 		emptyLabel = "No matches",
 		label,
+		icon: Icon,
 		onSearch,
 		loading = false,
 		error = false,
@@ -259,6 +262,9 @@
 		aria-label={label}
 		style="anchor-name: {anchorName}"
 	>
+		{#if Icon}
+			<Icon class="size-4 shrink-0 text-foreground-default" aria-hidden="true" />
+		{/if}
 		<span class={classes.value()}>{triggerLabel === "" ? placeholder : triggerLabel}</span>
 		<ChevronsUpDown class={field.chevron({ class: "size-3.5" })} aria-hidden="true" />
 	</button>
diff --git a/web/src/lib/components/ui/Select.svelte b/web/src/lib/components/ui/Select.svelte
index decda772..1a848aad 100644
--- a/web/src/lib/components/ui/Select.svelte
+++ b/web/src/lib/components/ui/Select.svelte
@@ -2,7 +2,8 @@
 	// SelectOption and SelectAlign live in ./selectField, which owns the shape both renderings
 	// read; re-exporting them from here trips eslint's no-import-assign on module scripts
 	import ChevronDown from "$icon/chevron-down";
-	import type { Snippet } from "svelte";
+	import type { Component, Snippet } from "svelte";
+	import type { SvelteHTMLElements } from "svelte/elements";
 	import Combobox from "./Combobox.svelte";
 	import { selectField, type SelectAlign, type SelectOption } from "./selectField";
 
@@ -19,6 +20,9 @@
 		placeholder?: string;
 		/** names the control for screen readers */
 		label?: string;
+		/** glyph pinned to the leading edge, mirroring the chevron. Decorative — it stands for
+		 *  the current selection, so keep it in step with `value` rather than the list. */
+		icon?: Component<SvelteHTMLElements["svg"]>;
 		error?: boolean;
 		disabled?: boolean;
 		/** goes on the control itself, so a Field's label can point at it */
@@ -43,6 +47,7 @@
 		onSelect,
 		placeholder,
 		label,
+		icon: Icon,
 		error = false,
 		disabled = false,
 		id,
@@ -69,6 +74,11 @@
 
 	const field = $derived(selectField({ error, disabled }));
 
+	// `pl-7` has to be able to beat this `px-2`, so it is merged after rather than interpolated
+	// into the same string — prettier's class sorter would hoist an inline conditional to the
+	// front, where tailwind-merge resolves it the other way and the label lands under the icon
+	const nativeBox = "min-h-9 appearance-none px-2 py-1 pr-8";
+
 	const onchange = (event: Event) => {
 		onSelect?.((event.currentTarget as HTMLSelectElement).value);
 	};
@@ -87,6 +97,7 @@
 		{onSelect}
 		{placeholder}
 		{label}
+		icon={Icon}
 		{error}
 		{disabled}
 		{id}
@@ -101,6 +112,12 @@
 	/>
 {:else}
 	<div class="relative {className ?? ''}">
+		{#if Icon}
+			<Icon
+				class="pointer-events-none absolute top-1/2 left-2 size-4 -translate-y-1/2 text-foreground-default"
+				aria-hidden="true"
+			/>
+		{/if}
 		<select
 			bind:value
 			{id}
@@ -108,7 +125,7 @@
 			{onchange}
 			aria-label={label}
 			aria-invalid={error}
-			class={field.box({ class: "min-h-9 appearance-none px-2 py-1 pr-8" })}
+			class={field.box({ class: [nativeBox, Icon && "pl-7"] })}
 		>
 			{#if placeholder}
 				<option value="">{placeholder}</option>