chore: replace MUI icons with Lucide icons - 16 (#17862)

Close -> XIcon
WarningOutlined -> TriangleAlertIcon
FileCopyOutlined -> CopyIcon
KeyboardArrowRight -> ChevronRightIcon
Add -> PlusIcon
Send -> SendIcon
ChevronRight -> ChevronRightIcon
MoreHorizOutlined -> EllipsisIcon

site/src/modules/provisioners/ProvisionerTag.tsx

@@ -1,10 +1,7 @@
 import type { Interpolation, Theme } from "@emotion/react";
-import CloseIcon from "@mui/icons-material/Close";
 import IconButton from "@mui/material/IconButton";
 import { Pill } from "components/Pill/Pill";
-import { CircleCheck as CircleCheckIcon } from "lucide-react";
-import { CircleMinus as CircleMinusIcon } from "lucide-react";
-import { Tag as TagIcon } from "lucide-react";
+import { CircleCheckIcon, CircleMinusIcon, TagIcon, XIcon } from "lucide-react";
 import type { ComponentProps, FC } from "react";
 
 const parseBool = (s: string): { valid: boolean; value: boolean } => {
@@ -51,7 +48,7 @@ export const ProvisionerTag: FC<ProvisionerTagProps> = ({
 					onDelete(tagName);
 				}}
 			>
-				<CloseIcon fontSize="inherit" css={{ width: 14, height: 14 }} />
+				<XIcon className="size-icon-xs" />
 				<span className="sr-only">Delete {tagName}</span>
 			</IconButton>
 		</>

site/src/modules/templates/TemplateFiles/TemplateFileTree.tsx

@@ -1,11 +1,11 @@
 import { css } from "@emotion/react";
-import ChevronRightIcon from "@mui/icons-material/ChevronRight";
 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 { type CSSProperties, type ElementType, type FC, useState } from "react";
 import type { FileTree } from "utils/filetree";
 

site/src/modules/workspaces/WorkspaceTiming/Chart/Blocks.tsx

@@ -1,5 +1,5 @@
 import type { Interpolation, Theme } from "@emotion/react";
-import MoreHorizOutlined from "@mui/icons-material/MoreHorizOutlined";
+import { EllipsisIcon } from "lucide-react";
 import { type FC, useEffect, useRef, useState } from "react";
 
 const spaceBetweenBlocks = 4;
@@ -37,7 +37,7 @@ export const Blocks: FC<BlocksProps> = ({ count }) => {
 			))}
 			{!hasSpacing && (
 				<div css={styles.more}>
-					<MoreHorizOutlined />
+					<EllipsisIcon className="size-icon-sm" />
 				</div>
 			)}
 		</div>

site/src/modules/workspaces/WorkspaceTiming/Chart/Chart.tsx

@@ -1,9 +1,9 @@
 import type { Interpolation, Theme } from "@emotion/react";
-import ChevronRight from "@mui/icons-material/ChevronRight";
 import {
 	SearchField,
 	type SearchFieldProps,
 } from "components/SearchField/SearchField";
+import { ChevronRightIcon } from "lucide-react";
 import type { FC, HTMLProps } from "react";
 import React, { useEffect, useRef } from "react";
 import type { BarColors } from "./Bar";
@@ -81,7 +81,7 @@ export const ChartBreadcrumbs: FC<ChartBreadcrumbsProps> = ({
 						</li>
 						{!isLast && (
 							<li role="presentation">
-								<ChevronRight />
+								<ChevronRightIcon />
 							</li>
 						)}
 					</React.Fragment>

site/src/pages/ChatPage/ChatLanding.tsx

@@ -1,5 +1,4 @@
 import { useTheme } from "@emotion/react";
-import SendIcon from "@mui/icons-material/Send";
 import Button from "@mui/material/Button";
 import IconButton from "@mui/material/IconButton";
 import Paper from "@mui/material/Paper";
@@ -9,6 +8,7 @@ import { createChat } from "api/queries/chats";
 import type { Chat } from "api/typesGenerated";
 import { Margins } from "components/Margins/Margins";
 import { useAuthenticated } from "hooks";
+import { SendIcon } from "lucide-react";
 import { type FC, type FormEvent, useState } from "react";
 import { useMutation, useQueryClient } from "react-query";
 import { useNavigate } from "react-router-dom";

site/src/pages/ChatPage/ChatLayout.tsx

@@ -1,5 +1,4 @@
 import { useTheme } from "@emotion/react";
-import AddIcon from "@mui/icons-material/Add";
 import Button from "@mui/material/Button";
 import List from "@mui/material/List";
 import ListItem from "@mui/material/ListItem";
@@ -13,6 +12,7 @@ import { ErrorAlert } from "components/Alert/ErrorAlert";
 import { Loader } from "components/Loader/Loader";
 import { Margins } from "components/Margins/Margins";
 import { useAgenticChat } from "contexts/useAgenticChat";
+import { PlusIcon } from "lucide-react";
 import {
 	type FC,
 	type PropsWithChildren,
@@ -169,7 +169,7 @@ export const ChatLayout: FC = () => {
 					<Button
 						variant="outlined"
 						size="small"
-						startIcon={<AddIcon fontSize="small" />}
+						startIcon={<PlusIcon className="size-icon-sm" />}
 						onClick={handleNewChat}
 						disabled={createChatMutation.isLoading}
 						css={{

site/src/pages/ChatPage/ChatMessages.tsx

@@ -1,6 +1,5 @@
 import { type Message, useChat } from "@ai-sdk/react";
 import { type Theme, keyframes, useTheme } from "@emotion/react";
-import SendIcon from "@mui/icons-material/Send";
 import IconButton from "@mui/material/IconButton";
 import Paper from "@mui/material/Paper";
 import TextField from "@mui/material/TextField";
@@ -8,6 +7,7 @@ import { getChatMessages } from "api/queries/chats";
 import type { ChatMessage, CreateChatMessageRequest } from "api/typesGenerated";
 import { ErrorAlert } from "components/Alert/ErrorAlert";
 import { Loader } from "components/Loader/Loader";
+import { SendIcon } from "lucide-react";
 import {
 	type FC,
 	type KeyboardEvent,

site/src/pages/CreateTemplatePage/BuildLogsDrawer.tsx

@@ -1,5 +1,4 @@
 import type { Interpolation, Theme } from "@emotion/react";
-import WarningOutlined from "@mui/icons-material/WarningOutlined";
 import Button from "@mui/material/Button";
 import Drawer from "@mui/material/Drawer";
 import IconButton from "@mui/material/IconButton";
@@ -7,7 +6,7 @@ import { visuallyHidden } from "@mui/utils";
 import { JobError } from "api/queries/templates";
 import type { TemplateVersion } from "api/typesGenerated";
 import { Loader } from "components/Loader/Loader";
-import { X as XIcon } from "lucide-react";
+import { TriangleAlertIcon, XIcon } from "lucide-react";
 import { AlertVariant } from "modules/provisioners/ProvisionerAlert";
 import { ProvisionerStatusAlert } from "modules/provisioners/ProvisionerStatusAlert";
 import { useWatchVersionLogs } from "modules/templates/useWatchVersionLogs";
@@ -66,7 +65,7 @@ export const BuildLogsDrawer: FC<BuildLogsDrawerProps> = ({
 				<header css={styles.header}>
 					<h3 css={styles.title}>Creating template...</h3>
 					<IconButton size="small" onClick={drawerProps.onClose}>
-						<XIcon css={styles.closeIcon} />
+						<XIcon className="size-icon-sm" />
 						<span style={visuallyHidden}>Close build logs</span>
 					</IconButton>
 				</header>
@@ -113,7 +112,7 @@ const MissingVariablesBanner: FC<MissingVariablesBannerProps> = ({
 	return (
 		<div css={bannerStyles.root}>
 			<div css={bannerStyles.content}>
-				<WarningOutlined css={bannerStyles.icon} />
+				<TriangleAlertIcon className="size-icon-lg" css={bannerStyles.icon} />
 				<h4 css={bannerStyles.title}>Missing variables</h4>
 				<p css={bannerStyles.description}>
 					During the build process, we identified some missing variables. Rest
@@ -152,9 +151,6 @@ const styles = {
 		fontWeight: 500,
 		fontSize: 16,
 	},
-	closeIcon: {
-		fontSize: 20,
-	},
 	logs: (theme) => ({
 		flex: 1,
 		overflow: "auto",
@@ -177,7 +173,6 @@ const bannerStyles = {
 		maxWidth: 360,
 	},
 	icon: (theme) => ({
-		fontSize: 32,
 		color: theme.roles.warning.fill.outline,
 	}),
 	title: {

site/src/pages/DeploymentSettingsPage/OAuth2AppsSettingsPage/EditOAuth2AppPageView.tsx

@@ -1,5 +1,4 @@
 import { type Interpolation, type Theme, useTheme } from "@emotion/react";
-import CopyIcon from "@mui/icons-material/FileCopyOutlined";
 import Divider from "@mui/material/Divider";
 import Table from "@mui/material/Table";
 import TableBody from "@mui/material/TableBody";
@@ -24,6 +23,7 @@ import {
 import { Spinner } from "components/Spinner/Spinner";
 import { Stack } from "components/Stack/Stack";
 import { TableLoader } from "components/TableLoader/TableLoader";
+import { CopyIcon } from "lucide-react";
 import { ChevronLeftIcon } from "lucide-react";
 import { type FC, useState } from "react";
 import { Link as RouterLink, useSearchParams } from "react-router-dom";
@@ -149,21 +149,20 @@ export const EditOAuth2AppPageView: FC<EditOAuth2AppProps> = ({
 							<dt>Client ID</dt>
 							<dd>
 								<CopyableValue value={app.id}>
-									{app.id} <CopyIcon css={{ width: 16, height: 16 }} />
+									{app.id} <CopyIcon className="size-icon-xs" />
 								</CopyableValue>
 							</dd>
 							<dt>Authorization URL</dt>
 							<dd>
 								<CopyableValue value={app.endpoints.authorization}>
 									{app.endpoints.authorization}{" "}
-									<CopyIcon css={{ width: 16, height: 16 }} />
+									<CopyIcon className="size-icon-xs" />
 								</CopyableValue>
 							</dd>
 							<dt>Token URL</dt>
 							<dd>
 								<CopyableValue value={app.endpoints.token}>
-									{app.endpoints.token}{" "}
-									<CopyIcon css={{ width: 16, height: 16 }} />
+									{app.endpoints.token} <CopyIcon className="size-icon-xs" />
 								</CopyableValue>
 							</dd>
 						</dl>

site/src/pages/DeploymentSettingsPage/OAuth2AppsSettingsPage/OAuth2AppsSettingsPageView.tsx

@@ -1,5 +1,4 @@
 import { useTheme } from "@emotion/react";
-import KeyboardArrowRight from "@mui/icons-material/KeyboardArrowRight";
 import Button from "@mui/material/Button";
 import Table from "@mui/material/Table";
 import TableBody from "@mui/material/TableBody";
@@ -18,7 +17,7 @@ import {
 import { Stack } from "components/Stack/Stack";
 import { TableLoader } from "components/TableLoader/TableLoader";
 import { useClickableTableRow } from "hooks/useClickableTableRow";
-import { PlusIcon } from "lucide-react";
+import { ChevronRightIcon, PlusIcon } from "lucide-react";
 import type { FC } from "react";
 import { Link, useNavigate } from "react-router-dom";
 
@@ -111,13 +110,7 @@ const OAuth2AppRow: FC<OAuth2AppRowProps> = ({ app }) => {
 
 			<TableCell>
 				<div css={{ display: "flex", paddingLeft: 16 }}>
-					<KeyboardArrowRight
-						css={{
-							color: theme.palette.text.secondary,
-							width: 20,
-							height: 20,
-						}}
-					/>
+					<ChevronRightIcon className="size-icon-sm" />
 				</div>
 			</TableCell>
 		</TableRow>

site/src/pages/GroupsPage/GroupPage.tsx

@@ -1,5 +1,4 @@
 import type { Interpolation, Theme } from "@emotion/react";
-import PersonAdd from "@mui/icons-material/PersonAdd";
 import MuiButton from "@mui/material/Button";
 import { getErrorMessage } from "api/errors";
 import {
@@ -49,6 +48,7 @@ import {
 	TableToolbar,
 } from "components/TableToolbar/TableToolbar";
 import { MemberAutocomplete } from "components/UserAutocomplete/UserAutocomplete";
+import { UserPlusIcon } from "lucide-react";
 import { SettingsIcon } from "lucide-react";
 import { EllipsisVertical, TrashIcon } from "lucide-react";
 import { type FC, useState } from "react";
@@ -281,7 +281,7 @@ const AddGroupMember: FC<AddGroupMemberProps> = ({
 
 				<Button disabled={!selectedUser || isLoading} type="submit">
 					<Spinner loading={isLoading}>
-						<PersonAdd />
+						<UserPlusIcon className="size-icon-sm" />
 					</Spinner>
 					Add user
 				</Button>

site/src/pages/GroupsPage/GroupsPage.tsx

@@ -1,4 +1,3 @@
-import GroupAdd from "@mui/icons-material/GroupAddOutlined";
 import { getErrorMessage } from "api/errors";
 import { groupsByOrganization } from "api/queries/groups";
 import { organizationsPermissions } from "api/queries/organizations";
@@ -12,6 +11,7 @@ import {
 	SettingsHeaderTitle,
 } from "components/SettingsHeader/SettingsHeader";
 import { Stack } from "components/Stack/Stack";
+import { PlusIcon } from "lucide-react";
 import { useFeatureVisibility } from "modules/dashboard/useFeatureVisibility";
 import { RequirePermission } from "modules/permissions/RequirePermission";
 import { type FC, useEffect } from "react";
@@ -95,7 +95,7 @@ const GroupsPage: FC = () => {
 				{groupsEnabled && permissions.createGroup && (
 					<Button asChild>
 						<RouterLink to="create">
-							<GroupAdd />
+							<PlusIcon className="size-icon-sm" />
 							Create group
 						</RouterLink>
 					</Button>

site/src/pages/GroupsPage/GroupsPageView.tsx

@@ -1,5 +1,4 @@
 import type { Interpolation, Theme } from "@emotion/react";
-import KeyboardArrowRight from "@mui/icons-material/KeyboardArrowRight";
 import Skeleton from "@mui/material/Skeleton";
 import type { Group } from "api/typesGenerated";
 import { Avatar } from "components/Avatar/Avatar";
@@ -23,7 +22,7 @@ import {
 	TableRowSkeleton,
 } from "components/TableLoader/TableLoader";
 import { useClickableTableRow } from "hooks";
-import { PlusIcon } from "lucide-react";
+import { ChevronRightIcon, PlusIcon } from "lucide-react";
 import type { FC } from "react";
 import { Link as RouterLink, useNavigate } from "react-router-dom";
 import { docs } from "utils/docs";
@@ -158,7 +157,7 @@ const GroupRow: FC<GroupRowProps> = ({ group }) => {
 
 			<TableCell>
 				<div css={styles.arrowCell}>
-					<KeyboardArrowRight css={styles.arrowRight} />
+					<ChevronRightIcon className="size-icon-sm" />
 				</div>
 			</TableCell>
 		</TableRow>

site/src/pages/OrganizationSettingsPage/OrganizationMembersPageView.tsx

@@ -1,4 +1,3 @@
-import PersonAdd from "@mui/icons-material/PersonAdd";
 import { getErrorMessage } from "api/errors";
 import type {
 	Group,
@@ -35,6 +34,7 @@ import {
 } from "components/Table/Table";
 import { UserAutocomplete } from "components/UserAutocomplete/UserAutocomplete";
 import type { PaginationResultInfo } from "hooks/usePaginatedQuery";
+import { UserPlusIcon } from "lucide-react";
 import { EllipsisVertical, TriangleAlert } from "lucide-react";
 import { UserGroupsCell } from "pages/UsersPage/UsersTable/UserGroupsCell";
 import { type FC, useState } from "react";
@@ -243,7 +243,7 @@ const AddOrganizationMember: FC<AddOrganizationMemberProps> = ({
 					variant="outline"
 				>
 					<Spinner loading={isLoading}>
-						<PersonAdd />
+						<UserPlusIcon className="size-icon-sm" />
 					</Spinner>
 					Add user
 				</Button>

site/src/pages/TemplatePage/TemplateEmbedPage/TemplateEmbedPage.tsx

@@ -1,4 +1,3 @@
-import FileCopyOutlined from "@mui/icons-material/FileCopyOutlined";
 import Button from "@mui/material/Button";
 import FormControlLabel from "@mui/material/FormControlLabel";
 import Radio from "@mui/material/Radio";
@@ -9,7 +8,7 @@ import { FormSection, VerticalForm } from "components/Form/Form";
 import { Loader } from "components/Loader/Loader";
 import { RichParameterInput } from "components/RichParameterInput/RichParameterInput";
 import { useClipboard } from "hooks/useClipboard";
-import { CheckIcon } from "lucide-react";
+import { CheckIcon, CopyIcon } from "lucide-react";
 import { useTemplateLayoutContext } from "pages/TemplatePage/TemplateLayout";
 import { type FC, useEffect, useState } from "react";
 import { Helmet } from "react-helmet-async";
@@ -189,7 +188,7 @@ export const TemplateEmbedPageView: FC<TemplateEmbedPageViewProps> = ({
 									clipboard.showCopiedSuccess ? (
 										<CheckIcon className="size-icon-sm" />
 									) : (
-										<FileCopyOutlined />
+										<CopyIcon className="size-icon-sm" />
 									)
 								}
 								variant="contained"

site/src/pages/TemplatePage/TemplatePageHeader.tsx

@@ -1,5 +1,4 @@
 import EditIcon from "@mui/icons-material/EditOutlined";
-import CopyIcon from "@mui/icons-material/FileCopyOutlined";
 import Button from "@mui/material/Button";
 import { workspaces } from "api/queries/workspaces";
 import type {
@@ -27,6 +26,7 @@ import {
 } from "components/PageHeader/PageHeader";
 import { Pill } from "components/Pill/Pill";
 import { Stack } from "components/Stack/Stack";
+import { CopyIcon } from "lucide-react";
 import {
 	EllipsisVertical,
 	PlusIcon,
@@ -99,7 +99,7 @@ const TemplateMenu: FC<TemplateMenuProps> = ({
 							navigate(`/templates/new?fromTemplate=${templateId}`)
 						}
 					>
-						<CopyIcon />
+						<CopyIcon className="size-icon-sm" />
 						Duplicate&hellip;
 					</DropdownMenuItem>
 					<DropdownMenuSeparator />

site/src/pages/TemplateSettingsPage/TemplatePermissionsPage/TemplatePermissionsPageView.tsx

@@ -1,5 +1,4 @@
 import type { Interpolation, Theme } from "@emotion/react";
-import PersonAdd from "@mui/icons-material/PersonAdd";
 import MenuItem from "@mui/material/MenuItem";
 import Select, { type SelectProps } from "@mui/material/Select";
 import Table from "@mui/material/Table";
@@ -31,6 +30,7 @@ import { PageHeader, PageHeaderTitle } from "components/PageHeader/PageHeader";
 import { Spinner } from "components/Spinner/Spinner";
 import { Stack } from "components/Stack/Stack";
 import { TableLoader } from "components/TableLoader/TableLoader";
+import { UserPlusIcon } from "lucide-react";
 import { EllipsisVertical } from "lucide-react";
 import { type FC, useState } from "react";
 import { getGroupSubtitle } from "utils/groups";
@@ -121,7 +121,7 @@ const AddTemplateUserOrGroup: FC<AddTemplateUserOrGroupProps> = ({
 					type="submit"
 				>
 					<Spinner loading={isLoading}>
-						<PersonAdd />
+						<UserPlusIcon className="size-icon-sm" />
 					</Spinner>
 					Add member
 				</Button>

site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx

@@ -1,5 +1,4 @@
 import { type Interpolation, type Theme, useTheme } from "@emotion/react";
-import WarningOutlined from "@mui/icons-material/WarningOutlined";
 import Button from "@mui/material/Button";
 import IconButton from "@mui/material/IconButton";
 import Tooltip from "@mui/material/Tooltip";
@@ -24,6 +23,7 @@ import {
 } from "components/FullPageLayout/Topbar";
 import { displayError } from "components/GlobalSnackbar/utils";
 import { Loader } from "components/Loader/Loader";
+import { TriangleAlertIcon } from "lucide-react";
 import { ChevronLeftIcon } from "lucide-react";
 import { PlayIcon, PlusIcon, XIcon } from "lucide-react";
 import { linkToTemplate, useLinks } from "modules/navigation";
@@ -461,11 +461,11 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
 												textAlign: "center",
 											}}
 										>
-											<WarningOutlined
+											<TriangleAlertIcon
 												css={{
-													fontSize: 48,
 													color: theme.roles.warning.fill.outline,
 												}}
+												className="size-icon-lg"
 											/>
 											<p
 												css={{

site/src/pages/TemplateVersionPage/TemplateVersionPageView.tsx

@@ -1,4 +1,3 @@
-import AddIcon from "@mui/icons-material/Add";
 import EditIcon from "@mui/icons-material/Edit";
 import Button from "@mui/material/Button";
 import type { TemplateVersion } from "api/typesGenerated";
@@ -12,6 +11,7 @@ import {
 } from "components/PageHeader/PageHeader";
 import { Stack } from "components/Stack/Stack";
 import { Stats, StatsItem } from "components/Stats/Stats";
+import { PlusIcon } from "lucide-react";
 import { linkToTemplate, useLinks } from "modules/navigation";
 import { TemplateFiles } from "modules/templates/TemplateFiles/TemplateFiles";
 import { TemplateUpdateMessage } from "modules/templates/TemplateUpdateMessage";
@@ -52,7 +52,7 @@ export const TemplateVersionPageView: FC<TemplateVersionPageViewProps> = ({
 						{createWorkspaceUrl && (
 							<Button
 								variant="contained"
-								startIcon={<AddIcon />}
+								startIcon={<PlusIcon />}
 								component={RouterLink}
 								to={createWorkspaceUrl}
 							>