From 676861b06d20c42f275caff94b8afcf9fa229c70 Mon Sep 17 00:00:00 2001
From: Fu Diwei <fudiwei@sina.com>
Date: Sun, 20 Jul 2025 17:26:18 +0800
Subject: [PATCH] feat(ui): replace some icons

---
 ui/src/components/MultipleInput.tsx           |  5 ++-
 .../components/access/AccessFormSSHConfig.tsx |  4 +--
 .../workflow/WorkflowElementsContainer.tsx    | 10 +++---
 ui/src/components/workflow/node/AddNode.tsx   |  8 ++---
 .../workflow/node/ApplyNodeConfigForm.tsx     | 19 ++++------
 .../workflow/node/ConditionNode.tsx           | 14 ++++----
 ...onditionNodeConfigFormExpressionEditor.tsx |  6 ++--
 .../workflow/node/DeployNodeConfigForm.tsx    |  6 ++--
 .../workflow/node/ExecuteResultNode.tsx       | 14 +++-----
 .../workflow/node/NotifyNodeConfigForm.tsx    |  4 +--
 .../components/workflow/node/UnknownNode.tsx  |  6 ++--
 .../components/workflow/node/_SharedNode.tsx  | 36 +++++++++++--------
 12 files changed, 64 insertions(+), 68 deletions(-)

diff --git a/ui/src/components/MultipleInput.tsx b/ui/src/components/MultipleInput.tsx
index fcba554cf..fb37bcc3a 100644
--- a/ui/src/components/MultipleInput.tsx
+++ b/ui/src/components/MultipleInput.tsx
@@ -191,7 +191,6 @@ const MultipleInputItem = forwardRef<MultipleInputItemInstance, MultipleInputIte
       allowUp,
       disabled,
       showSortButton,
-      size,
       onEntryAdd,
       onEntryDown,
       onEntryUp,
@@ -254,12 +253,12 @@ const MultipleInputItem = forwardRef<MultipleInputItemInstance, MultipleInputIte
             onChange={handleInputChange}
           />
         </div>
-        <Space.Compact size={size}>
+        <div className="flex items-center justify-end">
           {removeBtn}
           {upBtn}
           {downBtn}
           {addBtn}
-        </Space.Compact>
+        </div>
       </div>
     );
   }
diff --git a/ui/src/components/access/AccessFormSSHConfig.tsx b/ui/src/components/access/AccessFormSSHConfig.tsx
index f0fef03b6..f253e8e4d 100644
--- a/ui/src/components/access/AccessFormSSHConfig.tsx
+++ b/ui/src/components/access/AccessFormSSHConfig.tsx
@@ -244,7 +244,7 @@ const AccessFormSSHConfig = ({ form: formInst, formName, disabled, initialValues
                       key: field.key,
                       label: <Label />,
                       extra: (
-                        <Space.Compact>
+                        <div className="flex items-center justify-end">
                           <Button
                             icon={<IconChevronUp size="1.25em" />}
                             color="default"
@@ -278,7 +278,7 @@ const AccessFormSSHConfig = ({ form: formInst, formName, disabled, initialValues
                               e.stopPropagation();
                             }}
                           />
-                        </Space.Compact>
+                        </div>
                       ),
                       children: <Fields />,
                     };
diff --git a/ui/src/components/workflow/WorkflowElementsContainer.tsx b/ui/src/components/workflow/WorkflowElementsContainer.tsx
index 3b5537f50..ab315f320 100644
--- a/ui/src/components/workflow/WorkflowElementsContainer.tsx
+++ b/ui/src/components/workflow/WorkflowElementsContainer.tsx
@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { ExpandOutlined as ExpandOutlinedIcon, MinusOutlined as MinusOutlinedIcon, PlusOutlined as PlusOutlinedIcon } from "@ant-design/icons";
+import { IconMaximize, IconMinus, IconPlus } from "@tabler/icons-react";
 import { Button, Card, Typography } from "antd";
 
 import WorkflowElements from "@/components/workflow/WorkflowElements";
@@ -30,13 +30,13 @@ const WorkflowElementsContainer = ({ className, style, disabled }: WorkflowEleme
         </div>
       </div>
 
-      <div className="absolute bottom-4 right-6 z-2">
+      <div className="absolute right-6 bottom-4 z-2">
         <Card className="rounded-lg p-2 shadow-lg" styles={{ body: { padding: 0 } }}>
           <div className="flex items-center gap-2">
-            <Button icon={<MinusOutlinedIcon />} disabled={scale <= MIN_SCALE} onClick={() => setScale((s) => Math.max(MIN_SCALE, s - STEP_SCALE))} />
+            <Button icon={<IconMinus size="1.25em" />} disabled={scale <= MIN_SCALE} onClick={() => setScale((s) => Math.max(MIN_SCALE, s - STEP_SCALE))} />
             <Typography.Text className="min-w-12 text-center">{Math.round(scale * 100)}%</Typography.Text>
-            <Button icon={<PlusOutlinedIcon />} disabled={scale >= MAX_SCALE} onClick={() => setScale((s) => Math.min(MAX_SCALE, s + STEP_SCALE))} />
-            <Button icon={<ExpandOutlinedIcon />} onClick={() => setScale(1)} />
+            <Button icon={<IconPlus size="1.25em" />} disabled={scale >= MAX_SCALE} onClick={() => setScale((s) => Math.min(MAX_SCALE, s + STEP_SCALE))} />
+            <Button icon={<IconMaximize size="1.25em" />} onClick={() => setScale(1)} />
           </div>
         </Card>
       </div>
diff --git a/ui/src/components/workflow/node/AddNode.tsx b/ui/src/components/workflow/node/AddNode.tsx
index e3fe7e46f..1ef2f2a67 100644
--- a/ui/src/components/workflow/node/AddNode.tsx
+++ b/ui/src/components/workflow/node/AddNode.tsx
@@ -4,11 +4,11 @@ import {
   CloudUploadOutlined as CloudUploadOutlinedIcon,
   DeploymentUnitOutlined as DeploymentUnitOutlinedIcon,
   MonitorOutlined as MonitorOutlinedIcon,
-  PlusOutlined as PlusOutlinedIcon,
   SendOutlined as SendOutlinedIcon,
   SisternodeOutlined as SisternodeOutlinedIcon,
   SolutionOutlined as SolutionOutlinedIcon,
 } from "@ant-design/icons";
+import { IconPlus } from "@tabler/icons-react";
 import { Dropdown } from "antd";
 
 import { WorkflowNodeType, newNode } from "@/domain/workflow";
@@ -63,10 +63,10 @@ const AddNode = ({ node, disabled }: AddNodeProps) => {
   }, [node.id, disabled, node.type]);
 
   return (
-    <div className="relative py-6 before:absolute before:left-1/2 before:top-0 before:h-full before:w-[2px] before:-translate-x-1/2 before:bg-stone-200 before:content-['']">
+    <div className="relative py-6 before:absolute before:top-0 before:left-1/2 before:h-full before:w-[2px] before:-translate-x-1/2 before:bg-stone-200 before:content-['']">
       <Dropdown menu={{ items: dropdownMenus }} trigger={["click"]}>
-        <div className="relative z-1 flex size-5 cursor-pointer items-center justify-center rounded-full text-white bg-stone-400 hover:bg-stone-500">
-          <PlusOutlinedIcon />
+        <div className="relative z-1 flex size-5 cursor-pointer items-center justify-center rounded-full bg-stone-400 text-white hover:bg-stone-500">
+          <IconPlus size="1em" />
         </div>
       </Dropdown>
     </div>
diff --git a/ui/src/components/workflow/node/ApplyNodeConfigForm.tsx b/ui/src/components/workflow/node/ApplyNodeConfigForm.tsx
index a9db794ae..afd5a0e6d 100644
--- a/ui/src/components/workflow/node/ApplyNodeConfigForm.tsx
+++ b/ui/src/components/workflow/node/ApplyNodeConfigForm.tsx
@@ -1,12 +1,7 @@
 import { forwardRef, memo, useEffect, useImperativeHandle, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router";
-import {
-  CloseOutlined as CloseOutlinedIcon,
-  PlusOutlined as PlusOutlinedIcon,
-  QuestionCircleOutlined as QuestionCircleOutlinedIcon,
-  RightOutlined as RightOutlinedIcon,
-} from "@ant-design/icons";
+import { IconChevronRight, IconHelp, IconPlus, IconX } from "@tabler/icons-react";
 import { useControllableValue } from "ahooks";
 import { AutoComplete, Button, Divider, Flex, Form, type FormInstance, Input, InputNumber, Select, Switch, Tooltip, Typography } from "antd";
 import { createSchemaFieldRule } from "antd-zod";
@@ -325,7 +320,7 @@ const ApplyNodeConfigForm = forwardRef<ApplyNodeConfigFormInstance, ApplyNodeCon
                   <span>{t("workflow_node.apply.form.provider_access.label")}</span>
                   <Tooltip title={t("workflow_node.apply.form.provider_access.tooltip")}>
                     <Typography.Text className="ms-1" type="secondary">
-                      <QuestionCircleOutlinedIcon />
+                      <IconHelp size="1.25em" />
                     </Typography.Text>
                   </Tooltip>
                 </div>
@@ -335,7 +330,7 @@ const ApplyNodeConfigForm = forwardRef<ApplyNodeConfigFormInstance, ApplyNodeCon
                     trigger={
                       <Button size="small" type="link">
                         {t("workflow_node.apply.form.provider_access.button")}
-                        <PlusOutlinedIcon className="text-xs" />
+                        <IconPlus size="1.25em" />
                       </Button>
                     }
                     usage="both-dns-hosting"
@@ -386,7 +381,7 @@ const ApplyNodeConfigForm = forwardRef<ApplyNodeConfigFormInstance, ApplyNodeCon
                     <Link className="ant-typography" to="/settings/ssl-provider" target="_blank">
                       <Button size="small" type="link">
                         {t("workflow_node.apply.form.ca_provider.button")}
-                        <RightOutlinedIcon className="text-xs" />
+                        <IconChevronRight size="1.25em" />
                       </Button>
                     </Link>
                   </Show>
@@ -417,7 +412,7 @@ const ApplyNodeConfigForm = forwardRef<ApplyNodeConfigFormInstance, ApplyNodeCon
                     trigger={
                       <Button size="small" type="link">
                         {t("workflow_node.apply.form.ca_provider_access.button")}
-                        <PlusOutlinedIcon className="text-xs" />
+                        <IconChevronRight size="1.25em" />
                       </Button>
                     }
                     usage="ca-only"
@@ -607,12 +602,12 @@ const EmailInput = memo(
 
     const renderOptionLabel = (email: string, removable: boolean = false) => (
       <div className="flex items-center gap-2 overflow-hidden">
-        <span className="flex-1 overflow-hidden truncate">{email}</span>
+        <span className="flex-1 truncate overflow-hidden">{email}</span>
         {removable && (
           <Button
             color="default"
             disabled={disabled}
-            icon={<CloseOutlinedIcon />}
+            icon={<IconX size="1.25em" />}
             size="small"
             type="text"
             onClick={(e) => {
diff --git a/ui/src/components/workflow/node/ConditionNode.tsx b/ui/src/components/workflow/node/ConditionNode.tsx
index 9da286a15..7779ae547 100644
--- a/ui/src/components/workflow/node/ConditionNode.tsx
+++ b/ui/src/components/workflow/node/ConditionNode.tsx
@@ -1,5 +1,5 @@
 import { memo, useRef, useState } from "react";
-import { FilterFilled as FilterFilledIcon, FilterOutlined as FilterOutlinedIcon, MoreOutlined as MoreOutlinedIcon } from "@ant-design/icons";
+import { IconDotsVertical, IconFilter, IconFilterFilled } from "@tabler/icons-react";
 import { Button, Card, Popover } from "antd";
 import { produce } from "immer";
 
@@ -59,25 +59,25 @@ const ConditionNode = ({ node, disabled, branchId, branchIndex }: ConditionNodeP
             branchId={branchId}
             branchIndex={branchIndex}
             disabled={disabled}
-            trigger={<Button color="primary" icon={<MoreOutlinedIcon />} variant="text" />}
+            trigger={<Button color="primary" icon={<IconDotsVertical size="1em" />} variant="text" />}
           />
         }
         placement="rightTop"
       >
-        <div className="relative w-[256px] z-1 mt-10">
+        <div className="relative z-1 mt-10 w-[256px]">
           <Card className="shadow-md" styles={{ body: { padding: 0 } }} hoverable onClick={() => setDrawerOpen(true)}>
             <div className="flex h-[48px] flex-col items-center justify-center truncate px-4 py-2">
               <div className="relative w-full overflow-hidden" onClick={(e) => e.stopPropagation()}>
                 <SharedNode.Title
-                  className="focus:bg-background focus:text-foreground overflow-hidden outline-slate-200 focus:rounded-xs"
+                  className="overflow-hidden outline-slate-200 focus:rounded-xs focus:bg-background focus:text-foreground"
                   node={node}
                   disabled={disabled}
                 />
-                <div className="absolute right-0 top-1/2 -translate-y-1/2" onClick={() => setDrawerOpen(true)}>
+                <div className="absolute top-1/2 right-0 -translate-y-1/2" onClick={() => setDrawerOpen(true)}>
                   {node.config?.expression ? (
-                    <Button color="primary" icon={<FilterFilledIcon />} variant="link" />
+                    <Button color="primary" icon={<IconFilterFilled size="1em" />} variant="link" />
                   ) : (
-                    <Button color="default" icon={<FilterOutlinedIcon />} variant="link" />
+                    <Button color="default" icon={<IconFilter size="1em" />} variant="link" />
                   )}
                 </div>
               </div>
diff --git a/ui/src/components/workflow/node/ConditionNodeConfigFormExpressionEditor.tsx b/ui/src/components/workflow/node/ConditionNodeConfigFormExpressionEditor.tsx
index e8b48e94c..1a7c7dd0c 100644
--- a/ui/src/components/workflow/node/ConditionNodeConfigFormExpressionEditor.tsx
+++ b/ui/src/components/workflow/node/ConditionNodeConfigFormExpressionEditor.tsx
@@ -1,6 +1,6 @@
 import { forwardRef, useEffect, useImperativeHandle, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { CloseOutlined as CloseOutlinedIcon, PlusOutlined } from "@ant-design/icons";
+import { IconPlus, IconX } from "@tabler/icons-react";
 import { useControllableValue } from "ahooks";
 import { Button, Form, Input, Radio, Select, theme } from "antd";
 
@@ -372,7 +372,7 @@ const ConditionNodeConfigFormExpressionEditor = forwardRef<ConditionNodeConfigFo
                     className="my-1"
                     color="default"
                     disabled={disabled}
-                    icon={<CloseOutlinedIcon />}
+                    icon={<IconX size="1.25em" />}
                     size="small"
                     type="text"
                     onClick={() => remove(index)}
@@ -381,7 +381,7 @@ const ConditionNodeConfigFormExpressionEditor = forwardRef<ConditionNodeConfigFo
               ))}
 
               <Form.Item>
-                <Button type="dashed" block icon={<PlusOutlined />} onClick={() => add({})}>
+                <Button type="dashed" block icon={<IconPlus size="1.25em" />} onClick={() => add({})}>
                   {t("workflow_node.condition.form.expression.add_condition.button")}
                 </Button>
               </Form.Item>
diff --git a/ui/src/components/workflow/node/DeployNodeConfigForm.tsx b/ui/src/components/workflow/node/DeployNodeConfigForm.tsx
index b0e1c7eba..27a72600e 100644
--- a/ui/src/components/workflow/node/DeployNodeConfigForm.tsx
+++ b/ui/src/components/workflow/node/DeployNodeConfigForm.tsx
@@ -1,6 +1,6 @@
 import { forwardRef, memo, useEffect, useImperativeHandle, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { PlusOutlined as PlusOutlinedIcon, QuestionCircleOutlined as QuestionCircleOutlinedIcon } from "@ant-design/icons";
+import { IconHelp, IconPlus } from "@tabler/icons-react";
 import { Button, Divider, Flex, Form, type FormInstance, Select, Switch, Tooltip, Typography, theme } from "antd";
 import { createSchemaFieldRule } from "antd-zod";
 import { z } from "zod/v4";
@@ -482,7 +482,7 @@ const DeployNodeConfigForm = forwardRef<DeployNodeConfigFormInstance, DeployNode
                     <span>{t("workflow_node.deploy.form.provider_access.label")}</span>
                     <Tooltip title={t("workflow_node.deploy.form.provider_access.tooltip")}>
                       <Typography.Text className="ms-1" type="secondary">
-                        <QuestionCircleOutlinedIcon />
+                        <IconHelp size="1.25em" />
                       </Typography.Text>
                     </Tooltip>
                   </div>
@@ -493,7 +493,7 @@ const DeployNodeConfigForm = forwardRef<DeployNodeConfigFormInstance, DeployNode
                       trigger={
                         <Button size="small" type="link">
                           {t("workflow_node.deploy.form.provider_access.button")}
-                          <PlusOutlinedIcon className="text-xs" />
+                          <IconPlus size="1.25em" />
                         </Button>
                       }
                       usage="both-dns-hosting"
diff --git a/ui/src/components/workflow/node/ExecuteResultNode.tsx b/ui/src/components/workflow/node/ExecuteResultNode.tsx
index 838c83e7a..de1d663d2 100644
--- a/ui/src/components/workflow/node/ExecuteResultNode.tsx
+++ b/ui/src/components/workflow/node/ExecuteResultNode.tsx
@@ -1,9 +1,5 @@
 import { memo } from "react";
-import {
-  CheckCircleOutlined as CheckCircleOutlinedIcon,
-  CloseCircleOutlined as CloseCircleOutlinedIcon,
-  MoreOutlined as MoreOutlinedIcon,
-} from "@ant-design/icons";
+import { IconCircleCheck, IconCircleX, IconDotsVertical } from "@tabler/icons-react";
 import { Button, Card, Popover, theme } from "antd";
 
 import { WorkflowNodeType } from "@/domain/workflow";
@@ -30,7 +26,7 @@ const ExecuteResultNode = ({ node, disabled, branchId, branchIndex }: ConditionN
             branchId={branchId}
             branchIndex={branchIndex}
             disabled={disabled}
-            trigger={<Button color="primary" icon={<MoreOutlinedIcon />} variant="text" />}
+            trigger={<Button color="primary" icon={<IconDotsVertical size="1em" />} variant="text" />}
           />
         }
         placement="rightTop"
@@ -40,12 +36,12 @@ const ExecuteResultNode = ({ node, disabled, branchId, branchIndex }: ConditionN
             <div className="flex h-[48px] flex-col items-center justify-center truncate px-4 py-2">
               <div className="flex items-center space-x-2">
                 {node.type === WorkflowNodeType.ExecuteSuccess ? (
-                  <CheckCircleOutlinedIcon style={{ color: themeToken.colorSuccess }} />
+                  <IconCircleCheck style={{ color: themeToken.colorSuccess }} size="1.5em" />
                 ) : (
-                  <CloseCircleOutlinedIcon style={{ color: themeToken.colorError }} />
+                  <IconCircleX style={{ color: themeToken.colorError }} size="1.5em" />
                 )}
                 <SharedNode.Title
-                  className="focus:bg-background focus:text-foreground overflow-hidden outline-slate-200 focus:rounded-xs"
+                  className="overflow-hidden outline-slate-200 focus:rounded-xs focus:bg-background focus:text-foreground"
                   node={node}
                   disabled={disabled}
                 />
diff --git a/ui/src/components/workflow/node/NotifyNodeConfigForm.tsx b/ui/src/components/workflow/node/NotifyNodeConfigForm.tsx
index 9c9575574..1bfd2b43d 100644
--- a/ui/src/components/workflow/node/NotifyNodeConfigForm.tsx
+++ b/ui/src/components/workflow/node/NotifyNodeConfigForm.tsx
@@ -1,6 +1,6 @@
 import { forwardRef, memo, useEffect, useImperativeHandle, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { PlusOutlined as PlusOutlinedIcon } from "@ant-design/icons";
+import { IconPlus } from "@tabler/icons-react";
 import { Button, Divider, Flex, Form, type FormInstance, Input, Switch, Typography } from "antd";
 import { createSchemaFieldRule } from "antd-zod";
 import { z } from "zod/v4";
@@ -203,7 +203,7 @@ const NotifyNodeConfigForm = forwardRef<NotifyNodeConfigFormInstance, NotifyNode
                   trigger={
                     <Button size="small" type="link">
                       {t("workflow_node.notify.form.provider_access.button")}
-                      <PlusOutlinedIcon className="text-xs" />
+                      <IconPlus size="1.25em" />
                     </Button>
                   }
                   usage="notification-only"
diff --git a/ui/src/components/workflow/node/UnknownNode.tsx b/ui/src/components/workflow/node/UnknownNode.tsx
index bb81c5881..f25959e96 100644
--- a/ui/src/components/workflow/node/UnknownNode.tsx
+++ b/ui/src/components/workflow/node/UnknownNode.tsx
@@ -1,5 +1,5 @@
 import { memo } from "react";
-import { CloseCircleOutlined as CloseCircleOutlinedIcon } from "@ant-design/icons";
+import { IconTrashX } from "@tabler/icons-react";
 import { Alert, Button, Card } from "antd";
 
 import { useZustandShallowSelector } from "@/hooks";
@@ -21,7 +21,7 @@ const UnknownNode = ({ node, disabled }: MonitorNodeProps) => {
     <>
       <div className="relative w-[256px] overflow-hidden">
         <Card className="shadow-md" styles={{ body: { padding: 0 } }} hoverable variant="borderless">
-          <div className="cursor-pointer ">
+          <div className="cursor-pointer">
             <Alert
               type="error"
               message={
@@ -31,7 +31,7 @@ const UnknownNode = ({ node, disabled }: MonitorNodeProps) => {
                     <br />
                     PLEASE REMOVE
                   </div>
-                  <Button color="primary" icon={<CloseCircleOutlinedIcon />} variant="text" onClick={handleClickRemove} />
+                  <Button color="primary" icon={<IconTrashX size="1.25em" />} variant="text" onClick={handleClickRemove} />
                 </div>
               }
             />
diff --git a/ui/src/components/workflow/node/_SharedNode.tsx b/ui/src/components/workflow/node/_SharedNode.tsx
index bfcc02297..11e17e0c3 100644
--- a/ui/src/components/workflow/node/_SharedNode.tsx
+++ b/ui/src/components/workflow/node/_SharedNode.tsx
@@ -1,12 +1,6 @@
 import { memo, useMemo, useRef } from "react";
 import { useTranslation } from "react-i18next";
-import {
-  CloseCircleOutlined as CloseCircleOutlinedIcon,
-  EllipsisOutlined as EllipsisOutlinedIcon,
-  FormOutlined as FormOutlinedIcon,
-  MoreOutlined as MoreOutlinedIcon,
-  SnippetsOutlined as SnippetsOutlinedIcon,
-} from "@ant-design/icons";
+import { IconCopy, IconDotsVertical, IconLabel, IconTrashX } from "@tabler/icons-react";
 import { useControllableValue } from "ahooks";
 import { Button, Card, Drawer, Dropdown, Input, type InputRef, type MenuProps, Modal, Popover, Space } from "antd";
 import { produce } from "immer";
@@ -150,14 +144,18 @@ const SharedNodeMenu = ({ menus, trigger, node, disabled, branchId, branchIndex,
         key: "rename",
         disabled: disabled,
         label: isNodeBranchLike(node) ? t("workflow_node.action.rename_branch") : t("workflow_node.action.rename_node"),
-        icon: <FormOutlinedIcon />,
+        icon: (
+          <span className="anticon scale-125">
+            <IconLabel size="1em" />
+          </span>
+        ),
         onClick: () => {
           nameRef.current = node.name;
 
           const dialog = modalApi.confirm({
             title: isNodeBranchLike(node) ? t("workflow_node.action.rename_branch") : t("workflow_node.action.rename_node"),
             content: (
-              <div className="pb-2 pt-4">
+              <div className="pt-4 pb-2">
                 <Input
                   ref={nameInputRef}
                   autoFocus
@@ -181,7 +179,11 @@ const SharedNodeMenu = ({ menus, trigger, node, disabled, branchId, branchIndex,
         key: "duplicate",
         disabled: disabled || isNodeUnduplicatable(node),
         label: isNodeBranchLike(node) ? t("workflow_node.action.duplicate_branch") : t("workflow_node.action.duplicate_node"),
-        icon: <SnippetsOutlinedIcon />,
+        icon: (
+          <span className="anticon scale-125">
+            <IconCopy size="1em" />
+          </span>
+        ),
         onClick: handleDuplicateClick,
       },
       {
@@ -191,7 +193,11 @@ const SharedNodeMenu = ({ menus, trigger, node, disabled, branchId, branchIndex,
         key: "remove",
         disabled: disabled || isNodeUnremovable(node),
         label: isNodeBranchLike(node) ? t("workflow_node.action.remove_branch") : t("workflow_node.action.remove_node"),
-        icon: <CloseCircleOutlinedIcon />,
+        icon: (
+          <span className="anticon scale-125">
+            <IconTrashX size="1em" />
+          </span>
+        ),
         danger: true,
         onClick: handleRemoveClick,
       },
@@ -248,14 +254,14 @@ const SharedNodeBlock = ({ children, node, disabled, onClick }: SharedNodeBlockP
         classNames={{ root: "shadow-md" }}
         styles={{ body: { padding: 0 } }}
         arrow={false}
-        content={<SharedNodeMenu node={node} disabled={disabled} trigger={<Button color="primary" icon={<MoreOutlinedIcon />} variant="text" />} />}
+        content={<SharedNodeMenu node={node} disabled={disabled} trigger={<Button color="primary" icon={<IconDotsVertical size="1em" />} variant="text" />} />}
         placement="rightTop"
       >
         <div className="relative w-[256px] overflow-hidden">
           <Card className="shadow-md" styles={{ body: { padding: 0 } }} hoverable>
-            <div className="bg-primary flex h-[48px] flex-col items-center justify-center truncate px-4 py-2 text-white">
+            <div className="flex h-[48px] flex-col items-center justify-center truncate bg-primary px-4 py-2 text-white">
               <SharedNodeTitle
-                className="focus:bg-background focus:text-foreground overflow-hidden outline-hidden focus:rounded-xs"
+                className="overflow-hidden outline-hidden focus:rounded-xs focus:bg-background focus:text-foreground"
                 node={node}
                 disabled={disabled}
               />
@@ -353,7 +359,7 @@ const SharedNodeConfigDrawer = ({
             menus={["rename", "remove"]}
             node={node}
             disabled={disabled}
-            trigger={<Button icon={<EllipsisOutlinedIcon />} type="text" />}
+            trigger={<Button icon={<IconDotsVertical size="1.25em" />} type="text" />}
             afterDelete={() => {
               setOpen(false);
             }}