diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index f3a2c0c5..97e3f666 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -25,6 +25,7 @@ module.exports = {
   plugins: ["react", "@typescript-eslint", "prettier"],
   rules: {
     "no-restricted-syntax": "off",
+    "react/require-default-props": "off",
     "react/jsx-filename-extension": [1, { extensions: [".tsx"] }],
     "no-unused-expressions": ["error", { allowShortCircuit: true }],
     "react/jsx-props-no-spreading": "off",
diff --git a/src/pages/components/ScriptMenuList/index.tsx b/src/pages/components/ScriptMenuList/index.tsx
index c37a4155..04831ac7 100644
--- a/src/pages/components/ScriptMenuList/index.tsx
+++ b/src/pages/components/ScriptMenuList/index.tsx
@@ -28,6 +28,7 @@ import { RiPlayFill, RiStopFill } from "react-icons/ri";
 import RuntimeController from "@App/runtime/content/runtime";
 import { useTranslation } from "react-i18next";
 import { SystemConfig } from "@App/pkg/config/config";
+import { ScriptIcons } from "@App/pages/options/routes/utils";
 
 const CollapseItem = Collapse.Item;
 
@@ -159,8 +160,10 @@ const ScriptMenuList: React.FC<{
                       textOverflow: "ellipsis",
                       whiteSpace: "nowrap",
                       color: item.runNum === 0 ? "rgb(var(--gray-5))" : "",
+                      lineHeight: "20px",
                     }}
                   >
+                    <ScriptIcons script={item} size={20} />
                     {item.name}
                   </span>
                 </Space>
diff --git a/src/pages/options/routes/ScriptList.tsx b/src/pages/options/routes/ScriptList.tsx
index f0b58672..af90d5f8 100644
--- a/src/pages/options/routes/ScriptList.tsx
+++ b/src/pages/options/routes/ScriptList.tsx
@@ -75,7 +75,12 @@ import { useTranslation } from "react-i18next";
 import { nextTime, semTime } from "@App/pkg/utils/utils";
 import { i18nName } from "@App/locales/locales";
 import { SystemConfig } from "@App/pkg/config/config";
-import { getValues, ListHomeRender, scriptListSort } from "./utils";
+import {
+  getValues,
+  ListHomeRender,
+  ScriptIcons,
+  scriptListSort,
+} from "./utils";
 
 type ListType = Script & { loading?: boolean };
 
@@ -250,8 +255,10 @@ function ScriptList() {
                   overflow: "hidden",
                   textOverflow: "ellipsis",
                   whiteSpace: "nowrap",
+                  lineHeight: "20px",
                 }}
               >
+                <ScriptIcons script={item} size={20} />
                 {i18nName(item)}
               </Text>
             </Link>
diff --git a/src/pages/options/routes/utils.tsx b/src/pages/options/routes/utils.tsx
index 2f71e5de..106c11a0 100644
--- a/src/pages/options/routes/utils.tsx
+++ b/src/pages/options/routes/utils.tsx
@@ -1,9 +1,9 @@
 /* eslint-disable import/prefer-default-export */
 import React from "react";
 import IoC from "@App/app/ioc";
-import { Script, ScriptDAO } from "@App/app/repo/scripts";
+import { Metadata, Script, ScriptDAO } from "@App/app/repo/scripts";
 import ValueManager from "@App/app/service/value/manager";
-import { Button, Space, Tooltip } from "@arco-design/web-react";
+import { Avatar, Button, Space, Tooltip } from "@arco-design/web-react";
 import {
   IconBug,
   IconCode,
@@ -190,3 +190,23 @@ export function getValues(script: Script) {
       return newValues;
     });
 }
+
+export type ScriptIconsProps = {
+  script: { name: string; metadata: Metadata };
+  size?: number;
+  style?: React.CSSProperties;
+};
+
+export function ScriptIcons({ script, size = 32, style }: ScriptIconsProps) {
+  style = style || {};
+  style.display = style.display || "inline-block";
+  style.marginRight = style.marginRight || "8px";
+  if (script.metadata.icon) {
+    return (
+      <Avatar size={size || 32} shape="square" style={style}>
+        <img src={script.metadata.icon[0]} alt={script?.name} />
+      </Avatar>
+    );
+  }
+  return <></>;
+}
diff --git a/src/runtime/background/runtime.ts b/src/runtime/background/runtime.ts
index ba5c3e16..de57f2c3 100644
--- a/src/runtime/background/runtime.ts
+++ b/src/runtime/background/runtime.ts
@@ -11,6 +11,7 @@ import {
   ScriptDAO,
   ScriptRunResouce,
   SCRIPT_RUN_STATUS_RUNNING,
+  Metadata,
 } from "@App/app/repo/scripts";
 import ResourceManager from "@App/app/service/resource/manager";
 import ValueManager from "@App/app/service/value/manager";
@@ -47,6 +48,7 @@ export type ScriptMenu = {
   enable: boolean;
   updatetime: number;
   hasUserConfig: boolean;
+  metadata: Metadata;
   runStatus?: SCRIPT_RUN_STATUS;
   runNum: number;
   runNumByIframe: number;
@@ -319,6 +321,7 @@ export default class Runtime extends Manager {
                 name: i18nName(item.script),
                 enable: item.script.status === SCRIPT_STATUS_ENABLE,
                 updatetime: item.script.updatetime || item.script.createtime,
+                metadata: item.script.metadata,
                 hasUserConfig: !!item.script.config,
                 runNum: item.runNum,
                 runNumByIframe: item.runNumByIframe,
@@ -332,6 +335,7 @@ export default class Runtime extends Manager {
               name: i18nName(script),
               enable: script.status === SCRIPT_STATUS_ENABLE,
               updatetime: script.updatetime || script.createtime,
+              metadata: item.script.metadata,
               hasUserConfig: !!script?.config,
               runNum: item.runNum,
               runNumByIframe: item.runNumByIframe,
@@ -364,6 +368,7 @@ export default class Runtime extends Manager {
             name: item.name,
             enable: item.status === SCRIPT_STATUS_ENABLE,
             updatetime: item.updatetime || item.createtime,
+            metadata: item.metadata,
             runStatus: item.runStatus,
             hasUserConfig: !!item.config,
             runNum: