diff --git a/site/src/components/FileUpload/FileUpload.tsx b/site/src/components/FileUpload/FileUpload.tsx
index 0801439bf4db1..79535debb56ee 100644
--- a/site/src/components/FileUpload/FileUpload.tsx
+++ b/site/src/components/FileUpload/FileUpload.tsx
@@ -1,11 +1,9 @@
 import { type Interpolation, type Theme, css } from "@emotion/react";
-import UploadIcon from "@mui/icons-material/CloudUploadOutlined";
-import RemoveIcon from "@mui/icons-material/DeleteOutline";
-import FileIcon from "@mui/icons-material/FolderOutlined";
 import CircularProgress from "@mui/material/CircularProgress";
 import IconButton from "@mui/material/IconButton";
 import { Stack } from "components/Stack/Stack";
 import { useClickable } from "hooks/useClickable";
+import { CloudUploadIcon, FolderIcon, TrashIcon } from "lucide-react";
 import { type DragEvent, type FC, type ReactNode, useRef } from "react";
 
 export interface FileUploadProps {
@@ -44,12 +42,12 @@ export const FileUpload: FC<FileUploadProps> = ({
 				alignItems="center"
 			>
 				<Stack direction="row" alignItems="center">
-					<FileIcon />
+					<FolderIcon className="size-icon-sm" />
 					<span>{file.name}</span>
 				</Stack>
 
 				<IconButton title={removeLabel} size="small" onClick={onRemove}>
-					<RemoveIcon />
+					<TrashIcon className="size-icon-sm" />
 				</IconButton>
 			</Stack>
 		);
@@ -68,7 +66,7 @@ export const FileUpload: FC<FileUploadProps> = ({
 						{isUploading ? (
 							<CircularProgress size={32} />
 						) : (
-							<UploadIcon css={styles.icon} />
+							<CloudUploadIcon className="size-16" />
 						)}
 					</div>
 
@@ -166,10 +164,6 @@ const styles = {
 		justifyContent: "center",
 	},
 
-	icon: {
-		fontSize: 64,
-	},
-
 	title: {
 		fontSize: 16,
 		lineHeight: "1",
diff --git a/site/src/components/FullPageLayout/Topbar.tsx b/site/src/components/FullPageLayout/Topbar.tsx
index 4b8c334b7dea7..766a83295d124 100644
--- a/site/src/components/FullPageLayout/Topbar.tsx
+++ b/site/src/components/FullPageLayout/Topbar.tsx
@@ -11,6 +11,7 @@ import {
 	cloneElement,
 	forwardRef,
 } from "react";
+import { cn } from "utils/cn";
 
 export const Topbar: FC<HTMLAttributes<HTMLElement>> = (props) => {
 	const theme = useTheme();
@@ -89,7 +90,7 @@ type TopbarIconProps = HTMLAttributes<HTMLOrSVGElement>;
 
 export const TopbarIcon = forwardRef<HTMLOrSVGElement, TopbarIconProps>(
 	(props: TopbarIconProps, ref) => {
-		const { children, ...restProps } = props;
+		const { children, className, ...restProps } = props;
 		const theme = useTheme();
 
 		return cloneElement(
@@ -101,7 +102,10 @@ export const TopbarIcon = forwardRef<HTMLOrSVGElement, TopbarIconProps>(
 			{
 				...restProps,
 				ref,
-				className: css({ fontSize: 16, color: theme.palette.text.disabled }),
+				className: cn([
+					css({ fontSize: 16, color: theme.palette.text.disabled }),
+					"size-icon-sm",
+				]),
 			},
 		);
 	},
diff --git a/site/src/pages/GroupsPage/GroupPage.tsx b/site/src/pages/GroupsPage/GroupPage.tsx
index 2d1469ed696dd..365f105f6ffb4 100644
--- a/site/src/pages/GroupsPage/GroupPage.tsx
+++ b/site/src/pages/GroupsPage/GroupPage.tsx
@@ -1,5 +1,4 @@
 import type { Interpolation, Theme } from "@emotion/react";
-import DeleteOutline from "@mui/icons-material/DeleteOutline";
 import PersonAdd from "@mui/icons-material/PersonAdd";
 import SettingsOutlined from "@mui/icons-material/SettingsOutlined";
 import LoadingButton from "@mui/lab/LoadingButton";
@@ -51,6 +50,7 @@ import {
 	TableToolbar,
 } from "components/TableToolbar/TableToolbar";
 import { MemberAutocomplete } from "components/UserAutocomplete/UserAutocomplete";
+import { TrashIcon } from "lucide-react";
 import { EllipsisVertical } from "lucide-react";
 import { type FC, useState } from "react";
 import { Helmet } from "react-helmet-async";
@@ -134,7 +134,7 @@ const GroupPage: FC = () => {
 							onClick={() => {
 								setIsDeletingGroup(true);
 							}}
-							startIcon={<DeleteOutline />}
+							startIcon={<TrashIcon className="size-icon-sm" />}
 							css={styles.removeButton}
 						>
 							Delete&hellip;
diff --git a/site/src/pages/UserSettingsPage/TokensPage/TokensPageView.tsx b/site/src/pages/UserSettingsPage/TokensPage/TokensPageView.tsx
index 26761367bd361..f9a2467196ecb 100644
--- a/site/src/pages/UserSettingsPage/TokensPage/TokensPageView.tsx
+++ b/site/src/pages/UserSettingsPage/TokensPage/TokensPageView.tsx
@@ -1,5 +1,4 @@
 import { useTheme } from "@emotion/react";
-import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline";
 import IconButton from "@mui/material/IconButton";
 import Table from "@mui/material/Table";
 import TableBody from "@mui/material/TableBody";
@@ -15,6 +14,7 @@ import { TableEmpty } from "components/TableEmpty/TableEmpty";
 import { TableLoader } from "components/TableLoader/TableLoader";
 import dayjs from "dayjs";
 import relativeTime from "dayjs/plugin/relativeTime";
+import { TrashIcon } from "lucide-react";
 import type { FC, ReactNode } from "react";
 
 dayjs.extend(relativeTime);
@@ -115,7 +115,7 @@ export const TokensPageView: FC<TokensPageViewProps> = ({
 														size="medium"
 														aria-label="Delete token"
 													>
-														<DeleteOutlineIcon />
+														<TrashIcon className="size-icon-sm" />
 													</IconButton>
 												</span>
 											</TableCell>
diff --git a/site/src/pages/WorkspacePage/WorkspaceTopbar.tsx b/site/src/pages/WorkspacePage/WorkspaceTopbar.tsx
index a39cf6d8b13ca..2af8d694e120e 100644
--- a/site/src/pages/WorkspacePage/WorkspaceTopbar.tsx
+++ b/site/src/pages/WorkspacePage/WorkspaceTopbar.tsx
@@ -1,6 +1,5 @@
 import { type Interpolation, type Theme, useTheme } from "@emotion/react";
 import ArrowBackOutlined from "@mui/icons-material/ArrowBackOutlined";
-import DeleteOutline from "@mui/icons-material/DeleteOutline";
 import QuotaIcon from "@mui/icons-material/MonetizationOnOutlined";
 import Link from "@mui/material/Link";
 import Tooltip from "@mui/material/Tooltip";
@@ -18,6 +17,7 @@ import {
 } from "components/FullPageLayout/Topbar";
 import { HelpTooltipContent } from "components/HelpTooltip/HelpTooltip";
 import { Popover, PopoverTrigger } from "components/deprecated/Popover/Popover";
+import { TrashIcon } from "lucide-react";
 import { useDashboard } from "modules/dashboard/useDashboard";
 import { linkToTemplate, useLinks } from "modules/navigation";
 import { WorkspaceStatusBadge } from "modules/workspaces/WorkspaceStatusBadge/WorkspaceStatusBadge";
@@ -199,7 +199,7 @@ export const WorkspaceTopbar: FC<WorkspaceProps> = ({
 				{shouldDisplayDormantData && (
 					<TopbarData>
 						<TopbarIcon>
-							<DeleteOutline />
+							<TrashIcon />
 						</TopbarIcon>
 						<Link
 							component={RouterLink}

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<title>pFad - Phonifier reborn</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
</head>
<body>
<h1>Pfad - The Proxy pFad of &#169; 2024 Garber Painting. All rights reserved.</h1>


<!-- Disclaimer -->
<p>Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.</p>
<br>
<p>Alternative Proxies:</p><p><a href="http://rainy.clevelandohioweatherforecast.com/php-proxy/index.php?q=https://patch-diff.githubusercontent.com/raw/coder/coder/pull/17748.diff" target="_blank">Alternative Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/index.php?u=https://patch-diff.githubusercontent.com/raw/coder/coder/pull/17748.diff" target="_blank">pFad Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/v3index.php?u=https://patch-diff.githubusercontent.com/raw/coder/coder/pull/17748.diff" target="_blank">pFad v3 Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/v4index.php?u=https://patch-diff.githubusercontent.com/raw/coder/coder/pull/17748.diff" target="_blank">pFad v4 Proxy</a></p></body>
</html>