diff --git a/package.json b/package.json
index c9a7f233..430e457b 100644
--- a/package.json
+++ b/package.json
@@ -51,7 +51,7 @@
   "dependencies": {
     "@fontsource-variable/inter": "^5.2.8",
     "@mui/icons-material": "^7.0.0",
-    "react-icons": "^5.3.0",
+    "lucide-react": "^1.17.0",
     "utif": "^3.1.0"
   },
   "peerDependencies": {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 1089d746..01c007a2 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -45,12 +45,12 @@ importers:
       '@mui/material':
         specifier: ^7.0.0
         version: 7.3.10(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      lucide-react:
+        specifier: ^1.17.0
+        version: 1.17.0(react@18.3.1)
       react:
         specifier: ^18.3.1
         version: 18.3.1
-      react-icons:
-        specifier: ^5.3.0
-        version: 5.4.0(react@18.3.1)
       utif:
         specifier: ^3.1.0
         version: 3.1.0
@@ -3852,6 +3852,11 @@ packages:
   lru-cache@5.1.1:
     resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
 
+  lucide-react@1.17.0:
+    resolution: {integrity: sha512-9FA9evdox/JQL5PT57fdA1x/yg8T7knJ98+zjTL3UfKza6pflQUUh3XtaQIHKvnsJw1lmsEyHVlt5jchYxOQ5w==}
+    peerDependencies:
+      react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
   lunr@2.3.9:
     resolution: {integrity: sha512-zTU3DaZaF3Rt9rhN3uBMGQD3dD2/vFQqnvZCDv4dl5iOzq2IZQqTxu90r4E5J+nP70J3ilqVCrbho2eWaeW8Ow==}
 
@@ -4433,11 +4438,6 @@ packages:
     peerDependencies:
       react: ^18.3.1
 
-  react-icons@5.4.0:
-    resolution: {integrity: sha512-7eltJxgVt7X64oHh6wSWNwwbKTCtMfK35hcjvJS0yxEAhPM8oUKdS3+kqaW1vicIltw+kR2unHaa12S9pPALoQ==}
-    peerDependencies:
-      react: '*'
-
   react-is@16.13.1:
     resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
 
@@ -9244,6 +9244,10 @@ snapshots:
     dependencies:
       yallist: 3.1.1
 
+  lucide-react@1.17.0(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+
   lunr@2.3.9: {}
 
   lz-string@1.5.0: {}
@@ -9796,10 +9800,6 @@ snapshots:
       react: 18.3.1
       scheduler: 0.23.2
 
-  react-icons@5.4.0(react@18.3.1):
-    dependencies:
-      react: 18.3.1
-
   react-is@16.13.1: {}
 
   react-is@17.0.2: {}
diff --git a/src/components/DataDisplay/Icons/LucideIcon.tsx b/src/components/DataDisplay/Icons/LucideIcon.tsx
new file mode 100644
index 00000000..70a1b990
--- /dev/null
+++ b/src/components/DataDisplay/Icons/LucideIcon.tsx
@@ -0,0 +1,65 @@
+import { SvgIcon, type SvgIconProps } from "@mui/material";
+import type { LucideIcon as LucideIconType } from "lucide-react";
+import { iconSizes, type IconSize } from "./iconSizes";
+
+const muiFontSizeMap = {
+  small: "xs",
+  medium: "sm",
+  large: "md",
+} as const;
+
+export interface LucideIconProps extends Omit<SvgIconProps, "component"> {
+  icon: LucideIconType;
+
+  /**
+   * DiamondDS icon size.
+   * Prefer this over `fontSize`.
+   */
+  size?: IconSize;
+
+  /**
+   * MUI compatibility alias.
+   * Prefer `size` for DiamondDS icons.
+   */
+  fontSize?: SvgIconProps["fontSize"];
+}
+
+export function LucideIcon({
+  icon,
+  size,
+  fontSize = "medium",
+  sx,
+  ...props
+}: LucideIconProps) {
+  const resolvedSize =
+    size ??
+    (fontSize === "small" || fontSize === "medium" || fontSize === "large"
+      ? muiFontSizeMap[fontSize]
+      : "md");
+
+  const config = iconSizes[resolvedSize];
+
+  return (
+    <SvgIcon
+      component={icon}
+      inheritViewBox
+      fontSize={fontSize}
+      sx={{
+        width: config.size,
+        height: config.size,
+        fill: "none",
+        stroke: "currentColor",
+
+        "& *": {
+          stroke: "currentColor",
+          strokeWidth: config.strokeWidth,
+        },
+
+        ...sx,
+      }}
+      {...props}
+    />
+  );
+}
+
+export default LucideIcon;
diff --git a/src/components/DataDisplay/Icons/iconSizes.ts b/src/components/DataDisplay/Icons/iconSizes.ts
new file mode 100644
index 00000000..848fc336
--- /dev/null
+++ b/src/components/DataDisplay/Icons/iconSizes.ts
@@ -0,0 +1,9 @@
+export const iconSizes = {
+  xs: { size: 16, strokeWidth: 1.5 },
+  sm: { size: 20, strokeWidth: 1.75 },
+  md: { size: 24, strokeWidth: 2 },
+  lg: { size: 32, strokeWidth: 2.25 },
+  xl: { size: 40, strokeWidth: 2.25 },
+} as const;
+
+export type IconSize = keyof typeof iconSizes;
diff --git a/src/components/DataDisplay/Icons/icons.tsx b/src/components/DataDisplay/Icons/icons.tsx
new file mode 100644
index 00000000..b8318252
--- /dev/null
+++ b/src/components/DataDisplay/Icons/icons.tsx
@@ -0,0 +1,215 @@
+import {
+  ArrowLeft,
+  ArrowRight,
+  AlertTriangle,
+  Bell,
+  Briefcase,
+  Check,
+  CheckCircle2,
+  ChevronDown,
+  ChevronLeft,
+  ChevronRight,
+  ChevronUp,
+  CircleX,
+  ClipboardList,
+  Copy,
+  Flame,
+  Folder,
+  Grid3x3,
+  Heart,
+  History,
+  House,
+  Inbox,
+  Info,
+  LogIn,
+  LogOut,
+  Mail,
+  MapPin,
+  Menu,
+  Plus,
+  Printer,
+  RefreshCw,
+  Save,
+  Search,
+  Send,
+  Settings,
+  Share2,
+  Star,
+  Trash2,
+  X,
+  Sun,
+  Moon,
+  UserRound,
+  CheckCircle,
+} from "lucide-react";
+
+import { LucideIcon, type LucideIconProps } from "./LucideIcon";
+
+type IconAliasProps = Omit<LucideIconProps, "icon">;
+
+export const ArrowLeftIcon = (props: IconAliasProps) => (
+  <LucideIcon icon={ArrowLeft} {...props} />
+);
+
+export const ArrowRightIcon = (props: IconAliasProps) => (
+  <LucideIcon icon={ArrowRight} {...props} />
+);
+
+export const AddIcon = (props: IconAliasProps) => (
+  <LucideIcon icon={Plus} {...props} />
+);
+
+export const AssignmentIcon = (props: IconAliasProps) => (
+  <LucideIcon icon={ClipboardList} {...props} />
+);
+
+export const DeleteIcon = (props: IconAliasProps) => (
+  <LucideIcon icon={Trash2} {...props} />
+);
+
+export const ExpandMoreIcon = (props: IconAliasProps) => (
+  <LucideIcon icon={ChevronDown} {...props} />
+);
+
+export const FavoriteIcon = (props: IconAliasProps) => (
+  <LucideIcon icon={Heart} {...props} />
+);
+
+export const FileCopyIcon = (props: IconAliasProps) => (
+  <LucideIcon icon={Copy} {...props} />
+);
+
+export const FolderIcon = (props: IconAliasProps) => (
+  <LucideIcon icon={Folder} {...props} />
+);
+
+export const GrainIcon = (props: IconAliasProps) => (
+  <LucideIcon icon={Grid3x3} {...props} />
+);
+
+export const HomeIcon = (props: IconAliasProps) => (
+  <LucideIcon icon={House} {...props} />
+);
+
+export const InboxIcon = (props: IconAliasProps) => (
+  <LucideIcon icon={Inbox} {...props} />
+);
+
+export const LocationOnIcon = (props: IconAliasProps) => (
+  <LucideIcon icon={MapPin} {...props} />
+);
+
+export const MailIcon = (props: IconAliasProps) => (
+  <LucideIcon icon={Mail} {...props} />
+);
+
+export const MenuIcon = (props: IconAliasProps) => (
+  <LucideIcon icon={Menu} {...props} />
+);
+
+export const NotificationsIcon = (props: IconAliasProps) => (
+  <LucideIcon icon={Bell} {...props} />
+);
+
+export const PageviewIcon = (props: IconAliasProps) => (
+  <LucideIcon icon={Search} {...props} />
+);
+
+export const PrintIcon = (props: IconAliasProps) => (
+  <LucideIcon icon={Printer} {...props} />
+);
+
+export const RestoreIcon = (props: IconAliasProps) => (
+  <LucideIcon icon={History} {...props} />
+);
+
+export const SaveIcon = (props: IconAliasProps) => (
+  <LucideIcon icon={Save} {...props} />
+);
+
+export const SendIcon = (props: IconAliasProps) => (
+  <LucideIcon icon={Send} {...props} />
+);
+
+export const ShareIcon = (props: IconAliasProps) => (
+  <LucideIcon icon={Share2} {...props} />
+);
+
+export const WhatshotIcon = (props: IconAliasProps) => (
+  <LucideIcon icon={Flame} {...props} />
+);
+
+export const WorkIcon = (props: IconAliasProps) => (
+  <LucideIcon icon={Briefcase} {...props} />
+);
+
+export const SearchIcon = (props: IconAliasProps) => (
+  <LucideIcon icon={Search} {...props} />
+);
+
+export const SettingsIcon = (props: IconAliasProps) => (
+  <LucideIcon icon={Settings} {...props} />
+);
+
+export const CheckIcon = (props: IconAliasProps) => (
+  <LucideIcon icon={Check} {...props} />
+);
+
+export const CloseIcon = (props: IconAliasProps) => (
+  <LucideIcon icon={X} {...props} />
+);
+
+export const ChevronDownIcon = (props: IconAliasProps) => (
+  <LucideIcon icon={ChevronDown} {...props} />
+);
+
+export const ChevronRightIcon = (props: IconAliasProps) => (
+  <LucideIcon icon={ChevronRight} {...props} />
+);
+
+export const ChevronUpIcon = (props: IconAliasProps) => (
+  <LucideIcon icon={ChevronUp} {...props} />
+);
+
+export const ChevronLeftIcon = (props: IconAliasProps) => (
+  <LucideIcon icon={ChevronLeft} {...props} />
+);
+
+export const SuccessIcon = (props: IconAliasProps) => (
+  <LucideIcon icon={CheckCircle} {...props} />
+);
+export const ErrorIcon = (props: IconAliasProps) => (
+  <LucideIcon icon={CircleX} {...props} />
+);
+export const WarningIcon = (props: IconAliasProps) => (
+  <LucideIcon icon={AlertTriangle} {...props} />
+);
+export const InfoIcon = (props: IconAliasProps) => (
+  <LucideIcon icon={Info} {...props} />
+);
+
+export const StarIcon = (props: IconAliasProps) => (
+  <LucideIcon icon={Star} {...props} />
+);
+export const LoginIcon = (props: IconAliasProps) => (
+  <LucideIcon icon={LogIn} {...props} />
+);
+export const LogoutIcon = (props: IconAliasProps) => (
+  <LucideIcon icon={LogOut} {...props} />
+);
+
+export const SunIcon = (props: IconAliasProps) => (
+  <LucideIcon icon={Sun} {...props} />
+);
+
+export const MoonIcon = (props: IconAliasProps) => (
+  <LucideIcon icon={Moon} {...props} />
+);
+
+export const RefreshIcon = (props: IconAliasProps) => (
+  <LucideIcon icon={RefreshCw} {...props} />
+);
+
+export const UserIcon = (props: IconAliasProps) => (
+  <LucideIcon icon={UserRound} {...props} />
+);
diff --git a/src/components/DataDisplay/Icons/index.ts b/src/components/DataDisplay/Icons/index.ts
new file mode 100644
index 00000000..d5a18c72
--- /dev/null
+++ b/src/components/DataDisplay/Icons/index.ts
@@ -0,0 +1,9 @@
+export * from "./icons";
+
+export { SuccessIcon, ErrorIcon, InfoIcon, WarningIcon } from "./icons";
+
+export { iconSizes } from "./iconSizes";
+export type { IconSize } from "./iconSizes";
+
+export { LucideIcon } from "./LucideIcon";
+export type { LucideIconProps } from "./LucideIcon";
diff --git a/src/components/DataDisplay/LucideIcon.stories.tsx b/src/components/DataDisplay/LucideIcon.stories.tsx
new file mode 100644
index 00000000..27e4f05a
--- /dev/null
+++ b/src/components/DataDisplay/LucideIcon.stories.tsx
@@ -0,0 +1,114 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Box, Stack, Typography } from "@mui/material";
+import { Plus, Save, Search, Send, Settings, Star, Trash2 } from "lucide-react";
+import { LucideIcon } from "./Icons/LucideIcon";
+
+const icons = {
+  Star,
+  Save,
+  Plus,
+  Send,
+  Trash2,
+  Search,
+  Settings,
+};
+
+const meta: Meta<typeof LucideIcon> = {
+  title: "Components/DataDisplay/LucideIcon",
+  component: LucideIcon,
+  tags: ["autodocs"],
+  argTypes: {
+    icon: {
+      control: "select",
+      options: Object.keys(icons),
+      mapping: icons,
+    },
+    size: {
+      control: "select",
+      options: ["xs", "sm", "md", "lg", "xl"],
+    },
+    color: {
+      control: "select",
+      options: [
+        "inherit",
+        "action",
+        "disabled",
+        "primary",
+        "secondary",
+        "success",
+        "error",
+        "info",
+        "warning",
+      ],
+    },
+    fontSize: {
+      control: "select",
+      options: ["inherit", "small", "medium", "large"],
+      table: {
+        category: "MUI compatibility",
+      },
+    },
+  },
+  args: {
+    icon: Star,
+    size: "md",
+    color: "inherit",
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {};
+
+export const Sizes: Story = {
+  render: () => (
+    <Stack direction="row" spacing={2} alignItems="center">
+      <LucideIcon icon={Star} size="xs" />
+      <LucideIcon icon={Star} size="sm" />
+      <LucideIcon icon={Star} size="md" />
+      <LucideIcon icon={Star} size="lg" />
+      <LucideIcon icon={Star} size="xl" />
+    </Stack>
+  ),
+};
+
+export const Colours: Story = {
+  render: () => (
+    <Stack direction="row" spacing={2} alignItems="center">
+      <LucideIcon icon={Star} color="primary" />
+      <LucideIcon icon={Star} color="secondary" />
+      <LucideIcon icon={Star} color="success" />
+      <LucideIcon icon={Star} color="error" />
+      <LucideIcon icon={Star} color="warning" />
+      <LucideIcon icon={Star} color="info" />
+    </Stack>
+  ),
+};
+
+export const CommonIcons: Story = {
+  render: () => (
+    <Stack direction="row" spacing={2} alignItems="center">
+      <LucideIcon icon={Star} />
+      <LucideIcon icon={Plus} />
+      <LucideIcon icon={Send} />
+      <LucideIcon icon={Trash2} />
+      <LucideIcon icon={Search} />
+      <LucideIcon icon={Settings} />
+    </Stack>
+  ),
+};
+
+export const WithLabels: Story = {
+  render: () => (
+    <Stack spacing={1}>
+      {Object.entries(icons).map(([name, icon]) => (
+        <Box key={name} sx={{ display: "flex", alignItems: "center", gap: 1 }}>
+          <LucideIcon icon={icon} />
+          <Typography variant="body2">{name}</Typography>
+        </Box>
+      ))}
+    </Stack>
+  ),
+};
diff --git a/src/components/MUI/DataDisplay/Badge.stories.tsx b/src/components/MUI/DataDisplay/Badge.stories.tsx
index ba479284..ac792223 100644
--- a/src/components/MUI/DataDisplay/Badge.stories.tsx
+++ b/src/components/MUI/DataDisplay/Badge.stories.tsx
@@ -10,8 +10,8 @@ import { colourSet } from "../../../utils/diamond";
 import { muiDocsParameters } from "../../../../.storybook/muiDocsParameters";
 
 const childMap = {
-  mail: <MailIcon />,
   notifications: <NotificationsIcon />,
+  mail: <MailIcon />,
   work: <WorkIcon />,
 } as const;
 
@@ -46,8 +46,8 @@ const meta: Meta<typeof Badge> = {
     max: 99,
     invisible: false,
     showZero: false,
-    overlap: "circular",
-    children: "mail",
+    overlap: "rectangular",
+    children: "notifications",
   },
 };
 export default meta;
@@ -68,14 +68,14 @@ export const InvisibleNumber: Story = {
 export const Colours: Story = {
   args: { badgeContent: 7 },
   render: (args) => (
-    <>
+    <Stack direction="row" spacing={2}>
       <Badge {...args} color="primary" />
       <Badge {...args} color="secondary" />
       <Badge {...args} color="error" />
       <Badge {...args} color="success" />
       <Badge {...args} color="info" />
       <Badge {...args} color="warning" />
-    </>
+    </Stack>
   ),
 };
 
diff --git a/src/components/MUI/Feedback/Tooltip.stories.tsx b/src/components/MUI/Feedback/Tooltip.stories.tsx
index 90f25fed..df5c1da2 100644
--- a/src/components/MUI/Feedback/Tooltip.stories.tsx
+++ b/src/components/MUI/Feedback/Tooltip.stories.tsx
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { Tooltip, IconButton } from "../MuiWrapped";
-import InfoIcon from "@mui/icons-material/Info";
+import { InfoIcon } from "../../DataDisplay/Icons";
 
 const meta: Meta<typeof Tooltip> = {
   title: "MUI/Feedback/Tooltip",
diff --git a/src/components/MUI/MuiWrapped.tsx b/src/components/MUI/MuiWrapped.tsx
index 40801a9c..5272d1b9 100644
--- a/src/components/MUI/MuiWrapped.tsx
+++ b/src/components/MUI/MuiWrapped.tsx
@@ -1,27 +1,11 @@
 import MuiWrapper from "./MuiWrapper";
 
-import MuiAddIcon from "@mui/icons-material/Add";
-import MuiAssignmentIcon from "@mui/icons-material/Assignment";
-import MuiDeleteIcon from "@mui/icons-material/Delete";
-import MuiExpandMoreIcon from "@mui/icons-material/ExpandMore";
-import MuiFavoriteIcon from "@mui/icons-material/Favorite";
-import MuiFileCopyIcon from "@mui/icons-material/FileCopy";
-import MuiFolderIcon from "@mui/icons-material/Folder";
-import MuiGrainIcon from "@mui/icons-material/Grain";
-import MuiHomeIcon from "@mui/icons-material/Home";
-import MuiInboxIcon from "@mui/icons-material/Inbox";
-import MuiLocationOnIcon from "@mui/icons-material/LocationOn";
-import MuiMailIcon from "@mui/icons-material/Mail";
-import MuiMenuIcon from "@mui/icons-material/Menu";
-import MuiNotificationsIcon from "@mui/icons-material/Notifications";
-import MuiPageviewIcon from "@mui/icons-material/Pageview";
-import MuiPrintIcon from "@mui/icons-material/Print";
-import MuiRestoreIcon from "@mui/icons-material/Restore";
-import MuiSaveIcon from "@mui/icons-material/Save";
-import MuiSendIcon from "@mui/icons-material/Send";
-import MuiShareIcon from "@mui/icons-material/Share";
-import MuiWhatshotIcon from "@mui/icons-material/Whatshot";
-import MuiWorkIcon from "@mui/icons-material/Work";
+import {
+  ErrorIcon,
+  InfoIcon,
+  SuccessIcon,
+  WarningIcon,
+} from "../DataDisplay/Icons";
 
 import MuiAccordion, {
   AccordionProps as MuiAccordionProps,
@@ -32,7 +16,16 @@ import MuiAccordionDetails, {
 import MuiAccordionSummary, {
   AccordionSummaryProps as MuiAccordionSummaryProps,
 } from "@mui/material/AccordionSummary";
-import MuiAlert, { AlertProps as MuiAlertProps } from "@mui/material/Alert";
+import MuiAlert, { type AlertProps } from "@mui/material/Alert";
+const alertIconMapping: AlertProps["iconMapping"] = {
+  success: <SuccessIcon size="sm" />,
+  info: <InfoIcon size="sm" />,
+  warning: <WarningIcon size="sm" />,
+  error: <ErrorIcon size="sm" />,
+};
+function AlertBase(props: AlertProps) {
+  return <MuiAlert iconMapping={alertIconMapping} {...props} />;
+}
 import MuiAppBar, { AppBarProps as MuiAppBarProps } from "@mui/material/AppBar";
 import MuiAvatar, { AvatarProps as MuiAvatarProps } from "@mui/material/Avatar";
 import MuiAvatarGroup, {
@@ -151,7 +144,7 @@ import MuiSpeedDial, {
 import MuiSpeedDialAction, {
   SpeedDialActionProps as MuiSpeedDialActionProps,
 } from "@mui/material/SpeedDialAction";
-import MuiSpeedDialIcon from "@mui/material/SpeedDial";
+import MuiSpeedDialIconBase from "@mui/material/SpeedDial";
 import MuiStack, { StackProps as MuiStackProps } from "@mui/material/Stack";
 import MuiStepper, {
   StepperProps as MuiStepperProps,
@@ -213,97 +206,66 @@ import MuiTypography, {
   TypographyProps as MuiTypographyProps,
 } from "@mui/material/Typography";
 
-export const AddIcon = MuiWrapper<MuiSvgIconProps, SVGSVGElement>(
-  MuiAddIcon,
-  "AddIcon",
-);
-export const AssignmentIcon = MuiWrapper<MuiSvgIconProps, SVGSVGElement>(
-  MuiAssignmentIcon,
-  "AssignmentIcon",
-);
-export const DeleteIcon = MuiWrapper<MuiSvgIconProps, SVGSVGElement>(
-  MuiDeleteIcon,
-  "DeleteIcon",
-);
-export const ExpandMoreIcon = MuiWrapper<MuiSvgIconProps, SVGSVGElement>(
-  MuiExpandMoreIcon,
-  "ExpandMoreIcon",
-);
-export const FavoriteIcon = MuiWrapper<MuiSvgIconProps, SVGSVGElement>(
-  MuiFavoriteIcon,
-  "FavoriteIcon",
-);
-export const FileCopyIcon = MuiWrapper<MuiSvgIconProps, SVGSVGElement>(
-  MuiFileCopyIcon,
-  "FileCopyIcon",
-);
-export const FolderIcon = MuiWrapper<MuiSvgIconProps, SVGSVGElement>(
-  MuiFolderIcon,
-  "FolderIcon",
-);
-export const GrainIcon = MuiWrapper<MuiSvgIconProps, SVGSVGElement>(
-  MuiGrainIcon,
-  "GrainIcon",
-);
-export const HomeIcon = MuiWrapper<MuiSvgIconProps, SVGSVGElement>(
-  MuiHomeIcon,
-  "HomeIcon",
-);
-export const InboxIcon = MuiWrapper<MuiSvgIconProps, SVGSVGElement>(
-  MuiInboxIcon,
-  "InboxIcon",
-);
-export const LocationOnIcon = MuiWrapper<MuiSvgIconProps, SVGSVGElement>(
-  MuiLocationOnIcon,
-  "LocationOnIcon",
-);
-export const MailIcon = MuiWrapper<MuiSvgIconProps, SVGSVGElement>(
-  MuiMailIcon,
-  "MailIcon",
-);
-export const MenuIcon = MuiWrapper<MuiSvgIconProps, SVGSVGElement>(
-  MuiMenuIcon,
-  "MenuIcon",
-);
-export const NotificationsIcon = MuiWrapper<MuiSvgIconProps, SVGSVGElement>(
-  MuiNotificationsIcon,
-  "NotificationIcon",
-);
-export const PageviewIcon = MuiWrapper<MuiSvgIconProps, SVGSVGElement>(
-  MuiPageviewIcon,
-  "PageviewIcon",
-);
-export const PrintIcon = MuiWrapper<MuiSvgIconProps, SVGSVGElement>(
-  MuiPrintIcon,
-  "PrintIcon",
-);
-export const RestoreIcon = MuiWrapper<MuiSvgIconProps, SVGSVGElement>(
-  MuiRestoreIcon,
-  "RestoreIcon",
-);
-export const SaveIcon = MuiWrapper<MuiSvgIconProps, SVGSVGElement>(
-  MuiSaveIcon,
-  "SaveIcon",
-);
-export const SendIcon = MuiWrapper<MuiSvgIconProps, SVGSVGElement>(
-  MuiSendIcon,
-  "SendIcon",
-);
-export const ShareIcon = MuiWrapper<MuiSvgIconProps, SVGSVGElement>(
-  MuiShareIcon,
-  "ShareIcon",
-);
-export const SpeedDialIcon = MuiWrapper<MuiSvgIconProps, SVGSVGElement>(
-  MuiSpeedDialIcon,
-  "SpeedDialIcon",
-);
-export const WhatshotIcon = MuiWrapper<MuiSvgIconProps, SVGSVGElement>(
-  MuiWhatshotIcon,
-  "WhatshotIcon",
-);
-export const WorkIcon = MuiWrapper<MuiSvgIconProps, SVGSVGElement>(
-  MuiWorkIcon,
-  "WorkIcon",
+export {
+  AddIcon,
+  AssignmentIcon,
+  DeleteIcon,
+  ExpandMoreIcon,
+  FavoriteIcon,
+  FileCopyIcon,
+  FolderIcon,
+  GrainIcon,
+  HomeIcon,
+  InboxIcon,
+  LocationOnIcon,
+  MailIcon,
+  MenuIcon,
+  NotificationsIcon,
+  PageviewIcon,
+  PrintIcon,
+  RestoreIcon,
+  SaveIcon,
+  SendIcon,
+  ShareIcon,
+  WhatshotIcon,
+  WorkIcon,
+  SearchIcon,
+  SettingsIcon,
+  WarningIcon,
+  CheckIcon,
+  CloseIcon,
+  ChevronDownIcon,
+  ChevronRightIcon,
+} from "../../components/DataDisplay/Icons";
+
+export {
+  AddIcon as MuiAddIcon,
+  AssignmentIcon as MuiAssignmentIcon,
+  DeleteIcon as MuiDeleteIcon,
+  ExpandMoreIcon as MuiExpandMoreIcon,
+  FavoriteIcon as MuiFavoriteIcon,
+  FileCopyIcon as MuiFileCopyIcon,
+  FolderIcon as MuiFolderIcon,
+  GrainIcon as MuiGrainIcon,
+  HomeIcon as MuiHomeIcon,
+  InboxIcon as MuiInboxIcon,
+  LocationOnIcon as MuiLocationOnIcon,
+  MailIcon as MuiMailIcon,
+  MenuIcon as MuiMenuIcon,
+  NotificationsIcon as MuiNotificationsIcon,
+  PageviewIcon as MuiPageviewIcon,
+  PrintIcon as MuiPrintIcon,
+  RestoreIcon as MuiRestoreIcon,
+  SaveIcon as MuiSaveIcon,
+  SendIcon as MuiSendIcon,
+  ShareIcon as MuiShareIcon,
+  WhatshotIcon as MuiWhatshotIcon,
+  WorkIcon as MuiWorkIcon,
+} from "../DataDisplay/Icons";
+
+export const MuiSpeedDialIcon = MuiWrapper<MuiSvgIconProps, SVGSVGElement>(
+  MuiSpeedDialIconBase,
+  "MuiSpeedDialIcon",
 );
 
 export const Accordion = MuiWrapper<MuiAccordionProps>(
@@ -318,7 +280,9 @@ export const AccordionSummary = MuiWrapper<MuiAccordionSummaryProps>(
   MuiAccordionSummary,
   "AccordionSummary",
 );
-export const Alert = MuiWrapper<MuiAlertProps>(MuiAlert, "Alert");
+
+export const Alert = MuiWrapper<AlertProps>(AlertBase, "Alert");
+
 export const AppBar = MuiWrapper<MuiAppBarProps>(MuiAppBar, "AppBar");
 export const Avatar = MuiWrapper<MuiAvatarProps>(MuiAvatar, "Avatar");
 export const AvatarGroup = MuiWrapper<MuiAvatarGroupProps>(
diff --git a/src/components/controls/ColourSchemeButton.test.tsx b/src/components/controls/ColourSchemeButton.test.tsx
index 71dc7dd2..68379fc0 100644
--- a/src/components/controls/ColourSchemeButton.test.tsx
+++ b/src/components/controls/ColourSchemeButton.test.tsx
@@ -4,6 +4,12 @@ import { ColourSchemeButton } from "./ColourSchemeButton";
 import { ColourSchemes } from "../../utils/globals";
 
 const mockSetColorScheme = vi.fn();
+
+vi.mock("../DataDisplay/Icons", () => ({
+  MoonIcon: () => <div data-testid="MoonIcon" />,
+  SunIcon: () => <div data-testid="SunIcon" />,
+}));
+
 vi.mock("@mui/material", async () => {
   const actualEnums = await vi.importActual("../../utils/globals");
 
@@ -28,7 +34,7 @@ describe("ColourSchemeButton", () => {
     const button = getByRole("button");
     expect(button).toBeInTheDocument();
 
-    const icon = getByTestId("BedtimeIcon");
+    const icon = getByTestId("MoonIcon");
     expect(icon).toBeInTheDocument();
   });
 
diff --git a/src/components/controls/ColourSchemeButton.tsx b/src/components/controls/ColourSchemeButton.tsx
index 7c7b1705..16c94a38 100644
--- a/src/components/controls/ColourSchemeButton.tsx
+++ b/src/components/controls/ColourSchemeButton.tsx
@@ -1,8 +1,7 @@
 import { useColorScheme, useTheme } from "@mui/material";
 import { IconButton, IconButtonProps } from "@mui/material";
 
-import LightModeIcon from "@mui/icons-material/LightMode";
-import BedtimeIcon from "@mui/icons-material/Bedtime";
+import { SunIcon, MoonIcon } from "../DataDisplay/Icons";
 
 import { ColourSchemes } from "../../utils/globals";
 
@@ -38,7 +37,7 @@ const ColourSchemeButton = (props: IconButtonProps) => {
         if (props.onClick) props.onClick(event);
       }}
     >
-      {isDark() ? <BedtimeIcon /> : <LightModeIcon />}
+      {isDark() ? <MoonIcon /> : <SunIcon />}
     </IconButton>
   );
 };
diff --git a/src/components/controls/ScrollableImages.tsx b/src/components/controls/ScrollableImages.tsx
index 780ccfe0..1fcca9de 100644
--- a/src/components/controls/ScrollableImages.tsx
+++ b/src/components/controls/ScrollableImages.tsx
@@ -1,10 +1,12 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import { Box, Button, IconButton, Slider, Stack } from "@mui/material";
 
-import ArrowBackIcon from "@mui/icons-material/ArrowBack";
-import ArrowForwardIcon from "@mui/icons-material/ArrowForward";
-import ArrowBackIosNewIcon from "@mui/icons-material/ArrowBackIosNew";
-import ArrowForwardIosIcon from "@mui/icons-material/ArrowForwardIos";
+import {
+  ArrowLeftIcon,
+  ArrowRightIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+} from "../DataDisplay/Icons";
 
 import { extractFramesFromTiff, isTiff } from "../../utils/TiffUtils";
 
@@ -126,7 +128,7 @@ const ScrollableImages = ({
             color: "white",
           }}
         >
-          <ArrowBackIosNewIcon data-testid="scroll-left-button" />
+          <ChevronLeftIcon data-testid="scroll-left-button" size="md" />
         </IconButton>
 
         <Box
@@ -180,7 +182,7 @@ const ScrollableImages = ({
             color: "white",
           }}
         >
-          <ArrowForwardIosIcon data-testid="scroll-right-button" />
+          <ChevronRightIcon data-testid="scroll-right-button" size="md" />
         </IconButton>
       </Box>
     );
@@ -196,7 +198,7 @@ const ScrollableImages = ({
             size="small"
             sx={{ minWidth: 36, width: 36, height: 36 }}
           >
-            <ArrowBackIcon data-testid="prev-button" />
+            <ArrowLeftIcon data-testid="prev-button" size="md" />
           </Button>
         )}
 
@@ -246,7 +248,7 @@ const ScrollableImages = ({
             size="small"
             sx={{ minWidth: 36, width: 36, height: 36 }}
           >
-            <ArrowForwardIcon data-testid="next-button" />
+            <ArrowRightIcon data-testid="next-button" size="md" />
           </Button>
         )}
       </Box>
diff --git a/src/components/controls/User.tsx b/src/components/controls/User.tsx
index d7039dba..c4d5a1b8 100644
--- a/src/components/controls/User.tsx
+++ b/src/components/controls/User.tsx
@@ -11,7 +11,7 @@ import {
   useTheme,
 } from "@mui/material";
 import { ReactElement, ReactNode, useState } from "react";
-import { MdLogin } from "react-icons/md";
+import { LoginIcon, LogoutIcon, UserIcon } from "../DataDisplay/Icons";
 
 import { Auth } from "../systems/auth";
 
@@ -86,7 +86,7 @@ const User = ({
             <Stack direction="row" alignItems="center">
               {avatar || (
                 <Avatar
-                  alt={user.name + " avatar"}
+                  alt={`${user.name} avatar`}
                   variant="rounded"
                   sx={{
                     backgroundColor: theme.vars.palette.primary.light,
@@ -94,7 +94,9 @@ const User = ({
                     height: 35,
                     width: 35,
                   }}
-                />
+                >
+                  <UserIcon size="md" />
+                </Avatar>
               )}
               <Box
                 sx={{
@@ -175,7 +177,8 @@ const User = ({
                 </MenuItem>
               )}
               <MenuItem onClick={handleLogout} aria-label="Logout">
-                <Link sx={{ textDecoration: "none" }}>Logout</Link>
+                <LogoutIcon size="sm" />
+                <Link sx={{ textDecoration: "none", ml: 1 }}>Logout</Link>
               </MenuItem>
             </Menu>
           )}
@@ -183,7 +186,7 @@ const User = ({
       ) : (
         <Button
           onClick={handleLogin}
-          startIcon={<MdLogin />}
+          startIcon={<LoginIcon />}
           sx={{
             backgroundColor: theme.vars.palette.primary.light,
             color: theme.vars.palette.primary.contrastText,
diff --git a/src/components/navigation/Breadcrumbs.tsx b/src/components/navigation/Breadcrumbs.tsx
index 086f9333..fd17b053 100644
--- a/src/components/navigation/Breadcrumbs.tsx
+++ b/src/components/navigation/Breadcrumbs.tsx
@@ -6,9 +6,8 @@ import {
   styled,
   Typography,
 } from "@mui/material";
-import HomeIcon from "@mui/icons-material/Home";
-import NavigateNextIcon from "@mui/icons-material/NavigateNext";
 import { CustomLink } from "types/links";
+import { HomeIcon, ChevronRightIcon } from "../DataDisplay/Icons";
 
 import { Bar, BarProps } from "../controls/Bar";
 
@@ -76,7 +75,7 @@ const Breadcrumbs = ({
     <BarStyled {...props}>
       <MuiBreadcrumbsStyled
         aria-label="breadcrumb"
-        separator={<NavigateNextIcon fontSize="small" />}
+        separator={<ChevronRightIcon fontSize="small" />}
         {...muiBreadcrumbsProps}
       >
         <MuiLink
diff --git a/src/components/navigation/NavMenu.stories.tsx b/src/components/navigation/NavMenu.stories.tsx
index fca2e9a8..83aa9c9f 100644
--- a/src/components/navigation/NavMenu.stories.tsx
+++ b/src/components/navigation/NavMenu.stories.tsx
@@ -1,7 +1,8 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { NavMenu, NavMenuLink } from "./NavMenu";
 import { Button, Divider, Typography } from "@mui/material";
-import Autorenew from "@mui/icons-material/Autorenew";
+import { RefreshIcon } from "../DataDisplay/Icons";
+
 import { MockLink } from "../../utils/MockLink";
 
 const meta: Meta<typeof NavMenu> = {
@@ -79,7 +80,7 @@ export const CustomChildren: Story = {
           Section Header
         </Typography>
         <Divider />
-        <Button sx={{ color: "white" }} startIcon={<Autorenew />}>
+        <Button sx={{ color: "white" }} startIcon={<RefreshIcon size="sm" />}>
           Button
         </Button>
       </>
diff --git a/src/components/navigation/NavMenu.tsx b/src/components/navigation/NavMenu.tsx
index 6f9661d7..f23bf08d 100644
--- a/src/components/navigation/NavMenu.tsx
+++ b/src/components/navigation/NavMenu.tsx
@@ -8,8 +8,8 @@ import {
   type MenuItemProps,
 } from "@mui/material";
 import React, { useState, forwardRef, useId } from "react";
-import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 import { NavLink, NavLinkProps } from "./Navbar";
+import { ChevronDownIcon } from "../DataDisplay/Icons";
 
 type NavMenuLinkProps = MenuItemProps & NavLinkProps;
 
@@ -108,7 +108,7 @@ const NavMenu = ({ label, children }: NavMenuProps) => {
         }}
       >
         <Typography>{label}</Typography>
-        <ExpandMoreIcon
+        <ChevronDownIcon
           sx={{
             transition: "transform .25s",
             transform: `rotate(${open ? -180 : 0}deg)`,
diff --git a/src/components/navigation/Navbar.tsx b/src/components/navigation/Navbar.tsx
index cb905743..93a995c9 100644
--- a/src/components/navigation/Navbar.tsx
+++ b/src/components/navigation/Navbar.tsx
@@ -9,8 +9,8 @@ import {
   useTheme,
   styled,
 } from "@mui/material";
-import { MdMenu, MdClose } from "react-icons/md";
 import React, { forwardRef, useState } from "react";
+import { MenuIcon, CloseIcon } from "../DataDisplay/Icons";
 
 import {
   ImageColourSchemeSwitch,
@@ -90,7 +90,7 @@ const NavLinks = ({ children }: NavLinksProps) => {
         aria-label="Open Menu"
         onClick={isOpen ? onClose : onOpen}
       >
-        {isOpen ? <MdClose /> : <MdMenu />}
+        {isOpen ? <CloseIcon /> : <MenuIcon />}
       </IconButton>
       <Stack
         direction="row"