diff --git a/web/src/lib/components/repo/DiffTopbar.svelte b/web/src/lib/components/repo/DiffTopbar.svelte
index 465560bc1..ab9fe461b 100644
--- a/web/src/lib/components/repo/DiffTopbar.svelte
+++ b/web/src/lib/components/repo/DiffTopbar.svelte
@@ -1,5 +1,7 @@
 <script lang="ts">
 	import Download from "$icon/download";
+	import FileDiff from "$icon/file-diff";
+	import FileCode from "$icon/file-code";
 	import FoldVertical from "$icon/fold-vertical";
 	import PanelLeft from "$icon/panel-left";
 	import SquareSplitHorizontal from "$icon/square-split-horizontal";
@@ -71,20 +73,14 @@
 
 	{#if downloadUrls}
 		<!-- below md these crowd the topbar into page-level horizontal scroll -->
-		<ButtonGroup spaced class="hidden md:inline-flex">
-			<Button
-				href={downloadUrls.patch as "/"}
-				data-sveltekit-reload
-				size="small"
-				icon={Download}>.patch</Button
+		<span class="inline-flex gap-2">
+			<Button href={downloadUrls.patch as "/"} data-sveltekit-reload icon={FileCode}
+				><span class="hidden sm:inline">Download patch</span></Button
 			>
-			<Button
-				href={downloadUrls.diff as "/"}
-				data-sveltekit-reload
-				size="small"
-				icon={Download}>.diff</Button
+			<Button href={downloadUrls.diff as "/"} data-sveltekit-reload icon={FileDiff}
+				><span class="hidden sm:inline">Download diff</span></Button
 			>
-		</ButtonGroup>
+		</span>
 	{/if}
 
 	{#if onSetAllOpen}
diff --git a/web/src/lib/components/repo/pulls/PullDiff.svelte b/web/src/lib/components/repo/pulls/PullDiff.svelte
index 5f2ea41f9..2d9ca56d5 100644
--- a/web/src/lib/components/repo/pulls/PullDiff.svelte
+++ b/web/src/lib/components/repo/pulls/PullDiff.svelte
@@ -1,5 +1,7 @@
 <script lang="ts">
 	import Download from "$icon/download";
+	import FileDiff from "$icon/file-diff";
+	import FileCode from "$icon/file-code";
 	import PanelLeftClose from "$icon/panel-left-close";
 	import ListTree from "$icon/list-tree";
 	import LoaderCircle from "$icon/loader-circle";
@@ -96,22 +98,19 @@
 			</div>
 			<div class="flex gap-2">
 				{#if downloadUrls}
-					<ButtonGroup spaced class="hidden md:inline-flex">
+					<span class="inline-flex gap-2">
 						<Button
 							href={downloadUrls.patch as "/"}
 							data-sveltekit-reload
-							icon={Download}
+							icon={FileCode}
+							><span class="hidden sm:inline">Download patch</span></Button
 						>
-							.patch
-						</Button>
 						<Button
 							href={downloadUrls.diff as "/"}
 							data-sveltekit-reload
-							icon={Download}
+							icon={FileDiff}><span class="hidden sm:inline">Download diff</span></Button
 						>
-							.diff
-						</Button>
-					</ButtonGroup>
+					</span>
 				{/if}
 				<Button
 					icon={allOpen ? FoldVertical : UnfoldVertical}