diff --git a/docs/data/material/components/icons/TwoToneIcons.js b/docs/data/material/components/icons/TwoToneIcons.js
index 125785fdc2f975..cc52d9c1a8fa67 100644
--- a/docs/data/material/components/icons/TwoToneIcons.js
+++ b/docs/data/material/components/icons/TwoToneIcons.js
@@ -1,6 +1,21 @@
 import * as React from 'react';
+import { useTheme } from '@mui/material/styles';
 import Icon from '@mui/material/Icon';
 
+const useIsDarkMode = () => {
+  const theme = useTheme();
+  return theme.palette.mode === 'dark';
+};
+
 export default function TwoToneIcons() {
-  return <Icon baseClassName="material-icons-two-tone">add_circle</Icon>;
+  const isDarkMode = useIsDarkMode();
+
+  return (
+    <Icon
+      sx={{ ...(isDarkMode && { filter: 'invert(1)' }) }}
+      baseClassName="material-icons-two-tone"
+    >
+      add_circle
+    </Icon>
+  );
 }
diff --git a/docs/data/material/components/icons/TwoToneIcons.tsx b/docs/data/material/components/icons/TwoToneIcons.tsx
index 125785fdc2f975..cc52d9c1a8fa67 100644
--- a/docs/data/material/components/icons/TwoToneIcons.tsx
+++ b/docs/data/material/components/icons/TwoToneIcons.tsx
@@ -1,6 +1,21 @@
 import * as React from 'react';
+import { useTheme } from '@mui/material/styles';
 import Icon from '@mui/material/Icon';
 
+const useIsDarkMode = () => {
+  const theme = useTheme();
+  return theme.palette.mode === 'dark';
+};
+
 export default function TwoToneIcons() {
-  return <Icon baseClassName="material-icons-two-tone">add_circle</Icon>;
+  const isDarkMode = useIsDarkMode();
+
+  return (
+    <Icon
+      sx={{ ...(isDarkMode && { filter: 'invert(1)' }) }}
+      baseClassName="material-icons-two-tone"
+    >
+      add_circle
+    </Icon>
+  );
 }
diff --git a/docs/data/material/components/icons/TwoToneIcons.tsx.preview b/docs/data/material/components/icons/TwoToneIcons.tsx.preview
index 7fb5fde04dbe59..82be925bbaaa31 100644
--- a/docs/data/material/components/icons/TwoToneIcons.tsx.preview
+++ b/docs/data/material/components/icons/TwoToneIcons.tsx.preview
@@ -1 +1,6 @@
-<Icon baseClassName="material-icons-two-tone">add_circle</Icon>
\ No newline at end of file
+<Icon
+  sx={{ ...(isDarkMode && { filter: 'invert(1)' }) }}
+  baseClassName="material-icons-two-tone"
+>
+  add_circle
+</Icon>
\ No newline at end of file