diff --git a/docs/src/pages/components/switches/CustomizedSwitches.js b/docs/src/pages/components/switches/CustomizedSwitches.js
index 1dcb8778462c5a..4502784c0e5363 100644
--- a/docs/src/pages/components/switches/CustomizedSwitches.js
+++ b/docs/src/pages/components/switches/CustomizedSwitches.js
@@ -6,39 +6,134 @@ import Switch from '@material-ui/core/Switch';
 import Stack from '@material-ui/core/Stack';
 import Typography from '@material-ui/core/Typography';
 
+const MaterialUISwitch = styled(Switch)({
+  width: 62,
+  height: 34,
+  padding: 7,
+  '& .MuiSwitch-switchBase': {
+    margin: 1,
+    padding: 0,
+    transform: 'translateX(6px)',
+    '&.Mui-checked': {
+      color: '#fff',
+      transform: 'translateX(22px)',
+      '& .MuiSwitch-thumb:before': {
+        backgroundImage: `url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 20 20"><path fill="${encodeURIComponent(
+          '#fff',
+        )}" d="M4.2 2.5l-.7 1.8-1.8.7 1.8.7.7 1.8.6-1.8L6.7 5l-1.9-.7-.6-1.8zm15 8.3a6.7 6.7 0 11-6.6-6.6 5.8 5.8 0 006.6 6.6z"/></svg>')`,
+      },
+      '& + .MuiSwitch-track': {
+        opacity: 1,
+        backgroundColor: '#aab4be',
+      },
+    },
+  },
+  '& .MuiSwitch-thumb': {
+    backgroundColor: '#001e3c',
+    width: 32,
+    height: 32,
+    '&:before': {
+      content: "''",
+      position: 'absolute',
+      width: '100%',
+      height: '100%',
+      left: 0,
+      top: 0,
+      backgroundRepeat: 'no-repeat',
+      backgroundPosition: 'center',
+      backgroundImage: `url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 20 20"><path fill="${encodeURIComponent(
+        '#fff',
+      )}" d="M9.305 1.667V3.75h1.389V1.667h-1.39zm-4.707 1.95l-.982.982L5.09 6.072l.982-.982-1.473-1.473zm10.802 0L13.927 5.09l.982.982 1.473-1.473-.982-.982zM10 5.139a4.872 4.872 0 00-4.862 4.86A4.872 4.872 0 0010 14.862 4.872 4.872 0 0014.86 10 4.872 4.872 0 0010 5.139zm0 1.389A3.462 3.462 0 0113.471 10a3.462 3.462 0 01-3.473 3.472A3.462 3.462 0 016.527 10 3.462 3.462 0 0110 6.528zM1.665 9.305v1.39h2.083v-1.39H1.666zm14.583 0v1.39h2.084v-1.39h-2.084zM5.09 13.928L3.616 15.4l.982.982 1.473-1.473-.982-.982zm9.82 0l-.982.982 1.473 1.473.982-.982-1.473-1.473zM9.305 16.25v2.083h1.389V16.25h-1.39z"/></svg>')`,
+    },
+  },
+  '& .MuiSwitch-track': {
+    opacity: 1,
+    backgroundColor: '#aab4be',
+    borderRadius: 20 / 2,
+  },
+});
+
+const Android12Switch = styled(Switch)(({ theme }) => ({
+  padding: 8,
+  '& .MuiSwitch-track': {
+    borderRadius: 22 / 2,
+    '&:before, &:after': {
+      content: '""',
+      position: 'absolute',
+      top: '50%',
+      transform: 'translateY(-50%)',
+      width: 16,
+      height: 16,
+    },
+    '&:before': {
+      backgroundImage: `url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 24 24"><path fill="${encodeURIComponent(
+        theme.palette.getContrastText(theme.palette.primary.main),
+      )}" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"/></svg>')`,
+      left: 12,
+    },
+    '&:after': {
+      backgroundImage: `url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 24 24"><path fill="${encodeURIComponent(
+        theme.palette.getContrastText(theme.palette.primary.main),
+      )}" d="M19,13H5V11H19V13Z" /></svg>')`,
+      right: 12,
+    },
+  },
+  '& .MuiSwitch-thumb': {
+    boxShadow: 'none',
+    width: 16,
+    height: 16,
+    margin: 2,
+  },
+}));
+
 const IOSSwitch = styled((props) => (
   <Switch focusVisibleClassName=".Mui-focusVisible" disableRipple {...props} />
 ))(({ theme }) => ({
   width: 42,
   height: 26,
   padding: 0,
-  margin: theme.spacing(1),
   '& .MuiSwitch-switchBase': {
-    padding: 1,
+    padding: 0,
+    margin: 2,
+    transitionDuration: '300ms',
     '&.Mui-checked': {
       transform: 'translateX(16px)',
-      color: theme.palette.common.white,
+      color: '#fff',
       '& + .MuiSwitch-track': {
-        backgroundColor: '#52d869',
+        backgroundColor: '#65C466',
         opacity: 1,
         border: 0,
       },
+      '&.Mui-disabled + .MuiSwitch-track': {
+        opacity: 0.5,
+      },
     },
     '&.Mui-focusVisible .MuiSwitch-thumb': {
-      color: '#52d869',
+      color: '#33cf4d',
       border: '6px solid #fff',
     },
+    '&.Mui-disabled .MuiSwitch-thumb': {
+      color:
+        theme.palette.mode === 'light'
+          ? theme.palette.grey[100]
+          : theme.palette.grey[600],
+    },
+    '&.Mui-disabled + .MuiSwitch-track': {
+      opacity: theme.palette.mode === 'light' ? 0.7 : 0.3,
+    },
   },
   '& .MuiSwitch-thumb': {
-    width: 24,
-    height: 24,
+    boxSizing: 'border-box',
+    width: 22,
+    height: 22,
   },
   '& .MuiSwitch-track': {
     borderRadius: 26 / 2,
-    border: `1px solid ${theme.palette.grey[400]}`,
-    backgroundColor: theme.palette.grey[50],
+    backgroundColor: theme.palette.mode === 'light' ? '#E9E9EA' : '#39393D',
     opacity: 1,
-    transition: theme.transitions.create(['background-color', 'border-color']),
+    transition: theme.transitions.create(['background-color'], {
+      duration: 500,
+    }),
   },
 }));
 
@@ -52,7 +147,7 @@ const AntSwitch = styled(Switch)(({ theme }) => ({
     color: theme.palette.grey[500],
     '&.Mui-checked': {
       transform: 'translateX(12px)',
-      color: theme.palette.common.white,
+      color: '#fff',
       '& + .MuiSwitch-track': {
         opacity: 1,
         backgroundColor: theme.palette.primary.main,
@@ -69,14 +164,26 @@ const AntSwitch = styled(Switch)(({ theme }) => ({
     border: `1px solid ${theme.palette.grey[500]}`,
     borderRadius: 16 / 2,
     opacity: 1,
-    backgroundColor: theme.palette.common.white,
+    backgroundColor: '#fff',
+    boxSizing: 'border-box',
   },
 }));
 
 export default function CustomizedSwitches() {
   return (
     <FormGroup>
-      <FormControlLabel control={<IOSSwitch defaultChecked />} label="iOS style" />
+      <FormControlLabel
+        control={<MaterialUISwitch sx={{ m: 1 }} defaultChecked />}
+        label="Material-UI switch"
+      />
+      <FormControlLabel
+        control={<Android12Switch defaultChecked />}
+        label="Android 12"
+      />
+      <FormControlLabel
+        control={<IOSSwitch sx={{ m: 1 }} defaultChecked />}
+        label="iOS style"
+      />
       <Stack direction="row" spacing={1} alignItems="center">
         <Typography>Off</Typography>
         <AntSwitch defaultChecked inputProps={{ 'aria-label': 'ant design' }} />
diff --git a/docs/src/pages/components/switches/CustomizedSwitches.tsx b/docs/src/pages/components/switches/CustomizedSwitches.tsx
index 9dd13b3265d92d..c2bf6a6490ca21 100644
--- a/docs/src/pages/components/switches/CustomizedSwitches.tsx
+++ b/docs/src/pages/components/switches/CustomizedSwitches.tsx
@@ -6,39 +6,134 @@ import Switch, { SwitchProps } from '@material-ui/core/Switch';
 import Stack from '@material-ui/core/Stack';
 import Typography from '@material-ui/core/Typography';
 
+const MaterialUISwitch = styled(Switch)({
+  width: 62,
+  height: 34,
+  padding: 7,
+  '& .MuiSwitch-switchBase': {
+    margin: 1,
+    padding: 0,
+    transform: 'translateX(6px)',
+    '&.Mui-checked': {
+      color: '#fff',
+      transform: 'translateX(22px)',
+      '& .MuiSwitch-thumb:before': {
+        backgroundImage: `url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 20 20"><path fill="${encodeURIComponent(
+          '#fff',
+        )}" d="M4.2 2.5l-.7 1.8-1.8.7 1.8.7.7 1.8.6-1.8L6.7 5l-1.9-.7-.6-1.8zm15 8.3a6.7 6.7 0 11-6.6-6.6 5.8 5.8 0 006.6 6.6z"/></svg>')`,
+      },
+      '& + .MuiSwitch-track': {
+        opacity: 1,
+        backgroundColor: '#aab4be',
+      },
+    },
+  },
+  '& .MuiSwitch-thumb': {
+    backgroundColor: '#001e3c',
+    width: 32,
+    height: 32,
+    '&:before': {
+      content: "''",
+      position: 'absolute',
+      width: '100%',
+      height: '100%',
+      left: 0,
+      top: 0,
+      backgroundRepeat: 'no-repeat',
+      backgroundPosition: 'center',
+      backgroundImage: `url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 20 20"><path fill="${encodeURIComponent(
+        '#fff',
+      )}" d="M9.305 1.667V3.75h1.389V1.667h-1.39zm-4.707 1.95l-.982.982L5.09 6.072l.982-.982-1.473-1.473zm10.802 0L13.927 5.09l.982.982 1.473-1.473-.982-.982zM10 5.139a4.872 4.872 0 00-4.862 4.86A4.872 4.872 0 0010 14.862 4.872 4.872 0 0014.86 10 4.872 4.872 0 0010 5.139zm0 1.389A3.462 3.462 0 0113.471 10a3.462 3.462 0 01-3.473 3.472A3.462 3.462 0 016.527 10 3.462 3.462 0 0110 6.528zM1.665 9.305v1.39h2.083v-1.39H1.666zm14.583 0v1.39h2.084v-1.39h-2.084zM5.09 13.928L3.616 15.4l.982.982 1.473-1.473-.982-.982zm9.82 0l-.982.982 1.473 1.473.982-.982-1.473-1.473zM9.305 16.25v2.083h1.389V16.25h-1.39z"/></svg>')`,
+    },
+  },
+  '& .MuiSwitch-track': {
+    opacity: 1,
+    backgroundColor: '#aab4be',
+    borderRadius: 20 / 2,
+  },
+});
+
+const Android12Switch = styled(Switch)(({ theme }) => ({
+  padding: 8,
+  '& .MuiSwitch-track': {
+    borderRadius: 22 / 2,
+    '&:before, &:after': {
+      content: '""',
+      position: 'absolute',
+      top: '50%',
+      transform: 'translateY(-50%)',
+      width: 16,
+      height: 16,
+    },
+    '&:before': {
+      backgroundImage: `url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 24 24"><path fill="${encodeURIComponent(
+        theme.palette.getContrastText(theme.palette.primary.main),
+      )}" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"/></svg>')`,
+      left: 12,
+    },
+    '&:after': {
+      backgroundImage: `url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 24 24"><path fill="${encodeURIComponent(
+        theme.palette.getContrastText(theme.palette.primary.main),
+      )}" d="M19,13H5V11H19V13Z" /></svg>')`,
+      right: 12,
+    },
+  },
+  '& .MuiSwitch-thumb': {
+    boxShadow: 'none',
+    width: 16,
+    height: 16,
+    margin: 2,
+  },
+}));
+
 const IOSSwitch = styled((props: SwitchProps) => (
   <Switch focusVisibleClassName=".Mui-focusVisible" disableRipple {...props} />
 ))(({ theme }) => ({
   width: 42,
   height: 26,
   padding: 0,
-  margin: theme.spacing(1),
   '& .MuiSwitch-switchBase': {
-    padding: 1,
+    padding: 0,
+    margin: 2,
+    transitionDuration: '300ms',
     '&.Mui-checked': {
       transform: 'translateX(16px)',
-      color: theme.palette.common.white,
+      color: '#fff',
       '& + .MuiSwitch-track': {
-        backgroundColor: '#52d869',
+        backgroundColor: '#65C466',
         opacity: 1,
         border: 0,
       },
+      '&.Mui-disabled + .MuiSwitch-track': {
+        opacity: 0.5,
+      },
     },
     '&.Mui-focusVisible .MuiSwitch-thumb': {
-      color: '#52d869',
+      color: '#33cf4d',
       border: '6px solid #fff',
     },
+    '&.Mui-disabled .MuiSwitch-thumb': {
+      color:
+        theme.palette.mode === 'light'
+          ? theme.palette.grey[100]
+          : theme.palette.grey[600],
+    },
+    '&.Mui-disabled + .MuiSwitch-track': {
+      opacity: theme.palette.mode === 'light' ? 0.7 : 0.3,
+    },
   },
   '& .MuiSwitch-thumb': {
-    width: 24,
-    height: 24,
+    boxSizing: 'border-box',
+    width: 22,
+    height: 22,
   },
   '& .MuiSwitch-track': {
     borderRadius: 26 / 2,
-    border: `1px solid ${theme.palette.grey[400]}`,
-    backgroundColor: theme.palette.grey[50],
+    backgroundColor: theme.palette.mode === 'light' ? '#E9E9EA' : '#39393D',
     opacity: 1,
-    transition: theme.transitions.create(['background-color', 'border-color']),
+    transition: theme.transitions.create(['background-color'], {
+      duration: 500,
+    }),
   },
 }));
 
@@ -52,7 +147,7 @@ const AntSwitch = styled(Switch)(({ theme }) => ({
     color: theme.palette.grey[500],
     '&.Mui-checked': {
       transform: 'translateX(12px)',
-      color: theme.palette.common.white,
+      color: '#fff',
       '& + .MuiSwitch-track': {
         opacity: 1,
         backgroundColor: theme.palette.primary.main,
@@ -69,14 +164,26 @@ const AntSwitch = styled(Switch)(({ theme }) => ({
     border: `1px solid ${theme.palette.grey[500]}`,
     borderRadius: 16 / 2,
     opacity: 1,
-    backgroundColor: theme.palette.common.white,
+    backgroundColor: '#fff',
+    boxSizing: 'border-box',
   },
 }));
 
 export default function CustomizedSwitches() {
   return (
     <FormGroup>
-      <FormControlLabel control={<IOSSwitch defaultChecked />} label="iOS style" />
+      <FormControlLabel
+        control={<MaterialUISwitch sx={{ m: 1 }} defaultChecked />}
+        label="Material-UI switch"
+      />
+      <FormControlLabel
+        control={<Android12Switch defaultChecked />}
+        label="Android 12"
+      />
+      <FormControlLabel
+        control={<IOSSwitch sx={{ m: 1 }} defaultChecked />}
+        label="iOS style"
+      />
       <Stack direction="row" spacing={1} alignItems="center">
         <Typography>Off</Typography>
         <AntSwitch defaultChecked inputProps={{ 'aria-label': 'ant design' }} />