diff --git a/site/src/components/Breadcrumb/Breadcrumb.tsx b/site/src/components/Breadcrumb/Breadcrumb.tsx
index 68853fcf9b..667c301ea3 100644
--- a/site/src/components/Breadcrumb/Breadcrumb.tsx
+++ b/site/src/components/Breadcrumb/Breadcrumb.tsx
@@ -107,10 +107,10 @@ export const BreadcrumbEllipsis: React.FC<
 		<span
 			role="presentation"
 			aria-hidden="true"
-			className={cn("flex h-9 w-9 items-center justify-center", className)}
+			className={cn("flex size-9 items-center justify-center", className)}
 			{...props}
 		>
-			<MoreHorizontalIcon className="h-4 w-4" />
+			<MoreHorizontalIcon className="size-4" />
 			<span className="sr-only">More</span>
 		</span>
 	);
diff --git a/site/src/components/Checkbox/Checkbox.stories.tsx b/site/src/components/Checkbox/Checkbox.stories.tsx
index f08b5dc1bf..1f86ef6406 100644
--- a/site/src/components/Checkbox/Checkbox.stories.tsx
+++ b/site/src/components/Checkbox/Checkbox.stories.tsx
@@ -51,7 +51,7 @@ export const DisabledChecked: Story = {
 
 export const CustomStyling: Story = {
 	args: {
-		className: "h-6 w-6 rounded-full",
+		className: "size-6 rounded-full",
 	},
 };
 
diff --git a/site/src/components/CodeExample/CodeExample.tsx b/site/src/components/CodeExample/CodeExample.tsx
index e146e12bd6..61dfa99ebc 100644
--- a/site/src/components/CodeExample/CodeExample.tsx
+++ b/site/src/components/CodeExample/CodeExample.tsx
@@ -45,9 +45,9 @@ export const CodeExample: FC<CodeExampleProps> = ({
 		? "Hide sensitive data"
 		: "Show sensitive data";
 	const icon = showFullValue ? (
-		<EyeOffIcon className="h-4 w-4" />
+		<EyeOffIcon className="size-4" />
 	) : (
-		<EyeIcon className="h-4 w-4" />
+		<EyeIcon className="size-4" />
 	);
 
 	return (
diff --git a/site/src/components/Combobox/Combobox.tsx b/site/src/components/Combobox/Combobox.tsx
index 0cbca4ea35..d08e56ac19 100644
--- a/site/src/components/Combobox/Combobox.tsx
+++ b/site/src/components/Combobox/Combobox.tsx
@@ -156,7 +156,7 @@ export const ComboboxItem = ({
 			{children}
 			<CheckIcon
 				className={cn(
-					"ml-2 h-4 w-4 min-w-0 flex-shrink-0",
+					"ml-2 size-4 min-w-0 flex-shrink-0",
 					isSelected ? "opacity-100" : "opacity-0",
 				)}
 			/>
diff --git a/site/src/components/Command/Command.tsx b/site/src/components/Command/Command.tsx
index 94e67d945b..e59377acbd 100644
--- a/site/src/components/Command/Command.tsx
+++ b/site/src/components/Command/Command.tsx
@@ -21,7 +21,7 @@ export const CommandInput: React.FC<
 > = ({ className, ...props }) => {
 	return (
 		<div className="flex items-center border-b px-3" cmdk-input-wrapper="">
-			<SearchIcon className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+			<SearchIcon className="mr-2 size-4 shrink-0 opacity-50" />
 			<CommandPrimitive.Input
 				className={cn(
 					`flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none border-none
diff --git a/site/src/components/Dialogs/ConfirmDeleteDialog/ConfirmDeleteDialog.tsx b/site/src/components/Dialogs/ConfirmDeleteDialog/ConfirmDeleteDialog.tsx
index e95fd12e7e..4df6b9af97 100644
--- a/site/src/components/Dialogs/ConfirmDeleteDialog/ConfirmDeleteDialog.tsx
+++ b/site/src/components/Dialogs/ConfirmDeleteDialog/ConfirmDeleteDialog.tsx
@@ -53,7 +53,7 @@ export const ConfirmDeleteDialog: FC<ConfirmDeleteDialogProps> = ({
 					Cancel
 				</Button>
 				<Button variant="destructive" onClick={onConfirm} disabled={isPending}>
-					{isPending && <Spinner className="h-4 w-4" loading />}
+					{isPending && <Spinner className="size-4" loading />}
 					Delete {entity}
 				</Button>
 			</DialogFooter>
diff --git a/site/src/components/DropdownMenu/DropdownMenu.tsx b/site/src/components/DropdownMenu/DropdownMenu.tsx
index c3828b131e..e740cbe592 100644
--- a/site/src/components/DropdownMenu/DropdownMenu.tsx
+++ b/site/src/components/DropdownMenu/DropdownMenu.tsx
@@ -72,7 +72,7 @@ export const DropdownMenuRadioItem: React.FC<
 			{children}
 			<span className="absolute top-3.5 right-2 flex h-3.5 w-3.5 items-center justify-center">
 				<DropdownMenuPrimitive.ItemIndicator>
-					<CheckIcon className="h-4 w-4" />
+					<CheckIcon className="size-4" />
 				</DropdownMenuPrimitive.ItemIndicator>
 			</span>
 		</DropdownMenuPrimitive.RadioItem>
diff --git a/site/src/components/IconField/IconField.tsx b/site/src/components/IconField/IconField.tsx
index 8b402f8c68..be48b8449b 100644
--- a/site/src/components/IconField/IconField.tsx
+++ b/site/src/components/IconField/IconField.tsx
@@ -43,7 +43,7 @@ export const IconField: FC<IconFieldProps> = ({
 					endAdornment: hasIcon ? (
 						<InputAdornment
 							position="end"
-							className="w-6 h-6 flex items-center justify-center [&_img]:max-w-full [&_img]:object-contain"
+							className="size-6 flex items-center justify-center [&_img]:max-w-full [&_img]:object-contain"
 						>
 							<ExternalImage
 								alt=""
diff --git a/site/src/components/MultiSelectCombobox/MultiSelectCombobox.tsx b/site/src/components/MultiSelectCombobox/MultiSelectCombobox.tsx
index 0dddf5f9ec..c69083e7f5 100644
--- a/site/src/components/MultiSelectCombobox/MultiSelectCombobox.tsx
+++ b/site/src/components/MultiSelectCombobox/MultiSelectCombobox.tsx
@@ -526,7 +526,7 @@ export const MultiSelectCombobox: React.FC<MultiSelectComboboxProps> = ({
 										}}
 										onClick={() => handleUnselect(option)}
 									>
-										<XIcon className="h-4 w-4 text-content-secondary hover:text-content-primary align-text-bottom" />
+										<XIcon className="size-4 text-content-secondary hover:text-content-primary align-text-bottom" />
 									</button>
 								</Badge>
 							);
@@ -593,7 +593,7 @@ export const MultiSelectCombobox: React.FC<MultiSelectComboboxProps> = ({
 									"hidden",
 							)}
 						>
-							<XIcon className="h-5 w-5" />
+							<XIcon className="size-5" />
 						</button>
 						<ChevronDownIcon
 							open={open}
diff --git a/site/src/components/RadioGroup/RadioGroup.tsx b/site/src/components/RadioGroup/RadioGroup.tsx
index 0617292b14..95bd233c09 100644
--- a/site/src/components/RadioGroup/RadioGroup.tsx
+++ b/site/src/components/RadioGroup/RadioGroup.tsx
@@ -23,7 +23,7 @@ export const RadioGroupItem: React.FC<
 	return (
 		<RadioGroupPrimitive.Item
 			className={cn(
-				`relative aspect-square h-4 w-4 rounded-full border border-solid border-border text-content-primary bg-surface-primary
+				`relative aspect-square size-4 rounded-full border border-solid border-border text-content-primary bg-surface-primary
 				focus:outline-none focus-visible:ring-2 focus-visible:ring-content-link
 				focus-visible:ring-offset-4 focus-visible:ring-offset-surface-primary
 				disabled:cursor-not-allowed disabled:opacity-25 disabled:border-surface-invert-primary
diff --git a/site/src/components/Slider/Slider.tsx b/site/src/components/Slider/Slider.tsx
index 7aa1ec690f..c2e4704e10 100644
--- a/site/src/components/Slider/Slider.tsx
+++ b/site/src/components/Slider/Slider.tsx
@@ -21,13 +21,13 @@ export const Slider: React.FC<
 				<SliderPrimitive.Range className="absolute h-full bg-content-primary" />
 			</SliderPrimitive.Track>
 			<SliderPrimitive.Thumb
-				className="block h-4 w-4 rounded-full border border-solid border-surface-invert-secondary bg-surface-primary shadow transition-colors
+				className="block size-4 rounded-full border border-solid border-surface-invert-secondary bg-surface-primary shadow transition-colors
 			focus-visible:outline-none hover:border-content-primary
 			focus-visible:ring-0 focus-visible:ring-content-primary focus-visible:ring-offset-surface-primary
 			disabled:pointer-events-none data-[disabled]:opacity-100 data-[disabled]:border-border"
 			/>
 			<SliderPrimitive.Thumb
-				className="block h-4 w-4 rounded-full border border-solid border-surface-invert-secondary bg-surface-primary shadow transition-colors
+				className="block size-4 rounded-full border border-solid border-surface-invert-secondary bg-surface-primary shadow transition-colors
 			focus-visible:outline-none hover:border-content-primary
 			focus-visible:ring-0 focus-visible:ring-content-primary focus-visible:ring-offset-surface-primary
 			disabled:pointer-events-none data-[disabled]:opacity-100 data-[disabled]:border-border"
diff --git a/site/src/components/Switch/Switch.tsx b/site/src/components/Switch/Switch.tsx
index 1757bf83ca..03c9eea16a 100644
--- a/site/src/components/Switch/Switch.tsx
+++ b/site/src/components/Switch/Switch.tsx
@@ -34,8 +34,8 @@ const thumbVariants = cva(
 		variants: {
 			size: {
 				default:
-					"h-4 w-4 data-[state=checked]:translate-x-2.5 data-[state=unchecked]:-translate-x-1.5",
-				sm: "h-3 w-3 data-[state=checked]:translate-x-1.5 data-[state=unchecked]:-translate-x-1.5",
+					"size-4 data-[state=checked]:translate-x-2.5 data-[state=unchecked]:-translate-x-1.5",
+				sm: "size-3 data-[state=checked]:translate-x-1.5 data-[state=unchecked]:-translate-x-1.5",
 			},
 		},
 		defaultVariants: {
diff --git a/site/src/modules/dashboard/Navbar/MobileMenu.tsx b/site/src/modules/dashboard/Navbar/MobileMenu.tsx
index ff498e1ac2..9a85069b1d 100644
--- a/site/src/modules/dashboard/Navbar/MobileMenu.tsx
+++ b/site/src/modules/dashboard/Navbar/MobileMenu.tsx
@@ -136,7 +136,7 @@ const ProxySettingsSub: FC<ProxySettingsSubProps> = ({ proxyContextValue }) => {
 					Workspace proxy settings:
 					<span className="leading-none flex items-center gap-1">
 						<ExternalImage
-							className="w-4 h-4"
+							className="size-4"
 							src={selectedProxy.icon_url}
 							alt={selectedProxy.name}
 						/>
@@ -173,7 +173,7 @@ const ProxySettingsSub: FC<ProxySettingsSubProps> = ({ proxyContextValue }) => {
 								}}
 							>
 								<ExternalImage
-									className="w-4 h-4"
+									className="size-4"
 									src={p.icon_url}
 									alt={p.name}
 								/>
diff --git a/site/src/modules/resources/VSCodeDesktopButton/VSCodeDesktopButton.tsx b/site/src/modules/resources/VSCodeDesktopButton/VSCodeDesktopButton.tsx
index c58d5033cc..e12f7e5dda 100644
--- a/site/src/modules/resources/VSCodeDesktopButton/VSCodeDesktopButton.tsx
+++ b/site/src/modules/resources/VSCodeDesktopButton/VSCodeDesktopButton.tsx
@@ -83,7 +83,7 @@ export const VSCodeDesktopButton: FC<VSCodeDesktopButtonProps> = (props) => {
 						selectVariant("vscode");
 					}}
 				>
-					<VSCodeIcon className="w-3 h-3" />
+					<VSCodeIcon className="size-3" />
 					{DisplayAppNameMap.vscode}
 				</MenuItem>
 				<MenuItem
@@ -92,7 +92,7 @@ export const VSCodeDesktopButton: FC<VSCodeDesktopButtonProps> = (props) => {
 						selectVariant("vscode-insiders");
 					}}
 				>
-					<VSCodeInsidersIcon className="w-3 h-3" />
+					<VSCodeInsidersIcon className="size-3" />
 					{DisplayAppNameMap.vscode_insiders}
 				</MenuItem>
 			</Menu>
diff --git a/site/src/modules/resources/VSCodeDevContainerButton/VSCodeDevContainerButton.tsx b/site/src/modules/resources/VSCodeDevContainerButton/VSCodeDevContainerButton.tsx
index e44540ef03..85ba95659a 100644
--- a/site/src/modules/resources/VSCodeDevContainerButton/VSCodeDevContainerButton.tsx
+++ b/site/src/modules/resources/VSCodeDevContainerButton/VSCodeDevContainerButton.tsx
@@ -87,7 +87,7 @@ export const VSCodeDevContainerButton: FC<VSCodeDevContainerButtonProps> = (
 						selectVariant("vscode");
 					}}
 				>
-					<VSCodeIcon className="w-3 h-3" />
+					<VSCodeIcon className="size-3" />
 					{DisplayAppNameMap.vscode}
 				</MenuItem>
 				<MenuItem
@@ -96,7 +96,7 @@ export const VSCodeDevContainerButton: FC<VSCodeDevContainerButtonProps> = (
 						selectVariant("vscode-insiders");
 					}}
 				>
-					<VSCodeInsidersIcon className="w-3 h-3" />
+					<VSCodeInsidersIcon className="size-3" />
 					{DisplayAppNameMap.vscode_insiders}
 				</MenuItem>
 			</Menu>
diff --git a/site/src/modules/tasks/TasksSidebar/UserCombobox.tsx b/site/src/modules/tasks/TasksSidebar/UserCombobox.tsx
index e762d26a6b..55f0e0b5d6 100644
--- a/site/src/modules/tasks/TasksSidebar/UserCombobox.tsx
+++ b/site/src/modules/tasks/TasksSidebar/UserCombobox.tsx
@@ -105,7 +105,7 @@ export const UserCombobox: FC<UserComboboxProps> = ({
 									<UserItem option={option} />
 									<CheckIcon
 										className={cn(
-											"ml-2 h-4 w-4",
+											"ml-2 size-4",
 											option.value === selectedOption?.value
 												? "opacity-100"
 												: "opacity-0",
diff --git a/site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx b/site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx
index c0335d4cb8..e32b893139 100644
--- a/site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx
+++ b/site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx
@@ -118,7 +118,7 @@ const ParameterLabel: FC<ParameterLabelProps> = ({
 		<div className="flex items-start gap-2">
 			{parameter.icon && (
 				<ExternalImage
-					className="w-5 h-5 mt-0.5 object-contain"
+					className="size-5 mt-0.5 object-contain"
 					alt="Parameter icon"
 					src={parameter.icon}
 				/>
@@ -528,9 +528,9 @@ const MaskableInput: FC<MaskableInputProps> = ({
 					disabled={disabled}
 				>
 					{showMaskedInput ? (
-						<EyeOffIcon className="h-4 w-4" />
+						<EyeOffIcon className="size-4" />
 					) : (
-						<EyeIcon className="h-4 w-4" />
+						<EyeIcon className="size-4" />
 					)}
 				</Button>
 			)}
@@ -582,9 +582,9 @@ const MaskableTextArea: FC<MaskableInputProps> = ({
 					disabled={disabled}
 				>
 					{showMaskedInput ? (
-						<EyeOffIcon className="h-4 w-4" />
+						<EyeOffIcon className="size-4" />
 					) : (
-						<EyeIcon className="h-4 w-4" />
+						<EyeIcon className="size-4" />
 					)}
 				</Button>
 			)}
@@ -626,7 +626,7 @@ const OptionDisplay: FC<OptionDisplayProps> = ({ option }) => {
 		<div className="flex items-center gap-2">
 			{option.icon && (
 				<ExternalImage
-					className="w-4 h-4 object-contain"
+					className="size-4 object-contain"
 					src={option.icon}
 					alt=""
 				/>
diff --git a/site/src/pages/AISettingsPage/CoderAgentsPage/components/AgentSettingLayout.tsx b/site/src/pages/AISettingsPage/CoderAgentsPage/components/AgentSettingLayout.tsx
index 6bec8cfb78..4cffc776e9 100644
--- a/site/src/pages/AISettingsPage/CoderAgentsPage/components/AgentSettingLayout.tsx
+++ b/site/src/pages/AISettingsPage/CoderAgentsPage/components/AgentSettingLayout.tsx
@@ -60,7 +60,7 @@ export const AgentSettingLayout: FC<AgentSettingLayoutProps> = ({
 									disabled={saveDisabled}
 									className="h-10 min-w-[88px]"
 								>
-									{isSaving && <Spinner loading className="h-4 w-4" />}
+									{isSaving && <Spinner loading className="size-4" />}
 									Save
 								</Button>
 							))}
diff --git a/site/src/pages/AISettingsPage/InstructionsPage/InstructionsPageView.tsx b/site/src/pages/AISettingsPage/InstructionsPage/InstructionsPageView.tsx
index fcafd3c79b..ad1bd2306a 100644
--- a/site/src/pages/AISettingsPage/InstructionsPage/InstructionsPageView.tsx
+++ b/site/src/pages/AISettingsPage/InstructionsPage/InstructionsPageView.tsx
@@ -263,7 +263,7 @@ const InstructionsForm: FC<InstructionsFormProps> = ({
 						Cancel
 					</Button>
 					<Button type="submit" disabled={isDisabled || !form.dirty}>
-						{isSaving && <Spinner loading className="h-4 w-4" />}
+						{isSaving && <Spinner loading className="size-4" />}
 						Save
 					</Button>
 				</div>
diff --git a/site/src/pages/AISettingsPage/LifecyclePage/components/LifecycleSettingLayout.tsx b/site/src/pages/AISettingsPage/LifecyclePage/components/LifecycleSettingLayout.tsx
index 2e3aeced4c..30e4720d68 100644
--- a/site/src/pages/AISettingsPage/LifecyclePage/components/LifecycleSettingLayout.tsx
+++ b/site/src/pages/AISettingsPage/LifecyclePage/components/LifecycleSettingLayout.tsx
@@ -65,7 +65,7 @@ export const LifecycleSettingLayout: FC<LifecycleSettingLayoutProps> = ({
 									disabled={saveDisabled}
 									className="h-10 min-w-[88px]"
 								>
-									{isSaving && <Spinner loading className="h-4 w-4" />}
+									{isSaving && <Spinner loading className="size-4" />}
 									Save
 								</Button>
 							))}
diff --git a/site/src/pages/AISettingsPage/SpendPage/SpendPageView.tsx b/site/src/pages/AISettingsPage/SpendPage/SpendPageView.tsx
index a8053f25c3..eb04473878 100644
--- a/site/src/pages/AISettingsPage/SpendPage/SpendPageView.tsx
+++ b/site/src/pages/AISettingsPage/SpendPage/SpendPageView.tsx
@@ -263,7 +263,7 @@ export const SpendPageView: FC<SpendPageViewProps> = ({
 									<div className="space-y-8">
 										{isLoadingConfig ? (
 											<div className="flex items-center justify-center rounded-lg border border-border-default px-6 py-10">
-												<Spinner loading className="h-6 w-6" />
+												<Spinner loading className="size-6" />
 											</div>
 										) : configError ? (
 											<div className="space-y-4">
diff --git a/site/src/pages/AISettingsPage/SpendPage/components/LimitsTab/DefaultLimitSection.tsx b/site/src/pages/AISettingsPage/SpendPage/components/LimitsTab/DefaultLimitSection.tsx
index aad450f8e3..3e837469e9 100644
--- a/site/src/pages/AISettingsPage/SpendPage/components/LimitsTab/DefaultLimitSection.tsx
+++ b/site/src/pages/AISettingsPage/SpendPage/components/LimitsTab/DefaultLimitSection.tsx
@@ -109,7 +109,7 @@ export const DefaultLimitSection: FC<DefaultLimitSectionProps> = ({
 										onClick={onSave}
 										className="h-10 min-w-[88px]"
 									>
-										{isSaving && <Spinner loading className="h-4 w-4" />}
+										{isSaving && <Spinner loading className="size-4" />}
 										Save
 									</Button>
 								))}
diff --git a/site/src/pages/AISettingsPage/SpendPage/components/LimitsTab/GroupLimitDialog.tsx b/site/src/pages/AISettingsPage/SpendPage/components/LimitsTab/GroupLimitDialog.tsx
index 0810c10406..b3c8e55521 100644
--- a/site/src/pages/AISettingsPage/SpendPage/components/LimitsTab/GroupLimitDialog.tsx
+++ b/site/src/pages/AISettingsPage/SpendPage/components/LimitsTab/GroupLimitDialog.tsx
@@ -173,7 +173,7 @@ export const GroupLimitDialog: FC<GroupLimitDialogProps> = ({
 						Cancel
 					</Button>
 					<Button type="button" onClick={onSave} disabled={saveDisabled}>
-						{upsertPending ? <Spinner loading className="h-4 w-4" /> : null}
+						{upsertPending ? <Spinner loading className="size-4" /> : null}
 						{isEditing ? "Update budget" : "Add group"}
 					</Button>
 				</DialogFooter>
diff --git a/site/src/pages/AISettingsPage/SpendPage/components/LimitsTab/UserOverrideDialog.tsx b/site/src/pages/AISettingsPage/SpendPage/components/LimitsTab/UserOverrideDialog.tsx
index 1f900dcf11..5226f10687 100644
--- a/site/src/pages/AISettingsPage/SpendPage/components/LimitsTab/UserOverrideDialog.tsx
+++ b/site/src/pages/AISettingsPage/SpendPage/components/LimitsTab/UserOverrideDialog.tsx
@@ -147,7 +147,7 @@ export const UserOverrideDialog: FC<UserOverrideDialogProps> = ({
 						Cancel
 					</Button>
 					<Button type="button" onClick={onSave} disabled={saveDisabled}>
-						{upsertPending ? <Spinner loading className="h-4 w-4" /> : null}
+						{upsertPending ? <Spinner loading className="size-4" /> : null}
 						{isEditing ? "Update budget" : "Add user"}
 					</Button>
 				</DialogFooter>
diff --git a/site/src/pages/AgentsPage/AgentSettingsPersonalSkillsPageView.tsx b/site/src/pages/AgentsPage/AgentSettingsPersonalSkillsPageView.tsx
index 821d485605..dfe090605e 100644
--- a/site/src/pages/AgentsPage/AgentSettingsPersonalSkillsPageView.tsx
+++ b/site/src/pages/AgentsPage/AgentSettingsPersonalSkillsPageView.tsx
@@ -142,7 +142,7 @@ const EditSkillDialog: FC<{
 							Close
 						</Button>
 						<Button onClick={state.onRetry} disabled={state.isRetrying}>
-							{state.isRetrying && <Spinner className="h-4 w-4" loading />}
+							{state.isRetrying && <Spinner className="size-4" loading />}
 							Retry
 						</Button>
 					</DialogFooter>
@@ -247,7 +247,7 @@ export const AgentSettingsPersonalSkillsPageView: FC<
 						onClick={onRetry}
 						disabled={isRetrying}
 					>
-						{isRetrying && <Spinner className="h-4 w-4" loading />}
+						{isRetrying && <Spinner className="size-4" loading />}
 						Retry
 					</Button>
 				</div>
diff --git a/site/src/pages/AgentsPage/DesktopPopoutPage.tsx b/site/src/pages/AgentsPage/DesktopPopoutPage.tsx
index 2377e0e147..f4371d9c84 100644
--- a/site/src/pages/AgentsPage/DesktopPopoutPage.tsx
+++ b/site/src/pages/AgentsPage/DesktopPopoutPage.tsx
@@ -95,7 +95,7 @@ export const DesktopPopoutPageView: FC<DesktopPopoutPageViewProps> = ({
 		return (
 			<div className="flex h-screen w-screen items-center justify-center bg-surface-primary">
 				<div className="flex flex-col items-center gap-2 text-content-secondary">
-					<Spinner loading className="h-6 w-6" />
+					<Spinner loading className="size-6" />
 					<span className="text-sm">
 						{status === "idle"
 							? "Initializing desktop..."
@@ -126,7 +126,7 @@ export const DesktopPopoutPageView: FC<DesktopPopoutPageViewProps> = ({
 		return (
 			<div className="flex h-screen w-screen items-center justify-center bg-surface-primary">
 				<div className="flex flex-col items-center gap-2 text-content-secondary">
-					<Spinner loading className="h-6 w-6" />
+					<Spinner loading className="size-6" />
 					<span className="text-sm">Desktop disconnected. Reconnecting...</span>
 				</div>
 			</div>
diff --git a/site/src/pages/AgentsPage/components/AttachmentPreview.tsx b/site/src/pages/AgentsPage/components/AttachmentPreview.tsx
index 44285ddda8..cf26a508a0 100644
--- a/site/src/pages/AgentsPage/components/AttachmentPreview.tsx
+++ b/site/src/pages/AgentsPage/components/AttachmentPreview.tsx
@@ -199,7 +199,7 @@ export const AttachmentPreview: FC<{
 								uploadState?.status === "processing" ||
 								uploadState?.status === "uploading") && (
 								<div className="absolute inset-0 flex items-center justify-center rounded-md bg-overlay">
-									<Spinner className="h-5 w-5 text-white" loading />
+									<Spinner className="size-5 text-white" loading />
 								</div>
 							)}
 							{uploadState?.status === "error" && (
diff --git a/site/src/pages/AgentsPage/components/ChatElements/tools/InlineDesktopPreview.tsx b/site/src/pages/AgentsPage/components/ChatElements/tools/InlineDesktopPreview.tsx
index 0a887c52ca..e6280db8e6 100644
--- a/site/src/pages/AgentsPage/components/ChatElements/tools/InlineDesktopPreview.tsx
+++ b/site/src/pages/AgentsPage/components/ChatElements/tools/InlineDesktopPreview.tsx
@@ -101,7 +101,7 @@ export const InlineDesktopPreview: React.FC<{
 				className="flex w-full items-center justify-center text-content-secondary"
 				style={{ aspectRatio: DEFAULT_ASPECT }}
 			>
-				<Spinner loading className="h-5 w-5" />
+				<Spinner loading className="size-5" />
 			</div>,
 		);
 	}
diff --git a/site/src/pages/AgentsPage/components/ChatsSidebar/chats/ChatsPanel.tsx b/site/src/pages/AgentsPage/components/ChatsSidebar/chats/ChatsPanel.tsx
index aa5d02ae9e..70c07d0869 100644
--- a/site/src/pages/AgentsPage/components/ChatsSidebar/chats/ChatsPanel.tsx
+++ b/site/src/pages/AgentsPage/components/ChatsSidebar/chats/ChatsPanel.tsx
@@ -438,7 +438,7 @@ export const ChatsPanel: FC<ChatsPanelProps> = ({
 									size="icon"
 									aria-label="Search chats"
 									onClick={onOpenSearchDialog}
-									className="h-7 w-7 sm:hidden"
+									className="size-7 sm:hidden"
 								>
 									<SearchIcon />
 								</Button>
diff --git a/site/src/pages/AgentsPage/components/ChatsSidebar/chats/LoadMoreSentinel.tsx b/site/src/pages/AgentsPage/components/ChatsSidebar/chats/LoadMoreSentinel.tsx
index d0342c173d..e5d98c9f42 100644
--- a/site/src/pages/AgentsPage/components/ChatsSidebar/chats/LoadMoreSentinel.tsx
+++ b/site/src/pages/AgentsPage/components/ChatsSidebar/chats/LoadMoreSentinel.tsx
@@ -37,7 +37,7 @@ export const LoadMoreSentinel: FC<{
 	return (
 		<div ref={sentinelRef} className="flex items-center justify-center py-2">
 			{isFetchingNextPage && (
-				<Spinner className="h-4 w-4 text-content-secondary" loading />
+				<Spinner className="size-4 text-content-secondary" loading />
 			)}
 		</div>
 	);
diff --git a/site/src/pages/AgentsPage/components/ChatsSidebar/dialogs/RenameChatDialog.tsx b/site/src/pages/AgentsPage/components/ChatsSidebar/dialogs/RenameChatDialog.tsx
index f9274e2da0..9ece2ae30c 100644
--- a/site/src/pages/AgentsPage/components/ChatsSidebar/dialogs/RenameChatDialog.tsx
+++ b/site/src/pages/AgentsPage/components/ChatsSidebar/dialogs/RenameChatDialog.tsx
@@ -341,7 +341,7 @@ export const RenameChatDialog: FC<RenameChatDialogProps> = ({
 								isTypingGeneratedTitle
 							}
 						>
-							{isRenamingChat && <Spinner className="h-4 w-4" loading />}
+							{isRenamingChat && <Spinner className="size-4" loading />}
 							Save
 						</Button>
 					</DialogFooter>
diff --git a/site/src/pages/AgentsPage/components/ChatsSidebar/filters/FilterPopover.tsx b/site/src/pages/AgentsPage/components/ChatsSidebar/filters/FilterPopover.tsx
index 753b25e6ec..fba9750275 100644
--- a/site/src/pages/AgentsPage/components/ChatsSidebar/filters/FilterPopover.tsx
+++ b/site/src/pages/AgentsPage/components/ChatsSidebar/filters/FilterPopover.tsx
@@ -260,7 +260,7 @@ export const FilterPopover: FC<FilterPopoverProps> = ({
 					size="icon"
 					aria-label="Filter agents"
 					className={cn(
-						"h-7 w-7 min-w-0 -mr-0.5 justify-end px-0 text-content-secondary hover:text-content-primary",
+						"size-7 min-w-0 -mr-0.5 justify-end px-0 text-content-secondary hover:text-content-primary",
 						hasActiveFilters(filters) && "text-content-primary",
 					)}
 				>
diff --git a/site/src/pages/AgentsPage/components/ChatsSidebar/tabs/SidebarTabView.tsx b/site/src/pages/AgentsPage/components/ChatsSidebar/tabs/SidebarTabView.tsx
index c600947d9c..36531e2c71 100644
--- a/site/src/pages/AgentsPage/components/ChatsSidebar/tabs/SidebarTabView.tsx
+++ b/site/src/pages/AgentsPage/components/ChatsSidebar/tabs/SidebarTabView.tsx
@@ -312,7 +312,7 @@ export const SidebarTabView: FC<SidebarTabViewProps> = ({
 										}}
 										aria-label={`Close ${tab.label} tab`}
 										className={cn(
-											"h-6 w-6 rounded-l-none rounded-r-md bg-surface-primary p-0 text-content-secondary hover:text-content-primary [&>svg]:size-3",
+											"size-6 rounded-l-none rounded-r-md bg-surface-primary p-0 text-content-secondary hover:text-content-primary [&>svg]:size-3",
 											isActive &&
 												"bg-surface-quaternary/25 text-content-primary hover:bg-surface-quaternary/50",
 										)}
diff --git a/site/src/pages/AgentsPage/components/PersonalInstructionsSettings.tsx b/site/src/pages/AgentsPage/components/PersonalInstructionsSettings.tsx
index 0cd331f65c..97f8ae07e2 100644
--- a/site/src/pages/AgentsPage/components/PersonalInstructionsSettings.tsx
+++ b/site/src/pages/AgentsPage/components/PersonalInstructionsSettings.tsx
@@ -113,7 +113,7 @@ export const PersonalInstructionsSettings: FC<
 								type="submit"
 								disabled={isAnyPromptSaving || !form.dirty}
 							>
-								{isSavingUserPrompt && <Spinner loading className="h-4 w-4" />}
+								{isSavingUserPrompt && <Spinner loading className="size-4" />}
 								Save
 							</Button>
 						</>
diff --git a/site/src/pages/AgentsPage/components/PersonalSkillEditor.tsx b/site/src/pages/AgentsPage/components/PersonalSkillEditor.tsx
index 07ea898dd2..cf29c4bf38 100644
--- a/site/src/pages/AgentsPage/components/PersonalSkillEditor.tsx
+++ b/site/src/pages/AgentsPage/components/PersonalSkillEditor.tsx
@@ -401,7 +401,7 @@ export const PersonalSkillEditor: FC<PersonalSkillEditorProps> = ({
 							type="submit"
 							disabled={isSubmitting || !form.isValid || !form.dirty}
 						>
-							{isSubmitting && <Spinner className="h-4 w-4" loading />}
+							{isSubmitting && <Spinner className="size-4" loading />}
 							{submitLabel}
 						</Button>
 					</DialogFooter>
diff --git a/site/src/pages/AgentsPage/components/RightPanel/DesktopPanel.tsx b/site/src/pages/AgentsPage/components/RightPanel/DesktopPanel.tsx
index 7e8f74b9f9..28e6451b4a 100644
--- a/site/src/pages/AgentsPage/components/RightPanel/DesktopPanel.tsx
+++ b/site/src/pages/AgentsPage/components/RightPanel/DesktopPanel.tsx
@@ -83,7 +83,7 @@ export const DesktopPanel: FC<DesktopPanelProps> = ({ chatId, isVisible }) => {
 				className="flex h-full flex-col items-center justify-center gap-3 text-content-secondary"
 				role="status"
 			>
-				<ExternalLinkIcon className="h-8 w-8" />
+				<ExternalLinkIcon className="size-8" />
 				<span className="text-sm">Desktop is open in a separate window.</span>
 				<Button variant="outline" size="sm" onClick={handleBringBack}>
 					Bring back
@@ -133,7 +133,7 @@ export const DesktopPanelView: FC<DesktopPanelViewProps> = ({
 	if (status === "connecting") {
 		return (
 			<div className="flex h-full flex-col items-center justify-center gap-2 text-content-secondary">
-				<Spinner loading className="h-6 w-6" />
+				<Spinner loading className="size-6" />
 				<span className="text-sm">Connecting to desktop...</span>
 			</div>
 		);
@@ -142,7 +142,7 @@ export const DesktopPanelView: FC<DesktopPanelViewProps> = ({
 	if (status === "disconnected") {
 		return (
 			<div className="flex h-full flex-col items-center justify-center gap-2 text-content-secondary">
-				<Spinner loading className="h-6 w-6" />
+				<Spinner loading className="size-6" />
 				<span className="text-sm">Desktop disconnected. Reconnecting...</span>
 			</div>
 		);
@@ -165,7 +165,7 @@ export const DesktopPanelView: FC<DesktopPanelViewProps> = ({
 	if (status === "idle") {
 		return (
 			<div className="flex h-full flex-col items-center justify-center gap-2 text-content-secondary">
-				<Spinner loading className="h-6 w-6" />
+				<Spinner loading className="size-6" />
 				<span className="text-sm">Initializing desktop...</span>
 			</div>
 		);
diff --git a/site/src/pages/AgentsPage/components/UserCompactionThresholdSettings.tsx b/site/src/pages/AgentsPage/components/UserCompactionThresholdSettings.tsx
index 99a6a11063..2d4e5290f0 100644
--- a/site/src/pages/AgentsPage/components/UserCompactionThresholdSettings.tsx
+++ b/site/src/pages/AgentsPage/components/UserCompactionThresholdSettings.tsx
@@ -209,7 +209,7 @@ export const UserCompactionThresholdSettings: FC<
 			<div className="flex flex-col gap-2">
 				<ContextCompactionHeader />
 				<div className="flex items-center gap-2 text-sm text-content-secondary">
-					<Spinner loading className="h-4 w-4" />
+					<Spinner loading className="size-4" />
 					Loading thresholds...
 				</div>
 			</div>
@@ -235,7 +235,7 @@ export const UserCompactionThresholdSettings: FC<
 			<ContextCompactionHeader />
 			{isLoadingModelConfigs ? (
 				<div className="flex items-center gap-2 text-sm text-content-secondary">
-					<Spinner loading className="h-4 w-4" />
+					<Spinner loading className="size-4" />
 					Loading models...
 				</div>
 			) : modelConfigsError ? (
@@ -420,7 +420,7 @@ export const UserCompactionThresholdSettings: FC<
 														onClick={handleSaveAll}
 													>
 														{hasAnyPending && (
-															<Spinner loading className="h-4 w-4" />
+															<Spinner loading className="size-4" />
 														)}
 														{hasAnyPending
 															? "Saving..."
diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx
index f7a801cc0e..4f449485fc 100644
--- a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx
+++ b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx
@@ -671,7 +671,7 @@ export const CreateWorkspacePageView: FC<CreateWorkspacePageViewProps> = ({
 																<ExternalImage
 																	src={preset.icon}
 																	alt={preset.label}
-																	className="w-4 h-4"
+																	className="size-4"
 																/>
 															)}
 															{preset.label}
diff --git a/site/src/pages/CreateWorkspacePage/ExternalAuthButton.tsx b/site/src/pages/CreateWorkspacePage/ExternalAuthButton.tsx
index f9eb2cf131..443bc87c9d 100644
--- a/site/src/pages/CreateWorkspacePage/ExternalAuthButton.tsx
+++ b/site/src/pages/CreateWorkspacePage/ExternalAuthButton.tsx
@@ -31,7 +31,7 @@ export const ExternalAuthButton: FC<ExternalAuthButtonProps> = ({
 			<span className="flex flex-row items-center gap-2">
 				{auth.display_icon && (
 					<ExternalImage
-						className="w-5 h-5"
+						className="size-5"
 						src={auth.display_icon}
 						alt={`${auth.display_name} Icon`}
 					/>
@@ -47,7 +47,7 @@ export const ExternalAuthButton: FC<ExternalAuthButtonProps> = ({
 			<span className="flex flex-row items-center gap-2">
 				{auth.authenticated ? (
 					<>
-						<CheckIcon className="w-4 h-4 text-content-success" />
+						<CheckIcon className="size-4 text-content-success" />
 						<p className="text-xs font-semibold text-content-secondary m-0">
 							Authenticated
 						</p>
diff --git a/site/src/pages/DeploymentSettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.tsx b/site/src/pages/DeploymentSettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.tsx
index 95d67163b1..74acf048df 100644
--- a/site/src/pages/DeploymentSettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.tsx
+++ b/site/src/pages/DeploymentSettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.tsx
@@ -134,7 +134,7 @@ export const AppearanceSettingsPageView: FC<
 						<img
 							alt=""
 							src={logoForm.values.logo_url}
-							className="h-6 w-6 max-w-full object-contain"
+							className="size-6 max-w-full object-contain"
 							// Hide broken image icon while users type incomplete URLs.
 							onError={(e) => {
 								e.currentTarget.style.display = "none";
diff --git a/site/src/pages/HealthPage/WorkspaceProxyPage.tsx b/site/src/pages/HealthPage/WorkspaceProxyPage.tsx
index 6f1b2ac435..fba577132d 100644
--- a/site/src/pages/HealthPage/WorkspaceProxyPage.tsx
+++ b/site/src/pages/HealthPage/WorkspaceProxyPage.tsx
@@ -73,7 +73,7 @@ const WorkspaceProxyPage: FC = () => {
 						>
 							<header className="p-6 flex items-center justify-between gap-6">
 								<div className="flex items-center gap-6">
-									<div className="w-9 h-9 flex items-center justify-center">
+									<div className="size-9 flex items-center justify-center">
 										<ExternalImage
 											src={region.icon_url}
 											className="object-fill w-full h-full"
diff --git a/site/src/pages/StarterTemplatePage/StarterTemplatePageView.tsx b/site/src/pages/StarterTemplatePage/StarterTemplatePageView.tsx
index f1a7de8f72..7608a5c9f2 100644
--- a/site/src/pages/StarterTemplatePage/StarterTemplatePageView.tsx
+++ b/site/src/pages/StarterTemplatePage/StarterTemplatePageView.tsx
@@ -56,7 +56,7 @@ export const StarterTemplatePageView: FC<StarterTemplatePageViewProps> = ({
 				}
 			>
 				<div className="flex flex-row gap-6 items-center">
-					<div className="h-12 w-12 flex items-center justify-center [&_img]:w-full">
+					<div className="size-12 flex items-center justify-center [&_img]:w-full">
 						<ExternalImage src={starterTemplate.icon} />
 					</div>
 					<div>
diff --git a/site/src/pages/TasksPage/UsersCombobox.tsx b/site/src/pages/TasksPage/UsersCombobox.tsx
index 21976643b7..1a262ff7d1 100644
--- a/site/src/pages/TasksPage/UsersCombobox.tsx
+++ b/site/src/pages/TasksPage/UsersCombobox.tsx
@@ -71,7 +71,7 @@ export const UsersCombobox: FC<UsersComboboxProps> = ({
 					) : (
 						<Skeleton variant="text" className="w-[120px] h-3" />
 					)}
-					<ChevronsUpDownIcon className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+					<ChevronsUpDownIcon className="ml-2 size-4 shrink-0 opacity-50" />
 				</Button>
 			</PopoverTrigger>
 			<PopoverContent className="w-[280px] p-0">
@@ -100,7 +100,7 @@ export const UsersCombobox: FC<UsersComboboxProps> = ({
 									<UserItem option={option} />
 									<CheckIcon
 										className={cn(
-											"ml-2 h-4 w-4",
+											"ml-2 size-4",
 											option.value === selectedOption?.value
 												? "opacity-100"
 												: "opacity-0",
diff --git a/site/src/pages/TemplateBuilder/ModuleConfiguration.tsx b/site/src/pages/TemplateBuilder/ModuleConfiguration.tsx
index 88b750d188..79a62c9027 100644
--- a/site/src/pages/TemplateBuilder/ModuleConfiguration.tsx
+++ b/site/src/pages/TemplateBuilder/ModuleConfiguration.tsx
@@ -68,7 +68,7 @@ export const ModuleConfiguration: React.FC<ModuleConfigurationProps> = ({
 				</CollapsibleSummary>
 			) : (
 				<div className="text-sm text-content-secondary flex items-center gap-2 mt-4">
-					<CheckIcon className="w-4 h-4" />
+					<CheckIcon className="size-4" />
 					No configuration required.
 				</div>
 			)}
diff --git a/site/src/pages/TemplateBuilder/SelectionSummary.tsx b/site/src/pages/TemplateBuilder/SelectionSummary.tsx
index 5d4a40f47e..0c83339b37 100644
--- a/site/src/pages/TemplateBuilder/SelectionSummary.tsx
+++ b/site/src/pages/TemplateBuilder/SelectionSummary.tsx
@@ -189,7 +189,7 @@ const ModuleSelection: React.FC<ModuleSelectionProps> = ({
 							onClick={() => onDeselectModule(module.id)}
 							aria-label="Deselect module"
 						>
-							<XIcon className="w-4 h-4" />
+							<XIcon className="size-4" />
 						</Button>
 					</div>
 				</div>
diff --git a/site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.tsx b/site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.tsx
index 430a51c530..bc98a8e653 100644
--- a/site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.tsx
+++ b/site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.tsx
@@ -452,7 +452,7 @@ const TemplateUsagePanel: FC<TemplateUsagePanelProps> = ({
 							return (
 								<div key={usage.slug} className="flex items-center gap-6">
 									<div className="flex items-center gap-2">
-										<div className="flex justify-center items-center w-5 h-5">
+										<div className="flex justify-center items-center size-5">
 											<ExternalImage
 												src={usage.icon}
 												alt=""
@@ -599,7 +599,7 @@ const ParameterUsageLabel: FC<ParameterUsageLabelProps> = ({
 		return (
 			<div className="flex items-center gap-4">
 				{icon && (
-					<div className="leading-none w-4 h-4">
+					<div className="leading-none size-4">
 						<ExternalImage
 							alt=""
 							src={icon}
diff --git a/site/src/pages/WorkspacePage/ResourcesSidebar.tsx b/site/src/pages/WorkspacePage/ResourcesSidebar.tsx
index 16f325eb0a..1cad4ed698 100644
--- a/site/src/pages/WorkspacePage/ResourcesSidebar.tsx
+++ b/site/src/pages/WorkspacePage/ResourcesSidebar.tsx
@@ -45,7 +45,7 @@ export const ResourcesSidebar: FC<ResourcesSidebarProps> = ({
 					key={r.id}
 					className="leading-normal flex items-center gap-3"
 				>
-					<div className="flex items-center justify-center leading-none w-4 h-4 p-0.5">
+					<div className="flex items-center justify-center leading-none size-4 p-0.5">
 						<ExternalImage
 							className="w-full h-full object-contain"
 							src={getResourceIconPath(r.type)}
diff --git a/site/src/pages/WorkspacesPage/WorkspacesTable.tsx b/site/src/pages/WorkspacesPage/WorkspacesTable.tsx
index 6af4f89689..540227daa4 100644
--- a/site/src/pages/WorkspacesPage/WorkspacesTable.tsx
+++ b/site/src/pages/WorkspacesPage/WorkspacesTable.tsx
@@ -369,7 +369,7 @@ const TableLoader: FC = () => {
 				</TableCell>
 				<TableCell className="w-0 ">
 					<div className="flex gap-1 justify-end">
-						<Skeleton className="h-10 w-10" />
+						<Skeleton className="size-10" />
 						<Button size="icon-lg" variant="subtle" disabled>
 							<EllipsisVerticalIcon aria-hidden="true" />
 						</Button>