coder · BrunoQuaresma · Oct 15, 2025 · Oct 15, 2025
diff --git a/biome.jsonc b/biome.jsonc
@@ -45,7 +45,6 @@
 					"options": {
 						"paths": {
 							"@mui/material": "Use @mui/material/<name> instead. See: https://material-ui.com/guides/minimizing-bundle-size/.",
-							"@mui/icons-material": "Use @mui/icons-material/<name> instead. See: https://material-ui.com/guides/minimizing-bundle-size/.",
 							"@mui/material/Avatar": "Use components/Avatar/Avatar instead.",
 							"@mui/material/Alert": "Use components/Alert/Alert instead.",
 							"@mui/material/Popover": "Use components/Popover/Popover instead.",

diff --git a/site/package.json b/site/package.json
@@ -47,7 +47,6 @@
 		"@fontsource/jetbrains-mono": "5.2.5",
 		"@fontsource/source-code-pro": "5.2.5",
 		"@monaco-editor/react": "4.7.0",
-		"@mui/icons-material": "5.18.0",
 		"@mui/material": "5.18.0",
 		"@mui/system": "5.18.0",
 		"@mui/utils": "5.17.1",

diff --git a/site/pnpm-lock.yaml b/site/pnpm-lock.yaml
diff --git a/site/src/pages/LoginPage/OAuthSignInForm.tsx b/site/src/pages/LoginPage/OAuthSignInForm.tsx
@@ -1,7 +1,7 @@
-import GitHubIcon from "@mui/icons-material/GitHub";
 import { visuallyHidden } from "@mui/utils";
 import type { AuthMethods } from "api/typesGenerated";
 import { Button } from "components/Button/Button";
+import { ExternalImage } from "components/ExternalImage/ExternalImage";
 import { KeyIcon } from "lucide-react";
 import { type FC, useId } from "react";
 import { Language } from "./Language";
@@ -33,7 +33,7 @@ export const OAuthSignInForm: FC<OAuthSignInFormProps> = ({
 							redirectTo,
 						)}`}
 					>
-						<GitHubIcon />
+						<ExternalImage src="/icon/github.svg" />
 						{Language.githubSignIn}
 					</a>
 				</Button>

diff --git a/site/src/pages/SetupPage/SetupPageView.tsx b/site/src/pages/SetupPage/SetupPageView.tsx
@@ -1,4 +1,3 @@
-import GitHubIcon from "@mui/icons-material/GitHub";
 import AlertTitle from "@mui/material/AlertTitle";
 import Autocomplete from "@mui/material/Autocomplete";
 import Checkbox from "@mui/material/Checkbox";
@@ -10,6 +9,7 @@ import type * as TypesGen from "api/typesGenerated";
 import { isAxiosError } from "axios";
 import { Alert, AlertDetail } from "components/Alert/Alert";
 import { Button } from "components/Button/Button";
+import { ExternalImage } from "components/ExternalImage/ExternalImage";
 import { FormFields, VerticalForm } from "components/Form/Form";
 import { CoderIcon } from "components/Icons/CoderIcon";
 import { PasswordField } from "components/PasswordField/PasswordField";
@@ -98,11 +98,6 @@ const numberOfDevelopersOptions = [
 	"2500+",
 ];
 
-const iconStyles = {
-	width: 16,
-	height: 16,
-};
-
 interface SetupPageViewProps {
 	onSubmit: (firstUser: TypesGen.CreateFirstUserRequest) => void;
 	error?: unknown;
@@ -174,7 +169,7 @@ export const SetupPageView: FC<SetupPageViewProps> = ({
 						<>
 							<Button className="w-full" asChild type="submit" size="lg">
 								<a href="/api/v2/users/oauth2/github/callback">
-									<GitHubIcon css={iconStyles} />
+									<ExternalImage src="/icon/github.svg" />
 									{Language.githubCreate}
 								</a>
 							</Button>

diff --git a/site/src/pages/TaskPage/TaskStatusLink.tsx b/site/src/pages/TaskPage/TaskStatusLink.tsx
@@ -1,5 +1,5 @@
-import GitHub from "@mui/icons-material/GitHub";
 import { Button } from "components/Button/Button";
+import { ExternalImage } from "components/ExternalImage/ExternalImage";
 import {
 	BugIcon,
 	ExternalLinkIcon,
@@ -41,7 +41,7 @@ export const TaskStatusLink: FC<TaskStatusLinkProps> = ({ uri }) => {
 								: `${org}/${repo} issue`;
 							break;
 						default:
-							icon = <GitHub />;
+							icon = <ExternalImage src="/icon/github.svg" />;
 							if (org && repo) {
 								label = `${org}/${repo}`;
 							}

diff --git a/site/src/pages/UserSettingsPage/SecurityPage/SingleSignOnSection.tsx b/site/src/pages/UserSettingsPage/SecurityPage/SingleSignOnSection.tsx
@@ -1,5 +1,4 @@
 import { useTheme } from "@emotion/react";
-import GitHubIcon from "@mui/icons-material/GitHub";
 import Link from "@mui/material/Link";
 import TextField from "@mui/material/TextField";
 import { API } from "api/api";
@@ -13,6 +12,7 @@ import type {
 import { Button } from "components/Button/Button";
 import { ConfirmDialog } from "components/Dialogs/ConfirmDialog/ConfirmDialog";
 import { EmptyState } from "components/EmptyState/EmptyState";
+import { ExternalImage } from "components/ExternalImage/ExternalImage";
 import { Stack } from "components/Stack/Stack";
 import { CircleCheck as CircleCheckIcon, KeyIcon } from "lucide-react";
 import { type FC, useState } from "react";
@@ -155,7 +155,7 @@ export const SingleSignOnSection: FC<SingleSignOnSectionProps> = ({
 									disabled={isUpdating}
 									onClick={() => openConfirmation("github")}
 								>
-									<GitHubIcon />
+									<ExternalImage src="/icon/github.svg" />
 									GitHub
 								</Button>
 							)}
@@ -204,7 +204,7 @@ export const SingleSignOnSection: FC<SingleSignOnSectionProps> = ({
 							</span>
 							<div css={{ marginLeft: "auto", lineHeight: 1 }}>
 								{userLoginType.login_type === "github" ? (
-									<GitHubIcon css={{ width: 16, height: 16 }} />
+									<ExternalImage src="/icon/github.svg" />
 								) : (
 									<OIDCIcon oidcAuth={authMethods.oidc} />
 								)}

diff --git a/site/src/pages/UsersPage/UsersTable/UsersTableBody.tsx b/site/src/pages/UsersPage/UsersTable/UsersTableBody.tsx
@@ -1,5 +1,4 @@
 import type { Interpolation, Theme } from "@emotion/react";
-import GitHub from "@mui/icons-material/GitHub";
 import Skeleton from "@mui/material/Skeleton";
 import type { GroupsByUserId } from "api/queries/groups";
 import type * as TypesGen from "api/typesGenerated";
@@ -16,6 +15,7 @@ import {
 	DropdownMenuTrigger,
 } from "components/DropdownMenu/DropdownMenu";
 import { EmptyState } from "components/EmptyState/EmptyState";
+import { ExternalImage } from "components/ExternalImage/ExternalImage";
 import { LastSeen } from "components/LastSeen/LastSeen";
 import { TableCell, TableRow } from "components/Table/Table";
 import {
@@ -269,7 +269,7 @@ const LoginType: FC<LoginTypeProps> = ({ authMethods, value }) => {
 		icon = <BanIcon css={styles.icon} />;
 	} else if (value === "github") {
 		displayName = "GitHub";
-		icon = <GitHub css={styles.icon} />;
+		icon = <ExternalImage src="/icon/github.svg" css={styles.icon} />;
 	} else if (value === "token") {
 		displayName = "Token";
 		icon = <KeyIcon css={styles.icon} />;

diff --git a/site/src/theme/light/mui.ts b/site/src/theme/light/mui.ts
@@ -186,15 +186,6 @@ const muiTheme = createTheme({
 				}),
 			},
 		},
-		MuiIconButton: {
-			styleOverrides: {
-				root: {
-					"&.Mui-focusVisible": {
-						boxShadow: `0 0 0 2px ${tw.blue[600]}`,
-					},
-				},
-			},
-		},
 	},
 });
 

diff --git a/site/src/theme/mui.ts b/site/src/theme/mui.ts
@@ -322,14 +322,4 @@ export const components = {
 			},
 		},
 	},
-
-	MuiIconButton: {
-		styleOverrides: {
-			root: {
-				"&.Mui-focusVisible": {
-					boxShadow: `0 0 0 2px ${tw.blue[400]}`,
-				},
-			},
-		},
-	},
 } satisfies ThemeOptions["components"];