diff --git a/site/src/modules/resources/SensitiveValue.tsx b/site/src/modules/resources/SensitiveValue.tsx
index b6d8862b81ff5..626c7a8623291 100644
--- a/site/src/modules/resources/SensitiveValue.tsx
+++ b/site/src/modules/resources/SensitiveValue.tsx
@@ -1,9 +1,8 @@
 import { type Interpolation, type Theme, css } from "@emotion/react";
-import VisibilityOffOutlined from "@mui/icons-material/VisibilityOffOutlined";
-import VisibilityOutlined from "@mui/icons-material/VisibilityOutlined";
 import IconButton from "@mui/material/IconButton";
 import Tooltip from "@mui/material/Tooltip";
 import { CopyableValue } from "components/CopyableValue/CopyableValue";
+import { EyeIcon, EyeOffIcon } from "lucide-react";
 import { type FC, useState } from "react";
 
 const Language = {
@@ -20,9 +19,9 @@ export const SensitiveValue: FC<SensitiveValueProps> = ({ value }) => {
 	const displayValue = shouldDisplay ? value : "••••••••";
 	const buttonLabel = shouldDisplay ? Language.hideLabel : Language.showLabel;
 	const icon = shouldDisplay ? (
-		<VisibilityOffOutlined />
+		<EyeOffIcon className="size-icon-xs" />
 	) : (
-		<VisibilityOutlined />
+		<EyeIcon className="size-icon-xs" />
 	);
 
 	return (
@@ -63,10 +62,5 @@ const styles = {
 
 	button: css`
     color: inherit;
-
-    & .MuiSvgIcon-root {
-      width: 16px;
-      height: 16px;
-    }
   `,
 } satisfies Record<string, Interpolation<Theme>>;
diff --git a/site/src/pages/OrganizationSettingsPage/CustomRolesPage/CreateEditRolePageView.tsx b/site/src/pages/OrganizationSettingsPage/CustomRolesPage/CreateEditRolePageView.tsx
index 20a53e9ccfa5f..478bdf2b705cb 100644
--- a/site/src/pages/OrganizationSettingsPage/CustomRolesPage/CreateEditRolePageView.tsx
+++ b/site/src/pages/OrganizationSettingsPage/CustomRolesPage/CreateEditRolePageView.tsx
@@ -1,6 +1,4 @@
 import type { Interpolation, Theme } from "@emotion/react";
-import VisibilityOffOutlinedIcon from "@mui/icons-material/VisibilityOffOutlined";
-import VisibilityOutlinedIcon from "@mui/icons-material/VisibilityOutlined";
 import Checkbox from "@mui/material/Checkbox";
 import FormControlLabel from "@mui/material/FormControlLabel";
 import Table from "@mui/material/Table";
@@ -32,6 +30,7 @@ import {
 import { Spinner } from "components/Spinner/Spinner";
 import { Stack } from "components/Stack/Stack";
 import { useFormik } from "formik";
+import { EyeIcon, EyeOffIcon } from "lucide-react";
 import { type ChangeEvent, type FC, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { getFormHelpers, nameValidator } from "utils/formUtils";
@@ -398,8 +397,8 @@ const ShowAllResourcesCheckbox: FC<ShowAllResourcesCheckboxProps> = ({
 					name="show_all_permissions"
 					checked={showAllResources}
 					onChange={(e) => setShowAllResources(e.currentTarget.checked)}
-					checkedIcon={<VisibilityOutlinedIcon />}
-					icon={<VisibilityOffOutlinedIcon />}
+					checkedIcon={<EyeIcon className="size-icon-sm" />}
+					icon={<EyeOffIcon className="size-icon-sm" />}
 				/>
 			}
 			label={