diff --git a/components/switch-theme.js b/components/switch-theme.js
index 5f20bbf..eba044b 100644
--- a/components/switch-theme.js
+++ b/components/switch-theme.js
@@ -1,11 +1,9 @@
 import PropTypes from 'prop-types'
-import Image from 'next/image'
 import {styled} from '@mui/material/styles'
+import LightModeIcon from '@mui/icons-material/LightMode'
+import DarkModeIcon from '@mui/icons-material/DarkMode'
 import {Box} from '@mui/material'
 
-import lightSwitch from '../public/theme-switch/light.png'
-import darkSwitch from '../public/theme-switch/dark.png'
-
 const PREFIX = 'switch-theme'
 
 const classes = {
@@ -40,23 +38,9 @@ export default function SwitchTheme({switchFixed, mode, setMode}) {
     <StyledBox>
       <div className={switchFixed ? classes.switchFixed : classes.switch} >
         {mode === 'dark' ? (
-          <Image
-            alt='Switch theme to light'
-            width={24}
-            height={24}
-            src={darkSwitch}
-            quality={10}
-            onClick={() => handleClick('light')}
-          />
+          <LightModeIcon onClick={() => handleClick('light')} />
         ) : (
-          <Image
-            alt='Switch theme to dark'
-            width={24}
-            height={24}
-            src={lightSwitch}
-            quality={10}
-            onClick={() => handleClick('dark')}
-          />
+          <DarkModeIcon onClick={() => handleClick('dark')} />
         )}
       </div>
     </StyledBox>