Revert "[autofix.ci] apply automated fixes"

This reverts commit 01a05289e9.

web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/time-range-picker/date-picker.tsx

@@ -2,6 +2,7 @@
 import type { Dayjs } from 'dayjs'
 import type { FC } from 'react'
 import type { TriggerProps } from '@/app/components/base/date-and-time-picker/types'
+import { RiCalendarLine } from '@remixicon/react'
 import dayjs from 'dayjs'
 import { noop } from 'es-toolkit/function'
 import * as React from 'react'
@@ -52,7 +53,7 @@ const DatePicker: FC<Props> = ({
   return (
     <div className="flex h-8 items-center space-x-0.5 rounded-lg bg-components-input-bg-normal px-2">
       <div className="p-px">
-        <span className="i-ri-calendar-line size-3.5 text-text-tertiary" />
+        <RiCalendarLine className="size-3.5 text-text-tertiary" />
       </div>
       <Picker
         value={start}

web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/time-range-picker/range-selector.tsx

@@ -3,6 +3,7 @@ import type { FC } from 'react'
 import type { PeriodParamsWithTimeRange, TimeRange } from '@/app/components/app/overview/app-chart'
 import type { Item } from '@/app/components/base/select'
 import type { I18nKeysByPrefix } from '@/types/i18n'
+import { RiArrowDownSLine, RiCheckLine } from '@remixicon/react'
 import dayjs from 'dayjs'
 import * as React from 'react'
 import { useCallback } from 'react'
@@ -45,7 +46,7 @@ const RangeSelector: FC<Props> = ({
     return (
       <div className={cn('flex h-8 cursor-pointer items-center space-x-1.5 rounded-lg bg-components-input-bg-normal pl-3 pr-2', isOpen && 'bg-state-base-hover-alt')}>
         <div className="system-sm-regular text-components-input-text-filled">{isCustomRange ? t('filter.period.custom', { ns: 'appLog' }) : item?.name}</div>
-        <span className={`i-ri-arrow-down-sline ${cn('size-4 text-text-quaternary', isOpen && 'text-text-secondary')}`} />
+        <RiArrowDownSLine className={cn('size-4 text-text-quaternary', isOpen && 'text-text-secondary')} />
       </div>
     )
   }, [isCustomRange])
@@ -59,7 +60,7 @@ const RangeSelector: FC<Props> = ({
               'absolute left-2 top-[9px] flex items-center  text-text-accent',
             )}
           >
-            <span className="i-ri-check-line h-4 w-4" aria-hidden="true" />
+            <RiCheckLine className="h-4 w-4" aria-hidden="true" />
           </span>
         )}
         <span className={cn('system-md-regular block truncate')}>{item.name}</span>

web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/panel.tsx

@@ -2,7 +2,10 @@
 import type { FC } from 'react'
 import type { AliyunConfig, ArizeConfig, DatabricksConfig, LangFuseConfig, LangSmithConfig, MLflowConfig, OpikConfig, PhoenixConfig, TencentConfig, WeaveConfig } from './type'
 import type { TracingStatus } from '@/models/app'
-
+import {
+  RiArrowDownDoubleLine,
+  RiEqualizer2Line,
+} from '@remixicon/react'
 import { useBoolean } from 'ahooks'
 import { usePathname } from 'next/navigation'
 import * as React from 'react'
@@ -253,11 +256,11 @@ const Panel: FC = () => {
             <TracingIcon size="md" />
             <div className="system-sm-semibold mx-2 text-text-secondary">{t(`${I18N_PREFIX}.title`, { ns: 'app' })}</div>
             <div className="rounded-md p-1">
-              <span className="i-ri-equalizer-2-line h-4 w-4 text-text-tertiary" />
+              <RiEqualizer2Line className="h-4 w-4 text-text-tertiary" />
             </div>
             <Divider type="vertical" className="h-3.5" />
             <div className="rounded-md p-1">
-              <span className="i-ri-arrow-down-double-line h-4 w-4 text-text-tertiary" />
+              <RiArrowDownDoubleLine className="h-4 w-4 text-text-tertiary" />
             </div>
           </div>
         </ConfigButton>
@@ -297,7 +300,7 @@ const Panel: FC = () => {
             </div>
             {InUseProviderIcon && <InUseProviderIcon className="ml-1 h-4" />}
             <div className="ml-2 rounded-md p-1">
-              <span className="i-ri-equalizer-2-line h-4 w-4 text-text-tertiary" />
+              <RiEqualizer2Line className="h-4 w-4 text-text-tertiary" />
             </div>
             <Divider type="vertical" className="h-3.5" />
           </div>

web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/provider-panel.tsx

@@ -1,6 +1,8 @@
 'use client'
 import type { FC } from 'react'
-
+import {
+  RiEqualizer2Line,
+} from '@remixicon/react'
 import * as React from 'react'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -94,7 +96,7 @@ const ProviderPanel: FC<Props> = ({
               className="flex h-6 cursor-pointer items-center space-x-1 rounded-md border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg px-2 text-text-secondary shadow-xs"
               onClick={handleConfigBtnClick}
             >
-              <span className="i-ri-equalizer-2-line h-3 w-3" />
+              <RiEqualizer2Line className="h-3 w-3" />
               <div className="text-xs font-medium">{t(`${I18N_PREFIX}.config`, { ns: 'app' })}</div>
             </div>
           </div>

web/app/(shareLayout)/webapp-reset-password/check-code/page.tsx

@@ -1,4 +1,5 @@
 'use client'
+import { RiArrowLeftLine, RiMailSendFill } from '@remixicon/react'
 import { useRouter, useSearchParams } from 'next/navigation'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -65,7 +66,7 @@ export default function CheckCode() {
   return (
     <div className="flex flex-col gap-3">
       <div className="inline-flex h-14 w-14 items-center justify-center rounded-2xl border border-components-panel-border-subtle bg-background-default-dodge text-text-accent-light-mode-only shadow-lg">
-        <span className="i-ri-mail-send-fill h-6 w-6 text-2xl" />
+        <RiMailSendFill className="h-6 w-6 text-2xl" />
       </div>
       <div className="pb-4 pt-2">
         <h2 className="title-4xl-semi-bold text-text-primary">{t('checkCode.checkYourEmail', { ns: 'login' })}</h2>
@@ -91,7 +92,7 @@ export default function CheckCode() {
       </div>
       <div onClick={() => router.back()} className="flex h-9 cursor-pointer items-center justify-center text-text-tertiary">
         <div className="bg-background-default-dimm inline-block rounded-full p-1">
-          <span className="i-ri-arrow-left-line size-3" />
+          <RiArrowLeftLine size={12} />
         </div>
         <span className="system-xs-regular ml-2">{t('back', { ns: 'login' })}</span>
       </div>

web/app/(shareLayout)/webapp-reset-password/page.tsx

@@ -1,4 +1,5 @@
 'use client'
+import { RiArrowLeftLine, RiLockPasswordLine } from '@remixicon/react'
 import { noop } from 'es-toolkit/function'
 import Link from 'next/link'
 import { useRouter, useSearchParams } from 'next/navigation'
@@ -70,7 +71,7 @@ export default function CheckCode() {
   return (
     <div className="flex flex-col gap-3">
       <div className="inline-flex h-14 w-14 items-center justify-center rounded-2xl border border-components-panel-border-subtle bg-background-default-dodge shadow-lg">
-        <span className="i-ri-lock-password-line h-6 w-6 text-2xl text-text-accent-light-mode-only" />
+        <RiLockPasswordLine className="h-6 w-6 text-2xl text-text-accent-light-mode-only" />
       </div>
       <div className="pb-4 pt-2">
         <h2 className="title-4xl-semi-bold text-text-primary">{t('resetPassword', { ns: 'login' })}</h2>
@@ -96,7 +97,7 @@ export default function CheckCode() {
       </div>
       <Link href={`/webapp-signin?${searchParams.toString()}`} className="flex h-9 items-center justify-center text-text-tertiary hover:text-text-primary">
         <div className="inline-block rounded-full bg-background-default-dimmed p-1">
-          <span className="i-ri-arrow-left-line size-3" />
+          <RiArrowLeftLine size={12} />
         </div>
         <span className="system-xs-regular ml-2">{t('backToLogin', { ns: 'login' })}</span>
       </Link>

web/app/(shareLayout)/webapp-reset-password/set-password/page.tsx

@@ -1,4 +1,5 @@
 'use client'
+import { RiCheckboxCircleFill } from '@remixicon/react'
 import { useCountDown } from 'ahooks'
 import { useRouter, useSearchParams } from 'next/navigation'
 import { useCallback, useState } from 'react'
@@ -167,7 +168,7 @@ const ChangePasswordForm = () => {
         <div className="flex flex-col md:w-[400px]">
           <div className="mx-auto w-full">
             <div className="mb-3 flex h-14 w-14 items-center justify-center rounded-2xl border border-components-panel-border-subtle font-bold shadow-lg">
-              <span className="i-ri-checkbox-circle-fill h-6 w-6 text-text-success" />
+              <RiCheckboxCircleFill className="h-6 w-6 text-text-success" />
             </div>
             <h2 className="title-4xl-semi-bold text-text-primary">
               {t('passwordChangedTip', { ns: 'login' })}

web/app/(shareLayout)/webapp-signin/check-code/page.tsx

@@ -1,5 +1,6 @@
 'use client'
 import type { FormEvent } from 'react'
+import { RiArrowLeftLine, RiMailSendFill } from '@remixicon/react'
 import { useRouter, useSearchParams } from 'next/navigation'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -106,7 +107,7 @@ export default function CheckCode() {
   return (
     <div className="flex w-[400px] flex-col gap-3">
       <div className="inline-flex h-14 w-14 items-center justify-center rounded-2xl border border-components-panel-border-subtle bg-background-default-dodge shadow-lg">
-        <span className="i-ri-mail-send-fill h-6 w-6 text-2xl text-text-accent-light-mode-only" />
+        <RiMailSendFill className="h-6 w-6 text-2xl text-text-accent-light-mode-only" />
       </div>
       <div className="pb-4 pt-2">
         <h2 className="title-4xl-semi-bold text-text-primary">{t('checkCode.checkYourEmail', { ns: 'login' })}</h2>
@@ -139,7 +140,7 @@ export default function CheckCode() {
       </div>
       <div onClick={() => router.back()} className="flex h-9 cursor-pointer items-center justify-center text-text-tertiary">
         <div className="bg-background-default-dimm inline-block rounded-full p-1">
-          <span className="i-ri-arrow-left-line size-3" />
+          <RiArrowLeftLine size={12} />
         </div>
         <span className="system-xs-regular ml-2">{t('back', { ns: 'login' })}</span>
       </div>

web/app/(shareLayout)/webapp-signin/normalForm.tsx

@@ -1,4 +1,5 @@
 'use client'
+import { RiContractLine, RiDoorLockLine, RiErrorWarningFill } from '@remixicon/react'
 import Link from 'next/link'
 import * as React from 'react'
 import { useCallback, useEffect, useState } from 'react'
@@ -56,8 +57,8 @@ const NormalForm = () => {
         <div className="relative">
           <div className="rounded-lg bg-gradient-to-r from-workflow-workflow-progress-bg-1 to-workflow-workflow-progress-bg-2 p-4">
             <div className="shadows-shadow-lg relative mb-2 flex h-10 w-10 items-center justify-center rounded-xl bg-components-card-bg shadow">
-              <span className="i-ri-contract-line h-5 w-5" />
-              <span className="i-ri-error-warning-fill absolute -right-1 -top-1 h-4 w-4 text-text-warning-secondary" />
+              <RiContractLine className="h-5 w-5" />
+              <RiErrorWarningFill className="absolute -right-1 -top-1 h-4 w-4 text-text-warning-secondary" />
             </div>
             <p className="system-sm-medium text-text-primary">{t('licenseLost', { ns: 'login' })}</p>
             <p className="system-xs-regular mt-1 text-text-tertiary">{t('licenseLostTip', { ns: 'login' })}</p>
@@ -72,8 +73,8 @@ const NormalForm = () => {
         <div className="relative">
           <div className="rounded-lg bg-gradient-to-r from-workflow-workflow-progress-bg-1 to-workflow-workflow-progress-bg-2 p-4">
             <div className="shadows-shadow-lg relative mb-2 flex h-10 w-10 items-center justify-center rounded-xl bg-components-card-bg shadow">
-              <span className="i-ri-contract-line h-5 w-5" />
-              <span className="i-ri-error-warning-fill absolute -right-1 -top-1 h-4 w-4 text-text-warning-secondary" />
+              <RiContractLine className="h-5 w-5" />
+              <RiErrorWarningFill className="absolute -right-1 -top-1 h-4 w-4 text-text-warning-secondary" />
             </div>
             <p className="system-sm-medium text-text-primary">{t('licenseExpired', { ns: 'login' })}</p>
             <p className="system-xs-regular mt-1 text-text-tertiary">{t('licenseExpiredTip', { ns: 'login' })}</p>
@@ -88,8 +89,8 @@ const NormalForm = () => {
         <div className="relative">
           <div className="rounded-lg bg-gradient-to-r from-workflow-workflow-progress-bg-1 to-workflow-workflow-progress-bg-2 p-4">
             <div className="shadows-shadow-lg relative mb-2 flex h-10 w-10 items-center justify-center rounded-xl bg-components-card-bg shadow">
-              <span className="i-ri-contract-line h-5 w-5" />
-              <span className="i-ri-error-warning-fill absolute -right-1 -top-1 h-4 w-4 text-text-warning-secondary" />
+              <RiContractLine className="h-5 w-5" />
+              <RiErrorWarningFill className="absolute -right-1 -top-1 h-4 w-4 text-text-warning-secondary" />
             </div>
             <p className="system-sm-medium text-text-primary">{t('licenseInactive', { ns: 'login' })}</p>
             <p className="system-xs-regular mt-1 text-text-tertiary">{t('licenseInactiveTip', { ns: 'login' })}</p>
@@ -155,7 +156,7 @@ const NormalForm = () => {
             <>
               <div className="rounded-lg bg-gradient-to-r from-workflow-workflow-progress-bg-1 to-workflow-workflow-progress-bg-2 p-4">
                 <div className="shadows-shadow-lg mb-2 flex h-10 w-10 items-center justify-center rounded-xl bg-components-card-bg shadow">
-                  <span className="i-ri-door-lock-line h-5 w-5" />
+                  <RiDoorLockLine className="h-5 w-5" />
                 </div>
                 <p className="system-sm-medium text-text-primary">{t('noLoginMethod', { ns: 'login' })}</p>
                 <p className="system-xs-regular mt-1 text-text-tertiary">{t('noLoginMethodTip', { ns: 'login' })}</p>

web/app/account/(commonLayout)/account-page/AvatarWithEdit.tsx

@@ -4,6 +4,7 @@ import type { Area } from 'react-easy-crop'
 import type { OnImageInput } from '@/app/components/base/app-icon-picker/ImageInput'
 import type { AvatarProps } from '@/app/components/base/avatar'
 import type { ImageFile } from '@/types/app'
+import { RiDeleteBin5Line, RiPencilLine } from '@remixicon/react'
 import * as React from 'react'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -121,12 +122,12 @@ const AvatarWithEdit = ({ onSave, ...props }: AvatarWithEditProps) => {
             {hoverArea === 'right' && !onAvatarError
               ? (
                   <span className="text-xs text-white">
-                    <span className="i-ri-delete-bin-5-line" />
+                    <RiDeleteBin5Line />
                   </span>
                 )
               : (
                   <span className="text-xs text-white">
-                    <span className="i-ri-pencil-line" />
+                    <RiPencilLine />
                   </span>
                 )}
           </div>

web/app/account/(commonLayout)/account-page/email-change-modal.tsx

@@ -1,4 +1,5 @@
 import type { ResponseError } from '@/service/fetch'
+import { RiCloseLine } from '@remixicon/react'
 import { noop } from 'es-toolkit/function'
 import { useRouter } from 'next/navigation'
 import * as React from 'react'
@@ -204,7 +205,7 @@ const EmailChangeModal = ({ onClose, email, show }: Props) => {
       className="!w-[420px] !p-6"
     >
       <div className="absolute right-5 top-5 cursor-pointer p-1.5" onClick={onClose}>
-        <span className="i-ri-close-line h-5 w-5 text-text-tertiary" />
+        <RiCloseLine className="h-5 w-5 text-text-tertiary" />
       </div>
       {step === STEP.start && (
         <>

web/app/account/(commonLayout)/account-page/index.tsx

@@ -1,7 +1,9 @@
 'use client'
 import type { IItem } from '@/app/components/header/account-setting/collapse'
 import type { App } from '@/types/app'
-
+import {
+  RiGraduationCapFill,
+} from '@remixicon/react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
@@ -153,7 +155,7 @@ export default function AccountPage() {
             {userProfile.name}
             {isEducationAccount && (
               <PremiumBadge size="s" color="blue" className="ml-1 !px-2">
-                <span className="i-ri-graduation-cap-fill mr-1 h-3 w-3" />
+                <RiGraduationCapFill className="mr-1 h-3 w-3" />
                 <span className="system-2xs-medium">EDU</span>
               </PremiumBadge>
             )}

web/app/account/(commonLayout)/avatar.tsx

@@ -1,6 +1,8 @@
 'use client'
 import { Menu, MenuButton, MenuItem, MenuItems, Transition } from '@headlessui/react'
-
+import {
+  RiGraduationCapFill,
+} from '@remixicon/react'
 import { useRouter } from 'next/navigation'
 import { Fragment } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -75,7 +77,7 @@ export default function AppSelector() {
                           {userProfile.name}
                           {isEducationAccount && (
                             <PremiumBadge size="s" color="blue" className="ml-1 !px-2">
-                              <span className="i-ri-graduation-cap-fill mr-1 h-3 w-3" />
+                              <RiGraduationCapFill className="mr-1 h-3 w-3" />
                               <span className="system-2xs-medium">EDU</span>
                             </PremiumBadge>
                           )}

web/app/account/(commonLayout)/header.tsx

@@ -1,4 +1,5 @@
 'use client'
+import { RiArrowRightUpLine, RiRobot2Line } from '@remixicon/react'
 import { useRouter } from 'next/navigation'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -35,9 +36,9 @@ const Header = () => {
       </div>
       <div className="flex shrink-0 items-center gap-3">
         <Button className="system-sm-medium gap-2 px-3 py-2" onClick={goToStudio}>
-          <span className="i-ri-robot-2-line h-4 w-4" />
+          <RiRobot2Line className="h-4 w-4" />
           <p>{t('account.studio', { ns: 'common' })}</p>
-          <span className="i-ri-arrow-right-up-line h-4 w-4" />
+          <RiArrowRightUpLine className="h-4 w-4" />
         </Button>
         <div className="h-4 w-[1px] bg-divider-regular" />
         <Avatar />

web/app/account/oauth/authorize/page.tsx

@@ -167,7 +167,7 @@ export default function OAuthAuthorize() {
             const Icon = SCOPE_INFO_MAP[scope]
             return (
               <div key={scope} className="body-sm-medium flex items-center gap-2 text-text-secondary">
-                {Icon ? <Icon.icon className="h-4 w-4" /> : <span className="i-ri-account-circle-line h-4 w-4" />}
+                {Icon ? <Icon.icon className="h-4 w-4" /> : <RiAccountCircleLine className="h-4 w-4" />}
                 {Icon.label}
               </div>
             )

web/app/components/app-sidebar/app-info.tsx

@@ -2,7 +2,15 @@ import type { Operation } from './app-operations'
 import type { DuplicateAppModalProps } from '@/app/components/app/duplicate-modal'
 import type { CreateAppModalProps } from '@/app/components/explore/create-app-modal'
 import type { EnvironmentVariable } from '@/app/components/workflow/types'
-
+import {
+  RiDeleteBinLine,
+  RiEditLine,
+  RiEqualizer2Line,
+  RiExchange2Line,
+  RiFileCopy2Line,
+  RiFileDownloadLine,
+  RiFileUploadLine,
+} from '@remixicon/react'
 import dynamic from 'next/dynamic'
 import { useRouter } from 'next/navigation'
 import * as React from 'react'
@@ -208,7 +216,7 @@ const AppInfo = ({ expand, onlyShowDetail = false, openState = false, onDetailEx
     {
       id: 'edit',
       title: t('editApp', { ns: 'app' }),
-      icon: <span className="i-ri-edit-line" />,
+      icon: <RiEditLine />,
       onClick: () => {
         setOpen(false)
         onDetailExpand?.(false)
@@ -218,7 +226,7 @@ const AppInfo = ({ expand, onlyShowDetail = false, openState = false, onDetailEx
     {
       id: 'duplicate',
       title: t('duplicate', { ns: 'app' }),
-      icon: <span className="i-ri-file-copy-2-line" />,
+      icon: <RiFileCopy2Line />,
       onClick: () => {
         setOpen(false)
         onDetailExpand?.(false)
@@ -228,7 +236,7 @@ const AppInfo = ({ expand, onlyShowDetail = false, openState = false, onDetailEx
     {
       id: 'export',
       title: t('export', { ns: 'app' }),
-      icon: <span className="i-ri-file-download-line" />,
+      icon: <RiFileDownloadLine />,
       onClick: exportCheck,
     },
   ]
@@ -239,7 +247,7 @@ const AppInfo = ({ expand, onlyShowDetail = false, openState = false, onDetailEx
       ? [{
           id: 'import',
           title: t('common.importDSL', { ns: 'workflow' }),
-          icon: <span className="i-ri-file-upload-line" />,
+          icon: <RiFileUploadLine />,
           onClick: () => {
             setOpen(false)
             onDetailExpand?.(false)
@@ -259,7 +267,7 @@ const AppInfo = ({ expand, onlyShowDetail = false, openState = false, onDetailEx
     {
       id: 'delete',
       title: t('operation.delete', { ns: 'common' }),
-      icon: <span className="i-ri-delete-bin-line" />,
+      icon: <RiDeleteBinLine />,
       onClick: () => {
         setOpen(false)
         onDetailExpand?.(false)
@@ -273,7 +281,7 @@ const AppInfo = ({ expand, onlyShowDetail = false, openState = false, onDetailEx
     ? {
         id: 'switch',
         title: t('switch', { ns: 'app' }),
-        icon: <span className="i-ri-exchange-2-line" />,
+        icon: <RiExchange2Line />,
         onClick: () => {
           setOpen(false)
           onDetailExpand?.(false)
@@ -307,7 +315,7 @@ const AppInfo = ({ expand, onlyShowDetail = false, openState = false, onDetailEx
               {expand && (
                 <div className="ml-auto flex items-center justify-center rounded-md p-0.5">
                   <div className="flex h-5 w-5 items-center justify-center">
-                    <span className="i-ri-equalizer-2-line h-4 w-4 text-text-tertiary" />
+                    <RiEqualizer2Line className="h-4 w-4 text-text-tertiary" />
                   </div>
                 </div>
               )}
@@ -315,7 +323,7 @@ const AppInfo = ({ expand, onlyShowDetail = false, openState = false, onDetailEx
             {!expand && (
               <div className="flex items-center justify-center">
                 <div className="flex h-5 w-5 items-center justify-center rounded-md p-0.5">
-                  <span className="i-ri-equalizer-2-line h-4 w-4 text-text-tertiary" />
+                  <RiEqualizer2Line className="h-4 w-4 text-text-tertiary" />
                 </div>
               </div>
             )}

web/app/components/app-sidebar/app-operations.tsx

@@ -1,4 +1,5 @@
 import type { JSX } from 'react'
+import { RiMoreLine } from '@remixicon/react'
 import { cloneElement, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Button from '@/app/components/base/button'
@@ -145,7 +146,7 @@ const AppOperations = ({
           className="gap-[1px]"
           tabIndex={-1}
         >
-          <span className="i-ri-more-line h-3.5 w-3.5 text-components-button-secondary-text" />
+          <RiMoreLine className="h-3.5 w-3.5 text-components-button-secondary-text" />
           <span className="system-xs-medium text-components-button-secondary-text">
             {t('operation.more', { ns: 'common' })}
           </span>
@@ -180,7 +181,7 @@ const AppOperations = ({
                 variant="secondary"
                 className="gap-[1px]"
               >
-                <span className="i-ri-more-line h-3.5 w-3.5 text-components-button-secondary-text" />
+                <RiMoreLine className="h-3.5 w-3.5 text-components-button-secondary-text" />
                 <span className="system-xs-medium text-components-button-secondary-text">
                   {t('operation.more', { ns: 'common' })}
                 </span>

web/app/components/app-sidebar/app-sidebar-dropdown.tsx

@@ -1,5 +1,8 @@
 import type { NavIcon } from './navLink'
-
+import {
+  RiEqualizer2Line,
+  RiMenuLine,
+} from '@remixicon/react'
 import * as React from 'react'
 import { useCallback, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -65,7 +68,7 @@ const AppSidebarDropdown = ({ navigation }: Props) => {
                 background={appDetail.icon_background}
                 imageUrl={appDetail.icon_url}
               />
-              <span className="i-ri-menu-line h-4 w-4 text-text-tertiary" />
+              <RiMenuLine className="h-4 w-4 text-text-tertiary" />
             </div>
           </PortalToFollowElemTrigger>
           <PortalToFollowElemContent className="z-[1000]">
@@ -88,7 +91,7 @@ const AppSidebarDropdown = ({ navigation }: Props) => {
                     />
                     <div className="flex items-center justify-center rounded-md p-0.5">
                       <div className="flex h-5 w-5 items-center justify-center">
-                        <span className="i-ri-equalizer-2-line h-4 w-4 text-text-tertiary" />
+                        <RiEqualizer2Line className="h-4 w-4 text-text-tertiary" />
                       </div>
                     </div>
                   </div>

web/app/components/app-sidebar/dataset-info/dropdown.tsx

@@ -1,4 +1,5 @@
 import type { DataSet } from '@/models/datasets'
+import { RiMoreFill } from '@remixicon/react'
 import { useRouter } from 'next/navigation'
 import * as React from 'react'
 import { useCallback, useState } from 'react'
@@ -119,7 +120,7 @@ const DropDown = ({
     >
       <PortalToFollowElemTrigger onClick={handleTrigger}>
         <ActionButton className={cn(expand ? 'size-8 rounded-lg' : 'size-6 rounded-md')}>
-          <span className="i-ri-more-fill size-4" />
+          <RiMoreFill className="size-4" />
         </ActionButton>
       </PortalToFollowElemTrigger>
       <PortalToFollowElemContent className="z-[60]">

web/app/components/app-sidebar/dataset-sidebar-dropdown.tsx

@@ -1,6 +1,8 @@
 import type { NavIcon } from './navLink'
 import type { DataSet } from '@/models/datasets'
-
+import {
+  RiMenuLine,
+} from '@remixicon/react'
 import * as React from 'react'
 import { useCallback, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -86,7 +88,7 @@ const DatasetSidebarDropdown = ({
                 background={iconInfo.icon_background}
                 imageUrl={iconInfo.icon_url}
               />
-              <span className="i-ri-menu-line size-4 text-text-tertiary" />
+              <RiMenuLine className="size-4 text-text-tertiary" />
             </div>
           </PortalToFollowElemTrigger>
           <PortalToFollowElemContent className="z-50">

web/app/components/app-sidebar/toggle-button.tsx

@@ -1,3 +1,4 @@
+import { RiArrowLeftSLine, RiArrowRightSLine } from '@remixicon/react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import { cn } from '@/utils/classnames'
@@ -59,8 +60,8 @@ const ToggleButton = ({
       >
         {
           expand
-            ? <span className="i-ri-arrow-left-sline size-4" />
-            : <span className="i-ri-arrow-right-sline size-4" />
+            ? <RiArrowLeftSLine className="size-4" />
+            : <RiArrowRightSLine className="size-4" />
         }
       </Button>
     </Tooltip>

web/app/components/app/annotation/batch-action.tsx

@@ -1,4 +1,5 @@
 import type { FC } from 'react'
+import { RiDeleteBinLine } from '@remixicon/react'
 import { useBoolean } from 'ahooks'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
@@ -48,7 +49,7 @@ const BatchAction: FC<IBatchActionProps> = ({
         </div>
         <Divider type="vertical" className="mx-0.5 h-3.5 bg-divider-regular" />
         <div className="flex cursor-pointer items-center gap-x-0.5 px-3 py-2" onClick={showDeleteConfirm}>
-          <span className="i-ri-delete-bin-line h-4 w-4 text-components-button-destructive-ghost-text" />
+          <RiDeleteBinLine className="h-4 w-4 text-components-button-destructive-ghost-text" />
           <button type="button" className="px-0.5 text-[13px] font-medium leading-[16px] text-components-button-destructive-ghost-text">
             {t('operation.delete', { ns: 'common' })}
           </button>

web/app/components/app/annotation/batch-add-annotation-modal/csv-uploader.tsx

@@ -1,5 +1,6 @@
 'use client'
 import type { FC } from 'react'
+import { RiDeleteBinLine } from '@remixicon/react'
 import * as React from 'react'
 import { useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -115,7 +116,7 @@ const CSVUploader: FC<Props> = ({
               <Button variant="secondary" onClick={selectHandle}>{t('stepOne.uploader.change', { ns: 'datasetCreation' })}</Button>
               <div className="mx-2 h-4 w-px bg-divider-regular" />
               <div className="cursor-pointer p-2" onClick={removeFile} data-testid="remove-file-button">
-                <span className="i-ri-delete-bin-line h-4 w-4 text-text-tertiary" />
+                <RiDeleteBinLine className="h-4 w-4 text-text-tertiary" />
               </div>
             </div>
           </div>

web/app/components/app/annotation/batch-add-annotation-modal/index.tsx

@@ -1,5 +1,6 @@
 'use client'
 import type { FC } from 'react'
+import { RiCloseLine } from '@remixicon/react'
 import { noop } from 'es-toolkit/function'
 import * as React from 'react'
 import { useEffect, useState } from 'react'
@@ -91,7 +92,7 @@ const BatchModal: FC<IBatchModalProps> = ({
     <Modal isShow={isShow} onClose={noop} className="!max-w-[520px] !rounded-xl px-8 py-6">
       <div className="system-xl-medium relative pb-1 text-text-primary">{t('batchModal.title', { ns: 'appAnnotation' })}</div>
       <div className="absolute right-4 top-4 cursor-pointer p-2" onClick={onCancel}>
-        <span className="i-ri-close-line h-4 w-4 text-text-tertiary" />
+        <RiCloseLine className="h-4 w-4 text-text-tertiary" />
       </div>
       <CSVUploader
         file={currentCSV}

web/app/components/app/annotation/edit-annotation-modal/edit-item/index.tsx

@@ -1,5 +1,6 @@
 'use client'
 import type { FC } from 'react'
+import { RiDeleteBinLine, RiEditFill, RiEditLine } from '@remixicon/react'
 import * as React from 'react'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -21,7 +22,7 @@ type Props = {
 
 export const EditTitle: FC<{ className?: string, title: string }> = ({ className, title }) => (
   <div className={cn(className, 'system-xs-medium flex h-[18px] items-center text-text-tertiary')}>
-    <span className="i-ri-edit-fill mr-1 h-3.5 w-3.5" />
+    <RiEditFill className="mr-1 h-3.5 w-3.5" />
     <div>{title}</div>
     <div
       className="ml-2 h-px grow"
@@ -93,7 +94,7 @@ const EditItem: FC<Props> = ({
                         setIsEdit(true)
                       }}
                     >
-                      <span className="i-ri-edit-line mr-1 h-3.5 w-3.5" />
+                      <RiEditLine className="mr-1 h-3.5 w-3.5" />
                       <div>{t('operation.edit', { ns: 'common' })}</div>
                     </div>
                   )}
@@ -116,7 +117,7 @@ const EditItem: FC<Props> = ({
                         }}
                       >
                         <div className="h-3.5 w-3.5">
-                          <span className="i-ri-delete-bin-line h-3.5 w-3.5" />
+                          <RiDeleteBinLine className="h-3.5 w-3.5" />
                         </div>
                         <div>{t('operation.delete', { ns: 'common' })}</div>
                       </div>

web/app/components/app/annotation/header-opts/index.tsx

@@ -2,7 +2,11 @@
 import type { FC } from 'react'
 import type { AnnotationItemBasic } from '../type'
 import { Menu, MenuButton, MenuItems, Transition } from '@headlessui/react'
-
+import {
+  RiAddLine,
+  RiDeleteBinLine,
+  RiMoreFill,
+} from '@remixicon/react'
 import * as React from 'react'
 import { Fragment, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -149,7 +153,7 @@ const HeaderOptions: FC<Props> = ({
           onClick={handleClearAll}
           className="mx-1 flex h-9 w-[calc(100%_-_8px)] cursor-pointer items-center space-x-2 rounded-lg px-3 py-2 text-red-600 hover:bg-red-50 disabled:opacity-50"
         >
-          <span className="i-ri-delete-bin-line h-4 w-4" />
+          <RiDeleteBinLine className="h-4 w-4" />
           <span className="system-sm-regular grow text-left">
             {t('table.header.clearAll', { ns: 'appAnnotation' })}
           </span>
@@ -163,7 +167,7 @@ const HeaderOptions: FC<Props> = ({
   return (
     <div className="flex space-x-2">
       <Button variant="primary" onClick={() => setShowAddModal(true)}>
-        <span className="i-ri-add-line mr-0.5 h-4 w-4" />
+        <RiAddLine className="mr-0.5 h-4 w-4" />
         <div>{t('table.header.addAnnotation', { ns: 'appAnnotation' })}</div>
       </Button>
       <CustomPopover
@@ -171,7 +175,7 @@ const HeaderOptions: FC<Props> = ({
         position="br"
         trigger="click"
         btnElement={
-          <span className="i-ri-more-fill h-4 w-4" />
+          <RiMoreFill className="h-4 w-4" />
         }
         btnClassName="btn btn-secondary btn-medium w-8 p-0"
         className="!z-20 h-fit !w-[155px]"

web/app/components/app/annotation/index.tsx

@@ -4,6 +4,7 @@ import type { QueryParam } from './filter'
 import type { AnnotationItem, AnnotationItemBasic } from './type'
 import type { AnnotationReplyConfig } from '@/models/debug'
 import type { App } from '@/types/app'
+import { RiEqualizer2Line } from '@remixicon/react'
 import { useDebounce } from 'ahooks'
 import * as React from 'react'
 import { useEffect, useState } from 'react'
@@ -181,7 +182,7 @@ const Annotation: FC<Props> = (props) => {
                     <div className="flex items-center pl-1.5">
                       <div className="mr-1 h-3.5 w-[1px] shrink-0 bg-divider-subtle"></div>
                       <ActionButton onClick={() => setIsShowEdit(true)}>
-                        <span className="i-ri-equalizer-2-line h-4 w-4 text-text-tertiary" />
+                        <RiEqualizer2Line className="h-4 w-4 text-text-tertiary" />
                       </ActionButton>
                     </div>
                   )}

web/app/components/app/annotation/list.tsx

@@ -1,6 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import type { AnnotationItem } from './type'
+import { RiDeleteBinLine, RiEditLine } from '@remixicon/react'
 import * as React from 'react'
 import { useCallback, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -115,7 +116,7 @@ const List: FC<Props> = ({
                   {/* Actions */}
                   <div className="flex space-x-1 text-text-tertiary">
                     <ActionButton onClick={() => onView(item)}>
-                      <span className="i-ri-edit-line h-4 w-4" />
+                      <RiEditLine className="h-4 w-4" />
                     </ActionButton>
                     <ActionButton
                       onClick={() => {
@@ -123,7 +124,7 @@ const List: FC<Props> = ({
                         setShowConfirmDelete(true)
                       }}
                     >
-                      <span className="i-ri-delete-bin-line h-4 w-4" />
+                      <RiDeleteBinLine className="h-4 w-4" />
                     </ActionButton>
                   </div>
                 </td>

web/app/components/app/app-access-control/access-control-dialog.tsx

@@ -1,5 +1,6 @@
 import type { ReactNode } from 'react'
 import { Dialog, Transition } from '@headlessui/react'
+import { RiCloseLine } from '@remixicon/react'
 import { Fragment, useCallback } from 'react'
 import { cn } from '@/utils/classnames'
 
@@ -46,7 +47,7 @@ const AccessControlDialog = ({
           >
             <Dialog.Panel className={cn('relative h-auto min-h-[323px] w-[600px] overflow-y-auto rounded-2xl bg-components-panel-bg p-0 shadow-xl transition-all', className)}>
               <div onClick={() => close()} className="absolute right-5 top-5 z-10 flex h-8 w-8 cursor-pointer items-center justify-center">
-                <span className="i-ri-close-line h-5 w-5 text-text-tertiary" />
+                <RiCloseLine className="h-5 w-5 text-text-tertiary" />
               </div>
               {children}
             </Dialog.Panel>

web/app/components/app/app-access-control/add-member-or-group-pop.tsx

@@ -1,6 +1,7 @@
 'use client'
 import type { AccessControlAccount, AccessControlGroup, Subject, SubjectAccount, SubjectGroup } from '@/models/access-control'
 import { FloatingOverlay } from '@floating-ui/react'
+import { RiAddCircleFill, RiArrowRightSLine, RiOrganizationChart } from '@remixicon/react'
 import { useDebounce } from 'ahooks'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -47,7 +48,7 @@ export default function AddMemberOrGroupDialog() {
     <PortalToFollowElem open={open} onOpenChange={setOpen} offset={{ crossAxis: 300 }} placement="bottom-end">
       <PortalToFollowElemTrigger asChild>
         <Button variant="ghost-accent" size="small" className="flex shrink-0 items-center gap-x-0.5" onClick={() => setOpen(!open)}>
-          <span className="i-ri-add-circle-fill h-4 w-4" />
+          <RiAddCircleFill className="h-4 w-4" />
           <span>{t('operation.add', { ns: 'common' })}</span>
         </Button>
       </PortalToFollowElemTrigger>
@@ -157,7 +158,7 @@ function GroupItem({ group }: GroupItemProps) {
       <div className="item-center flex grow">
         <div className="mr-2 h-5 w-5 overflow-hidden rounded-full bg-components-icon-bg-blue-solid">
           <div className="bg-access-app-icon-mask-bg flex h-full w-full items-center justify-center">
-            <span className="i-ri-organization-chart h-[14px] w-[14px] text-components-avatar-shape-fill-stop-0" />
+            <RiOrganizationChart className="h-[14px] w-[14px] text-components-avatar-shape-fill-stop-0" />
           </div>
         </div>
         <p className="system-sm-medium mr-1 text-text-secondary">{group.name}</p>
@@ -171,7 +172,7 @@ function GroupItem({ group }: GroupItemProps) {
         onClick={handleExpandClick}
       >
         <span className="px-[3px]">{t('accessControlDialog.operateGroupAndMember.expand', { ns: 'app' })}</span>
-        <span className="i-ri-arrow-right-sline h-4 w-4" />
+        <RiArrowRightSLine className="h-4 w-4" />
       </Button>
     </BaseItem>
   )

web/app/components/app/app-access-control/index.tsx

@@ -2,6 +2,7 @@
 import type { Subject } from '@/models/access-control'
 import type { App } from '@/types/app'
 import { Description as DialogDescription, DialogTitle } from '@headlessui/react'
+import { RiBuildingLine, RiGlobalLine, RiVerifiedBadgeLine } from '@remixicon/react'
 import { useCallback, useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useGlobalPublicStore } from '@/context/global-public-context'
@@ -77,7 +78,7 @@ export default function AccessControl(props: AccessControlProps) {
           <AccessControlItem type={AccessMode.ORGANIZATION}>
             <div className="flex items-center p-3">
               <div className="flex grow items-center gap-x-2">
-                <span className="i-ri-building-line h-4 w-4 text-text-primary" />
+                <RiBuildingLine className="h-4 w-4 text-text-primary" />
                 <p className="system-sm-medium text-text-primary">{t('accessControlDialog.accessItems.organization', { ns: 'app' })}</p>
               </div>
             </div>
@@ -88,7 +89,7 @@ export default function AccessControl(props: AccessControlProps) {
           <AccessControlItem type={AccessMode.EXTERNAL_MEMBERS}>
             <div className="flex items-center p-3">
               <div className="flex grow items-center gap-x-2">
-                <span className="i-ri-verified-badge-line h-4 w-4 text-text-primary" />
+                <RiVerifiedBadgeLine className="h-4 w-4 text-text-primary" />
                 <p className="system-sm-medium text-text-primary">{t('accessControlDialog.accessItems.external', { ns: 'app' })}</p>
               </div>
               {!hideTip && <WebAppSSONotEnabledTip />}
@@ -96,7 +97,7 @@ export default function AccessControl(props: AccessControlProps) {
           </AccessControlItem>
           <AccessControlItem type={AccessMode.PUBLIC}>
             <div className="flex items-center gap-x-2 p-3">
-              <span className="i-ri-global-line h-4 w-4 text-text-primary" />
+              <RiGlobalLine className="h-4 w-4 text-text-primary" />
               <p className="system-sm-medium text-text-primary">{t('accessControlDialog.accessItems.anyone', { ns: 'app' })}</p>
             </div>
           </AccessControlItem>

web/app/components/app/app-access-control/specific-groups-or-members.tsx

@@ -1,5 +1,6 @@
 'use client'
 import type { AccessControlAccount, AccessControlGroup } from '@/models/access-control'
+import { RiAlertFill, RiCloseCircleFill, RiLockLine, RiOrganizationChart } from '@remixicon/react'
 import { useCallback, useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import { AccessMode } from '@/models/access-control'
@@ -27,7 +28,7 @@ export default function SpecificGroupsOrMembers() {
     return (
       <div className="flex items-center p-3">
         <div className="flex grow items-center gap-x-2">
-          <span className="i-ri-lock-line h-4 w-4 text-text-primary" />
+          <RiLockLine className="h-4 w-4 text-text-primary" />
           <p className="system-sm-medium text-text-primary">{t('accessControlDialog.accessItems.specific', { ns: 'app' })}</p>
         </div>
       </div>
@@ -38,7 +39,7 @@ export default function SpecificGroupsOrMembers() {
     <div>
       <div className="flex items-center gap-x-1 p-3">
         <div className="flex grow items-center gap-x-1">
-          <span className="i-ri-lock-line h-4 w-4 text-text-primary" />
+          <RiLockLine className="h-4 w-4 text-text-primary" />
           <p className="system-sm-medium text-text-primary">{t('accessControlDialog.accessItems.specific', { ns: 'app' })}</p>
         </div>
         <div className="flex items-center gap-x-1">
@@ -85,7 +86,7 @@ function GroupItem({ group }: GroupItemProps) {
   }, [group, setSpecificGroups, specificGroups])
   return (
     <BaseItem
-      icon={<span className="i-ri-organization-chart h-[14px] w-[14px] text-components-avatar-shape-fill-stop-0" />}
+      icon={<RiOrganizationChart className="h-[14px] w-[14px] text-components-avatar-shape-fill-stop-0" />}
       onRemove={handleRemoveGroup}
     >
       <p className="system-xs-regular text-text-primary">{group.name}</p>
@@ -128,7 +129,7 @@ function BaseItem({ icon, onRemove, children }: BaseItemProps) {
       </div>
       {children}
       <div className="flex h-4 w-4 cursor-pointer items-center justify-center" onClick={onRemove}>
-        <span className="i-ri-close-circle-fill h-[14px] w-[14px] text-text-quaternary" />
+        <RiCloseCircleFill className="h-[14px] w-[14px] text-text-quaternary" />
       </div>
     </div>
   )
@@ -138,7 +139,7 @@ export function WebAppSSONotEnabledTip() {
   const { t } = useTranslation()
   return (
     <Tooltip asChild={false} popupContent={t('accessControlDialog.webAppSSONotEnabledTip', { ns: 'app' })}>
-      <span className="i-ri-alert-fill h-4 w-4 shrink-0 text-text-warning-secondary" />
+      <RiAlertFill className="h-4 w-4 shrink-0 text-text-warning-secondary" />
     </Tooltip>
   )
 }

web/app/components/app/app-publisher/index.tsx

@@ -3,9 +3,15 @@ import type { InputVar, Variable } from '@/app/components/workflow/types'
 import type { I18nKeysByPrefix } from '@/types/i18n'
 import type { PublishWorkflowParams } from '@/types/workflow'
 import {
+  RiArrowDownSLine,
+  RiArrowRightSLine,
   RiBuildingLine,
   RiGlobalLine,
   RiLockLine,
+  RiPlanetLine,
+  RiPlayCircleLine,
+  RiPlayList2Line,
+  RiTerminalBoxLine,
   RiVerifiedBadgeLine,
 } from '@remixicon/react'
 import { useKeyPress } from 'ahooks'
@@ -280,7 +286,7 @@ const AppPublisher = ({
             disabled={disabled}
           >
             {t('common.publish', { ns: 'workflow' })}
-            <span className="i-ri-arrow-down-sline h-4 w-4 text-components-button-primary-text" />
+            <RiArrowDownSLine className="h-4 w-4 text-components-button-primary-text" />
           </Button>
         </PortalToFollowElemTrigger>
         <PortalToFollowElemContent className="z-[11]">
@@ -392,7 +398,7 @@ const AppPublisher = ({
                           </div>
                           {!isAppAccessSet && <p className="system-xs-regular shrink-0 text-text-tertiary">{t('publishApp.notSet', { ns: 'app' })}</p>}
                           <div className="flex h-4 w-4 shrink-0 items-center justify-center">
-                            <span className="i-ri-arrow-right-sline h-4 w-4 text-text-quaternary" />
+                            <RiArrowRightSLine className="h-4 w-4 text-text-quaternary" />
                           </div>
                         </div>
                         {!isAppAccessSet && <p className="system-xs-regular mt-1 text-text-warning">{t('publishApp.notSetDesc', { ns: 'app' })}</p>}
@@ -407,7 +413,7 @@ const AppPublisher = ({
                               className="flex-1"
                               disabled={disabledFunctionButton}
                               link={appURL}
-                              icon={<span className="i-ri-play-circle-line h-4 w-4" />}
+                              icon={<RiPlayCircleLine className="h-4 w-4" />}
                             >
                               {t('common.runApp', { ns: 'workflow' })}
                             </SuggestedAction>
@@ -419,7 +425,7 @@ const AppPublisher = ({
                                     className="flex-1"
                                     disabled={disabledFunctionButton}
                                     link={`${appURL}${appURL.includes('?') ? '&' : '?'}mode=batch`}
-                                    icon={<span className="i-ri-play-list-2-line h-4 w-4" />}
+                                    icon={<RiPlayList2Line className="h-4 w-4" />}
                                   >
                                     {t('common.batchRunApp', { ns: 'workflow' })}
                                   </SuggestedAction>
@@ -445,7 +451,7 @@ const AppPublisher = ({
                                   handleOpenInExplore()
                               }}
                               disabled={disabledFunctionButton}
-                              icon={<span className="i-ri-planet-line h-4 w-4" />}
+                              icon={<RiPlanetLine className="h-4 w-4" />}
                             >
                               {t('common.openInExplore', { ns: 'workflow' })}
                             </SuggestedAction>
@@ -455,7 +461,7 @@ const AppPublisher = ({
                               className="flex-1"
                               disabled={!publishedAt || missingStartNode}
                               link="./develop"
-                              icon={<span className="i-ri-terminal-box-line h-4 w-4" />}
+                              icon={<RiTerminalBoxLine className="h-4 w-4" />}
                             >
                               {t('common.accessAPIReference', { ns: 'workflow' })}
                             </SuggestedAction>

web/app/components/app/app-publisher/publish-with-multiple-model.tsx

@@ -1,6 +1,7 @@
 import type { FC } from 'react'
 import type { ModelAndParameter } from '../configuration/debug/types'
 import type { Model, ModelItem } from '@/app/components/header/account-setting/model-provider-page/declarations'
+import { RiArrowDownSLine } from '@remixicon/react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Button from '@/app/components/base/button'
@@ -72,7 +73,7 @@ const PublishWithMultipleModel: FC<PublishWithMultipleModelProps> = ({
           className="mt-3 w-full"
         >
           {t('operation.applyConfig', { ns: 'appDebug' })}
-          <span className="i-ri-arrow-down-sline ml-0.5 h-3 w-3" />
+          <RiArrowDownSLine className="ml-0.5 h-3 w-3" />
         </Button>
       </PortalToFollowElemTrigger>
       <PortalToFollowElemContent className="z-50 mt-1 w-[288px]">

web/app/components/app/app-publisher/suggested-action.tsx

@@ -1,4 +1,5 @@
 import type { HTMLProps, PropsWithChildren } from 'react'
+import { RiArrowRightUpLine } from '@remixicon/react'
 import { cn } from '@/utils/classnames'
 
 export type SuggestedActionProps = PropsWithChildren<HTMLProps<HTMLAnchorElement> & {
@@ -24,7 +25,7 @@ const SuggestedAction = ({ icon, link, disabled, children, className, onClick, .
     >
       <div className="relative h-4 w-4">{icon}</div>
       <div className="system-sm-medium shrink grow basis-0">{children}</div>
-      <span className="i-ri-arrow-right-up-line h-3.5 w-3.5" />
+      <RiArrowRightUpLine className="h-3.5 w-3.5" />
     </a>
   )
 }

web/app/components/app/app-publisher/version-info-modal.tsx

@@ -1,5 +1,6 @@
 import type { FC } from 'react'
 import type { VersionHistory } from '@/types/workflow'
+import { RiCloseLine } from '@remixicon/react'
 import * as React from 'react'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -77,7 +78,7 @@ const VersionInfoModal: FC<VersionInfoModalProps> = ({
           {versionInfo?.marked_name ? t('versionHistory.editVersionInfo', { ns: 'workflow' }) : t('versionHistory.nameThisVersion', { ns: 'workflow' })}
         </div>
         <div className="absolute right-5 top-5 flex h-8 w-8 cursor-pointer items-center justify-center p-1.5" onClick={onClose}>
-          <span className="i-ri-close-line h-[18px] w-[18px] text-text-tertiary" />
+          <RiCloseLine className="h-[18px] w-[18px] text-text-tertiary" />
         </div>
       </div>
       <div className="flex flex-col gap-y-4 px-6 py-3">

web/app/components/app/configuration/base/operation-btn/index.tsx

@@ -1,6 +1,9 @@
 'use client'
 import type { FC } from 'react'
-
+import {
+  RiAddLine,
+  RiEditLine,
+} from '@remixicon/react'
 import { noop } from 'es-toolkit/function'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
@@ -14,8 +17,8 @@ export type IOperationBtnProps = {
 }
 
 const iconMap = {
-  add: <span className="i-ri-add-line h-3.5 w-3.5" />,
-  edit: <span className="i-ri-edit-line h-3.5 w-3.5" />,
+  add: <RiAddLine className="h-3.5 w-3.5" />,
+  edit: <RiEditLine className="h-3.5 w-3.5" />,
 }
 
 const OperationBtn: FC<IOperationBtnProps> = ({

web/app/components/app/configuration/config-prompt/advanced-prompt-input.tsx

@@ -2,7 +2,10 @@
 import type { FC } from 'react'
 import type { ExternalDataTool } from '@/models/common'
 import type { PromptRole, PromptVariable } from '@/models/debug'
-
+import {
+  RiDeleteBinLine,
+  RiErrorWarningFill,
+} from '@remixicon/react'
 import { useBoolean } from 'ahooks'
 import copy from 'copy-to-clipboard'
 import { produce } from 'immer'
@@ -148,7 +151,7 @@ const AdvancedPromptInput: FC<Props> = ({
       }}
     >
       <div className="flex items-center pr-2">
-        <span className="i-ri-error-warning-fill mr-1 h-4 w-4 text-[#F79009]" />
+        <RiErrorWarningFill className="mr-1 h-4 w-4 text-[#F79009]" />
         <div className="text-[13px] font-medium leading-[18px] text-[#DC6803]">{t('promptMode.contextMissing', { ns: 'appDebug' })}</div>
       </div>
       <Button
@@ -188,7 +191,7 @@ const AdvancedPromptInput: FC<Props> = ({
                     )}
                 <div className={cn(s.optionWrap, 'items-center space-x-1')}>
                   {canDelete && (
-                    <span className="i-ri-delete-bin-line h-6 w-6 cursor-pointer p-1 text-text-tertiary" onClick={onDelete} />
+                    <RiDeleteBinLine onClick={onDelete} className="h-6 w-6 cursor-pointer p-1 text-text-tertiary" />
                   )}
                   {!isCopied
                     ? (

web/app/components/app/configuration/config-prompt/index.tsx

@@ -2,7 +2,9 @@
 import type { FC } from 'react'
 import type { PromptItem, PromptVariable } from '@/models/debug'
 import type { AppModeEnum } from '@/types/app'
-
+import {
+  RiAddLine,
+} from '@remixicon/react'
 import { produce } from 'immer'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
@@ -159,7 +161,7 @@ const Prompt: FC<IPromptProps> = ({
           onClick={handleAddMessage}
           className="mt-3 w-full"
         >
-          <span className="i-ri-add-line mr-2 h-4 w-4" />
+          <RiAddLine className="mr-2 h-4 w-4" />
           <div>{t('promptMode.operation.addMessage', { ns: 'appDebug' })}</div>
         </Button>
       )}

web/app/components/app/configuration/config-var/config-modal/type-select.tsx

@@ -1,6 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import type { InputVarType } from '@/app/components/workflow/types'
+import { ChevronDownIcon } from '@heroicons/react/20/solid'
 import * as React from 'react'
 import { useState } from 'react'
 import Badge from '@/app/components/base/badge'
@@ -61,7 +62,7 @@ const TypeSelector: FC<Props> = ({
           </div>
           <div className="flex items-center space-x-1">
             <Badge uppercase={false}>{inputVarTypeToVarType(selectedItem?.value as InputVarType)}</Badge>
-            <span className={`i-heroicons-chevron-down-20-solid ${cn('h-4 w-4 shrink-0 text-text-quaternary group-hover:text-text-secondary', open && 'text-text-secondary')}`} />
+            <ChevronDownIcon className={cn('h-4 w-4 shrink-0 text-text-quaternary group-hover:text-text-secondary', open && 'text-text-secondary')} />
           </div>
         </div>
 

web/app/components/app/configuration/config-var/config-select/index.tsx

@@ -1,5 +1,6 @@
 'use client'
 import type { FC } from 'react'
+import { RiAddLine, RiDeleteBinLine, RiDraggable } from '@remixicon/react'
 import * as React from 'react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -48,7 +49,7 @@ const ConfigSelect: FC<IConfigSelectProps> = ({
                 )}
                 key={index}
               >
-                <span className="handle i-ri-draggable h-4 w-4 cursor-grab text-text-quaternary" />
+                <RiDraggable className="handle h-4 w-4 cursor-grab text-text-quaternary" />
                 <input
                   key={index}
                   type="input"
@@ -76,7 +77,7 @@ const ConfigSelect: FC<IConfigSelectProps> = ({
                   onMouseEnter={() => setDeletingID(index)}
                   onMouseLeave={() => setDeletingID(null)}
                 >
-                  <span className="i-ri-delete-bin-line h-3.5 w-3.5" />
+                  <RiDeleteBinLine className="h-3.5 w-3.5" />
                 </div>
               </div>
             ))}
@@ -88,7 +89,7 @@ const ConfigSelect: FC<IConfigSelectProps> = ({
         onClick={() => { onChange([...options, '']) }}
         className="mt-1 flex h-9 cursor-pointer items-center gap-2 rounded-lg bg-components-button-tertiary-bg px-3  text-components-button-tertiary-text hover:bg-components-button-tertiary-bg-hover"
       >
-        <span className="i-ri-add-line h-4 w-4" />
+        <RiAddLine className="h-4 w-4" />
         <div className="system-sm-medium text-[13px]">{t('variableConfig.addOption', { ns: 'appDebug' })}</div>
       </div>
     </div>

web/app/components/app/configuration/config-var/var-item.tsx

@@ -1,7 +1,11 @@
 'use client'
 import type { FC } from 'react'
 import type { IInputTypeIconProps } from './input-type-icon'
-
+import {
+  RiDeleteBinLine,
+  RiDraggable,
+  RiEditLine,
+} from '@remixicon/react'
 import * as React from 'react'
 import { useState } from 'react'
 import Badge from '@/app/components/base/badge'
@@ -38,7 +42,7 @@ const VarItem: FC<ItemProps> = ({
     <div className={cn('group relative mb-1 flex h-[34px] w-full items-center rounded-lg border-[0.5px] border-components-panel-border-subtle bg-components-panel-on-panel-item-bg pl-2.5 pr-3 shadow-xs last-of-type:mb-0 hover:bg-components-panel-on-panel-item-bg-hover hover:shadow-sm', isDeleting && 'border-state-destructive-border hover:bg-state-destructive-hover', readonly && 'cursor-not-allowed', className)}>
       <VarIcon className={cn('mr-1 h-4 w-4 shrink-0 text-text-accent', canDrag && 'group-hover:opacity-0')} />
       {canDrag && (
-        <span className="i-ri-draggable absolute left-3 top-3 hidden h-3 w-3 cursor-pointer text-text-tertiary group-hover:block" />
+        <RiDraggable className="absolute left-3 top-3 hidden h-3 w-3 cursor-pointer text-text-tertiary group-hover:block" />
       )}
       <div className="flex w-0 grow items-center">
         <div className="truncate" title={`${name} · ${label}`}>
@@ -58,7 +62,7 @@ const VarItem: FC<ItemProps> = ({
             className="mr-1 flex h-6 w-6 cursor-pointer items-center justify-center rounded-md hover:bg-black/5"
             onClick={onEdit}
           >
-            <span className="i-ri-edit-line h-4 w-4 text-text-tertiary" />
+            <RiEditLine className="h-4 w-4 text-text-tertiary" />
           </div>
           <div
             data-testid="var-item-delete-btn"
@@ -67,7 +71,7 @@ const VarItem: FC<ItemProps> = ({
             onMouseOver={() => setIsDeleting(true)}
             onMouseLeave={() => setIsDeleting(false)}
           >
-            <span className="i-ri-delete-bin-line h-4 w-4" />
+            <RiDeleteBinLine className="h-4 w-4" />
           </div>
         </div>
       </div>

web/app/components/app/configuration/config-vision/param-config.tsx

@@ -1,5 +1,6 @@
 'use client'
 import type { FC } from 'react'
+import { RiSettings2Line } from '@remixicon/react'
 import { memo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Button from '@/app/components/base/button'
@@ -26,7 +27,7 @@ const ParamsConfig: FC = () => {
     >
       <PortalToFollowElemTrigger onClick={() => setOpen(v => !v)}>
         <Button variant="ghost" size="small" className={cn('')}>
-          <span className="i-ri-settings-2-line h-3.5 w-3.5" />
+          <RiSettings2Line className="h-3.5 w-3.5" />
           <div className="ml-1">{t('voice.settings', { ns: 'appDebug' })}</div>
         </Button>
       </PortalToFollowElemTrigger>

web/app/components/app/configuration/config/agent-setting-button.tsx

@@ -1,6 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import type { AgentConfig } from '@/models/debug'
+import { RiSettings2Line } from '@remixicon/react'
 import * as React from 'react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -26,7 +27,7 @@ const AgentSettingButton: FC<Props> = ({
   return (
     <>
       <Button onClick={() => setIsShowAgentSetting(true)} className="mr-2 shrink-0">
-        <span className="i-ri-settings-2-line mr-1 h-4 w-4 text-text-tertiary" />
+        <RiSettings2Line className="mr-1 h-4 w-4 text-text-tertiary" />
         {t('agent.setting.name', { ns: 'appDebug' })}
       </Button>
       {isShowAgentSetting && (

web/app/components/app/configuration/config/agent/agent-setting/index.tsx

@@ -1,6 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import type { AgentConfig } from '@/models/debug'
+import { RiCloseLine } from '@remixicon/react'
 import { useClickAway } from 'ahooks'
 import * as React from 'react'
 import { useEffect, useRef, useState } from 'react'
@@ -67,7 +68,7 @@ const AgentSetting: FC<Props> = ({
               onClick={onCancel}
               className="flex h-6 w-6 cursor-pointer items-center justify-center"
             >
-              <span className="i-ri-close-line h-4 w-4 text-text-tertiary" />
+              <RiCloseLine className="h-4 w-4 text-text-tertiary" />
             </div>
           </div>
         </div>

web/app/components/app/configuration/config/agent/agent-tools/index.tsx

@@ -4,7 +4,11 @@ import type { Collection } from '@/app/components/tools/types'
 import type { ToolDefaultValue, ToolValue } from '@/app/components/workflow/block-selector/types'
 import type { ToolWithProvider } from '@/app/components/workflow/types'
 import type { AgentTool } from '@/types/app'
-
+import {
+  RiDeleteBinLine,
+  RiEqualizer2Line,
+  RiInformation2Line,
+} from '@remixicon/react'
 import copy from 'copy-to-clipboard'
 import { produce } from 'immer'
 import * as React from 'react'
@@ -222,7 +226,7 @@ const AgentTools: FC = () => {
                     >
                       <div className="h-4 w-4">
                         <div className="ml-0.5 hidden group-hover:inline-block" data-testid="tool-info-tooltip">
-                          <span className="i-ri-information-2-line h-4 w-4 text-text-tertiary" />
+                          <RiInformation2Line className="h-4 w-4 text-text-tertiary" />
                         </div>
                       </div>
                     </Tooltip>
@@ -251,7 +255,7 @@ const AgentTools: FC = () => {
                       onMouseOver={() => setIsDeleting(index)}
                       onMouseLeave={() => setIsDeleting(-1)}
                     >
-                      <span className="i-ri-delete-bin-line h-4 w-4" />
+                      <RiDeleteBinLine className="h-4 w-4" />
                     </div>
                   </div>
                 )}
@@ -269,7 +273,7 @@ const AgentTools: FC = () => {
                             setIsShowSettingTool(true)
                           }}
                         >
-                          <span className="i-ri-equalizer-2-line h-4 w-4 text-text-tertiary" />
+                          <RiEqualizer2Line className="h-4 w-4 text-text-tertiary" />
                         </div>
                       </Tooltip>
                     )}
@@ -286,7 +290,7 @@ const AgentTools: FC = () => {
                       onMouseLeave={() => setIsDeleting(-1)}
                       data-testid="delete-removed-tool"
                     >
-                      <span className="i-ri-delete-bin-line h-4 w-4" />
+                      <RiDeleteBinLine className="h-4 w-4" />
                     </div>
                   </div>
                 )}

web/app/components/app/configuration/config/agent/agent-tools/setting-built-in-tool.tsx

@@ -2,7 +2,10 @@
 import type { FC } from 'react'
 import type { Collection, Tool } from '@/app/components/tools/types'
 import type { ToolWithProvider } from '@/app/components/workflow/types'
-
+import {
+  RiArrowLeftLine,
+  RiCloseLine,
+} from '@remixicon/react'
 import * as React from 'react'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -178,7 +181,7 @@ const SettingBuiltInTool: FC<Props> = ({
             <div className="relative border-b border-divider-subtle p-4 pb-3">
               <div className="absolute right-3 top-3">
                 <ActionButton onClick={onHide}>
-                  <span className="i-ri-close-line h-4 w-4" />
+                  <RiCloseLine className="h-4 w-4" />
                 </ActionButton>
               </div>
               {showBackButton && (
@@ -186,7 +189,7 @@ const SettingBuiltInTool: FC<Props> = ({
                   className="system-xs-semibold-uppercase mb-2 flex cursor-pointer items-center gap-1 text-text-accent-secondary"
                   onClick={onHide}
                 >
-                  <span className="i-ri-arrow-left-line h-4 w-4" />
+                  <RiArrowLeftLine className="h-4 w-4" />
                   {t('detailPanel.operation.back', { ns: 'plugin' })}
                 </div>
               )}

web/app/components/app/configuration/config/assistant-type-picker/index.tsx

@@ -1,6 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import type { AgentConfig } from '@/models/debug'
+import { RiArrowDownSLine } from '@remixicon/react'
 import * as React from 'react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -119,7 +120,7 @@ const AssistantTypePicker: FC<Props> = ({
           <div className={cn(open && 'bg-gray-50', 'flex h-8 cursor-pointer select-none items-center space-x-1 rounded-lg border border-black/5 px-3 text-indigo-600')}>
             {isAgent ? <BubbleText className="h-3 w-3" /> : <CuteRobot className="h-3 w-3" />}
             <div className="text-xs font-medium">{t(`assistantType.${isAgent ? 'agentAssistant' : 'chatAssistant'}.name`, { ns: 'appDebug' })}</div>
-            <span className="i-ri-arrow-down-sline h-3 w-3" />
+            <RiArrowDownSLine className="h-3 w-3" />
           </div>
         </PortalToFollowElemTrigger>
         <PortalToFollowElemContent style={{ zIndex: 1000 }}>

web/app/components/app/configuration/config/automatic/automatic-btn.tsx

@@ -1,6 +1,8 @@
 'use client'
 import type { FC } from 'react'
-
+import {
+  RiSparklingFill,
+} from '@remixicon/react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import Button from '@/app/components/base/button'
@@ -15,7 +17,7 @@ const AutomaticBtn: FC<IAutomaticBtnProps> = ({
 
   return (
     <Button variant="secondary-accent" size="small" onClick={onClick}>
-      <span className="i-ri-sparkling-fill mr-1 h-3.5 w-3.5" />
+      <RiSparklingFill className="mr-1 h-3.5 w-3.5" />
       <span className="">{t('operation.automatic', { ns: 'appDebug' })}</span>
     </Button>
   )

web/app/components/app/configuration/config/automatic/prompt-toast.tsx

@@ -1,3 +1,4 @@
+import { RiArrowDownSLine, RiSparklingFill } from '@remixicon/react'
 import { useBoolean } from 'ahooks'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
@@ -36,10 +37,10 @@ const PromptToast = ({
     <div className={cn('rounded-xl border-[0.5px] border-components-panel-border bg-background-section-burn pl-4 shadow-xs', className)}>
       <div className="my-3 flex h-4 items-center justify-between pr-3">
         <div className="flex items-center space-x-1">
-          <span className="i-ri-sparkling-fill size-3.5 text-components-input-border-active-prompt-1" />
+          <RiSparklingFill className="size-3.5 text-components-input-border-active-prompt-1" />
           <span className={cn(s.optimizationNoteText, 'system-xs-semibold-uppercase')}>{t('generate.optimizationNote', { ns: 'appDebug' })}</span>
         </div>
-        <span className={`i-ri-arrow-down-sline ${cn('size-4 cursor-pointer text-text-tertiary', isFold && 'rotate-[-90deg]')}`} onClick={toggleFold} />
+        <RiArrowDownSLine className={cn('size-4 cursor-pointer text-text-tertiary', isFold && 'rotate-[-90deg]')} onClick={toggleFold} />
       </div>
       {!isFold && (
         <div className="pb-4 pr-4">

web/app/components/app/configuration/config/automatic/result.tsx

@@ -1,6 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import type { GenRes } from '@/service/debug'
+import { RiClipboardLine } from '@remixicon/react'
 import copy from 'copy-to-clipboard'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
@@ -56,7 +57,7 @@ const Result: FC<Props> = ({
               Toast.notify({ type: 'success', message: t('actionMsg.copySuccessfully', { ns: 'common' }) })
             }}
           >
-            <span className="i-ri-clipboard-line h-4 w-4 text-text-secondary" />
+            <RiClipboardLine className="h-4 w-4 text-text-secondary" />
           </Button>
           <Button variant="primary" onClick={onApply}>
             {t('generate.apply', { ns: 'appDebug' })}

web/app/components/app/configuration/config/automatic/version-selector.tsx

@@ -1,3 +1,4 @@
+import { RiArrowDownSLine, RiCheckLine } from '@remixicon/react'
 import { useBoolean } from 'ahooks'
 import * as React from 'react'
 import { useCallback } from 'react'
@@ -58,7 +59,7 @@ const VersionSelector: React.FC<VersionSelectorProps> = ({ versionLen, value, on
             {value + 1}
             {isLatest && ` · ${t('generate.latest', { ns: 'appDebug' })}`}
           </div>
-          {moreThanOneVersion && <span className="i-ri-arrow-down-sline size-3 " />}
+          {moreThanOneVersion && <RiArrowDownSLine className="size-3 " />}
         </div>
       </PortalToFollowElemTrigger>
       <PortalToFollowElemContent className={cn(
@@ -90,7 +91,7 @@ const VersionSelector: React.FC<VersionSelectorProps> = ({ versionLen, value, on
                   {option.label}
                 </div>
                 {
-                  value === option.value && <span className="i-ri-check-line h-4 w-4 shrink-0 text-text-accent" />
+                  value === option.value && <RiCheckLine className="h-4 w-4 shrink-0 text-text-accent" />
                 }
               </div>
             ))

web/app/components/app/configuration/dataset-config/card-item/index.tsx

@@ -1,7 +1,10 @@
 'use client'
 import type { FC } from 'react'
 import type { DataSet } from '@/models/datasets'
-
+import {
+  RiDeleteBinLine,
+  RiEditLine,
+} from '@remixicon/react'
 import * as React from 'react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -76,7 +79,7 @@ const Item: FC<ItemProps> = ({
                 setShowSettingsModal(true)
               }}
             >
-              <span className="i-ri-edit-line h-4 w-4 shrink-0 text-text-tertiary" />
+              <RiEditLine className="h-4 w-4 shrink-0 text-text-tertiary" />
             </ActionButton>
           )
         }
@@ -88,7 +91,7 @@ const Item: FC<ItemProps> = ({
               onMouseEnter={() => setIsDeleting(true)}
               onMouseLeave={() => setIsDeleting(false)}
             >
-              <span className={`i-ri-delete-bin-line ${cn('h-4 w-4 shrink-0 text-text-tertiary', isDeleting && 'text-text-destructive')}`} />
+              <RiDeleteBinLine className={cn('h-4 w-4 shrink-0 text-text-tertiary', isDeleting && 'text-text-destructive')} />
             </ActionButton>
           )
         }

web/app/components/app/configuration/dataset-config/context-var/var-picker.tsx

@@ -1,6 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import type { IInputTypeIconProps } from '@/app/components/app/configuration/config-var/input-type-icon'
+import { ChevronDownIcon } from '@heroicons/react/24/outline'
 import * as React from 'react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -75,7 +76,7 @@ const VarPicker: FC<Props> = ({
                   </div>
                 )}
           </div>
-          <span className={`i-heroicons-chevron-down-24-outline ${cn(open && 'rotate-180 text-text-tertiary', 'h-3.5 w-3.5')}`} />
+          <ChevronDownIcon className={cn(open && 'rotate-180 text-text-tertiary', 'h-3.5 w-3.5')} />
         </div>
       </PortalToFollowElemTrigger>
       <PortalToFollowElemContent style={{ zIndex: 1000 }}>

web/app/components/app/configuration/dataset-config/params-config/index.tsx

@@ -1,6 +1,7 @@
 'use client'
 import type { DataSet } from '@/models/datasets'
 import type { DatasetConfigs } from '@/models/debug'
+import { RiEqualizer2Line } from '@remixicon/react'
 import { memo, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
@@ -121,7 +122,7 @@ const ParamsConfig = ({
         }}
         disabled={disabled}
       >
-        <span className="i-ri-equalizer-2-line mr-1 h-3.5 w-3.5" />
+        <RiEqualizer2Line className="mr-1 h-3.5 w-3.5" />
         {t('retrievalSettings', { ns: 'dataset' })}
       </Button>
       {

web/app/components/app/configuration/dataset-config/settings-modal/index.tsx

@@ -2,6 +2,7 @@ import type { FC } from 'react'
 import type { Member } from '@/models/common'
 import type { DataSet } from '@/models/datasets'
 import type { RetrievalConfig } from '@/types/app'
+import { RiCloseLine } from '@remixicon/react'
 import { isEqual } from 'es-toolkit/predicate'
 import { useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -201,7 +202,7 @@ const SettingsModal: FC<SettingsModalProps> = ({
             onClick={onCancel}
             className="flex h-6 w-6 cursor-pointer items-center justify-center"
           >
-            <span className="i-ri-close-line h-4 w-4 text-text-tertiary" />
+            <RiCloseLine className="h-4 w-4 text-text-tertiary" />
           </div>
         </div>
       </div>

web/app/components/app/configuration/dataset-config/settings-modal/retrieval-section.tsx

@@ -2,6 +2,7 @@ import type { FC } from 'react'
 import type { DataSet } from '@/models/datasets'
 import type { RetrievalConfig } from '@/types/app'
 import type { DocPathWithoutLang } from '@/types/doc-paths'
+import { RiCloseLine } from '@remixicon/react'
 import Divider from '@/app/components/base/divider'
 import { AlertTriangle } from '@/app/components/base/icons/src/vender/solid/alertsAndFeedback'
 import { ApiConnectionMod } from '@/app/components/base/icons/src/vender/solid/development'
@@ -211,7 +212,7 @@ export const RetrievalChangeTip: FC<RetrievalChangeTipProps> = ({
         }}
         aria-label="close-retrieval-change-tip"
       >
-        <span className="i-ri-close-line h-4 w-4 text-gray-500" />
+        <RiCloseLine className="h-4 w-4 text-gray-500" />
       </button>
     </div>
   )

web/app/components/app/configuration/debug/debug-with-multiple-model/model-parameter-trigger.tsx

@@ -1,6 +1,7 @@
 import type { FC } from 'react'
 import type { ModelAndParameter } from '../types'
 import type { FormValue } from '@/app/components/header/account-setting/model-provider-page/declarations'
+import { RiArrowDownSLine } from '@remixicon/react'
 import { memo } from 'react'
 import { useTranslation } from 'react-i18next'
 import { AlertTriangle } from '@/app/components/base/icons/src/vender/line/alertsAndFeedback'
@@ -107,7 +108,7 @@ const ModelParameterTrigger: FC<ModelParameterTriggerProps> = ({
               </div>
             )
           }
-          <span className={`i-ri-arrow-down-sline ${`h-3 w-3 ${(currentModel && currentProvider) ? 'text-text-tertiary' : 'text-text-accent'}`}`} />
+          <RiArrowDownSLine className={`h-3 w-3 ${(currentModel && currentProvider) ? 'text-text-tertiary' : 'text-text-accent'}`} />
           {
             currentModel && currentModel.status !== ModelStatusEnum.active && (
               <Tooltip popupContent={MODEL_STATUS_TEXT[currentModel.status][language]}>

web/app/components/app/configuration/debug/index.tsx

@@ -5,7 +5,11 @@ import type { ModelAndParameter } from './types'
 import type { ModelParameterModalProps } from '@/app/components/header/account-setting/model-provider-page/model-parameter-modal'
 import type { Inputs } from '@/models/debug'
 import type { ModelConfig as BackendModelConfig, VisionFile, VisionSettings } from '@/types/app'
-
+import {
+  RiAddLine,
+  RiEqualizer2Line,
+  RiSparklingFill,
+} from '@remixicon/react'
 import { useBoolean } from 'ahooks'
 import { noop } from 'es-toolkit/function'
 import { cloneDeep } from 'es-toolkit/object'
@@ -401,7 +405,7 @@ const Debug: FC<IDebug> = ({
                         onClick={() => onMultipleModelConfigsChange(true, [...multipleModelConfigs, { id: `${Date.now()}`, model: '', provider: '', parameters: {} }])}
                         disabled={multipleModelConfigs.length >= 4}
                       >
-                        <span className="i-ri-add-line mr-1 h-3.5 w-3.5" />
+                        <RiAddLine className="mr-1 h-3.5 w-3.5" />
                         {t('modelProvider.addModel', { ns: 'common' })}
                         (
                         {multipleModelConfigs.length}
@@ -434,7 +438,7 @@ const Debug: FC<IDebug> = ({
                         popupContent={t('panel.userInputField', { ns: 'workflow' })}
                       >
                         <ActionButton state={expanded ? ActionButtonState.Active : undefined} onClick={() => !readonly && setExpanded(!expanded)}>
-                          <span className="i-ri-equalizer-2-line h-4 w-4" />
+                          <RiEqualizer2Line className="h-4 w-4" />
                         </ActionButton>
                       </TooltipPlus>
                       {expanded && <div className="absolute bottom-[-14px] right-[5px] z-10 h-3 w-3 rotate-45 border-l-[0.5px] border-t-[0.5px] border-components-panel-border-subtle bg-components-panel-on-panel-item-bg" />}
@@ -534,7 +538,7 @@ const Debug: FC<IDebug> = ({
                 )}
                 {!completionRes && !isResponding && (
                   <div className="flex grow flex-col items-center justify-center gap-2">
-                    <span className="i-ri-sparkling-fill h-12 w-12 text-text-empty-state-icon" />
+                    <RiSparklingFill className="h-12 w-12 text-text-empty-state-icon" />
                     <div className="system-sm-regular text-text-quaternary">{t('noResult', { ns: 'appDebug' })}</div>
                   </div>
                 )}

web/app/components/app/configuration/index.tsx

@@ -18,6 +18,7 @@ import type {
   TextToSpeechConfig,
 } from '@/models/debug'
 import type { ModelConfig as BackendModelConfig, UserInputFormItem, VisionSettings } from '@/types/app'
+import { CodeBracketIcon } from '@heroicons/react/20/solid'
 import { useBoolean, useGetState } from 'ahooks'
 import { clone } from 'es-toolkit/object'
 import { isEqual } from 'es-toolkit/predicate'
@@ -1008,7 +1009,7 @@ const Configuration: FC = () => {
                     {isMobile && (
                       <Button className="mr-2 !h-8 !text-[13px] font-medium" onClick={showDebugPanel}>
                         <span className="mr-1">{t('operation.debugConfig', { ns: 'appDebug' })}</span>
-                        <span className="i-heroicons-code-bracket-20-solid h-4 w-4 text-text-tertiary" />
+                        <CodeBracketIcon className="h-4 w-4 text-text-tertiary" />
                       </Button>
                     )}
                     <AppPublisher {...{

web/app/components/app/configuration/prompt-value-panel/index.tsx

@@ -2,7 +2,11 @@
 import type { FC } from 'react'
 import type { Inputs } from '@/models/debug'
 import type { VisionFile, VisionSettings } from '@/types/app'
-
+import {
+  RiArrowDownSLine,
+  RiArrowRightSLine,
+  RiPlayLargeFill,
+} from '@remixicon/react'
 import * as React from 'react'
 import { useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -109,8 +113,8 @@ const PromptValuePanel: FC<IPromptValuePanelProps> = ({
         <div className={cn('px-4 pt-3', userInputFieldCollapse ? 'pb-3' : 'pb-1')}>
           <div className="flex cursor-pointer items-center gap-0.5 py-0.5" onClick={() => setUserInputFieldCollapse(!userInputFieldCollapse)}>
             <div className="system-md-semibold-uppercase text-text-secondary">{t('inputs.userInputField', { ns: 'appDebug' })}</div>
-            {userInputFieldCollapse && <span className="i-ri-arrow-right-sline h-4 w-4 text-text-secondary" />}
-            {!userInputFieldCollapse && <span className="i-ri-arrow-down-sline h-4 w-4 text-text-secondary" />}
+            {userInputFieldCollapse && <RiArrowRightSLine className="h-4 w-4 text-text-secondary" />}
+            {!userInputFieldCollapse && <RiArrowDownSLine className="h-4 w-4 text-text-secondary" />}
           </div>
           {!userInputFieldCollapse && (
             <div className="system-xs-regular mt-1 text-text-tertiary">{t('inputs.completionVarTip', { ns: 'appDebug' })}</div>
@@ -215,7 +219,7 @@ const PromptValuePanel: FC<IPromptValuePanelProps> = ({
                   onClick={() => onSend?.()}
                   className="w-[96px]"
                 >
-                  <span className="i-ri-play-large-fill mr-0.5 h-4 w-4 shrink-0" aria-hidden="true" />
+                  <RiPlayLargeFill className="mr-0.5 h-4 w-4 shrink-0" aria-hidden="true" />
                   {t('inputs.run', { ns: 'appDebug' })}
                 </Button>
               </Tooltip>
@@ -227,7 +231,7 @@ const PromptValuePanel: FC<IPromptValuePanelProps> = ({
                 onClick={() => onSend?.()}
                 className="w-[96px]"
               >
-                <span className="i-ri-play-large-fill mr-0.5 h-4 w-4 shrink-0" aria-hidden="true" />
+                <RiPlayLargeFill className="mr-0.5 h-4 w-4 shrink-0" aria-hidden="true" />
                 {t('inputs.run', { ns: 'appDebug' })}
               </Button>
             )}

web/app/components/app/configuration/tools/index.tsx

@@ -1,5 +1,9 @@
 import type { ExternalDataTool } from '@/models/common'
-
+import {
+  RiAddLine,
+  RiArrowDownSLine,
+  RiDeleteBinLine,
+} from '@remixicon/react'
 import copy from 'copy-to-clipboard'
 // abandoned
 import { useState } from 'react'
@@ -99,7 +103,7 @@ const Tools = () => {
             }
             {
               !!externalDataToolsConfig.length && (
-                <span className={`i-ri-arrow-down-sline ${`hidden h-4 w-4 cursor-pointer text-primary-600 group-hover:block ${expanded ? 'rotate-180' : 'rotate-0'}`}`} />
+                <RiArrowDownSLine className={`hidden h-4 w-4 cursor-pointer text-primary-600 group-hover:block ${expanded ? 'rotate-180' : 'rotate-0'}`} />
               )
             }
           </div>
@@ -126,7 +130,7 @@ const Tools = () => {
           className="flex h-7 cursor-pointer items-center px-3 text-xs font-medium text-gray-700"
           onClick={() => handleOpenExternalDataToolModal({}, -1)}
         >
-          <span className="i-ri-add-line mr-[5px] h-3.5 w-3.5 " />
+          <RiAddLine className="mr-[5px] h-3.5 w-3.5 " />
           {t('operation.add', { ns: 'common' })}
         </div>
       </div>
@@ -171,7 +175,7 @@ const Tools = () => {
                     className="group/action hidden h-6 w-6 cursor-pointer items-center justify-center rounded-md hover:bg-[#FEE4E2] group-hover:flex"
                     onClick={() => setExternalDataToolsConfig([...externalDataToolsConfig.slice(0, index), ...externalDataToolsConfig.slice(index + 1)])}
                   >
-                    <span className="i-ri-delete-bin-line h-4 w-4 text-gray-500 group-hover/action:text-[#D92D20]" />
+                    <RiDeleteBinLine className="h-4 w-4 text-gray-500 group-hover/action:text-[#D92D20]" />
                   </div>
                   <div className="ml-2 mr-3 hidden h-3.5 w-[1px] bg-gray-200 group-hover:block" />
                   <Switch

web/app/components/app/create-app-dialog/app-card/index.tsx

@@ -1,5 +1,7 @@
 'use client'
 import type { App } from '@/models/explore'
+import { PlusIcon } from '@heroicons/react/20/solid'
+import { RiInformation2Line } from '@remixicon/react'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useContextSelector } from 'use-context-selector'
@@ -64,12 +66,12 @@ const AppCard = ({
         <div className={cn('absolute bottom-0 left-0 right-0 hidden bg-gradient-to-t from-components-panel-gradient-2 from-[60.27%] to-transparent p-4 pt-8 group-hover:flex')}>
           <div className={cn('grid h-8 w-full grid-cols-1 items-center space-x-2', isTrialApp && 'grid-cols-2')}>
             <Button variant="primary" onClick={() => onCreate()}>
-              <span className="i-heroicons-plus-20-solid mr-1 h-4 w-4" />
+              <PlusIcon className="mr-1 h-4 w-4" />
               <span className="text-xs">{t('newApp.useTemplate', { ns: 'app' })}</span>
             </Button>
             {isTrialApp && (
               <Button onClick={showTryAPPPanel(app.app_id)}>
-                <span className="i-ri-information-2-line mr-1 size-4" />
+                <RiInformation2Line className="mr-1 size-4" />
                 <span>{t('appCard.try', { ns: 'explore' })}</span>
               </Button>
             )}

web/app/components/app/create-app-dialog/app-list/index.tsx

@@ -2,6 +2,7 @@
 
 import type { CreateAppModalProps } from '@/app/components/explore/create-app-modal'
 import type { App } from '@/models/explore'
+import { RiRobot2Line } from '@remixicon/react'
 import { useDebounceFn } from 'ahooks'
 import { useRouter } from 'next/navigation'
 import * as React from 'react'
@@ -247,7 +248,7 @@ function NoTemplateFound() {
   return (
     <div className="w-full rounded-lg bg-workflow-process-bg p-4">
       <div className="mb-2 inline-flex h-8 w-8 items-center justify-center rounded-lg bg-components-card-bg shadow-lg">
-        <span className="i-ri-robot-2-line h-5 w-5 text-text-tertiary" />
+        <RiRobot2Line className="h-5 w-5 text-text-tertiary" />
       </div>
       <p className="title-md-semi-bold text-text-primary">{t('newApp.noTemplateFound', { ns: 'app' })}</p>
       <p className="system-sm-regular text-text-tertiary">{t('newApp.noTemplateFoundTip', { ns: 'app' })}</p>

web/app/components/app/create-app-dialog/app-list/sidebar.tsx

@@ -1,4 +1,5 @@
 'use client'
+import { RiStickyNoteAddLine, RiThumbUpLine } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import Divider from '@/app/components/base/divider'
 import { cn } from '@/utils/classnames'
@@ -27,7 +28,7 @@ export default function Sidebar({ current, categories, onClick, onCreateFromBlan
       </ul>
       <Divider bgStyle="gradient" />
       <div className="flex cursor-pointer items-center gap-1 px-3 py-1 text-text-tertiary" onClick={onCreateFromBlank}>
-        <span className="i-ri-sticky-note-add-line h-3.5 w-3.5" />
+        <RiStickyNoteAddLine className="h-3.5 w-3.5" />
         <span className="system-xs-regular">{t('newApp.startFromBlank', { ns: 'app' })}</span>
       </div>
     </div>
@@ -47,7 +48,7 @@ function CategoryItem({ category, active, onClick }: CategoryItemProps) {
     >
       {category === AppCategories.RECOMMENDED && (
         <div className="inline-flex h-5 w-5 items-center justify-center rounded-md">
-          <span className="i-ri-thumb-up-line h-4 w-4 text-components-menu-item-text group-[.active]:text-components-menu-item-text-active" />
+          <RiThumbUpLine className="h-4 w-4 text-components-menu-item-text group-[.active]:text-components-menu-item-text-active" />
         </div>
       )}
       <AppCategoryLabel

web/app/components/app/create-app-modal/index.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import type { AppIconSelection } from '../../base/app-icon-picker'
+import { RiArrowRightLine, RiArrowRightSLine, RiCommandLine, RiCornerDownLeftLine, RiExchange2Fill } from '@remixicon/react'
 
 import { useDebounceFn, useKeyPress } from 'ahooks'
 import Image from 'next/image'
@@ -129,7 +130,7 @@ function CreateApp({ onClose, onSuccess, onCreateFromTemplate, defaultAppMode }:
                     description={t('newApp.workflowShortDescription', { ns: 'app' })}
                     icon={(
                       <div className="flex h-6 w-6 items-center justify-center rounded-md bg-components-icon-bg-indigo-solid">
-                        <span className="i-ri-exchange-2-fill h-4 w-4 text-components-avatar-shape-fill-stop-100" />
+                        <RiExchange2Fill className="h-4 w-4 text-components-avatar-shape-fill-stop-100" />
                       </div>
                     )}
                     onClick={() => {
@@ -159,7 +160,7 @@ function CreateApp({ onClose, onSuccess, onCreateFromTemplate, defaultAppMode }:
                     onClick={() => setIsAppTypeExpanded(!isAppTypeExpanded)}
                   >
                     <span className="system-2xs-medium-uppercase text-text-tertiary">{t('newApp.forBeginners', { ns: 'app' })}</span>
-                    <span className={`i-ri-arrow-right-sline ${`ml-1 h-4 w-4 text-text-tertiary transition-transform ${isAppTypeExpanded ? 'rotate-90' : ''}`}`} />
+                    <RiArrowRightSLine className={`ml-1 h-4 w-4 text-text-tertiary transition-transform ${isAppTypeExpanded ? 'rotate-90' : ''}`} />
                   </button>
                 </div>
                 {isAppTypeExpanded && (
@@ -261,7 +262,7 @@ function CreateApp({ onClose, onSuccess, onCreateFromTemplate, defaultAppMode }:
               <div className="system-xs-regular flex cursor-pointer items-center gap-1 text-text-tertiary" onClick={onCreateFromTemplate}>
                 <span>{t('newApp.noIdeaTip', { ns: 'app' })}</span>
                 <div className="p-[1px]">
-                  <span className="i-ri-arrow-right-line h-3.5 w-3.5" />
+                  <RiArrowRightLine className="h-3.5 w-3.5" />
                 </div>
               </div>
               <div className="flex gap-2">
@@ -269,8 +270,8 @@ function CreateApp({ onClose, onSuccess, onCreateFromTemplate, defaultAppMode }:
                 <Button disabled={isAppsFull || !name} className="gap-1" variant="primary" onClick={handleCreateApp}>
                   <span>{t('newApp.Create', { ns: 'app' })}</span>
                   <div className="flex gap-0.5">
-                    <span className="system-kbd i-ri-command-line size-3.5 rounded-sm bg-components-kbd-bg-white p-0.5" />
-                    <span className="system-kbd i-ri-corner-down-left-line size-3.5 rounded-sm bg-components-kbd-bg-white p-0.5" />
+                    <RiCommandLine size={14} className="system-kbd rounded-sm bg-components-kbd-bg-white p-0.5" />
+                    <RiCornerDownLeftLine size={14} className="system-kbd rounded-sm bg-components-kbd-bg-white p-0.5" />
                   </div>
                 </Button>
               </div>

web/app/components/app/create-from-dsl-modal/index.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import type { MouseEventHandler } from 'react'
+import { RiCloseLine, RiCommandLine, RiCornerDownLeftLine } from '@remixicon/react'
 import { useDebounceFn, useKeyPress } from 'ahooks'
 import { noop } from 'es-toolkit/function'
 import { useRouter } from 'next/navigation'
@@ -236,7 +237,7 @@ const CreateFromDSLModal = ({ show, onSuccess, onClose, activeTab = CreateFromDS
             className="flex h-8 w-8 cursor-pointer items-center"
             onClick={() => onClose()}
           >
-            <span className="i-ri-close-line h-5 w-5 text-text-tertiary" />
+            <RiCloseLine className="h-5 w-5 text-text-tertiary" />
           </div>
         </div>
         <div className="system-md-semibold flex h-9 items-center space-x-6 border-b border-divider-subtle px-6 text-text-tertiary">
@@ -298,8 +299,8 @@ const CreateFromDSLModal = ({ show, onSuccess, onClose, activeTab = CreateFromDS
           >
             <span>{t('newApp.Create', { ns: 'app' })}</span>
             <div className="flex gap-0.5">
-              <span className="system-kbd i-ri-command-line size-3.5 rounded-sm bg-components-kbd-bg-white p-0.5" />
-              <span className="system-kbd i-ri-corner-down-left-line size-3.5 rounded-sm bg-components-kbd-bg-white p-0.5" />
+              <RiCommandLine size={14} className="system-kbd rounded-sm bg-components-kbd-bg-white p-0.5" />
+              <RiCornerDownLeftLine size={14} className="system-kbd rounded-sm bg-components-kbd-bg-white p-0.5" />
             </div>
           </Button>
         </div>

web/app/components/app/create-from-dsl-modal/uploader.tsx

@@ -1,6 +1,9 @@
 'use client'
 import type { FC } from 'react'
-
+import {
+  RiDeleteBinLine,
+  RiUploadCloud2Line,
+} from '@remixicon/react'
 import * as React from 'react'
 import { useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -108,7 +111,7 @@ const Uploader: FC<Props> = ({
         {!file && (
           <div className={cn('flex h-12 items-center rounded-[10px] border border-dashed border-components-dropzone-border bg-components-dropzone-bg text-sm font-normal', dragging && 'border-components-dropzone-border-accent bg-components-dropzone-bg-accent')}>
             <div className="flex w-full items-center justify-center space-x-2">
-              <span className="i-ri-upload-cloud-2-line h-6 w-6 text-text-tertiary" />
+              <RiUploadCloud2Line className="h-6 w-6 text-text-tertiary" />
               <div className="text-text-tertiary">
                 {t('dslUploader.button', { ns: 'app' })}
                 <span className="cursor-pointer pl-1 text-text-accent" onClick={selectHandle}>{t('dslUploader.browse', { ns: 'app' })}</span>
@@ -132,7 +135,7 @@ const Uploader: FC<Props> = ({
             </div>
             <div className="hidden items-center pr-3 group-hover:flex">
               <ActionButton onClick={removeFile}>
-                <span className="i-ri-delete-bin-line h-4 w-4 text-text-tertiary" />
+                <RiDeleteBinLine className="h-4 w-4 text-text-tertiary" />
               </ActionButton>
             </div>
           </div>

web/app/components/app/duplicate-modal/index.tsx

@@ -1,5 +1,6 @@
 'use client'
 import type { AppIconType } from '@/types/app'
+import { RiCloseLine } from '@remixicon/react'
 import { noop } from 'es-toolkit/function'
 import * as React from 'react'
 import { useState } from 'react'
@@ -76,7 +77,7 @@ const DuplicateAppModal = ({
         className={cn('relative !max-w-[480px]', 'px-8')}
       >
         <div className="absolute right-4 top-4 cursor-pointer p-2" onClick={onHide}>
-          <span className="i-ri-close-line h-4 w-4 text-text-tertiary" />
+          <RiCloseLine className="h-4 w-4 text-text-tertiary" />
         </div>
         <div className="relative mb-9 mt-3 text-xl font-semibold leading-[30px] text-text-primary">{t('duplicateTitle', { ns: 'app' })}</div>
         <div className="system-sm-regular mb-9 text-text-secondary">

web/app/components/app/log/filter.tsx

@@ -2,6 +2,7 @@
 import type { FC } from 'react'
 import type { QueryParam } from './index'
 import type { I18nKeysByPrefix } from '@/types/i18n'
+import { RiCalendarLine } from '@remixicon/react'
 import dayjs from 'dayjs'
 import quarterOfYear from 'dayjs/plugin/quarterOfYear'
 import * as React from 'react'
@@ -46,7 +47,7 @@ const Filter: FC<IFilterProps> = ({ isChatMode, appId, queryParams, setQueryPara
       <Chip
         className="min-w-[150px]"
         panelClassName="w-[270px]"
-        leftIcon={<span className="i-ri-calendar-line h-4 w-4 text-text-secondary" />}
+        leftIcon={<RiCalendarLine className="h-4 w-4 text-text-secondary" />}
         value={queryParams.period}
         onSelect={(item) => {
           setQueryParams({ ...queryParams, period: item.value })

web/app/components/app/log/list.tsx

@@ -8,6 +8,7 @@ import {
   HandThumbDownIcon,
   HandThumbUpIcon,
 } from '@heroicons/react/24/outline'
+import { RiCloseLine, RiEditFill } from '@remixicon/react'
 import dayjs from 'dayjs'
 import timezone from 'dayjs/plugin/timezone'
 import utc from 'dayjs/plugin/utc'
@@ -609,7 +610,7 @@ function DetailPanel({ detail, onFeedback }: IDetailPanel) {
           {!isAdvanced && <ModelInfo model={detail.model_config.model} />}
         </div>
         <ActionButton size="l" onClick={onClose}>
-          <span className="i-ri-close-line h-4 w-4 text-text-tertiary" />
+          <RiCloseLine className="h-4 w-4 text-text-tertiary" />
         </ActionButton>
       </div>
       {/* Panel Body */}
@@ -973,7 +974,7 @@ const ConversationList: FC<IConversationList> = ({ logs, appDetail, onRefresh })
       <Tooltip
         popupContent={(
           <span className="inline-flex items-center text-xs text-text-tertiary">
-            <span className="i-ri-edit-fill mr-1 h-3 w-3" />
+            <RiEditFill className="mr-1 h-3 w-3" />
             {`${t('detail.annotationTip', { ns: 'appLog', user: annotation?.account?.name })} ${formatTime(annotation?.created_at || dayjs().unix(), 'MM-DD hh:mm A')}`}
           </span>
         )}

web/app/components/app/log/model-info.tsx

@@ -1,6 +1,8 @@
 'use client'
 import type { FC } from 'react'
-
+import {
+  RiInformation2Line,
+} from '@remixicon/react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import {
@@ -82,7 +84,7 @@ const ModelInfo: FC<Props> = ({
               open && 'bg-components-button-tertiary-bg-hover',
             )}
             >
-              <span className="i-ri-information-2-line h-4 w-4 text-text-tertiary" />
+              <RiInformation2Line className="h-4 w-4 text-text-tertiary" />
             </div>
           </PortalToFollowElemTrigger>
           <PortalToFollowElemContent className="z-[1002]">

web/app/components/app/log/var-panel.tsx

@@ -1,6 +1,9 @@
 'use client'
 import type { FC } from 'react'
-
+import {
+  RiArrowDownSLine,
+  RiArrowRightSLine,
+} from '@remixicon/react'
 import { useBoolean } from 'ahooks'
 import * as React from 'react'
 import { useState } from 'react'
@@ -32,8 +35,8 @@ const VarPanel: FC<Props> = ({
         <div className="system-md-medium grow">{t('detail.variables', { ns: 'appLog' })}</div>
         {
           isCollapse
-            ? <span className="i-ri-arrow-right-sline h-4 w-4" />
-            : <span className="i-ri-arrow-down-sline h-4 w-4" />
+            ? <RiArrowRightSLine className="h-4 w-4" />
+            : <RiArrowDownSLine className="h-4 w-4" />
         }
       </div>
       {!isCollapse && (

web/app/components/app/overview/apikey-info-panel/index.tsx

@@ -1,5 +1,6 @@
 'use client'
 import type { FC } from 'react'
+import { RiCloseLine } from '@remixicon/react'
 import * as React from 'react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -68,7 +69,7 @@ const APIKeyInfoPanel: FC = () => {
         onClick={() => setIsShow(false)}
         className="absolute right-4 top-4 flex h-8 w-8 cursor-pointer items-center justify-center "
       >
-        <span className="i-ri-close-line h-4 w-4 text-text-tertiary" />
+        <RiCloseLine className="h-4 w-4 text-text-tertiary" />
       </div>
     </div>
   )

web/app/components/app/overview/app-card.tsx

@@ -3,10 +3,15 @@ import type { ConfigParams } from './settings'
 import type { AppDetailResponse } from '@/models/app'
 import type { AppSSO } from '@/types/app'
 import {
+  RiArrowRightSLine,
   RiBookOpenLine,
+  RiBuildingLine,
   RiEqualizer2Line,
   RiExternalLinkLine,
+  RiGlobalLine,
+  RiLockLine,
   RiPaintBrushLine,
+  RiVerifiedBadgeLine,
   RiWindowLine,
 } from '@remixicon/react'
 import { usePathname, useRouter } from 'next/navigation'
@@ -323,35 +328,35 @@ function AppCard({
                   {appDetail?.access_mode === AccessMode.ORGANIZATION
                     && (
                       <>
-                        <span className="i-ri-building-line h-4 w-4 shrink-0 text-text-secondary" />
+                        <RiBuildingLine className="h-4 w-4 shrink-0 text-text-secondary" />
                         <p className="system-sm-medium text-text-secondary">{t('accessControlDialog.accessItems.organization', { ns: 'app' })}</p>
                       </>
                     )}
                   {appDetail?.access_mode === AccessMode.SPECIFIC_GROUPS_MEMBERS
                     && (
                       <>
-                        <span className="i-ri-lock-line h-4 w-4 shrink-0 text-text-secondary" />
+                        <RiLockLine className="h-4 w-4 shrink-0 text-text-secondary" />
                         <p className="system-sm-medium text-text-secondary">{t('accessControlDialog.accessItems.specific', { ns: 'app' })}</p>
                       </>
                     )}
                   {appDetail?.access_mode === AccessMode.PUBLIC
                     && (
                       <>
-                        <span className="i-ri-global-line h-4 w-4 shrink-0 text-text-secondary" />
+                        <RiGlobalLine className="h-4 w-4 shrink-0 text-text-secondary" />
                         <p className="system-sm-medium text-text-secondary">{t('accessControlDialog.accessItems.anyone', { ns: 'app' })}</p>
                       </>
                     )}
                   {appDetail?.access_mode === AccessMode.EXTERNAL_MEMBERS
                     && (
                       <>
-                        <span className="i-ri-verified-badge-line h-4 w-4 shrink-0 text-text-secondary" />
+                        <RiVerifiedBadgeLine className="h-4 w-4 shrink-0 text-text-secondary" />
                         <p className="system-sm-medium text-text-secondary">{t('accessControlDialog.accessItems.external', { ns: 'app' })}</p>
                       </>
                     )}
                 </div>
                 {!isAppAccessSet && <p className="system-xs-regular shrink-0 text-text-tertiary">{t('publishApp.notSet', { ns: 'app' })}</p>}
                 <div className="flex h-4 w-4 shrink-0 items-center justify-center">
-                  <span className="i-ri-arrow-right-sline h-4 w-4 text-text-quaternary" />
+                  <RiArrowRightSLine className="h-4 w-4 text-text-quaternary" />
                 </div>
               </div>
             </div>

web/app/components/app/overview/customize/index.tsx

@@ -1,5 +1,6 @@
 'use client'
 import type { FC } from 'react'
+import { ArrowTopRightOnSquareIcon } from '@heroicons/react/24/outline'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import Button from '@/app/components/base/button'
@@ -122,7 +123,7 @@ const CustomizeModal: FC<IShareLinkProps> = ({
             )}
         >
           <span className="text-sm text-text-secondary">{t(`${prefixCustomize}.way2.operation`, { ns: 'appOverview' })}</span>
-          <span className="i-heroicons-arrow-top-right-on-square-24-outline ml-1 h-4 w-4 shrink-0 text-text-secondary" />
+          <ArrowTopRightOnSquareIcon className="ml-1 h-4 w-4 shrink-0 text-text-secondary" />
         </Button>
       </div>
     </Modal>

web/app/components/app/overview/embedded/index.tsx

@@ -1,5 +1,8 @@
 import type { SiteInfo } from '@/models/share'
-
+import {
+  RiClipboardFill,
+  RiClipboardLine,
+} from '@remixicon/react'
 import copy from 'copy-to-clipboard'
 import * as React from 'react'
 import { useEffect, useState } from 'react'
@@ -182,8 +185,8 @@ const Embedded = ({ siteInfo, isShow, onClose, appBaseUrl, accessToken, classNam
               <div
                 onClick={onClickCopy}
               >
-                {isCopied[option] && <span className="i-ri-clipboard-fill h-4 w-4" />}
-                {!isCopied[option] && <span className="i-ri-clipboard-line h-4 w-4" />}
+                {isCopied[option] && <RiClipboardFill className="h-4 w-4" />}
+                {!isCopied[option] && <RiClipboardLine className="h-4 w-4" />}
               </div>
             </ActionButton>
           </Tooltip>

web/app/components/app/overview/settings/index.tsx

@@ -3,6 +3,7 @@ import type { FC } from 'react'
 import type { AppIconSelection } from '@/app/components/base/app-icon-picker'
 import type { AppDetailResponse } from '@/models/app'
 import type { AppIconType, AppSSO, Language } from '@/types/app'
+import { RiArrowRightSLine, RiCloseLine } from '@remixicon/react'
 import Link from 'next/link'
 import * as React from 'react'
 import { useCallback, useEffect, useState } from 'react'
@@ -232,7 +233,7 @@ const SettingsModal: FC<ISettingsModalProps> = ({
           <div className="flex items-center gap-1">
             <div className="title-2xl-semi-bold grow text-text-primary">{t(`${prefixSettings}.title`, { ns: 'appOverview' })}</div>
             <ActionButton className="shrink-0" onClick={onHide}>
-              <span className="i-ri-close-line h-4 w-4" />
+              <RiCloseLine className="h-4 w-4" />
             </ActionButton>
           </div>
           <div className="system-xs-regular mt-0.5 text-text-tertiary">
@@ -345,7 +346,7 @@ const SettingsModal: FC<ISettingsModalProps> = ({
                   {t(`${prefixSettings}.more.privacyPolicyPlaceholder`, { ns: 'appOverview' })}
                 </p>
               </div>
-              <span className="i-ri-arrow-right-sline ml-1 h-4 w-4 shrink-0 text-text-secondary" />
+              <RiArrowRightSLine className="ml-1 h-4 w-4 shrink-0 text-text-secondary" />
             </div>
           )}
           {/* more settings */}

web/app/components/app/switch-app-modal/index.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import type { App } from '@/types/app'
+import { RiCloseLine } from '@remixicon/react'
 import { noop } from 'es-toolkit/function'
 import { useRouter } from 'next/navigation'
 import { useEffect, useState } from 'react'
@@ -100,7 +101,7 @@ const SwitchAppModal = ({ show, appDetail, inAppDetail = false, onSuccess, onClo
         onClose={noop}
       >
         <div className="absolute right-4 top-4 cursor-pointer p-2" onClick={onClose}>
-          <span className="i-ri-close-line h-4 w-4 text-text-tertiary" />
+          <RiCloseLine className="h-4 w-4 text-text-tertiary" />
         </div>
         <div className="h-12 w-12 rounded-xl border-[0.5px] border-divider-regular bg-background-default-burn p-3 shadow-xl">
           <AlertTriangle className="h-6 w-6 text-[rgb(247,144,9)]" />

web/app/components/app/text-generate/item/index.tsx

@@ -3,7 +3,17 @@ import type { FC } from 'react'
 import type { FeedbackType } from '@/app/components/base/chat/chat/type'
 import type { WorkflowProcess } from '@/app/components/base/chat/types'
 import type { SiteInfo } from '@/models/share'
-
+import {
+  RiBookmark3Line,
+  RiClipboardLine,
+  RiFileList3Line,
+  RiPlayList2Line,
+  RiReplay15Line,
+  RiSparklingFill,
+  RiSparklingLine,
+  RiThumbDownLine,
+  RiThumbUpLine,
+} from '@remixicon/react'
 import { useBoolean } from 'ahooks'
 import copy from 'copy-to-clipboard'
 import { useParams } from 'next/navigation'
@@ -226,7 +236,7 @@ const GenerationItem: FC<IGenerationItemProps> = ({
                   >
                     {taskId && (
                       <div className={cn('system-2xs-medium-uppercase mb-2 flex items-center text-text-accent-secondary', isError && 'text-text-destructive')}>
-                        <span className="i-ri-play-list-2-line mr-1 h-3 w-3" />
+                        <RiPlayList2Line className="mr-1 h-3 w-3" />
                         <span>{t('generation.execution', { ns: 'share' })}</span>
                         <span className="px-1">·</span>
                         <span>{taskId}</span>
@@ -271,7 +281,7 @@ const GenerationItem: FC<IGenerationItemProps> = ({
               )}
               {!workflowProcessData && taskId && (
                 <div className={cn('system-2xs-medium-uppercase sticky left-0 top-0 flex w-full items-center rounded-t-2xl bg-components-actionbar-bg p-4 pb-3 text-text-accent-secondary', isError && 'text-text-destructive')}>
-                  <span className="i-ri-play-list-2-line mr-1 h-3 w-3" />
+                  <RiPlayList2Line className="mr-1 h-3 w-3" />
                   <span>{t('generation.execution', { ns: 'share' })}</span>
                   <span className="px-1">·</span>
                   <span>{`${taskId}${depth > 1 ? `-${depth - 1}` : ''}`}</span>
@@ -304,7 +314,7 @@ const GenerationItem: FC<IGenerationItemProps> = ({
                 {!isInWebApp && (appSourceType !== AppSourceType.installedApp) && !isResponding && (
                   <div className="ml-1 flex items-center gap-0.5 rounded-[10px] border-[0.5px] border-components-actionbar-border bg-components-actionbar-bg p-0.5 shadow-md backdrop-blur-sm">
                     <ActionButton disabled={isError || !messageId} onClick={handleOpenLogModal}>
-                      <span className="i-ri-file-list-3-line h-4 w-4" />
+                      <RiFileList3Line className="h-4 w-4" />
                       {/* <div>{t('common.operation.log')}</div> */}
                     </ActionButton>
                   </div>
@@ -312,7 +322,7 @@ const GenerationItem: FC<IGenerationItemProps> = ({
                 <div className="ml-1 flex items-center gap-0.5 rounded-[10px] border-[0.5px] border-components-actionbar-border bg-components-actionbar-bg p-0.5 shadow-md backdrop-blur-sm">
                   {moreLikeThis && !isTryApp && (
                     <ActionButton state={depth === MAX_DEPTH ? ActionButtonState.Disabled : ActionButtonState.Default} disabled={depth === MAX_DEPTH} onClick={handleMoreLikeThis}>
-                      <span className="i-ri-sparkling-line h-4 w-4" />
+                      <RiSparklingLine className="h-4 w-4" />
                     </ActionButton>
                   )}
                   {isShowTextToSpeech && !isTryApp && (
@@ -333,17 +343,17 @@ const GenerationItem: FC<IGenerationItemProps> = ({
                         Toast.notify({ type: 'success', message: t('actionMsg.copySuccessfully', { ns: 'common' }) })
                       }}
                     >
-                      <span className="i-ri-clipboard-line h-4 w-4" />
+                      <RiClipboardLine className="h-4 w-4" />
                     </ActionButton>
                   )}
                   {isInWebApp && isError && (
                     <ActionButton onClick={onRetry}>
-                      <span className="i-ri-replay-15-line h-4 w-4" />
+                      <RiReplay15Line className="h-4 w-4" />
                     </ActionButton>
                   )}
                   {isInWebApp && !isWorkflow && !isTryApp && (
                     <ActionButton disabled={isError || !messageId} onClick={() => { onSave?.(messageId as string) }}>
-                      <span className="i-ri-bookmark-3-line h-4 w-4" />
+                      <RiBookmark3Line className="h-4 w-4" />
                     </ActionButton>
                   )}
                 </div>
@@ -352,21 +362,21 @@ const GenerationItem: FC<IGenerationItemProps> = ({
                     {!feedback?.rating && (
                       <>
                         <ActionButton onClick={() => onFeedback?.({ rating: 'like' })}>
-                          <span className="i-ri-thumb-up-line h-4 w-4" />
+                          <RiThumbUpLine className="h-4 w-4" />
                         </ActionButton>
                         <ActionButton onClick={() => onFeedback?.({ rating: 'dislike' })}>
-                          <span className="i-ri-thumb-down-line h-4 w-4" />
+                          <RiThumbDownLine className="h-4 w-4" />
                         </ActionButton>
                       </>
                     )}
                     {feedback?.rating === 'like' && (
                       <ActionButton state={ActionButtonState.Active} onClick={() => onFeedback?.({ rating: null })}>
-                        <span className="i-ri-thumb-up-line h-4 w-4" />
+                        <RiThumbUpLine className="h-4 w-4" />
                       </ActionButton>
                     )}
                     {feedback?.rating === 'dislike' && (
                       <ActionButton state={ActionButtonState.Destructive} onClick={() => onFeedback?.({ rating: null })}>
-                        <span className="i-ri-thumb-down-line h-4 w-4" />
+                        <RiThumbDownLine className="h-4 w-4" />
                       </ActionButton>
                     )}
                   </div>
@@ -386,7 +396,7 @@ const GenerationItem: FC<IGenerationItemProps> = ({
                   isMobile ? 'top-[3.5px]' : 'top-2',
                 )}
                 >
-                  <span className="i-ri-sparkling-fill h-3 w-3 text-text-primary-on-surface" />
+                  <RiSparklingFill className="h-3 w-3 text-text-primary-on-surface" />
                 </div>
               </div>
             )}

web/app/components/app/text-generate/saved-items/index.tsx

@@ -1,7 +1,10 @@
 'use client'
 import type { FC } from 'react'
 import type { SavedMessage } from '@/models/debug'
-
+import {
+  RiClipboardLine,
+  RiDeleteBinLine,
+} from '@remixicon/react'
 import copy from 'copy-to-clipboard'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
@@ -60,13 +63,13 @@ const SavedItems: FC<ISavedItemsProps> = ({
                         Toast.notify({ type: 'success', message: t('actionMsg.copySuccessfully', { ns: 'common' }) })
                       }}
                       >
-                        <span className="i-ri-clipboard-line h-4 w-4" />
+                        <RiClipboardLine className="h-4 w-4" />
                       </ActionButton>
                       <ActionButton onClick={() => {
                         onRemove(id)
                       }}
                       >
-                        <span className="i-ri-delete-bin-line h-4 w-4" />
+                        <RiDeleteBinLine className="h-4 w-4" />
                       </ActionButton>
                     </div>
                   </div>

web/app/components/app/text-generate/saved-items/no-data/index.tsx

@@ -1,6 +1,9 @@
 'use client'
 import type { FC } from 'react'
-
+import {
+  RiAddLine,
+  RiBookmark3Line,
+} from '@remixicon/react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import Button from '@/app/components/base/button'
@@ -17,7 +20,7 @@ const NoData: FC<INoDataProps> = ({
   return (
     <div className="rounded-xl bg-background-section-burn p-6 ">
       <div className="flex h-10 w-10 items-center justify-center rounded-[10px] border-[0.5px] border-components-card-border bg-components-card-bg-alt shadow-lg backdrop-blur-sm">
-        <span className="i-ri-bookmark-3-line h-4 w-4 text-text-accent" />
+        <RiBookmark3Line className="h-4 w-4 text-text-accent" />
       </div>
       <div className="mt-3">
         <span className="system-xl-semibold text-text-secondary">{t('generation.savedNoData.title', { ns: 'share' })}</span>
@@ -30,7 +33,7 @@ const NoData: FC<INoDataProps> = ({
         className="mt-3"
         onClick={onStartCreateContent}
       >
-        <span className="i-ri-add-line mr-1 h-4 w-4" />
+        <RiAddLine className="mr-1 h-4 w-4" />
         <span>{t('generation.savedNoData.startCreateContent', { ns: 'share' })}</span>
       </Button>
     </div>

web/app/components/app/type-selector/index.tsx

@@ -1,3 +1,4 @@
+import { RiArrowDownSLine, RiCloseCircleFill, RiExchange2Fill, RiFilter3Line } from '@remixicon/react'
 import * as React from 'react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -49,7 +50,9 @@ const AppTypeSelector = ({ value, onChange }: AppSelectorProps) => {
                   onChange([])
                 }}
               >
-                <span className="i-ri-close-circle-fill h-3.5 w-3.5 text-text-quaternary group-hover:text-text-tertiary" />
+                <RiCloseCircleFill
+                  className="h-3.5 w-3.5 text-text-quaternary group-hover:text-text-tertiary"
+                />
               </button>
             )}
           </div>
@@ -112,7 +115,7 @@ export const AppTypeIcon = React.memo(({ type, className, wrapperClassName, styl
   if (type === AppModeEnum.WORKFLOW) {
     return (
       <div style={style} className={cn(wrapperClassNames, 'bg-components-icon-bg-indigo-solid')}>
-        <span className={`i-ri-exchange-2-fill ${iconClassNames}`} />
+        <RiExchange2Fill className={iconClassNames} />
       </div>
     )
   }
@@ -134,9 +137,9 @@ function AppTypeSelectTrigger({ values }: { readonly values: AppSelectorProps['v
         'flex h-8 items-center justify-between gap-1',
       )}
       >
-        <span className="i-ri-filter-3-line h-4 w-4 text-text-tertiary" />
+        <RiFilter3Line className="h-4 w-4 text-text-tertiary" />
         <div className="system-sm-medium min-w-[65px] grow text-center text-text-tertiary">{t('typeSelector.all', { ns: 'app' })}</div>
-        <span className="i-ri-arrow-down-sline h-4 w-4 text-text-tertiary" />
+        <RiArrowDownSLine className="h-4 w-4 text-text-tertiary" />
       </div>
     )
   }

web/app/components/app/workflow-log/detail.tsx

@@ -1,5 +1,6 @@
 'use client'
 import type { FC } from 'react'
+import { RiCloseLine, RiPlayLargeLine } from '@remixicon/react'
 import { useRouter } from 'next/navigation'
 import { useTranslation } from 'react-i18next'
 import { useStore } from '@/app/components/app/store'
@@ -27,7 +28,7 @@ const DetailPanel: FC<ILogDetail> = ({ runID, onClose, canReplay = false }) => {
   return (
     <div className="relative flex grow flex-col pt-3">
       <span className="absolute right-3 top-4 z-20 cursor-pointer p-1" onClick={onClose}>
-        <span className="i-ri-close-line h-4 w-4 text-text-tertiary" />
+        <RiCloseLine className="h-4 w-4 text-text-tertiary" />
       </span>
       <div className="flex items-center bg-components-panel-bg">
         <h1 className="system-xl-semibold shrink-0 px-4 py-1 text-text-primary">{t('runDetail.workflowTitle', { ns: 'appLog' })}</h1>
@@ -42,7 +43,7 @@ const DetailPanel: FC<ILogDetail> = ({ runID, onClose, canReplay = false }) => {
               aria-label={t('runDetail.testWithParams', { ns: 'appLog' })}
               onClick={handleReplay}
             >
-              <span className="i-ri-play-large-line h-4 w-4 text-text-tertiary" />
+              <RiPlayLargeLine className="h-4 w-4 text-text-tertiary" />
             </button>
           </TooltipPlus>
         )}

web/app/components/app/workflow-log/filter.tsx

@@ -2,6 +2,7 @@
 import type { FC } from 'react'
 import type { QueryParam } from './index'
 import type { I18nKeysByPrefix } from '@/types/i18n'
+import { RiCalendarLine } from '@remixicon/react'
 import dayjs from 'dayjs'
 import quarterOfYear from 'dayjs/plugin/quarterOfYear'
 import * as React from 'react'
@@ -51,7 +52,7 @@ const Filter: FC<IFilterProps> = ({ queryParams, setQueryParams }: IFilterProps)
       <Chip
         className="min-w-[150px]"
         panelClassName="w-[270px]"
-        leftIcon={<span className="i-ri-calendar-line h-4 w-4 text-text-secondary" />}
+        leftIcon={<RiCalendarLine className="h-4 w-4 text-text-secondary" />}
         value={queryParams.period}
         onSelect={(item) => {
           setQueryParams({ ...queryParams, period: item.value })

web/app/components/app/workflow-log/list.tsx

@@ -2,6 +2,7 @@
 import type { FC } from 'react'
 import type { WorkflowAppLogDetail, WorkflowLogsResponse, WorkflowRunTriggeredFrom } from '@/models/log'
 import type { App } from '@/types/app'
+import { ArrowDownIcon } from '@heroicons/react/24/outline'
 import * as React from 'react'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -116,7 +117,9 @@ const WorkflowAppLogList: FC<ILogs> = ({ logs, appDetail, onRefresh }) => {
             <td className="whitespace-nowrap bg-background-section-burn py-1.5 pl-3">
               <div className="flex cursor-pointer items-center hover:text-text-secondary" onClick={handleSort}>
                 {t('table.header.startTime', { ns: 'appLog' })}
-                <span className={`i-heroicons-arrow-down-24-outline ${cn('ml-0.5 h-3 w-3 stroke-current stroke-2 transition-all', 'text-text-tertiary', sortOrder === 'asc' ? 'rotate-180' : '')}`} />
+                <ArrowDownIcon
+                  className={cn('ml-0.5 h-3 w-3 stroke-current stroke-2 transition-all', 'text-text-tertiary', sortOrder === 'asc' ? 'rotate-180' : '')}
+                />
               </div>
             </td>
             <td className="whitespace-nowrap bg-background-section-burn py-1.5 pl-3">{t('table.header.status', { ns: 'appLog' })}</td>

web/app/components/apps/app-card.tsx

@@ -6,6 +6,7 @@ import type { Tag } from '@/app/components/base/tag-management/constant'
 import type { CreateAppModalProps } from '@/app/components/explore/create-app-modal'
 import type { EnvironmentVariable } from '@/app/components/workflow/types'
 import type { App } from '@/types/app'
+import { RiBuildingLine, RiGlobalLine, RiLockLine, RiMoreFill, RiVerifiedBadgeLine } from '@remixicon/react'
 import dynamic from 'next/dynamic'
 import { useRouter } from 'next/navigation'
 import * as React from 'react'
@@ -380,22 +381,22 @@ const AppCard = ({ app, onRefresh }: AppCardProps) => {
           <div className="flex h-5 w-5 shrink-0 items-center justify-center">
             {app.access_mode === AccessMode.PUBLIC && (
               <Tooltip asChild={false} popupContent={t('accessItemsDescription.anyone', { ns: 'app' })}>
-                <span className="i-ri-global-line h-4 w-4 text-text-quaternary" />
+                <RiGlobalLine className="h-4 w-4 text-text-quaternary" />
               </Tooltip>
             )}
             {app.access_mode === AccessMode.SPECIFIC_GROUPS_MEMBERS && (
               <Tooltip asChild={false} popupContent={t('accessItemsDescription.specific', { ns: 'app' })}>
-                <span className="i-ri-lock-line h-4 w-4 text-text-quaternary" />
+                <RiLockLine className="h-4 w-4 text-text-quaternary" />
               </Tooltip>
             )}
             {app.access_mode === AccessMode.ORGANIZATION && (
               <Tooltip asChild={false} popupContent={t('accessItemsDescription.organization', { ns: 'app' })}>
-                <span className="i-ri-building-line h-4 w-4 text-text-quaternary" />
+                <RiBuildingLine className="h-4 w-4 text-text-quaternary" />
               </Tooltip>
             )}
             {app.access_mode === AccessMode.EXTERNAL_MEMBERS && (
               <Tooltip asChild={false} popupContent={t('accessItemsDescription.external', { ns: 'app' })}>
-                <span className="i-ri-verified-badge-line h-4 w-4 text-text-quaternary" />
+                <RiVerifiedBadgeLine className="h-4 w-4 text-text-quaternary" />
               </Tooltip>
             )}
           </div>
@@ -440,7 +441,7 @@ const AppCard = ({ app, onRefresh }: AppCardProps) => {
                     <div
                       className="flex h-8 w-8 cursor-pointer items-center justify-center rounded-md"
                     >
-                      <span className="i-ri-more-fill h-4 w-4 text-text-tertiary" />
+                      <RiMoreFill className="h-4 w-4 text-text-tertiary" />
                     </div>
                   )}
                   btnClassName={open =>

web/app/components/apps/footer.tsx

@@ -1,3 +1,4 @@
+import { RiDiscordFill, RiDiscussLine, RiGithubFill } from '@remixicon/react'
 import Link from 'next/link'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
@@ -32,13 +33,13 @@ const Footer = () => {
       <p className="system-sm-regular mt-1 text-text-tertiary">{t('communityIntro', { ns: 'app' })}</p>
       <div className="mt-3 flex items-center gap-2">
         <CustomLink href="https://github.com/langgenius/dify">
-          <span className="i-ri-github-fill h-5 w-5 text-text-tertiary" />
+          <RiGithubFill className="h-5 w-5 text-text-tertiary" />
         </CustomLink>
         <CustomLink href="https://discord.gg/FngNHpbcY7">
-          <span className="i-ri-discord-fill h-5 w-5 text-text-tertiary" />
+          <RiDiscordFill className="h-5 w-5 text-text-tertiary" />
         </CustomLink>
         <CustomLink href="https://forum.dify.ai">
-          <span className="i-ri-discuss-line h-5 w-5 text-text-tertiary" />
+          <RiDiscussLine className="h-5 w-5 text-text-tertiary" />
         </CustomLink>
       </div>
     </footer>

web/app/components/apps/list.tsx

@@ -1,7 +1,14 @@
 'use client'
 
 import type { FC } from 'react'
-
+import {
+  RiApps2Line,
+  RiDragDropLine,
+  RiExchange2Line,
+  RiFile4Line,
+  RiMessage3Line,
+  RiRobot3Line,
+} from '@remixicon/react'
 import { useDebounceFn } from 'ahooks'
 import dynamic from 'next/dynamic'
 import {
@@ -118,12 +125,12 @@ const List: FC<Props> = ({
 
   const anchorRef = useRef<HTMLDivElement>(null)
   const options = [
-    { value: 'all', text: t('types.all', { ns: 'app' }), icon: <span className="i-ri-apps-2-line mr-1 h-[14px] w-[14px]" /> },
-    { value: AppModeEnum.WORKFLOW, text: t('types.workflow', { ns: 'app' }), icon: <span className="i-ri-exchange-2-line mr-1 h-[14px] w-[14px]" /> },
-    { value: AppModeEnum.ADVANCED_CHAT, text: t('types.advanced', { ns: 'app' }), icon: <span className="i-ri-message-3-line mr-1 h-[14px] w-[14px]" /> },
-    { value: AppModeEnum.CHAT, text: t('types.chatbot', { ns: 'app' }), icon: <span className="i-ri-message-3-line mr-1 h-[14px] w-[14px]" /> },
-    { value: AppModeEnum.AGENT_CHAT, text: t('types.agent', { ns: 'app' }), icon: <span className="i-ri-robot-3-line mr-1 h-[14px] w-[14px]" /> },
-    { value: AppModeEnum.COMPLETION, text: t('types.completion', { ns: 'app' }), icon: <span className="i-ri-file-4-line mr-1 h-[14px] w-[14px]" /> },
+    { value: 'all', text: t('types.all', { ns: 'app' }), icon: <RiApps2Line className="mr-1 h-[14px] w-[14px]" /> },
+    { value: AppModeEnum.WORKFLOW, text: t('types.workflow', { ns: 'app' }), icon: <RiExchange2Line className="mr-1 h-[14px] w-[14px]" /> },
+    { value: AppModeEnum.ADVANCED_CHAT, text: t('types.advanced', { ns: 'app' }), icon: <RiMessage3Line className="mr-1 h-[14px] w-[14px]" /> },
+    { value: AppModeEnum.CHAT, text: t('types.chatbot', { ns: 'app' }), icon: <RiMessage3Line className="mr-1 h-[14px] w-[14px]" /> },
+    { value: AppModeEnum.AGENT_CHAT, text: t('types.agent', { ns: 'app' }), icon: <RiRobot3Line className="mr-1 h-[14px] w-[14px]" /> },
+    { value: AppModeEnum.COMPLETION, text: t('types.completion', { ns: 'app' }), icon: <RiFile4Line className="mr-1 h-[14px] w-[14px]" /> },
   ]
 
   useEffect(() => {
@@ -265,7 +272,7 @@ const List: FC<Props> = ({
             role="region"
             aria-label={t('newApp.dropDSLToCreateApp', { ns: 'app' })}
           >
-            <span className="i-ri-drag-drop-line h-4 w-4" />
+            <RiDragDropLine className="h-4 w-4" />
             <span className="system-xs-regular">{t('newApp.dropDSLToCreateApp', { ns: 'app' })}</span>
           </div>
         )}

web/app/components/base/action-button/index.stories.tsx

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
+import { RiAddLine, RiDeleteBinLine, RiEditLine, RiMore2Fill, RiSaveLine, RiShareLine } from '@remixicon/react'
 import ActionButton, { ActionButtonState } from '.'
 
 const meta = {
@@ -48,7 +49,7 @@ type Story = StoryObj<typeof meta>
 export const Default: Story = {
   args: {
     size: 'm',
-    children: <span className="i-ri-edit-line h-4 w-4" />,
+    children: <RiEditLine className="h-4 w-4" />,
   },
 }
 
@@ -66,7 +67,7 @@ export const IconWithText: Story = {
     size: 'm',
     children: (
       <>
-        <span className="i-ri-add-line mr-1 h-4 w-4" />
+        <RiAddLine className="mr-1 h-4 w-4" />
         Add Item
       </>
     ),
@@ -77,35 +78,35 @@ export const IconWithText: Story = {
 export const ExtraSmall: Story = {
   args: {
     size: 'xs',
-    children: <span className="i-ri-edit-line h-3 w-3" />,
+    children: <RiEditLine className="h-3 w-3" />,
   },
 }
 
 export const Small: Story = {
   args: {
     size: 'xs',
-    children: <span className="i-ri-edit-line h-3.5 w-3.5" />,
+    children: <RiEditLine className="h-3.5 w-3.5" />,
   },
 }
 
 export const Medium: Story = {
   args: {
     size: 'm',
-    children: <span className="i-ri-edit-line h-4 w-4" />,
+    children: <RiEditLine className="h-4 w-4" />,
   },
 }
 
 export const Large: Story = {
   args: {
     size: 'l',
-    children: <span className="i-ri-edit-line h-5 w-5" />,
+    children: <RiEditLine className="h-5 w-5" />,
   },
 }
 
 export const ExtraLarge: Story = {
   args: {
     size: 'xl',
-    children: <span className="i-ri-edit-line h-6 w-6" />,
+    children: <RiEditLine className="h-6 w-6" />,
   },
 }
 
@@ -114,7 +115,7 @@ export const ActiveState: Story = {
   args: {
     size: 'm',
     state: ActionButtonState.Active,
-    children: <span className="i-ri-edit-line h-4 w-4" />,
+    children: <RiEditLine className="h-4 w-4" />,
   },
 }
 
@@ -122,7 +123,7 @@ export const DisabledState: Story = {
   args: {
     size: 'm',
     state: ActionButtonState.Disabled,
-    children: <span className="i-ri-edit-line h-4 w-4" />,
+    children: <RiEditLine className="h-4 w-4" />,
   },
 }
 
@@ -130,7 +131,7 @@ export const DestructiveState: Story = {
   args: {
     size: 'm',
     state: ActionButtonState.Destructive,
-    children: <span className="i-ri-delete-bin-line h-4 w-4" />,
+    children: <RiDeleteBinLine className="h-4 w-4" />,
   },
 }
 
@@ -138,7 +139,7 @@ export const HoverState: Story = {
   args: {
     size: 'm',
     state: ActionButtonState.Hover,
-    children: <span className="i-ri-edit-line h-4 w-4" />,
+    children: <RiEditLine className="h-4 w-4" />,
   },
 }
 
@@ -147,17 +148,17 @@ export const ToolbarActions: Story = {
   render: () => (
     <div className="flex items-center gap-1 rounded-lg bg-background-section-burn p-2">
       <ActionButton size="m">
-        <span className="i-ri-edit-line h-4 w-4" />
+        <RiEditLine className="h-4 w-4" />
       </ActionButton>
       <ActionButton size="m">
-        <span className="i-ri-share-line h-4 w-4" />
+        <RiShareLine className="h-4 w-4" />
       </ActionButton>
       <ActionButton size="m">
-        <span className="i-ri-save-line h-4 w-4" />
+        <RiSaveLine className="h-4 w-4" />
       </ActionButton>
       <div className="mx-1 h-4 w-px bg-divider-regular" />
       <ActionButton size="m" state={ActionButtonState.Destructive}>
-        <span className="i-ri-delete-bin-line h-4 w-4" />
+        <RiDeleteBinLine className="h-4 w-4" />
       </ActionButton>
     </div>
   ),
@@ -168,10 +169,10 @@ export const InlineActions: Story = {
     <div className="flex items-center gap-2">
       <span className="text-text-secondary">Item name</span>
       <ActionButton size="xs">
-        <span className="i-ri-edit-line h-3.5 w-3.5" />
+        <RiEditLine className="h-3.5 w-3.5" />
       </ActionButton>
       <ActionButton size="xs">
-        <span className="i-ri-more-2-fill h-3.5 w-3.5" />
+        <RiMore2Fill className="h-3.5 w-3.5" />
       </ActionButton>
     </div>
   ),
@@ -182,31 +183,31 @@ export const SizeComparison: Story = {
     <div className="flex items-center gap-4">
       <div className="flex flex-col items-center gap-2">
         <ActionButton size="xs">
-          <span className="i-ri-edit-line h-3 w-3" />
+          <RiEditLine className="h-3 w-3" />
         </ActionButton>
         <span className="text-xs text-text-tertiary">XS</span>
       </div>
       <div className="flex flex-col items-center gap-2">
         <ActionButton size="xs">
-          <span className="i-ri-edit-line h-3.5 w-3.5" />
+          <RiEditLine className="h-3.5 w-3.5" />
         </ActionButton>
         <span className="text-xs text-text-tertiary">S</span>
       </div>
       <div className="flex flex-col items-center gap-2">
         <ActionButton size="m">
-          <span className="i-ri-edit-line h-4 w-4" />
+          <RiEditLine className="h-4 w-4" />
         </ActionButton>
         <span className="text-xs text-text-tertiary">M</span>
       </div>
       <div className="flex flex-col items-center gap-2">
         <ActionButton size="l">
-          <span className="i-ri-edit-line h-5 w-5" />
+          <RiEditLine className="h-5 w-5" />
         </ActionButton>
         <span className="text-xs text-text-tertiary">L</span>
       </div>
       <div className="flex flex-col items-center gap-2">
         <ActionButton size="xl">
-          <span className="i-ri-edit-line h-6 w-6" />
+          <RiEditLine className="h-6 w-6" />
         </ActionButton>
         <span className="text-xs text-text-tertiary">XL</span>
       </div>
@@ -219,31 +220,31 @@ export const StateComparison: Story = {
     <div className="flex items-center gap-4">
       <div className="flex flex-col items-center gap-2">
         <ActionButton size="m" state={ActionButtonState.Default}>
-          <span className="i-ri-edit-line h-4 w-4" />
+          <RiEditLine className="h-4 w-4" />
         </ActionButton>
         <span className="text-xs text-text-tertiary">Default</span>
       </div>
       <div className="flex flex-col items-center gap-2">
         <ActionButton size="m" state={ActionButtonState.Active}>
-          <span className="i-ri-edit-line h-4 w-4" />
+          <RiEditLine className="h-4 w-4" />
         </ActionButton>
         <span className="text-xs text-text-tertiary">Active</span>
       </div>
       <div className="flex flex-col items-center gap-2">
         <ActionButton size="m" state={ActionButtonState.Hover}>
-          <span className="i-ri-edit-line h-4 w-4" />
+          <RiEditLine className="h-4 w-4" />
         </ActionButton>
         <span className="text-xs text-text-tertiary">Hover</span>
       </div>
       <div className="flex flex-col items-center gap-2">
         <ActionButton size="m" state={ActionButtonState.Disabled}>
-          <span className="i-ri-edit-line h-4 w-4" />
+          <RiEditLine className="h-4 w-4" />
         </ActionButton>
         <span className="text-xs text-text-tertiary">Disabled</span>
       </div>
       <div className="flex flex-col items-center gap-2">
         <ActionButton size="m" state={ActionButtonState.Destructive}>
-          <span className="i-ri-delete-bin-line h-4 w-4" />
+          <RiDeleteBinLine className="h-4 w-4" />
         </ActionButton>
         <span className="text-xs text-text-tertiary">Destructive</span>
       </div>
@@ -256,6 +257,6 @@ export const Playground: Story = {
   args: {
     size: 'm',
     state: ActionButtonState.Default,
-    children: <span className="i-ri-edit-line h-4 w-4" />,
+    children: <RiEditLine className="h-4 w-4" />,
   },
 }

web/app/components/base/agent-log-modal/index.tsx

@@ -1,5 +1,6 @@
 import type { FC } from 'react'
 import type { IChatItem } from '@/app/components/base/chat/chat/type'
+import { RiCloseLine } from '@remixicon/react'
 import { useClickAway } from 'ahooks'
 import { useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -46,7 +47,7 @@ const AgentLogModal: FC<AgentLogModalProps> = ({
     >
       <h1 className="text-md shrink-0 px-4 py-1 font-semibold text-text-primary">{t('runDetail.workflowTitle', { ns: 'appLog' })}</h1>
       <span className="absolute right-3 top-4 z-20 cursor-pointer p-1" onClick={onCancel}>
-        <span className="i-ri-close-line h-4 w-4 text-text-tertiary" />
+        <RiCloseLine className="h-4 w-4 text-text-tertiary" />
       </span>
       <AgentLogDetail
         conversationID={currentLogItem.conversationId}

web/app/components/base/agent-log-modal/tool-call.tsx

@@ -1,7 +1,10 @@
 'use client'
 import type { FC } from 'react'
 import type { ToolCall } from '@/models/log'
-
+import {
+  RiCheckboxCircleLine,
+  RiErrorWarningLine,
+} from '@remixicon/react'
 import { useState } from 'react'
 import { ChevronRight } from '@/app/components/base/icons/src/vender/line/arrows'
 import BlockIcon from '@/app/components/workflow/block-icon'
@@ -77,10 +80,10 @@ const ToolCallItem: FC<Props> = ({ toolCall, isLLM = false, isFinal, tokens, obs
             )}
           </div>
           {toolCall.status === 'success' && (
-            <span className="i-ri-checkbox-circle-line ml-2 h-3.5 w-3.5 shrink-0 text-[#12B76A]" />
+            <RiCheckboxCircleLine className="ml-2 h-3.5 w-3.5 shrink-0 text-[#12B76A]" />
           )}
           {toolCall.status === 'error' && (
-            <span className="i-ri-error-warning-line ml-2 h-3.5 w-3.5 shrink-0 text-[#F04438]" />
+            <RiErrorWarningLine className="ml-2 h-3.5 w-3.5 shrink-0 text-[#F04438]" />
           )}
         </div>
         {!collapseState && (

web/app/components/base/alert.tsx

@@ -1,3 +1,7 @@
+import {
+  RiCloseLine,
+  RiInformation2Fill,
+} from '@remixicon/react'
 import { cva } from 'class-variance-authority'
 import {
   memo,
@@ -34,7 +38,7 @@ const Alert: React.FC<Props> = ({
         <div className={cn('pointer-events-none absolute inset-0 bg-gradient-to-r  opacity-[0.4]', bgVariants({ type }))}>
         </div>
         <div className="flex h-6 w-6 items-center justify-center">
-          <span className="i-ri-information-2-fill text-text-accent" />
+          <RiInformation2Fill className="text-text-accent" />
         </div>
         <div className="p-1">
           <div className="system-xs-regular text-text-secondary">
@@ -45,7 +49,7 @@ const Alert: React.FC<Props> = ({
           className="pointer-events-auto flex h-6 w-6 cursor-pointer items-center justify-center"
           onClick={onHide}
         >
-          <span className="i-ri-close-line h-4 w-4 text-text-tertiary" />
+          <RiCloseLine className="h-4 w-4 text-text-tertiary" />
         </div>
       </div>
     </div>

web/app/components/base/app-icon-picker/index.tsx

@@ -2,6 +2,7 @@ import type { FC } from 'react'
 import type { Area } from 'react-easy-crop'
 import type { OnImageInput } from './ImageInput'
 import type { AppIconType, ImageFile } from '@/types/app'
+import { RiImageCircleAiLine } from '@remixicon/react'
 import { noop } from 'es-toolkit/function'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -45,7 +46,7 @@ const AppIconPicker: FC<AppIconPickerProps> = ({
 
   const tabs = [
     { key: 'emoji', label: t('iconPicker.emoji', { ns: 'app' }), icon: <span className="text-lg">🤖</span> },
-    { key: 'image', label: t('iconPicker.image', { ns: 'app' }), icon: <span className="i-ri-image-circle-ai-line size-4" /> },
+    { key: 'image', label: t('iconPicker.image', { ns: 'app' }), icon: <RiImageCircleAiLine className="size-4" /> },
   ]
   const [activeTab, setActiveTab] = useState<AppIconType>('emoji')
 

web/app/components/base/app-icon/index.tsx

@@ -2,6 +2,7 @@
 import type { FC } from 'react'
 import type { AppIconType } from '@/types/app'
 import data from '@emoji-mart/data'
+import { RiEditLine } from '@remixicon/react'
 import { useHover } from 'ahooks'
 import { cva } from 'class-variance-authority'
 import { init } from 'emoji-mart'
@@ -122,7 +123,7 @@ const AppIcon: FC<AppIconProps> = ({
       {
         showEditIcon && isHovering && (
           <div className={EditIconWrapperVariants({ size, rounded })}>
-            <span className={`i-ri-edit-line ${EditIconVariants({ size })}`} />
+            <RiEditLine className={EditIconVariants({ size })} />
           </div>
         )
       }

web/app/components/base/audio-gallery/AudioPlayer.tsx

@@ -1,3 +1,7 @@
+import {
+  RiPauseCircleFill,
+  RiPlayLargeFill,
+} from '@remixicon/react'
 import { t } from 'i18next'
 import * as React from 'react'
 import { useCallback, useEffect, useRef, useState } from 'react'
@@ -298,10 +302,10 @@ const AudioPlayer: React.FC<AudioPlayerProps> = ({ src, srcs }) => {
       <button type="button" className="inline-flex shrink-0 cursor-pointer items-center justify-center border-none text-text-accent transition-all hover:text-text-accent-secondary disabled:text-components-button-primary-bg-disabled" onClick={togglePlay} disabled={!isAudioAvailable}>
         {isPlaying
           ? (
-              <span className="i-ri-pause-circle-fill h-5 w-5" />
+              <RiPauseCircleFill className="h-5 w-5" />
             )
           : (
-              <span className="i-ri-play-large-fill h-5 w-5" />
+              <RiPlayLargeFill className="h-5 w-5" />
             )}
       </button>
       <div className={cn(isAudioAvailable && 'grow')} hidden={!isAudioAvailable}>

web/app/components/base/button/add-button.tsx

@@ -1,5 +1,6 @@
 'use client'
 import type { FC } from 'react'
+import { RiAddLine } from '@remixicon/react'
 import * as React from 'react'
 import { cn } from '@/utils/classnames'
 
@@ -14,7 +15,7 @@ const AddButton: FC<Props> = ({
 }) => {
   return (
     <div className={cn(className, 'cursor-pointer select-none rounded-md p-1 hover:bg-state-base-hover')} onClick={onClick}>
-      <span className="i-ri-add-line h-4 w-4 text-text-tertiary" />
+      <RiAddLine className="h-4 w-4 text-text-tertiary" />
     </div>
   )
 }

web/app/components/base/button/index.stories.tsx

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
 
+import { RocketLaunchIcon } from '@heroicons/react/20/solid'
 import { Button } from '.'
 
 const meta = {
@@ -99,7 +100,7 @@ export const WithIcon: Story = {
     variant: 'primary',
     children: (
       <>
-        <span className="i-heroicons-rocket-launch-20-solid mr-1.5 h-4 w-4 stroke-[1.8px]" />
+        <RocketLaunchIcon className="mr-1.5 h-4 w-4 stroke-[1.8px]" />
         Launch
       </>
     ),

web/app/components/base/button/sync-button.tsx

@@ -1,5 +1,6 @@
 'use client'
 import type { FC } from 'react'
+import { RiRefreshLine } from '@remixicon/react'
 import * as React from 'react'
 import TooltipPlus from '@/app/components/base/tooltip'
 import { cn } from '@/utils/classnames'
@@ -18,7 +19,7 @@ const SyncButton: FC<Props> = ({
   return (
     <TooltipPlus popupContent={popupContent}>
       <div className={cn(className, 'cursor-pointer select-none rounded-md p-1 hover:bg-state-base-hover')} onClick={onClick}>
-        <span className="i-ri-refresh-line h-4 w-4 text-text-tertiary" />
+        <RiRefreshLine className="h-4 w-4 text-text-tertiary" />
       </div>
     </TooltipPlus>
   )

web/app/components/base/chat/chat-with-history/header-in-mobile.tsx

@@ -1,5 +1,7 @@
 import type { ConversationItem } from '@/models/share'
-
+import {
+  RiMenuLine,
+} from '@remixicon/react'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import ActionButton from '@/app/components/base/action-button'
@@ -65,7 +67,7 @@ const HeaderInMobile = () => {
     <>
       <div className="flex shrink-0 items-center gap-1 bg-mask-top2bottom-gray-50-to-transparent px-2 py-3">
         <ActionButton size="l" className="shrink-0" onClick={() => setShowSidebar(true)}>
-          <span className="i-ri-menu-line h-[18px] w-[18px]" />
+          <RiMenuLine className="h-[18px] w-[18px]" />
         </ActionButton>
         <div className="flex grow items-center justify-center">
           {!currentConversationId && (