From b20d1bf1592b65ca1e7c84fd75659a5e3de9035a Mon Sep 17 00:00:00 2001
From: "blinkagent[bot]" <237617714+blinkagent[bot]@users.noreply.github.com>
Date: Thu, 8 Jan 2026 05:41:08 -0500
Subject: [PATCH] fix: use square icon for stop button instead of pause icon
 (#21386)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The pause icon (`||`) for the Stop button was confusing as it suggests
pause/resume functionality. Changed to a square icon (`□`) which is the
standard icon for stop in media players and interfaces.

### Before
<img width="100" alt="before"
src="https://github.com/user-attachments/assets/77e2fee5-cb66-4b47-9a2a-0dccce5c28ca"
/>

### After
The button will now display a square (⬛) stop icon instead of the pause
(⏸) icon.

---------

Co-authored-by: blink-so[bot] <211532188+blink-so[bot]@users.noreply.github.com>
Co-authored-by: Jaayden Halko <jaayden@coder.com>
---
 site/src/components/BuildIcon/BuildIcon.tsx               | 4 ++--
 site/src/pages/WorkspacePage/WorkspaceActions/Buttons.tsx | 4 ++--
 site/src/pages/WorkspacesPage/WorkspacesPageView.tsx      | 4 ++--
 site/src/pages/WorkspacesPage/WorkspacesTable.tsx         | 6 +++---
 site/src/utils/workspace.tsx                              | 4 ++--
 5 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/site/src/components/BuildIcon/BuildIcon.tsx b/site/src/components/BuildIcon/BuildIcon.tsx
index afeff75872..43f7f2f603 100644
--- a/site/src/components/BuildIcon/BuildIcon.tsx
+++ b/site/src/components/BuildIcon/BuildIcon.tsx
@@ -1,5 +1,5 @@
 import type { WorkspaceTransition } from "api/typesGenerated";
-import { PauseIcon, PlayIcon, TrashIcon } from "lucide-react";
+import { PlayIcon, SquareIcon, TrashIcon } from "lucide-react";
 import type { ComponentProps } from "react";
 
 type SVGIcon = typeof PlayIcon;
@@ -8,7 +8,7 @@ type SVGIconProps = ComponentProps<SVGIcon>;
 
 const iconByTransition: Record<WorkspaceTransition, SVGIcon> = {
 	start: PlayIcon,
-	stop: PauseIcon,
+	stop: SquareIcon,
 	delete: TrashIcon,
 };
 
diff --git a/site/src/pages/WorkspacePage/WorkspaceActions/Buttons.tsx b/site/src/pages/WorkspacePage/WorkspaceActions/Buttons.tsx
index dc18e93f08..5bc96e44a9 100644
--- a/site/src/pages/WorkspacePage/WorkspaceActions/Buttons.tsx
+++ b/site/src/pages/WorkspacePage/WorkspaceActions/Buttons.tsx
@@ -8,10 +8,10 @@ import {
 import {
 	BanIcon,
 	CloudIcon,
-	PauseIcon,
 	PlayIcon,
 	PowerIcon,
 	RotateCcwIcon,
+	SquareIcon,
 	StarIcon,
 	StarOffIcon,
 } from "lucide-react";
@@ -130,7 +130,7 @@ export const StopButton: FC<ActionButtonProps> = ({
 			onClick={() => handleAction()}
 			data-testid="workspace-stop-button"
 		>
-			<PauseIcon />
+			<SquareIcon />
 			{loading ? <>Stopping&hellip;</> : "Stop"}
 		</TopbarButton>
 	);
diff --git a/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx b/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx
index b52a26ade5..c6c7e05ec5 100644
--- a/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx
+++ b/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx
@@ -20,8 +20,8 @@ import { TableToolbar } from "components/TableToolbar/TableToolbar";
 import {
 	ChevronDownIcon,
 	CloudIcon,
-	PauseIcon,
 	PlayIcon,
+	SquareIcon,
 	TrashIcon,
 } from "lucide-react";
 import { WorkspacesTable } from "pages/WorkspacesPage/WorkspacesTable";
@@ -175,7 +175,7 @@ export const WorkspacesPageView: FC<WorkspacesPageViewProps> = ({
 									}
 									onClick={onBatchStopTransition}
 								>
-									<PauseIcon /> Stop
+									<SquareIcon /> Stop
 								</DropdownMenuItem>
 								<DropdownMenuSeparator />
 								<DropdownMenuItem onClick={onBatchUpdateTransition}>
diff --git a/site/src/pages/WorkspacesPage/WorkspacesTable.tsx b/site/src/pages/WorkspacesPage/WorkspacesTable.tsx
index 0d72987751..259045ac0a 100644
--- a/site/src/pages/WorkspacesPage/WorkspacesTable.tsx
+++ b/site/src/pages/WorkspacesPage/WorkspacesTable.tsx
@@ -51,9 +51,9 @@ import {
 	EllipsisVertical,
 	ExternalLinkIcon,
 	FileIcon,
-	PauseIcon,
 	PlayIcon,
 	RefreshCcwIcon,
+	SquareIcon,
 	SquareTerminalIcon,
 	StarIcon,
 } from "lucide-react";
@@ -491,7 +491,7 @@ const WorkspaceActionsCell: FC<WorkspaceActionsCellProps> = ({
 						isLoading={stopWorkspaceMutation.isPending}
 						label="Stop workspace"
 					>
-						<PauseIcon />
+						<SquareIcon />
 					</PrimaryAction>
 				)}
 
@@ -736,7 +736,7 @@ const WorkspaceApps: FC<WorkspaceAppsProps> = ({ workspace }) => {
 				}}
 				label="Open Terminal"
 			>
-				<SquareTerminalIcon />
+				<SquareTerminalIcon className="!size-7" />
 			</BaseIconLink>,
 		);
 	}
diff --git a/site/src/utils/workspace.tsx b/site/src/utils/workspace.tsx
index 330dcbf9da..3c89ddce6d 100644
--- a/site/src/utils/workspace.tsx
+++ b/site/src/utils/workspace.tsx
@@ -8,8 +8,8 @@ import utc from "dayjs/plugin/utc";
 import {
 	CircleAlertIcon,
 	HourglassIcon,
-	PauseIcon,
 	PlayIcon,
+	SquareIcon,
 } from "lucide-react";
 import semver from "semver";
 import { getPendingStatusLabel } from "./provisionerJob";
@@ -241,7 +241,7 @@ export const getDisplayWorkspaceStatus = (
 			return {
 				type: "inactive",
 				text: "Stopped",
-				icon: <PauseIcon />,
+				icon: <SquareIcon />,
 			} as const;
 		case "deleting":
 			return {