From 561f383cbc8edbb43782469d2a7959993aff23dd Mon Sep 17 00:00:00 2001
From: yyh <yuanyouhuilyz@gmail.com>
Date: Fri, 30 Jan 2026 12:42:00 +0800
Subject: [PATCH] Revert "refactor(skill): replace React icon components with
 CSS Icons"

This reverts commit 919d7ef5cd174718060f87f8a0bd9bd134944a93.
---
 .../plugins/file-picker-panel.tsx             | 11 +++----
 .../file-reference-block/component.tsx        |  3 +-
 .../plugins/tool-block/component.tsx          |  6 ++--
 .../tool-block/tool-group-block-component.tsx |  7 +++--
 .../plugins/tool-block/tool-header.tsx        |  5 ++--
 .../workflow/skill/file-tab-item.tsx          |  3 +-
 .../skill/file-tree/artifacts-section.tsx     | 10 ++++---
 .../skill/file-tree/artifacts-tree.tsx        |  7 +++--
 .../workflow/skill/file-tree/index.tsx        |  6 ++--
 .../workflow/skill/file-tree/menu-item.tsx    |  6 ++--
 .../workflow/skill/file-tree/node-menu.tsx    | 29 +++++++++++++------
 .../skill/file-tree/tree-node-icon.tsx        |  5 ++--
 .../workflow/skill/file-tree/tree-node.tsx    |  3 +-
 .../skill/file-tree/upload-status-tooltip.tsx | 14 ++++++---
 .../workflow/skill/sidebar-search-add.tsx     | 23 ++++++++++-----
 .../workflow/skill/start-tab-item.tsx         |  5 ++--
 .../skill/start-tab/create-import-section.tsx |  5 ++--
 .../skill/start-tab/template-search.tsx       |  3 +-
 .../sqlite-file-preview/table-selector.tsx    | 13 +++++----
 19 files changed, 104 insertions(+), 60 deletions(-)

diff --git a/web/app/components/workflow/skill/editor/skill-editor/plugins/file-picker-panel.tsx b/web/app/components/workflow/skill/editor/skill-editor/plugins/file-picker-panel.tsx
index 340b395b48..bc19b18c0c 100644
--- a/web/app/components/workflow/skill/editor/skill-editor/plugins/file-picker-panel.tsx
+++ b/web/app/components/workflow/skill/editor/skill-editor/plugins/file-picker-panel.tsx
@@ -1,6 +1,7 @@
 import type { NodeRendererProps } from 'react-arborist'
 import type { FileAppearanceType } from '@/app/components/base/file-uploader/types'
 import type { TreeNodeData } from '@/app/components/workflow/skill/type'
+import { RiArrowDownSLine, RiArrowRightSLine, RiFolderLine, RiFolderOpenLine, RiQuestionLine } from '@remixicon/react'
 import { useSize } from 'ahooks'
 import * as React from 'react'
 import { useCallback, useMemo, useRef } from 'react'
@@ -65,8 +66,8 @@ const FilePickerTreeNode = ({ node, style, dragHandle, onSelectNode }: FilePicke
           {isFolder
             ? (
                 node.isOpen
-                  ? <span className="i-ri-folder-open-line size-4 text-text-accent" aria-hidden="true" />
-                  : <span className="i-ri-folder-line size-4 text-text-secondary" aria-hidden="true" />
+                  ? <RiFolderOpenLine className="size-4 text-text-accent" aria-hidden="true" />
+                  : <RiFolderLine className="size-4 text-text-secondary" aria-hidden="true" />
               )
             : (
                 <FileTypeIcon type={fileIconType as FileAppearanceType} size="sm" />
@@ -94,8 +95,8 @@ const FilePickerTreeNode = ({ node, style, dragHandle, onSelectNode }: FilePicke
           )}
         >
           {node.isOpen
-            ? <span className="i-ri-arrow-down-s-line size-4" aria-hidden="true" />
-            : <span className="i-ri-arrow-right-s-line size-4" aria-hidden="true" />}
+            ? <RiArrowDownSLine className="size-4" aria-hidden="true" />
+            : <RiArrowRightSLine className="size-4" aria-hidden="true" />}
         </button>
       )}
     </div>
@@ -161,7 +162,7 @@ const FilePickerPanel = ({
           <span className="flex-1 text-[12px] font-medium uppercase leading-4 text-text-tertiary">
             {t('skillEditor.referenceFiles')}
           </span>
-          <span className="i-ri-question-line size-4 text-text-tertiary" aria-hidden="true" />
+          <RiQuestionLine className="size-4 text-text-tertiary" aria-hidden="true" />
         </div>
       )}
       <div
diff --git a/web/app/components/workflow/skill/editor/skill-editor/plugins/file-reference-block/component.tsx b/web/app/components/workflow/skill/editor/skill-editor/plugins/file-reference-block/component.tsx
index df0edccc46..aca2f34ddd 100644
--- a/web/app/components/workflow/skill/editor/skill-editor/plugins/file-reference-block/component.tsx
+++ b/web/app/components/workflow/skill/editor/skill-editor/plugins/file-reference-block/component.tsx
@@ -2,6 +2,7 @@ import type { LexicalNode } from 'lexical'
 import type { FileAppearanceType } from '@/app/components/base/file-uploader/types'
 import type { TreeNodeData } from '@/app/components/workflow/skill/type'
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
+import { RiFolderLine } from '@remixicon/react'
 import { $getNodeByKey } from 'lexical'
 import * as React from 'react'
 import { useCallback, useMemo, useState } from 'react'
@@ -63,7 +64,7 @@ const FileReferenceBlock = ({ nodeKey, resourceId }: FileReferenceBlockProps) =>
         >
           <span className="flex items-center justify-center p-px">
             {isFolder
-              ? <span className="i-ri-folder-line size-[14px] text-text-accent" aria-hidden="true" />
+              ? <RiFolderLine className="size-[14px] text-text-accent" aria-hidden="true" />
               : (
                   <FileTypeIcon
                     type={(iconType || 'document') as FileAppearanceType}
diff --git a/web/app/components/workflow/skill/editor/skill-editor/plugins/tool-block/component.tsx b/web/app/components/workflow/skill/editor/skill-editor/plugins/tool-block/component.tsx
index a466c50c98..e2991c9cba 100644
--- a/web/app/components/workflow/skill/editor/skill-editor/plugins/tool-block/component.tsx
+++ b/web/app/components/workflow/skill/editor/skill-editor/plugins/tool-block/component.tsx
@@ -2,11 +2,13 @@ import type { PluginDetail } from '@/app/components/plugins/types'
 import type { Emoji } from '@/app/components/tools/types'
 import type { ToolValue } from '@/app/components/workflow/block-selector/types'
 import type { ToolWithProvider } from '@/app/components/workflow/types'
+import { RiAlertFill } from '@remixicon/react'
 import * as React from 'react'
 import { useEffect, useMemo, useState } from 'react'
 import { createPortal } from 'react-dom'
 import { useTranslation } from 'react-i18next'
 import AppIcon from '@/app/components/base/app-icon'
+import { InfoCircle } from '@/app/components/base/icons/src/vender/line/general'
 import Modal from '@/app/components/base/modal'
 import { useSelectOrDelete } from '@/app/components/base/prompt-editor/hooks'
 import { FormTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
@@ -490,7 +492,7 @@ const ToolBlockComponent = ({
       {needAuthorization && (
         <div className="flex min-h-[200px] flex-1 flex-col items-center justify-center px-4 py-6 text-text-tertiary">
           <div className="flex h-9 w-9 items-center justify-center rounded-full border border-divider-subtle">
-            <span className="i-custom-vender-line-general-info-circle h-4 w-4 text-text-tertiary" />
+            <InfoCircle className="h-4 w-4 text-text-tertiary" />
           </div>
           <div className="system-xs-regular mt-3 text-text-tertiary">
             {t('skillEditor.authorizationRequired', { ns: 'workflow' })}
@@ -534,7 +536,7 @@ const ToolBlockComponent = ({
         {needAuthorization && (
           <span className="system-2xs-medium-uppercase flex h-4 items-center gap-0.5 rounded-[5px] border border-text-warning bg-components-badge-bg-dimm px-1 text-text-warning">
             {authBadgeLabel}
-            <span className="i-ri-alert-fill h-3 w-3" />
+            <RiAlertFill className="h-3 w-3" />
           </span>
         )}
       </span>
diff --git a/web/app/components/workflow/skill/editor/skill-editor/plugins/tool-block/tool-group-block-component.tsx b/web/app/components/workflow/skill/editor/skill-editor/plugins/tool-block/tool-group-block-component.tsx
index b1d7363241..61e83af2ad 100644
--- a/web/app/components/workflow/skill/editor/skill-editor/plugins/tool-block/tool-group-block-component.tsx
+++ b/web/app/components/workflow/skill/editor/skill-editor/plugins/tool-block/tool-group-block-component.tsx
@@ -3,6 +3,7 @@ import type { PluginDetail } from '@/app/components/plugins/types'
 import type { ToolParameter } from '@/app/components/tools/types'
 import type { ToolValue } from '@/app/components/workflow/block-selector/types'
 import type { ToolWithProvider } from '@/app/components/workflow/types'
+import { RiAlertFill, RiCloseLine, RiEqualizer2Line } from '@remixicon/react'
 import * as React from 'react'
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import { createPortal } from 'react-dom'
@@ -649,7 +650,7 @@ const ToolGroupBlockComponent = ({
             }}
           >
             <span className="sr-only">{t('operation.close', { ns: 'common' })}</span>
-            <span className="i-ri-close-line h-4 w-4" />
+            <RiCloseLine className="h-4 w-4" />
           </button>
         </div>
         {providerDescription && (
@@ -740,7 +741,7 @@ const ToolGroupBlockComponent = ({
                               setExpandedToolId(item.configId)
                             }}
                           >
-                            <span className="i-ri-equalizer-2-line size-3.5" />
+                            <RiEqualizer2Line className="size-3.5" />
                             <span className="system-xs-medium">{t('operation.settings', { ns: 'common' })}</span>
                           </button>
                           <div className="mx-1 h-3 w-px bg-divider-regular "></div>
@@ -797,7 +798,7 @@ const ToolGroupBlockComponent = ({
           ? (
               <span className="system-2xs-medium-uppercase flex h-4 items-center gap-0.5 rounded-[5px] border border-text-warning bg-components-badge-bg-dimm px-1 text-text-warning">
                 {authBadgeLabel}
-                <span className="i-ri-alert-fill h-3 w-3" />
+                <RiAlertFill className="h-3 w-3" />
               </span>
             )
           : (
diff --git a/web/app/components/workflow/skill/editor/skill-editor/plugins/tool-block/tool-header.tsx b/web/app/components/workflow/skill/editor/skill-editor/plugins/tool-block/tool-header.tsx
index 3375cfb98f..5e38957dc9 100644
--- a/web/app/components/workflow/skill/editor/skill-editor/plugins/tool-block/tool-header.tsx
+++ b/web/app/components/workflow/skill/editor/skill-editor/plugins/tool-block/tool-header.tsx
@@ -1,6 +1,7 @@
 'use client'
 
 import type { Emoji } from '@/app/components/tools/types'
+import { RiArrowLeftSLine, RiCloseLine } from '@remixicon/react'
 import AppIcon from '@/app/components/base/app-icon'
 
 type ToolHeaderProps = {
@@ -70,7 +71,7 @@ const ToolHeader = ({
                   onBack()
                 }}
               >
-                <span className="i-ri-arrow-left-s-line h-4 w-4" />
+                <RiArrowLeftSLine className="h-4 w-4" />
               </button>
             )}
             {renderHeaderIcon()}
@@ -88,7 +89,7 @@ const ToolHeader = ({
               onClose()
             }}
           >
-            <span className="i-ri-close-line h-4 w-4" />
+            <RiCloseLine className="h-4 w-4" />
           </button>
         </div>
       </div>
diff --git a/web/app/components/workflow/skill/file-tab-item.tsx b/web/app/components/workflow/skill/file-tab-item.tsx
index b3a6faa65a..d9c6fc37eb 100644
--- a/web/app/components/workflow/skill/file-tab-item.tsx
+++ b/web/app/components/workflow/skill/file-tab-item.tsx
@@ -1,6 +1,7 @@
 'use client'
 
 import type { FileAppearanceType } from '@/app/components/base/file-uploader/types'
+import { RiCloseLine } from '@remixicon/react'
 import * as React from 'react'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -94,7 +95,7 @@ const FileTabItem = ({
         aria-label={t('operation.close', { ns: 'common' })}
         onClick={handleClose}
       >
-        <span className="i-ri-close-line size-4" aria-hidden="true" />
+        <RiCloseLine className="size-4" aria-hidden="true" />
       </button>
     </div>
   )
diff --git a/web/app/components/workflow/skill/file-tree/artifacts-section.tsx b/web/app/components/workflow/skill/file-tree/artifacts-section.tsx
index 398001c946..bd1f651d3f 100644
--- a/web/app/components/workflow/skill/file-tree/artifacts-section.tsx
+++ b/web/app/components/workflow/skill/file-tree/artifacts-section.tsx
@@ -1,9 +1,11 @@
 'use client'
 
 import type { SandboxFileTreeNode } from '@/types/sandbox-file'
+import { RiArrowDownSLine, RiArrowRightSLine, RiLoader2Line } from '@remixicon/react'
 import * as React from 'react'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import FolderSpark from '@/app/components/base/icons/src/vender/workflow/FolderSpark'
 import { useStore, useWorkflowStore } from '@/app/components/workflow/store'
 import { useAppContext } from '@/context/app-context'
 import { useDownloadSandboxFile, useSandboxFilesTree } from '@/service/use-sandbox-file'
@@ -65,7 +67,7 @@ const ArtifactsSection = ({ className }: ArtifactsSectionProps) => {
         >
           <div className="flex flex-1 items-center gap-1 py-0.5">
             <div className="flex size-5 items-center justify-center">
-              <span className="i-custom-vender-workflow-folder-spark size-4 text-text-secondary" aria-hidden="true" />
+              <FolderSpark className="size-4 text-text-secondary" aria-hidden="true" />
             </div>
             <span className="system-sm-semibold uppercase text-text-secondary">
               {t('skillSidebar.artifacts.title')}
@@ -74,15 +76,15 @@ const ArtifactsSection = ({ className }: ArtifactsSectionProps) => {
 
           <div className="relative flex items-center">
             {showSpinner
-              ? <span className="i-ri-loader-2-line size-3.5 animate-spin text-text-tertiary" aria-hidden="true" />
+              ? <RiLoader2Line className="size-3.5 animate-spin text-text-tertiary" aria-hidden="true" />
               : (
                   <>
                     {showBlueDot && (
                       <div className="absolute -left-2 size-[7px] rounded-full border border-white bg-state-accent-solid" />
                     )}
                     {isExpanded
-                      ? <span className="i-ri-arrow-down-s-line size-4 text-text-tertiary" aria-hidden="true" />
-                      : <span className="i-ri-arrow-right-s-line size-4 text-text-tertiary" aria-hidden="true" />}
+                      ? <RiArrowDownSLine className="size-4 text-text-tertiary" aria-hidden="true" />
+                      : <RiArrowRightSLine className="size-4 text-text-tertiary" aria-hidden="true" />}
                   </>
                 )}
           </div>
diff --git a/web/app/components/workflow/skill/file-tree/artifacts-tree.tsx b/web/app/components/workflow/skill/file-tree/artifacts-tree.tsx
index 502f4697b5..b363affa89 100644
--- a/web/app/components/workflow/skill/file-tree/artifacts-tree.tsx
+++ b/web/app/components/workflow/skill/file-tree/artifacts-tree.tsx
@@ -2,6 +2,7 @@
 
 import type { FileAppearanceType } from '@/app/components/base/file-uploader/types'
 import type { SandboxFileTreeNode } from '@/types/sandbox-file'
+import { RiDownloadLine, RiFolderLine, RiFolderOpenLine } from '@remixicon/react'
 import * as React from 'react'
 import { useCallback, useState } from 'react'
 import FileTypeIcon from '@/app/components/base/file-uploader/file-type-icon'
@@ -83,8 +84,8 @@ const ArtifactsTreeNode = ({
           {isFolder
             ? (
                 isExpanded
-                  ? <span className="i-ri-folder-open-line size-4 text-text-accent" aria-hidden="true" />
-                  : <span className="i-ri-folder-line size-4 text-text-secondary" aria-hidden="true" />
+                  ? <RiFolderOpenLine className="size-4 text-text-accent" aria-hidden="true" />
+                  : <RiFolderLine className="size-4 text-text-secondary" aria-hidden="true" />
               )
             : <FileTypeIcon type={fileIconType as FileAppearanceType} size="sm" />}
         </div>
@@ -106,7 +107,7 @@ const ArtifactsTreeNode = ({
             )}
             aria-label={`Download ${node.name}`}
           >
-            <span className="i-ri-download-line size-3.5 text-text-tertiary" />
+            <RiDownloadLine className="size-3.5 text-text-tertiary" />
           </button>
         )}
       </div>
diff --git a/web/app/components/workflow/skill/file-tree/index.tsx b/web/app/components/workflow/skill/file-tree/index.tsx
index f742b7a108..d801b907b2 100644
--- a/web/app/components/workflow/skill/file-tree/index.tsx
+++ b/web/app/components/workflow/skill/file-tree/index.tsx
@@ -4,6 +4,7 @@ import type { MoveHandler, NodeApi, NodeRendererProps, TreeApi } from 'react-arb
 import type { TreeNodeData } from '../type'
 import type { OpensObject } from '@/app/components/workflow/store/workflow/skill-editor/file-tree-slice'
 import type { AppAssetTreeView } from '@/types/app-asset'
+import { RiDragDropLine } from '@remixicon/react'
 import { useIsMutating } from '@tanstack/react-query'
 import { useSize } from 'ahooks'
 import * as React from 'react'
@@ -11,6 +12,7 @@ import { useCallback, useEffect, useMemo, useRef } from 'react'
 import { Tree } from 'react-arborist'
 import { useTranslation } from 'react-i18next'
 import Button from '@/app/components/base/button'
+import SearchMenu from '@/app/components/base/icons/src/vender/knowledge/SearchMenu'
 import Loading from '@/app/components/base/loading'
 import { useStore, useWorkflowStore } from '@/app/components/workflow/store'
 import { cn } from '@/utils/classnames'
@@ -79,7 +81,7 @@ const DropTip = () => {
   const { t } = useTranslation('workflow')
   return (
     <div className="flex shrink-0 items-center justify-center gap-2 py-4 text-text-quaternary">
-      <span className="i-ri-drag-drop-line size-4" aria-hidden="true" />
+      <RiDragDropLine className="size-4" aria-hidden="true" />
       <span className="system-xs-regular">
         {t('skillSidebar.dropTip')}
       </span>
@@ -346,7 +348,7 @@ const FileTree = ({ className }: FileTreeProps) => {
     return (
       <div className={cn('flex min-h-[150px] flex-1 flex-col overflow-y-auto', className)}>
         <div className="flex flex-1 flex-col items-center justify-center gap-2 pb-20">
-          <span className="i-custom-vender-knowledge-search-menu size-8 text-text-tertiary" aria-hidden="true" />
+          <SearchMenu className="size-8 text-text-tertiary" aria-hidden="true" />
           <span className="system-xs-regular text-text-secondary">
             {t('skillSidebar.searchNoResults')}
           </span>
diff --git a/web/app/components/workflow/skill/file-tree/menu-item.tsx b/web/app/components/workflow/skill/file-tree/menu-item.tsx
index 05b91b669f..b6bf17b88d 100644
--- a/web/app/components/workflow/skill/file-tree/menu-item.tsx
+++ b/web/app/components/workflow/skill/file-tree/menu-item.tsx
@@ -50,14 +50,14 @@ const labelVariants = cva('system-sm-regular text-text-secondary', {
 })
 
 export type MenuItemProps = {
-  icon: string
+  icon: React.ElementType
   label: string
   kbd?: readonly string[]
   onClick: React.MouseEventHandler<HTMLButtonElement>
   disabled?: boolean
 } & VariantProps<typeof menuItemVariants>
 
-const MenuItem = ({ icon, label, kbd, onClick, disabled, variant }: MenuItemProps) => {
+const MenuItem = ({ icon: Icon, label, kbd, onClick, disabled, variant }: MenuItemProps) => {
   const handleClick = React.useCallback((event: React.MouseEvent<HTMLButtonElement>) => {
     event.stopPropagation()
     onClick(event)
@@ -70,7 +70,7 @@ const MenuItem = ({ icon, label, kbd, onClick, disabled, variant }: MenuItemProp
       disabled={disabled}
       className={cn(menuItemVariants({ variant }))}
     >
-      <span className={cn(icon, iconVariants({ variant }))} aria-hidden="true" />
+      <Icon className={cn(iconVariants({ variant }))} aria-hidden="true" />
       <span className={cn(labelVariants({ variant }), 'flex-1 text-left')}>{label}</span>
       {kbd && kbd.length > 0 && <ShortcutsName keys={kbd} textColor="secondary" />}
     </button>
diff --git a/web/app/components/workflow/skill/file-tree/node-menu.tsx b/web/app/components/workflow/skill/file-tree/node-menu.tsx
index 2e402ff289..9d1c4802c2 100644
--- a/web/app/components/workflow/skill/file-tree/node-menu.tsx
+++ b/web/app/components/workflow/skill/file-tree/node-menu.tsx
@@ -3,10 +3,21 @@
 import type { NodeApi, TreeApi } from 'react-arborist'
 import type { NodeMenuType } from '../constants'
 import type { TreeNodeData } from '../type'
+import {
+  RiClipboardLine,
+  RiDeleteBinLine,
+  RiEdit2Line,
+  RiFileAddLine,
+  RiFolderAddLine,
+  RiFolderUploadLine,
+  RiScissorsLine,
+  RiUploadLine,
+} from '@remixicon/react'
 import * as React from 'react'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import Confirm from '@/app/components/base/confirm'
+import { Download02 } from '@/app/components/base/icons/src/vender/solid/general'
 import { useStore, useWorkflowStore } from '@/app/components/workflow/store'
 import { cn } from '@/utils/classnames'
 import { NODE_MENU_TYPE } from '../constants'
@@ -108,13 +119,13 @@ const NodeMenu = ({
           />
 
           <MenuItem
-            icon="i-ri-file-add-line"
+            icon={RiFileAddLine}
             label={t('skillSidebar.menu.newFile')}
             onClick={handleNewFile}
             disabled={isLoading}
           />
           <MenuItem
-            icon="i-ri-folder-add-line"
+            icon={RiFolderAddLine}
             label={t('skillSidebar.menu.newFolder')}
             onClick={handleNewFolder}
             disabled={isLoading}
@@ -123,13 +134,13 @@ const NodeMenu = ({
           <div className="my-1 h-px bg-divider-subtle" />
 
           <MenuItem
-            icon="i-ri-upload-line"
+            icon={RiUploadLine}
             label={t('skillSidebar.menu.uploadFile')}
             onClick={() => fileInputRef.current?.click()}
             disabled={isLoading}
           />
           <MenuItem
-            icon="i-ri-folder-upload-line"
+            icon={RiFolderUploadLine}
             label={t('skillSidebar.menu.uploadFolder')}
             onClick={() => folderInputRef.current?.click()}
             disabled={isLoading}
@@ -142,7 +153,7 @@ const NodeMenu = ({
       {!isFolder && (
         <>
           <MenuItem
-            icon="i-custom-vender-solid-general-download-02"
+            icon={Download02}
             label={t('skillSidebar.menu.download')}
             onClick={handleDownload}
             disabled={isLoading}
@@ -154,7 +165,7 @@ const NodeMenu = ({
       {!isRoot && (
         <>
           <MenuItem
-            icon="i-ri-scissors-line"
+            icon={RiScissorsLine}
             label={t('skillSidebar.menu.cut')}
             kbd={KBD_CUT}
             onClick={handleCut}
@@ -165,7 +176,7 @@ const NodeMenu = ({
 
       {isFolder && hasClipboard && (
         <MenuItem
-          icon="i-ri-clipboard-line"
+          icon={RiClipboardLine}
           label={t('skillSidebar.menu.paste')}
           kbd={KBD_PASTE}
           onClick={handlePaste}
@@ -177,13 +188,13 @@ const NodeMenu = ({
         <>
           <div className="my-1 h-px bg-divider-subtle" />
           <MenuItem
-            icon="i-ri-edit-2-line"
+            icon={RiEdit2Line}
             label={t('skillSidebar.menu.rename')}
             onClick={handleRename}
             disabled={isLoading}
           />
           <MenuItem
-            icon="i-ri-delete-bin-line"
+            icon={RiDeleteBinLine}
             label={t('skillSidebar.menu.delete')}
             onClick={handleDeleteClick}
             disabled={isLoading}
diff --git a/web/app/components/workflow/skill/file-tree/tree-node-icon.tsx b/web/app/components/workflow/skill/file-tree/tree-node-icon.tsx
index b9273bbf14..28f6c18e24 100644
--- a/web/app/components/workflow/skill/file-tree/tree-node-icon.tsx
+++ b/web/app/components/workflow/skill/file-tree/tree-node-icon.tsx
@@ -3,6 +3,7 @@
 // Icon rendering for tree nodes (folder/file icons with dirty indicator)
 
 import type { FileAppearanceType } from '@/app/components/base/file-uploader/types'
+import { RiFolderLine, RiFolderOpenLine } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import FileTypeIcon from '@/app/components/base/file-uploader/file-type-icon'
 import { cn } from '@/utils/classnames'
@@ -40,8 +41,8 @@ export const TreeNodeIcon = ({
         )}
       >
         {isOpen
-          ? <span className="i-ri-folder-open-line size-4 text-text-accent" aria-hidden="true" />
-          : <span className="i-ri-folder-line size-4 text-text-secondary" aria-hidden="true" />}
+          ? <RiFolderOpenLine className="size-4 text-text-accent" aria-hidden="true" />
+          : <RiFolderLine className="size-4 text-text-secondary" aria-hidden="true" />}
       </button>
     )
   }
diff --git a/web/app/components/workflow/skill/file-tree/tree-node.tsx b/web/app/components/workflow/skill/file-tree/tree-node.tsx
index 847def88e8..fada40afe1 100644
--- a/web/app/components/workflow/skill/file-tree/tree-node.tsx
+++ b/web/app/components/workflow/skill/file-tree/tree-node.tsx
@@ -2,6 +2,7 @@
 
 import type { NodeRendererProps } from 'react-arborist'
 import type { TreeNodeData } from '../type'
+import { RiMoreFill } from '@remixicon/react'
 import * as React from 'react'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -170,7 +171,7 @@ const TreeNode = ({ node, style, dragHandle, treeChildren }: TreeNodeProps) => {
             )}
             aria-label={t('skillSidebar.menu.moreActions')}
           >
-            <span className="i-ri-more-fill size-4 text-text-tertiary" aria-hidden="true" />
+            <RiMoreFill className="size-4 text-text-tertiary" aria-hidden="true" />
           </button>
         </PortalToFollowElemTrigger>
         <PortalToFollowElemContent className="z-[100]">
diff --git a/web/app/components/workflow/skill/file-tree/upload-status-tooltip.tsx b/web/app/components/workflow/skill/file-tree/upload-status-tooltip.tsx
index ca852eb9c9..606e5a6650 100644
--- a/web/app/components/workflow/skill/file-tree/upload-status-tooltip.tsx
+++ b/web/app/components/workflow/skill/file-tree/upload-status-tooltip.tsx
@@ -1,6 +1,12 @@
 'use client'
 
 import type { ReactNode } from 'react'
+import {
+  RiAlertFill,
+  RiCheckboxCircleFill,
+  RiCloseLine,
+  RiUploadCloud2Line,
+} from '@remixicon/react'
 import { memo, useEffect, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useStore, useWorkflowStore } from '@/app/components/workflow/store'
@@ -68,13 +74,13 @@ const UploadStatusTooltip = ({ fallback }: UploadStatusTooltipProps) => {
 
         <div className="relative z-10 shrink-0">
           {uploadStatus === 'uploading' && (
-            <span className="i-ri-upload-cloud-2-line size-6 text-text-accent" />
+            <RiUploadCloud2Line className="size-6 text-text-accent" />
           )}
           {uploadStatus === 'success' && (
-            <span className="i-ri-checkbox-circle-fill size-5 text-text-success" />
+            <RiCheckboxCircleFill className="size-5 text-text-success" />
           )}
           {uploadStatus === 'partial_error' && (
-            <span className="i-ri-alert-fill size-5 text-text-warning" />
+            <RiAlertFill className="size-5 text-text-warning" />
           )}
         </div>
 
@@ -112,7 +118,7 @@ const UploadStatusTooltip = ({ fallback }: UploadStatusTooltipProps) => {
           className="relative z-10 shrink-0 rounded p-0.5 text-text-tertiary hover:text-text-secondary focus-visible:outline focus-visible:outline-2 focus-visible:outline-state-accent-solid"
           onClick={handleClose}
         >
-          <span className="i-ri-close-line size-4" />
+          <RiCloseLine className="size-4" />
         </button>
       </div>
     </div>
diff --git a/web/app/components/workflow/skill/sidebar-search-add.tsx b/web/app/components/workflow/skill/sidebar-search-add.tsx
index e200b69f8c..acf5718a16 100644
--- a/web/app/components/workflow/skill/sidebar-search-add.tsx
+++ b/web/app/components/workflow/skill/sidebar-search-add.tsx
@@ -1,5 +1,12 @@
 'use client'
 
+import {
+  RiAddLine,
+  RiFileAddLine,
+  RiFolderAddLine,
+  RiFolderUploadLine,
+  RiUploadLine,
+} from '@remixicon/react'
 import * as React from 'react'
 import { useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -18,13 +25,13 @@ import { useSkillAssetTreeData } from './hooks/use-skill-asset-tree'
 import { getTargetFolderIdFromSelection } from './utils/tree-utils'
 
 type MenuItemProps = {
-  icon: string
+  icon: React.ElementType
   label: string
   onClick: () => void
   disabled?: boolean
 }
 
-const MenuItem = ({ icon, label, onClick, disabled }: MenuItemProps) => (
+const MenuItem = ({ icon: Icon, label, onClick, disabled }: MenuItemProps) => (
   <button
     type="button"
     onClick={onClick}
@@ -35,7 +42,7 @@ const MenuItem = ({ icon, label, onClick, disabled }: MenuItemProps) => (
       'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-components-input-border-active',
     )}
   >
-    <span className={cn(icon, 'size-4 text-text-tertiary')} aria-hidden="true" />
+    <Icon className="size-4 text-text-tertiary" aria-hidden="true" />
     <span className="system-sm-regular text-text-secondary">
       {label}
     </span>
@@ -93,7 +100,7 @@ const SidebarSearchAdd = () => {
             className="!size-6 shrink-0 !p-1"
             aria-label={t('operation.add', { ns: 'common' })}
           >
-            <span className="i-ri-add-line size-4" aria-hidden="true" />
+            <RiAddLine className="size-4" aria-hidden="true" />
           </Button>
         </PortalToFollowElemTrigger>
         <PortalToFollowElemContent className="z-[30]">
@@ -115,13 +122,13 @@ const SidebarSearchAdd = () => {
             />
 
             <MenuItem
-              icon="i-ri-file-add-line"
+              icon={RiFileAddLine}
               label={t('skillSidebar.menu.newFile')}
               onClick={handleNewFile}
               disabled={isLoading}
             />
             <MenuItem
-              icon="i-ri-folder-add-line"
+              icon={RiFolderAddLine}
               label={t('skillSidebar.menu.newFolder')}
               onClick={handleNewFolder}
               disabled={isLoading}
@@ -130,13 +137,13 @@ const SidebarSearchAdd = () => {
             <div className="my-1 h-px bg-divider-subtle" />
 
             <MenuItem
-              icon="i-ri-upload-line"
+              icon={RiUploadLine}
               label={t('skillSidebar.menu.uploadFile')}
               onClick={() => fileInputRef.current?.click()}
               disabled={isLoading}
             />
             <MenuItem
-              icon="i-ri-folder-upload-line"
+              icon={RiFolderUploadLine}
               label={t('skillSidebar.menu.uploadFolder')}
               onClick={() => folderInputRef.current?.click()}
               disabled={isLoading}
diff --git a/web/app/components/workflow/skill/start-tab-item.tsx b/web/app/components/workflow/skill/start-tab-item.tsx
index 1ad24688f8..3f6559293e 100644
--- a/web/app/components/workflow/skill/start-tab-item.tsx
+++ b/web/app/components/workflow/skill/start-tab-item.tsx
@@ -2,6 +2,7 @@
 
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
+import Home from '@/app/components/base/icons/src/vender/workflow/Home'
 import { cn } from '@/utils/classnames'
 
 type StartTabItemProps = {
@@ -31,8 +32,8 @@ const StartTabItem = ({
         onClick={onClick}
       >
         <div className="flex size-5 shrink-0 items-center justify-center">
-          <span className={cn(
-            'i-custom-vender-workflow-home size-4',
+          <Home className={cn(
+            'size-4',
             isActive ? 'text-text-secondary' : 'text-text-tertiary',
           )}
           />
diff --git a/web/app/components/workflow/skill/start-tab/create-import-section.tsx b/web/app/components/workflow/skill/start-tab/create-import-section.tsx
index 4c58a289e4..12967c2221 100644
--- a/web/app/components/workflow/skill/start-tab/create-import-section.tsx
+++ b/web/app/components/workflow/skill/start-tab/create-import-section.tsx
@@ -1,5 +1,6 @@
 'use client'
 
+import { RiAddCircleFill, RiUploadLine } from '@remixicon/react'
 import { memo } from 'react'
 import { useTranslation } from 'react-i18next'
 import ActionCard from './action-card'
@@ -10,12 +11,12 @@ const CreateImportSection = () => {
   return (
     <div className="grid grid-cols-3 gap-2 px-6 pb-4 pt-6">
       <ActionCard
-        icon={<span className="i-ri-add-circle-fill size-5 text-text-accent" />}
+        icon={<RiAddCircleFill className="size-5 text-text-accent" />}
         title={t('skill.startTab.createBlankSkill')}
         description={t('skill.startTab.createBlankSkillDesc')}
       />
       <ActionCard
-        icon={<span className="i-ri-upload-line size-5 text-text-accent" />}
+        icon={<RiUploadLine className="size-5 text-text-accent" />}
         title={t('skill.startTab.importSkill')}
         description={t('skill.startTab.importSkillDesc')}
       />
diff --git a/web/app/components/workflow/skill/start-tab/template-search.tsx b/web/app/components/workflow/skill/start-tab/template-search.tsx
index 0b07884f44..dafc00f03b 100644
--- a/web/app/components/workflow/skill/start-tab/template-search.tsx
+++ b/web/app/components/workflow/skill/start-tab/template-search.tsx
@@ -1,5 +1,6 @@
 'use client'
 
+import { RiSearchLine } from '@remixicon/react'
 import { memo } from 'react'
 import { useTranslation } from 'react-i18next'
 
@@ -16,7 +17,7 @@ const TemplateSearch = ({
 
   return (
     <div className="flex shrink-0 items-center gap-0.5 rounded-md bg-components-input-bg-normal p-2">
-      <span className="i-ri-search-line size-4 shrink-0 text-text-placeholder" aria-hidden="true" />
+      <RiSearchLine className="size-4 shrink-0 text-text-placeholder" aria-hidden="true" />
       <input
         type="text"
         name="template-search"
diff --git a/web/app/components/workflow/skill/viewer/sqlite-file-preview/table-selector.tsx b/web/app/components/workflow/skill/viewer/sqlite-file-preview/table-selector.tsx
index bec887a435..66078dd38d 100644
--- a/web/app/components/workflow/skill/viewer/sqlite-file-preview/table-selector.tsx
+++ b/web/app/components/workflow/skill/viewer/sqlite-file-preview/table-selector.tsx
@@ -1,6 +1,9 @@
+import { RiArrowDownSLine } from '@remixicon/react'
 import * as React from 'react'
 import { useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import { Check } from '@/app/components/base/icons/src/vender/line/general'
+import { TableCells } from '@/app/components/base/icons/src/vender/solid/development'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
@@ -37,7 +40,7 @@ const TableSelector = ({
   if (isSingleTable) {
     return (
       <div className="inline-flex items-center gap-1 rounded-[6px] px-1.5 py-1 text-text-secondary">
-        <span className="i-custom-vender-solid-development-table-cells h-3.5 w-3.5 text-text-secondary" aria-hidden="true" />
+        <TableCells className="h-3.5 w-3.5 text-text-secondary" aria-hidden="true" />
         <span className={cn('system-sm-medium min-w-0 max-w-[220px] truncate', isPlaceholder && 'text-text-tertiary')}>
           {label}
         </span>
@@ -67,11 +70,11 @@ const TableSelector = ({
               isLoading ? 'cursor-not-allowed opacity-60' : 'cursor-pointer hover:bg-state-base-hover',
             )}
           >
-            <span className="i-custom-vender-solid-development-table-cells h-3.5 w-3.5 text-text-secondary" aria-hidden="true" />
+            <TableCells className="h-3.5 w-3.5 text-text-secondary" aria-hidden="true" />
             <span className={cn('system-sm-medium min-w-0 max-w-[220px] truncate', isPlaceholder && 'text-text-tertiary')}>
               {label}
             </span>
-            <span className="i-ri-arrow-down-s-line h-3.5 w-3.5 text-text-secondary" aria-hidden="true" />
+            <RiArrowDownSLine className="h-3.5 w-3.5 text-text-secondary" aria-hidden="true" />
           </button>
         </PortalToFollowElemTrigger>
         <PortalToFollowElemContent className="z-20">
@@ -90,10 +93,10 @@ const TableSelector = ({
                   setOpen(false)
                 }}
               >
-                <span className="i-custom-vender-solid-development-table-cells h-4 w-4 shrink-0 text-text-secondary" aria-hidden="true" />
+                <TableCells className="h-4 w-4 shrink-0 text-text-secondary" aria-hidden="true" />
                 <span className="flex-1 truncate px-1">{item.name}</span>
                 {item.value === selectedTable && (
-                  <span className="i-custom-vender-line-general-check h-4 w-4 shrink-0 text-text-accent" aria-hidden="true" />
+                  <Check className="h-4 w-4 shrink-0 text-text-accent" aria-hidden="true" />
                 )}
               </button>
             ))}