From 81dfdec2e817913f89df64ac4748ebed5f903f50 Mon Sep 17 00:00:00 2001
From: Atif Ali <atif@coder.com>
Date: Mon, 8 Dec 2025 20:09:23 +0000
Subject: [PATCH 1/2] feat(ui): replace stop icon with pause icon

Replace CircleStopIcon and SquareIcon with PauseIcon from Lucide
for workspace stop actions to better represent the stop/pause
functionality.

Changes:
- WorkspaceActions/Buttons.tsx: CircleStopIcon -> PauseIcon
- WorkspacesTable.tsx: SquareIcon -> PauseIcon

Fixes #20195
---
 site/src/pages/WorkspacePage/WorkspaceActions/Buttons.tsx | 4 ++--
 site/src/pages/WorkspacesPage/WorkspacesTable.tsx         | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/site/src/pages/WorkspacePage/WorkspaceActions/Buttons.tsx b/site/src/pages/WorkspacePage/WorkspaceActions/Buttons.tsx
index 0d04cd398817f..dc18e93f085fe 100644
--- a/site/src/pages/WorkspacePage/WorkspaceActions/Buttons.tsx
+++ b/site/src/pages/WorkspacePage/WorkspaceActions/Buttons.tsx
@@ -7,8 +7,8 @@ import {
 } from "components/Tooltip/Tooltip";
 import {
 	BanIcon,
-	CircleStopIcon,
 	CloudIcon,
+	PauseIcon,
 	PlayIcon,
 	PowerIcon,
 	RotateCcwIcon,
@@ -130,7 +130,7 @@ export const StopButton: FC<ActionButtonProps> = ({
 			onClick={() => handleAction()}
 			data-testid="workspace-stop-button"
 		>
-			<CircleStopIcon />
+			<PauseIcon />
 			{loading ? <>Stopping&hellip;</> : "Stop"}
 		</TopbarButton>
 	);
diff --git a/site/src/pages/WorkspacesPage/WorkspacesTable.tsx b/site/src/pages/WorkspacesPage/WorkspacesTable.tsx
index 56f1cf9428171..19b719540f938 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";
@@ -481,7 +481,7 @@ const WorkspaceActionsCell: FC<WorkspaceActionsCellProps> = ({
 						isLoading={stopWorkspaceMutation.isPending}
 						label="Stop workspace"
 					>
-						<SquareIcon />
+						<PauseIcon />
 					</PrimaryAction>
 				)}
 

From c62a7fbf8ced20cf6680151c56c9fbbeae4b100d Mon Sep 17 00:00:00 2001
From: Atif Ali <atif@coder.com>
Date: Mon, 8 Dec 2025 20:20:04 +0000
Subject: [PATCH 2/2] chore(ui): update remaining stop icons to use PauseIcon

Address review feedback to ensure consistency across all stop
action icons in the codebase.

Additional changes:
- BuildIcon.tsx: SquareIcon -> PauseIcon for stop transition
- WorkspacesPageView.tsx: SquareIcon -> PauseIcon in batch actions
- workspace.tsx: SquareIcon -> PauseIcon for stopped status

All stop-related icons now consistently use PauseIcon throughout
the application.

Addresses review feedback from #21173
---
 site/src/components/BuildIcon/BuildIcon.tsx          | 4 ++--
 site/src/pages/WorkspacesPage/WorkspacesPageView.tsx | 4 ++--
 site/src/utils/workspace.tsx                         | 4 ++--
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/site/src/components/BuildIcon/BuildIcon.tsx b/site/src/components/BuildIcon/BuildIcon.tsx
index 43f7f2f60369a..afeff758724c4 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 { PlayIcon, SquareIcon, TrashIcon } from "lucide-react";
+import { PauseIcon, PlayIcon, 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: SquareIcon,
+	stop: PauseIcon,
 	delete: TrashIcon,
 };
 
diff --git a/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx b/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx
index 06250c181789a..9c515e76ff21e 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}
 								>
-									<SquareIcon /> Stop
+									<PauseIcon /> Stop
 								</DropdownMenuItem>
 								<DropdownMenuSeparator />
 								<DropdownMenuItem onClick={onBatchUpdateTransition}>
diff --git a/site/src/utils/workspace.tsx b/site/src/utils/workspace.tsx
index 3c89ddce6db3f..330dcbf9daa6f 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: <SquareIcon />,
+				icon: <PauseIcon />,
 			} as const;
 		case "deleting":
 			return {