coder · BrunoQuaresma · Oct 8, 2025 · Oct 7, 2025 · Oct 7, 2025 · Oct 7, 2025
diff --git a/site/package.json b/site/package.json
@@ -91,7 +91,7 @@
 		"humanize-duration": "3.32.2",
 		"jszip": "3.10.1",
 		"lodash": "4.17.21",
-		"lucide-react": "0.474.0",
+		"lucide-react": "0.545.0",
 		"monaco-editor": "0.53.0",
 		"pretty-bytes": "6.1.1",
 		"react": "19.1.1",

diff --git a/site/pnpm-lock.yaml b/site/pnpm-lock.yaml
diff --git a/site/src/modules/resources/AppLink/ShareIcon.tsx b/site/src/modules/resources/AppLink/ShareIcon.tsx
@@ -1,9 +1,11 @@
-import BusinessIcon from "@mui/icons-material/Business";
-import GroupOutlinedIcon from "@mui/icons-material/GroupOutlined";
-import PublicOutlinedIcon from "@mui/icons-material/PublicOutlined";
 import Tooltip from "@mui/material/Tooltip";
 import type * as TypesGen from "api/typesGenerated";
-import { SquareArrowOutUpRightIcon } from "lucide-react";
+import {
+	Building2Icon,
+	GlobeIcon,
+	SquareArrowOutUpRightIcon,
+	UsersIcon,
+} from "lucide-react";
 
 interface ShareIconProps {
 	app: TypesGen.WorkspaceApp;
@@ -20,21 +22,21 @@ export const ShareIcon = ({ app }: ShareIconProps) => {
 	if (app.sharing_level === "authenticated") {
 		return (
 			<Tooltip title="Shared with all authenticated users">
-				<GroupOutlinedIcon />
+				<UsersIcon />
 			</Tooltip>
 		);
 	}
 	if (app.sharing_level === "organization") {
 		return (
 			<Tooltip title="Shared with organization members">
-				<BusinessIcon />
+				<Building2Icon />
 			</Tooltip>
 		);
 	}
 	if (app.sharing_level === "public") {
 		return (
 			<Tooltip title="Shared publicly">
-				<PublicOutlinedIcon />
+				<GlobeIcon />
 			</Tooltip>
 		);
 	}

diff --git a/site/src/modules/resources/PortForwardButton.tsx b/site/src/modules/resources/PortForwardButton.tsx
@@ -1,8 +1,4 @@
 import { type Interpolation, type Theme, useTheme } from "@emotion/react";
-import BusinessIcon from "@mui/icons-material/Business";
-import LockIcon from "@mui/icons-material/Lock";
-import LockOpenIcon from "@mui/icons-material/LockOpen";
-import SensorsIcon from "@mui/icons-material/Sensors";
 import FormControl from "@mui/material/FormControl";
 import Link from "@mui/material/Link";
 import MenuItem from "@mui/material/MenuItem";
@@ -45,8 +41,12 @@ import {
 } from "components/Tooltip/Tooltip";
 import { useFormik } from "formik";
 import {
+	BuildingIcon,
 	ChevronDownIcon,
 	ExternalLinkIcon,
+	LockIcon,
+	LockOpenIcon,
+	RadioIcon,
 	ShareIcon,
 	X as XIcon,
 } from "lucide-react";
@@ -385,7 +385,7 @@ export const PortForwardPopoverView: FC<PortForwardPopoverViewProps> = ({
 										target="_blank"
 										rel="noreferrer"
 									>
-										<SensorsIcon css={{ width: 14, height: 14 }} />
+										<RadioIcon className="size-icon-sm" />
 										{port.port}
 									</Link>
 									<Link
@@ -475,11 +475,11 @@ export const PortForwardPopoverView: FC<PortForwardPopoverViewProps> = ({
 										rel="noreferrer"
 									>
 										{share.share_level === "public" ? (
-											<LockOpenIcon css={{ width: 14, height: 14 }} />
+											<LockOpenIcon className="size-icon-sm" />
 										) : share.share_level === "organization" ? (
-											<BusinessIcon css={{ width: 14, height: 14 }} />
+											<BuildingIcon className="size-icon-sm" />
 										) : (
-											<LockIcon css={{ width: 14, height: 14 }} />
+											<LockIcon className="size-icon-sm" />
 										)}
 										{label}
 									</Link>

diff --git a/site/src/modules/templates/TemplateFiles/TemplateFileTree.tsx b/site/src/modules/templates/TemplateFiles/TemplateFileTree.tsx
@@ -1,11 +1,13 @@
 import { css } from "@emotion/react";
-import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
-import FormatAlignLeftOutlined from "@mui/icons-material/FormatAlignLeftOutlined";
 import Menu from "@mui/material/Menu";
 import MenuItem from "@mui/material/MenuItem";
 import { SimpleTreeView, TreeItem } from "@mui/x-tree-view";
 import { DockerIcon } from "components/Icons/DockerIcon";
-import { ChevronRightIcon } from "lucide-react";
+import {
+	ChevronDownIcon,
+	ChevronRightIcon,
+	TextAlignStartIcon,
+} from "lucide-react";
 import {
 	type CSSProperties,
 	type ElementType,
@@ -90,7 +92,7 @@ export const TemplateFileTree: FC<TemplateFilesTreeProps> = ({
 
 		let icon: ElementType | undefined;
 		if (isFolder(content)) {
-			icon = FormatAlignLeftOutlined;
+			icon = TextAlignStartIcon;
 		} else if (filename.endsWith(".tf")) {
 			icon = FileTypeTerraform;
 		} else if (filename.endsWith(".md")) {
@@ -201,7 +203,7 @@ export const TemplateFileTree: FC<TemplateFilesTreeProps> = ({
 
 	return (
 		<SimpleTreeView
-			slots={{ collapseIcon: ExpandMoreIcon, expandIcon: ChevronRightIcon }}
+			slots={{ collapseIcon: ChevronDownIcon, expandIcon: ChevronRightIcon }}
 			aria-label="Files"
 			defaultExpandedItems={activePath ? expandablePaths(activePath) : []}
 			defaultSelectedItems={activePath}

diff --git a/site/src/modules/templates/TemplateFiles/TemplateFiles.tsx b/site/src/modules/templates/TemplateFiles/TemplateFiles.tsx
@@ -1,11 +1,11 @@
 import { type Interpolation, type Theme, useTheme } from "@emotion/react";
-import EditOutlined from "@mui/icons-material/EditOutlined";
-import RadioButtonCheckedOutlined from "@mui/icons-material/RadioButtonCheckedOutlined";
 import { SyntaxHighlighter } from "components/SyntaxHighlighter/SyntaxHighlighter";
 import set from "lodash/set";
+import { EditIcon } from "lucide-react";
 import { linkToTemplate, useLinks } from "modules/navigation";
 import { type FC, useCallback, useMemo } from "react";
 import { Link } from "react-router";
+import { cn } from "utils/cn";
 import type { FileTree } from "utils/filetree";
 import type { TemplateVersionFiles } from "utils/templateVersion";
 import { TemplateFileTree } from "./TemplateFileTree";
@@ -94,16 +94,13 @@ export const TemplateFiles: FC<TemplateFilesProps> = ({
 							return (
 								<div key={filename} css={styles.filePanel} id={filename}>
 									<header css={styles.fileHeader}>
-										{filename}
-										{info.hasDiff && (
-											<RadioButtonCheckedOutlined
-												css={{
-													width: 14,
-													height: 14,
-													color: theme.roles.warning.fill.outline,
-												}}
-											/>
-										)}
+										<span
+											className={cn({
+												"text-content-warning": info.hasDiff,
+											})}
+										>
+											{filename}
+										</span>
 
 										<div css={{ marginLeft: "auto" }}>
 											<Link
@@ -121,7 +118,7 @@ export const TemplateFiles: FC<TemplateFilesProps> = ({
 													},
 												}}
 											>
-												<EditOutlined css={{ fontSize: "inherit" }} />
+												<EditIcon className="text-inherit size-icon-xs" />
 												Edit
 											</Link>
 										</div>

diff --git a/site/src/pages/HealthPage/DismissWarningButton.tsx b/site/src/pages/HealthPage/DismissWarningButton.tsx
@@ -1,11 +1,10 @@
-import NotificationsOffOutlined from "@mui/icons-material/NotificationsOffOutlined";
-import NotificationOutlined from "@mui/icons-material/NotificationsOutlined";
 import Skeleton from "@mui/material/Skeleton";
 import { healthSettings, updateHealthSettings } from "api/queries/debug";
 import type { HealthSection } from "api/typesGenerated";
 import { Button } from "components/Button/Button";
 import { displaySuccess } from "components/GlobalSnackbar/utils";
 import { Spinner } from "components/Spinner/Spinner";
+import { BellIcon, BellOffIcon } from "lucide-react";
 import { useMutation, useQuery, useQueryClient } from "react-query";
 
 export const DismissWarningButton = (props: { healthcheck: HealthSection }) => {
@@ -49,7 +48,7 @@ export const DismissWarningButton = (props: { healthcheck: HealthSection }) => {
 				}}
 			>
 				<Spinner loading={enableMutation.isPending}>
-					<NotificationsOffOutlined />
+					<BellOffIcon />
 				</Spinner>
 				Enable warnings
 			</Button>
@@ -69,7 +68,7 @@ export const DismissWarningButton = (props: { healthcheck: HealthSection }) => {
 			}}
 		>
 			<Spinner loading={dismissMutation.isPending}>
-				<NotificationOutlined />
+				<BellIcon />
 			</Spinner>
 			Dismiss warnings
 		</Button>

diff --git a/site/src/pages/HealthPage/HealthLayout.tsx b/site/src/pages/HealthPage/HealthLayout.tsx
@@ -1,6 +1,3 @@
-import { useTheme } from "@emotion/react";
-import NotificationsOffOutlined from "@mui/icons-material/NotificationsOffOutlined";
-import ReplayIcon from "@mui/icons-material/Replay";
 import CircularProgress from "@mui/material/CircularProgress";
 import IconButton from "@mui/material/IconButton";
 import Tooltip from "@mui/material/Tooltip";
@@ -9,6 +6,7 @@ import type { HealthSeverity } from "api/typesGenerated";
 import { ErrorAlert } from "components/Alert/ErrorAlert";
 import { Loader } from "components/Loader/Loader";
 import kebabCase from "lodash/fp/kebabCase";
+import { BellOffIcon, RotateCcwIcon } from "lucide-react";
 import { DashboardFullPage } from "modules/dashboard/DashboardLayout";
 import { type FC, Suspense } from "react";
 import { useMutation, useQuery, useQueryClient } from "react-query";
@@ -28,7 +26,6 @@ const linkStyles = {
 };
 
 export const HealthLayout: FC = () => {
-	const theme = useTheme();
 	const queryClient = useQueryClient();
 	const {
 		data: healthStatus,
@@ -91,7 +88,7 @@ export const HealthLayout: FC = () => {
 											{isRefreshing ? (
 												<CircularProgress size={16} />
 											) : (
-												<ReplayIcon className="size-5" />
+												<RotateCcwIcon className="size-5" />
 											)}
 										</IconButton>
 									</Tooltip>
@@ -155,13 +152,7 @@ export const HealthLayout: FC = () => {
 											/>
 											{label}
 											{healthSection.dismissed && (
-												<NotificationsOffOutlined
-													css={{
-														fontSize: 14,
-														marginLeft: "auto",
-														color: theme.palette.text.disabled,
-													}}
-												/>
+												<BellOffIcon className="size-icon-sm ml-auto text-content-disabled" />
 											)}
 										</NavLink>
 									);

diff --git a/site/src/pages/HealthPage/WorkspaceProxyPage.tsx b/site/src/pages/HealthPage/WorkspaceProxyPage.tsx
@@ -2,7 +2,7 @@ import { useTheme } from "@emotion/react";
 import Tooltip from "@mui/material/Tooltip";
 import type { HealthcheckReport } from "api/typesGenerated";
 import { Alert } from "components/Alert/Alert";
-import { EarthIcon, HashIcon } from "lucide-react";
+import { GlobeIcon, HashIcon } from "lucide-react";
 import type { FC } from "react";
 import { useOutletContext } from "react-router";
 import { createDayString } from "utils/createDayString";
@@ -107,7 +107,7 @@ const WorkspaceProxyPage: FC = () => {
 								<div css={{ display: "flex", flexWrap: "wrap", gap: 12 }}>
 									{region.wildcard_hostname && (
 										<Tooltip title="Wildcard Hostname">
-											<Pill icon={<EarthIcon />}>
+											<Pill icon={<GlobeIcon />}>
 												{region.wildcard_hostname}
 											</Pill>
 										</Tooltip>

diff --git a/site/src/pages/LoginPage/OAuthSignInForm.tsx b/site/src/pages/LoginPage/OAuthSignInForm.tsx
@@ -1,8 +1,8 @@
 import GitHubIcon from "@mui/icons-material/GitHub";
-import KeyIcon from "@mui/icons-material/VpnKey";
 import { visuallyHidden } from "@mui/utils";
 import type { AuthMethods } from "api/typesGenerated";
 import { Button } from "components/Button/Button";
+import { KeyIcon } from "lucide-react";
 import { type FC, useId } from "react";
 import { Language } from "./Language";
 

diff --git a/site/src/pages/TemplatePage/TemplateEmbedPage/TemplateEmbedPageExperimental.tsx b/site/src/pages/TemplatePage/TemplateEmbedPage/TemplateEmbedPageExperimental.tsx
@@ -1,5 +1,3 @@
-import CheckOutlined from "@mui/icons-material/CheckOutlined";
-import FileCopyOutlined from "@mui/icons-material/FileCopyOutlined";
 import { API } from "api/api";
 import { DetailedError } from "api/errors";
 import type {
@@ -18,6 +16,7 @@ import { Skeleton } from "components/Skeleton/Skeleton";
 import { useAuthenticated } from "hooks";
 import { useEffectEvent } from "hooks/hookPolyfills";
 import { useClipboard } from "hooks/useClipboard";
+import { CheckIcon, CopyIcon } from "lucide-react";
 import {
 	Diagnostics,
 	DynamicParameter,
@@ -308,8 +307,8 @@ const ButtonPreview: FC<ButtonPreviewProps> = ({ template, buttonValues }) => {
 					clipboard.copyToClipboard(textToCopy);
 				}}
 			>
-				{clipboard.showCopiedSuccess ? <CheckOutlined /> : <FileCopyOutlined />}{" "}
-				Copy button code
+				{clipboard.showCopiedSuccess ? <CheckIcon /> : <CopyIcon />} Copy button
+				code
 			</Button>
 		</div>
 	);

diff --git a/site/src/pages/TemplateVersionPage/TemplateVersionPageView.tsx b/site/src/pages/TemplateVersionPage/TemplateVersionPageView.tsx
@@ -58,7 +58,7 @@ export const TemplateVersionPageView: FC<TemplateVersionPageViewProps> = ({
 						)}
 						<Button variant="outline" asChild>
 							<RouterLink to={`${templateLink}/versions/${versionName}/edit`}>
-								<EditIcon />
+								<EditIcon className="!size-icon-sm" />
 								Edit
 							</RouterLink>
 						</Button>