diff --git a/site/src/pages/HealthPage/DERPRegionPage.tsx b/site/src/pages/HealthPage/DERPRegionPage.tsx
index 4a1be16138..a32350e7af 100644
--- a/site/src/pages/HealthPage/DERPRegionPage.tsx
+++ b/site/src/pages/HealthPage/DERPRegionPage.tsx
@@ -1,6 +1,5 @@
 import { type Interpolation, type Theme, useTheme } from "@emotion/react";
 import ArrowBackOutlined from "@mui/icons-material/ArrowBackOutlined";
-import CodeOutlined from "@mui/icons-material/CodeOutlined";
 import TagOutlined from "@mui/icons-material/TagOutlined";
 import Tooltip from "@mui/material/Tooltip";
 import type {
@@ -11,6 +10,7 @@ import type {
 	HealthcheckReport,
 } from "api/typesGenerated";
 import { Alert } from "components/Alert/Alert";
+import { CodeIcon } from "lucide-react";
 import type { FC } from "react";
 import { Helmet } from "react-helmet-async";
 import { Link, useOutletContext, useParams } from "react-router-dom";
@@ -94,7 +94,9 @@ const DERPRegionPage: FC = () => {
 							<Pill icon={<TagOutlined />}>{region!.RegionID}</Pill>
 						</Tooltip>
 						<Tooltip title="Region Code">
-							<Pill icon={<CodeOutlined />}>{region!.RegionCode}</Pill>
+							<Pill icon={<CodeIcon className="size-icon-sm" />}>
+								{region!.RegionCode}
+							</Pill>
 						</Tooltip>
 						<BooleanPill value={region!.EmbeddedRelay}>
 							Embedded Relay
diff --git a/site/src/pages/HealthPage/WebsocketPage.tsx b/site/src/pages/HealthPage/WebsocketPage.tsx
index a3f4a92d4d..fed223163e 100644
--- a/site/src/pages/HealthPage/WebsocketPage.tsx
+++ b/site/src/pages/HealthPage/WebsocketPage.tsx
@@ -1,8 +1,8 @@
 import { useTheme } from "@emotion/react";
-import CodeOutlined from "@mui/icons-material/CodeOutlined";
 import Tooltip from "@mui/material/Tooltip";
 import type { HealthcheckReport } from "api/typesGenerated";
 import { Alert } from "components/Alert/Alert";
+import { CodeIcon } from "lucide-react";
 import { Helmet } from "react-helmet-async";
 import { useOutletContext } from "react-router-dom";
 import { MONOSPACE_FONT_FAMILY } from "theme/constants";
@@ -49,7 +49,9 @@ const WebsocketPage = () => {
 
 				<section>
 					<Tooltip title="Code">
-						<Pill icon={<CodeOutlined />}>{websocket.code}</Pill>
+						<Pill icon={<CodeIcon className="size-icon-sm" />}>
+							{websocket.code}
+						</Pill>
 					</Tooltip>
 				</section>
 
diff --git a/site/src/pages/TemplatePage/TemplatePageHeader.tsx b/site/src/pages/TemplatePage/TemplatePageHeader.tsx
index 48fe621f2b..834c83905c 100644
--- a/site/src/pages/TemplatePage/TemplatePageHeader.tsx
+++ b/site/src/pages/TemplatePage/TemplatePageHeader.tsx
@@ -1,7 +1,6 @@
 import AddIcon from "@mui/icons-material/AddOutlined";
 import EditIcon from "@mui/icons-material/EditOutlined";
 import CopyIcon from "@mui/icons-material/FileCopyOutlined";
-import SettingsIcon from "@mui/icons-material/SettingsOutlined";
 import Button from "@mui/material/Button";
 import { workspaces } from "api/queries/workspaces";
 import type {
@@ -29,6 +28,7 @@ import {
 } from "components/PageHeader/PageHeader";
 import { Pill } from "components/Pill/Pill";
 import { Stack } from "components/Stack/Stack";
+import { SettingsIcon } from "lucide-react";
 import { TrashIcon } from "lucide-react";
 import { EllipsisVertical } from "lucide-react";
 import { linkToTemplate, useLinks } from "modules/navigation";
@@ -79,7 +79,7 @@ const TemplateMenu: FC<TemplateMenuProps> = ({
 					<DropdownMenuItem
 						onClick={() => navigate(`${templateLink}/settings`)}
 					>
-						<SettingsIcon />
+						<SettingsIcon className="size-icon-sm" />
 						Settings
 					</DropdownMenuItem>
 
diff --git a/site/src/pages/TemplateSettingsPage/Sidebar.tsx b/site/src/pages/TemplateSettingsPage/Sidebar.tsx
index f8b41f7829..1aaa426061 100644
--- a/site/src/pages/TemplateSettingsPage/Sidebar.tsx
+++ b/site/src/pages/TemplateSettingsPage/Sidebar.tsx
@@ -1,5 +1,3 @@
-import VariablesIcon from "@mui/icons-material/CodeOutlined";
-import ScheduleIcon from "@mui/icons-material/TimerOutlined";
 import type { Template } from "api/typesGenerated";
 import { Avatar } from "components/Avatar/Avatar";
 import {
@@ -7,6 +5,8 @@ import {
 	SidebarHeader,
 	SidebarNavItem,
 } from "components/Sidebar/Sidebar";
+import { CodeIcon as VariablesIcon } from "lucide-react";
+import { TimerIcon as ScheduleIcon } from "lucide-react";
 import { SettingsIcon } from "lucide-react";
 import { LockIcon } from "lucide-react";
 import { linkToTemplate, useLinks } from "modules/navigation";
diff --git a/site/src/pages/WorkspaceSettingsPage/Sidebar.tsx b/site/src/pages/WorkspaceSettingsPage/Sidebar.tsx
index 604fc2ed70..91aea9ac9c 100644
--- a/site/src/pages/WorkspaceSettingsPage/Sidebar.tsx
+++ b/site/src/pages/WorkspaceSettingsPage/Sidebar.tsx
@@ -1,6 +1,3 @@
-import ParameterIcon from "@mui/icons-material/CodeOutlined";
-import GeneralIcon from "@mui/icons-material/SettingsOutlined";
-import ScheduleIcon from "@mui/icons-material/TimerOutlined";
 import type { Workspace } from "api/typesGenerated";
 import { Avatar } from "components/Avatar/Avatar";
 import {
@@ -8,6 +5,9 @@ import {
 	SidebarHeader,
 	SidebarNavItem,
 } from "components/Sidebar/Sidebar";
+import { CodeIcon as ParameterIcon } from "lucide-react";
+import { SettingsIcon as GeneralIcon } from "lucide-react";
+import { TimerIcon as ScheduleIcon } from "lucide-react";
 import type { FC } from "react";
 
 interface SidebarProps {
diff --git a/site/src/pages/WorkspacesPage/BatchDeleteConfirmation.tsx b/site/src/pages/WorkspacesPage/BatchDeleteConfirmation.tsx
index a4a79c0c1e..587cecf25e 100644
--- a/site/src/pages/WorkspacesPage/BatchDeleteConfirmation.tsx
+++ b/site/src/pages/WorkspacesPage/BatchDeleteConfirmation.tsx
@@ -1,6 +1,4 @@
 import { type Interpolation, type Theme, useTheme } from "@emotion/react";
-import PersonOutlinedIcon from "@mui/icons-material/PersonOutlined";
-import ScheduleIcon from "@mui/icons-material/Schedule";
 import { visuallyHidden } from "@mui/utils";
 import type { Workspace } from "api/typesGenerated";
 import { ConfirmDialog } from "components/Dialogs/ConfirmDialog/ConfirmDialog";
@@ -8,6 +6,7 @@ import { ExternalImage } from "components/ExternalImage/ExternalImage";
 import { Stack } from "components/Stack/Stack";
 import dayjs from "dayjs";
 import relativeTime from "dayjs/plugin/relativeTime";
+import { ClockIcon, UserIcon } from "lucide-react";
 import { type FC, type ReactNode, useState } from "react";
 import { getResourceIconPath } from "utils/workspace";
 
@@ -190,7 +189,7 @@ const Workspaces: FC<StageProps> = ({ workspaces }) => {
 									>
 										{dayjs(workspace.last_used_at).fromNow()}
 									</span>
-									<ScheduleIcon css={styles.summaryIcon} />
+									<ClockIcon className="size-icon-xs" />
 								</Stack>
 							</Stack>
 						</Stack>
@@ -209,7 +208,7 @@ const Workspaces: FC<StageProps> = ({ workspaces }) => {
 				</Stack>
 				{mostRecent && (
 					<Stack direction="row" alignItems="center" spacing={1}>
-						<ScheduleIcon css={styles.summaryIcon} />
+						<ClockIcon className="size-icon-xs" />
 						<span>Last used {dayjs(mostRecent.last_used_at).fromNow()}</span>
 					</Stack>
 				)}
@@ -264,10 +263,8 @@ const Resources: FC<StageProps> = ({ workspaces }) => {
 };
 
 const PersonIcon: FC = () => {
-	// This size doesn't match the rest of the icons because MUI is just really
-	// inconsistent. We have to make it bigger than the rest, and pull things in
-	// on the sides to compensate.
-	return <PersonOutlinedIcon css={{ width: 18, height: 18, margin: -1 }} />;
+	// Using the Lucide icon with appropriate size class
+	return <UserIcon className="size-icon-sm" css={{ margin: -1 }} />;
 };
 
 const styles = {
diff --git a/site/src/pages/WorkspacesPage/BatchUpdateConfirmation.tsx b/site/src/pages/WorkspacesPage/BatchUpdateConfirmation.tsx
index bd4fef445b..ac36009dac 100644
--- a/site/src/pages/WorkspacesPage/BatchUpdateConfirmation.tsx
+++ b/site/src/pages/WorkspacesPage/BatchUpdateConfirmation.tsx
@@ -1,8 +1,5 @@
 import type { Interpolation, Theme } from "@emotion/react";
 import InstallDesktopIcon from "@mui/icons-material/InstallDesktop";
-import PersonOutlinedIcon from "@mui/icons-material/PersonOutlined";
-import ScheduleIcon from "@mui/icons-material/Schedule";
-import SettingsSuggestIcon from "@mui/icons-material/SettingsSuggest";
 import { API } from "api/api";
 import type { TemplateVersion, Workspace } from "api/typesGenerated";
 import { ErrorAlert } from "components/Alert/ErrorAlert";
@@ -12,6 +9,7 @@ import { MemoizedInlineMarkdown } from "components/Markdown/Markdown";
 import { Stack } from "components/Stack/Stack";
 import dayjs from "dayjs";
 import relativeTime from "dayjs/plugin/relativeTime";
+import { ClockIcon, SettingsIcon, UserIcon } from "lucide-react";
 import { type FC, type ReactNode, useEffect, useMemo, useState } from "react";
 import { useQueries } from "react-query";
 
@@ -293,7 +291,7 @@ const DormantWorkspaces: FC<DormantWorkspacesProps> = ({ workspaces }) => {
 									</span>
 								</Stack>
 								<Stack direction="row" alignItems="center" spacing={1}>
-									<ScheduleIcon css={styles.summaryIcon} />
+									<ClockIcon className="size-icon-xs" />
 									<span
 										css={{ whiteSpace: "nowrap", textOverflow: "ellipsis" }}
 									>
@@ -317,7 +315,7 @@ const DormantWorkspaces: FC<DormantWorkspacesProps> = ({ workspaces }) => {
 				</Stack>
 				{mostRecent && (
 					<Stack direction="row" alignItems="center" spacing={1}>
-						<ScheduleIcon css={styles.summaryIcon} />
+						<ClockIcon className="size-icon-xs" />
 						<span>Last used {lastUsed(mostRecent.last_used_at)}</span>
 					</Stack>
 				)}
@@ -358,7 +356,7 @@ const Updates: FC<UpdatesProps> = ({ workspaces, updates, error }) => {
 				</Stack>
 				{updateCount && (
 					<Stack direction="row" alignItems="center" spacing={1}>
-						<SettingsSuggestIcon css={styles.summaryIcon} />
+						<SettingsIcon className="size-icon-xs" />
 						<span>{updateCount}</span>
 					</Stack>
 				)}
@@ -433,10 +431,8 @@ const lastUsed = (time: string) => {
 };
 
 const PersonIcon: FC = () => {
-	// This size doesn't match the rest of the icons because MUI is just really
-	// inconsistent. We have to make it bigger than the rest, and pull things in
-	// on the sides to compensate.
-	return <PersonOutlinedIcon css={{ width: 18, height: 18, margin: -1 }} />;
+	// Using the Lucide icon with appropriate size class
+	return <UserIcon className="size-icon-sm" css={{ margin: -1 }} />;
 };
 
 const styles = {