chore(site): replace stop icon with pause icon (#21173)

matifali · web-flow · commit e31578da4bfd · 2025-12-09T20:57:13.000+05:00
diff --git 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/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/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/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>
 				)}
 
diff --git 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 {
