diff --git a/src/assets/image/icon_dark.png b/src/assets/image/icon_dark.png
deleted file mode 100644
index 8fe55e72..00000000
Binary files a/src/assets/image/icon_dark.png and /dev/null differ
diff --git a/src/assets/image/icon_dark.svg b/src/assets/image/icon_dark.svg
new file mode 100644
index 00000000..bd1371bd
--- /dev/null
+++ b/src/assets/image/icon_dark.svg
@@ -0,0 +1,5 @@
+
\ No newline at end of file
diff --git a/src/assets/image/icon_light.png b/src/assets/image/icon_light.png
deleted file mode 100644
index 727b0fec..00000000
Binary files a/src/assets/image/icon_light.png and /dev/null differ
diff --git a/src/assets/image/icon_light.svg b/src/assets/image/icon_light.svg
new file mode 100644
index 00000000..09511157
--- /dev/null
+++ b/src/assets/image/icon_light.svg
@@ -0,0 +1,5 @@
+
\ No newline at end of file
diff --git a/src/pages/_layout.tsx b/src/pages/_layout.tsx
index a083b1a6..196bc43a 100644
--- a/src/pages/_layout.tsx
+++ b/src/pages/_layout.tsx
@@ -5,15 +5,15 @@ import { SWRConfig, mutate } from "swr";
import { useEffect } from "react";
import { useTranslation } from "react-i18next";
import { useLocation, useRoutes } from "react-router-dom";
-import { List, Paper, ThemeProvider } from "@mui/material";
+import { List, Paper, ThemeProvider, SvgIcon } from "@mui/material";
import { listen } from "@tauri-apps/api/event";
import { appWindow } from "@tauri-apps/api/window";
import { routers } from "./_routers";
import { getAxios } from "@/services/api";
import { useVerge } from "@/hooks/use-verge";
import LogoSvg from "@/assets/image/logo.svg?react";
-import iconLight from "@/assets/image/icon_light.png";
-import iconDark from "@/assets/image/icon_dark.png";
+import iconLight from "@/assets/image/icon_light.svg?react";
+import iconDark from "@/assets/image/icon_dark.svg?react";
import { atomThemeMode } from "@/services/states";
import { useRecoilState } from "recoil";
import { Notice } from "@/components/base";
@@ -145,16 +145,16 @@ const Layout = () => {
justifyContent: "space-between",
}}
>
- 