feat: new icons (#5412)

2025-12-09 10:56:52 +08:00 · 2024-06-20 11:05:08 +08:00
parent 0105129fa8
commit 2328ed8ffa
338 changed files with 880 additions and 3669 deletions
--- a/web/app/components/header/account-about/index.tsx
+++ b/web/app/components/header/account-about/index.tsx
@@ -3,9 +3,9 @@ import { useTranslation } from 'react-i18next'
 import classNames from 'classnames'
 import Link from 'next/link'
 import dayjs from 'dayjs'
+import { RiCloseLine } from '@remixicon/react'
 import s from './index.module.css'
 import Modal from '@/app/components/base/modal'
-import { XClose } from '@/app/components/base/icons/src/vender/line/general'
 import type { LangGeniusVersionResponse } from '@/models/common'
 import { IS_CE_EDITION } from '@/config'
 import LogoSite from '@/app/components/base/logo/logo-site'
@@ -33,7 +33,7 @@ export default function AccountAbout({
    >
      <div className='relative pt-4'>
        <div className='absolute -top-2 -right-4 flex justify-center items-center w-8 h-8 cursor-pointer' onClick={onCancel}>
-          <XClose className='w-4 h-4 text-gray-500' />
+          <RiCloseLine className='w-4 h-4 text-gray-500' />
        </div>
        <div>
          <LogoSite className='mx-auto mb-2' />
--- a/web/app/components/header/account-dropdown/index.tsx
+++ b/web/app/components/header/account-dropdown/index.tsx
@@ -4,6 +4,7 @@ import { Fragment, useState } from 'react'
 import { useRouter } from 'next/navigation'
 import { useContext } from 'use-context-selector'
 import classNames from 'classnames'
+import { RiArrowDownSLine } from '@remixicon/react'
 import Link from 'next/link'
 import { Menu, Transition } from '@headlessui/react'
 import Indicator from '../indicator'
@@ -13,7 +14,7 @@ import I18n from '@/context/i18n'
 import Avatar from '@/app/components/base/avatar'
 import { logout } from '@/service/common'
 import { useAppContext } from '@/context/app-context'
-import { ArrowUpRight, ChevronDown } from '@/app/components/base/icons/src/vender/line/arrows'
+import { ArrowUpRight } from '@/app/components/base/icons/src/vender/line/arrows'
 import { LogOut01 } from '@/app/components/base/icons/src/vender/line/general'
 import { useModalContext } from '@/context/modal-context'
 import { LanguagesSupported } from '@/i18n/language'
@@ -65,7 +66,7 @@ export default function AppSelector({ isMobile }: IAppSelecotr) {
                  <Avatar name={userProfile.name} className='sm:mr-2 mr-0' size={32} />
                  {!isMobile && <>
                    {userProfile.name}
-                    <ChevronDown className="w-3 h-3 ml-1 text-gray-700" />
+                    <RiArrowDownSLine className="w-3 h-3 ml-1 text-gray-700" />
                  </>}
                </Menu.Button>
              </div>
--- a/web/app/components/header/account-setting/account-page/index.tsx
+++ b/web/app/components/header/account-setting/account-page/index.tsx
@@ -2,6 +2,10 @@
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import classNames from 'classnames'
+import {
+  RiCloseLine,
+  RiErrorWarningFill,
+} from '@remixicon/react'
 import { useContext } from 'use-context-selector'
 import Collapse from '../collapse'
 import type { IItem } from '../collapse'
@@ -14,8 +18,6 @@ import { ToastContext } from '@/app/components/base/toast'
 import AppIcon from '@/app/components/base/app-icon'
 import Avatar from '@/app/components/base/avatar'
 import { IS_CE_EDITION } from '@/config'
-import { XClose } from '@/app/components/base/icons/src/vender/line/general'
-import { AlertCircle } from '@/app/components/base/icons/src/vender/solid/alertsAndFeedback'

 const titleClassName = `
  text-sm font-medium text-gray-900
@@ -251,10 +253,10 @@ export default function AccountPage() {
          onClose={() => { }}
        >
          <div className='absolute right-4 top-4 p-2 cursor-pointer' onClick={() => setShowDeleteAccountModal(false)}>
-            <XClose className='w-4 h-4 text-gray-500' />
+            <RiCloseLine className='w-4 h-4 text-gray-500' />
          </div>
          <div className='w-12 h-12 p-3 bg-white rounded-xl border-[0.5px] border-gray-100 shadow-xl'>
-            <AlertCircle className='w-6 h-6 text-[#D92D20]' />
+            <RiErrorWarningFill className='w-6 h-6 text-[#D92D20]' />
          </div>
          <div className='relative mt-3 text-xl font-semibold leading-[30px] text-gray-900'>{t('common.account.delete')}</div>
          <div className='my-1 text-[#D92D20] text-sm leading-5'>
--- a/web/app/components/header/account-setting/api-based-extension-page/index.tsx
+++ b/web/app/components/header/account-setting/api-based-extension-page/index.tsx
@@ -1,9 +1,11 @@
 import { useTranslation } from 'react-i18next'
 import useSWR from 'swr'
+import {
+  RiAddLine,
+} from '@remixicon/react'
 import Item from './item'
 import Empty from './empty'
 import { useModalContext } from '@/context/modal-context'
-import { Plus } from '@/app/components/base/icons/src/vender/line/general'
 import { fetchApiBasedExtensionList } from '@/service/common'

 const ApiBasedExtensionPage = () => {
@@ -43,7 +45,7 @@ const ApiBasedExtensionPage = () => {
        className='flex items-center justify-center px-3 h-8 text-[13px] font-medium text-gray-700 rounded-lg bg-gray-50 cursor-pointer'
        onClick={handleOpenApiBasedExtensionModal}
      >
-        <Plus className='mr-2 w-4 h-4' />
+        <RiAddLine className='mr-2 w-4 h-4' />
        {t('common.apiBasedExtension.add')}
      </div>
    </div>
--- a/web/app/components/header/account-setting/api-based-extension-page/item.tsx
+++ b/web/app/components/header/account-setting/api-based-extension-page/item.tsx
@@ -1,7 +1,10 @@
 import type { FC } from 'react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Edit02, Trash03 } from '@/app/components/base/icons/src/vender/line/general'
+import {
+  RiDeleteBinLine,
+} from '@remixicon/react'
+import { Edit02 } from '@/app/components/base/icons/src/vender/line/general'
 import type { ApiBasedExtension } from '@/models/common'
 import { useModalContext } from '@/context/modal-context'
 import { deleteApiBasedExtension } from '@/service/common'
@@ -50,7 +53,7 @@ const Item: FC<ItemProps> = ({
          className='flex items-center justify-center w-7 h-7 bg-white text-gray-700 rounded-md border-[0.5px] border-gray-200 shadow-xs cursor-pointer'
          onClick={() => setShowDeleteConfirm(true)}
        >
-          <Trash03 className='w-4 h-4' />
+          <RiDeleteBinLine className='w-4 h-4' />
        </div>
      </div>
      {
--- a/web/app/components/header/account-setting/api-based-extension-page/selector.tsx
+++ b/web/app/components/header/account-setting/api-based-extension-page/selector.tsx
@@ -2,6 +2,10 @@ import type { FC } from 'react'
 import { useState } from 'react'
 import useSWR from 'swr'
 import { useTranslation } from 'react-i18next'
+import {
+  RiAddLine,
+  RiArrowDownSLine,
+} from '@remixicon/react'
 import {
  PortalToFollowElem,
  PortalToFollowElemContent,
@@ -9,9 +13,7 @@ import {
 } from '@/app/components/base/portal-to-follow-elem'
 import {
  ArrowUpRight,
-  ChevronDown,
 } from '@/app/components/base/icons/src/vender/line/arrows'
-import { Plus } from '@/app/components/base/icons/src/vender/line/general'
 import { useModalContext } from '@/context/modal-context'
 import { fetchApiBasedExtensionList } from '@/service/common'

@@ -58,14 +60,14 @@ const ApiBasedExtensionSelector: FC<ApiBasedExtensionSelectorProps> = ({
                  <div className='mr-1.5 w-[270px] text-xs text-gray-400 truncate text-right'>
                    {currentItem.api_endpoint}
                  </div>
-                  <ChevronDown className={`w-4 h-4 text-gray-700 ${!open && 'opacity-60'}`} />
+                  <RiArrowDownSLine className={`w-4 h-4 text-gray-700 ${!open && 'opacity-60'}`} />
                </div>
              </div>
            )
            : (
              <div className='flex items-center justify-between pl-3 pr-2.5 h-9 bg-gray-100 rounded-lg text-sm text-gray-400 cursor-pointer'>
                {t('common.apiBasedExtension.selector.placeholder')}
-                <ChevronDown className={`w-4 h-4 text-gray-700 ${!open && 'opacity-60'}`} />
+                <RiArrowDownSLine className={`w-4 h-4 text-gray-700 ${!open && 'opacity-60'}`} />
              </div>
            )
        }
@@ -106,7 +108,7 @@ const ApiBasedExtensionSelector: FC<ApiBasedExtensionSelectorProps> = ({
              className='flex items-center px-3 h-8 text-sm text-primary-600 cursor-pointer'
              onClick={() => setShowApiBasedExtensionModal({ payload: {}, onSaveCallback: () => mutate() })}
            >
-              <Plus className='mr-2 w-4 h-4' />
+              <RiAddLine className='mr-2 w-4 h-4' />
              {t('common.operation.add')}
            </div>
          </div>
--- a/web/app/components/header/account-setting/data-source-page/data-source-notion/operate/index.tsx
+++ b/web/app/components/header/account-setting/data-source-page/data-source-notion/operate/index.tsx
@@ -2,13 +2,15 @@
 import { useTranslation } from 'react-i18next'
 import { Fragment } from 'react'
 import { useSWRConfig } from 'swr'
-import { EllipsisHorizontalIcon } from '@heroicons/react/24/solid'
+import {
+  RiDeleteBinLine,
+  RiLoopLeftLine,
+  RiMoreFill,
+  RiStickyNoteAddLine,
+} from '@remixicon/react'
 import { Menu, Transition } from '@headlessui/react'
 import { syncDataSourceNotion, updateDataSourceNotionAction } from '@/service/common'
 import Toast from '@/app/components/base/toast'
-import { FilePlus02 } from '@/app/components/base/icons/src/vender/line/files'
-import { RefreshCw05 } from '@/app/components/base/icons/src/vender/line/arrows'
-import { Trash03 } from '@/app/components/base/icons/src/vender/line/general'

 type OperateProps = {
  payload: {
@@ -53,7 +55,7 @@ export default function Operate({
        ({ open }) => (
          <>
            <Menu.Button className={`flex items-center justify-center w-8 h-8 rounded-lg hover:bg-gray-100 ${open && 'bg-gray-100'}`}>
-              <EllipsisHorizontalIcon className='w-4 h-4' />
+              <RiMoreFill className='w-4 h-4' />
            </Menu.Button>
            <Transition
              as={Fragment}
@@ -77,7 +79,7 @@ export default function Operate({
                      className={itemClassName}
                      onClick={onAuthAgain}
                    >
-                      <FilePlus02 className={itemIconClassName} />
+                      <RiStickyNoteAddLine className={itemIconClassName} />
                      <div>
                        <div className='leading-5'>{t('common.dataSource.notion.changeAuthorizedPages')}</div>
                        <div className='leading-5 text-xs text-gray-500'>
@@ -88,7 +90,7 @@ export default function Operate({
                  </Menu.Item>
                  <Menu.Item>
                    <div className={itemClassName} onClick={handleSync}>
-                      <RefreshCw05 className={itemIconClassName} />
+                      <RiLoopLeftLine className={itemIconClassName} />
                      <div className='leading-5'>{t('common.dataSource.notion.sync')}</div>
                    </div>
                  </Menu.Item>
@@ -96,7 +98,7 @@ export default function Operate({
                <Menu.Item>
                  <div className='p-1'>
                    <div className={itemClassName} onClick={handleRemove}>
-                      <Trash03 className={itemIconClassName} />
+                      <RiDeleteBinLine className={itemIconClassName} />
                      <div className='leading-5'>{t('common.dataSource.notion.remove')}</div>
                    </div>
                  </div>
--- a/web/app/components/header/account-setting/data-source-page/panel/config-item.tsx
+++ b/web/app/components/header/account-setting/data-source-page/panel/config-item.tsx
@@ -3,11 +3,13 @@ import type { FC } from 'react'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
 import cn from 'classnames'
+import {
+  RiDeleteBinLine,
+} from '@remixicon/react'
 import Indicator from '../../../indicator'
 import Operate from '../data-source-notion/operate'
 import { DataSourceType } from './types'
 import s from './style.module.css'
-import { Trash03 } from '@/app/components/base/icons/src/vender/line/general'

 export type ConfigItemType = {
  id: string
@@ -69,7 +71,7 @@ const ConfigItem: FC<Props> = ({
      {
        isWebsite && !readOnly && (
          <div className='p-2 text-gray-500 cursor-pointer rounded-md hover:bg-black/5' onClick={onRemove} >
-            <Trash03 className='w-4 h-4 ' />
+            <RiDeleteBinLine className='w-4 h-4 ' />
          </div>
        )
      }
--- a/web/app/components/header/account-setting/index.tsx
+++ b/web/app/components/header/account-setting/index.tsx
@@ -2,8 +2,26 @@
 import { useTranslation } from 'react-i18next'
 import { useEffect, useRef, useState } from 'react'
 import cn from 'classnames'
-import { GoldCoin } from '../../base/icons/src/vender/solid/FinanceAndECommerce'
-import { GoldCoin as GoldCoinOutLine } from '../../base/icons/src/vender/line/financeAndECommerce'
+import {
+  RiAccountCircleFill,
+  RiAccountCircleLine,
+  RiApps2AddFill,
+  RiApps2AddLine,
+  RiBox3Fill,
+  RiBox3Line,
+  RiCloseLine,
+  RiColorFilterFill,
+  RiColorFilterLine,
+  RiDatabase2Fill,
+  RiDatabase2Line,
+  RiGroup2Fill,
+  RiGroup2Line,
+  RiMoneyDollarCircleFill,
+  RiMoneyDollarCircleLine,
+  RiPuzzle2Fill,
+  RiPuzzle2Line,
+  RiTranslate2,
+} from '@remixicon/react'
 import AccountPage from './account-page'
 import MembersPage from './members-page'
 import IntegrationsPage from './Integrations-page'
@@ -15,18 +33,6 @@ import s from './index.module.css'
 import BillingPage from '@/app/components/billing/billing-page'
 import CustomPage from '@/app/components/custom/custom-page'
 import Modal from '@/app/components/base/modal'
-import {
-  Database03,
-  Webhooks,
-} from '@/app/components/base/icons/src/vender/line/development'
-import { Database03 as Database03Solid } from '@/app/components/base/icons/src/vender/solid/development'
-import { User01, Users01 } from '@/app/components/base/icons/src/vender/line/users'
-import { User01 as User01Solid, Users01 as Users01Solid } from '@/app/components/base/icons/src/vender/solid/users'
-import { Globe01 } from '@/app/components/base/icons/src/vender/line/mapsAndTravel'
-import { AtSign, XClose } from '@/app/components/base/icons/src/vender/line/general'
-import { CubeOutline } from '@/app/components/base/icons/src/vender/line/shapes'
-import { Colors } from '@/app/components/base/icons/src/vender/line/editor'
-import { Colors as ColorsSolid } from '@/app/components/base/icons/src/vender/solid/editor'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 import { useProviderContext } from '@/context/provider-context'

@@ -64,40 +70,40 @@ export default function AccountSetting({
      {
        key: 'provider',
        name: t('common.settings.provider'),
-        icon: <CubeOutline className={iconClassName} />,
-        activeIcon: <CubeOutline className={iconClassName} />,
+        icon: <RiBox3Line className={iconClassName} />,
+        activeIcon: <RiBox3Fill className={iconClassName} />,
      },
      {
        key: 'members',
        name: t('common.settings.members'),
-        icon: <Users01 className={iconClassName} />,
-        activeIcon: <Users01Solid className={iconClassName} />,
+        icon: <RiGroup2Line className={iconClassName} />,
+        activeIcon: <RiGroup2Fill className={iconClassName} />,
      },
      {
        // Use key false to hide this item
        key: enableBilling ? 'billing' : false,
        name: t('common.settings.billing'),
        description: t('billing.plansCommon.receiptInfo'),
-        icon: <GoldCoinOutLine className={iconClassName} />,
-        activeIcon: <GoldCoin className={iconClassName} />,
+        icon: <RiMoneyDollarCircleLine className={iconClassName} />,
+        activeIcon: <RiMoneyDollarCircleFill className={iconClassName} />,
      },
      {
        key: 'data-source',
        name: t('common.settings.dataSource'),
-        icon: <Database03 className={iconClassName} />,
-        activeIcon: <Database03Solid className={iconClassName} />,
+        icon: <RiDatabase2Line className={iconClassName} />,
+        activeIcon: <RiDatabase2Fill className={iconClassName} />,
      },
      {
        key: 'api-based-extension',
        name: t('common.settings.apiBasedExtension'),
-        icon: <Webhooks className={iconClassName} />,
-        activeIcon: <Webhooks className={iconClassName} />,
+        icon: <RiPuzzle2Line className={iconClassName} />,
+        activeIcon: <RiPuzzle2Fill className={iconClassName} />,
      },
      {
        key: (enableReplaceWebAppLogo || enableBilling) ? 'custom' : false,
        name: t('custom.custom'),
-        icon: <Colors className={iconClassName} />,
-        activeIcon: <ColorsSolid className={iconClassName} />,
+        icon: <RiColorFilterLine className={iconClassName} />,
+        activeIcon: <RiColorFilterFill className={iconClassName} />,
      },
    ].filter(item => !!item.key) as GroupItem[]
  })()
@@ -118,20 +124,20 @@ export default function AccountSetting({
        {
          key: 'account',
          name: t('common.settings.account'),
-          icon: <User01 className={iconClassName} />,
-          activeIcon: <User01Solid className={iconClassName} />,
+          icon: <RiAccountCircleLine className={iconClassName} />,
+          activeIcon: <RiAccountCircleFill className={iconClassName} />,
        },
        {
          key: 'integrations',
          name: t('common.settings.integrations'),
-          icon: <AtSign className={iconClassName} />,
-          activeIcon: <AtSign className={iconClassName} />,
+          icon: <RiApps2AddLine className={iconClassName} />,
+          activeIcon: <RiApps2AddFill className={iconClassName} />,
        },
        {
          key: 'language',
          name: t('common.settings.language'),
-          icon: <Globe01 className={iconClassName} />,
-          activeIcon: <Globe01 className={iconClassName} />,
+          icon: <RiTranslate2 className={iconClassName} />,
+          activeIcon: <RiTranslate2 className={iconClassName} />,
        },
      ],
    },
@@ -200,7 +206,7 @@ export default function AccountSetting({
            }
            <div className='grow flex justify-end'>
              <div className='flex items-center justify-center -mr-4 w-6 h-6 cursor-pointer' onClick={onCancel}>
-                <XClose className='w-4 h-4 text-gray-400' />
+                <RiCloseLine className='w-4 h-4 text-gray-400' />
              </div>
            </div>
          </div>
--- a/web/app/components/header/account-setting/key-validator/ValidateStatus.tsx
+++ b/web/app/components/header/account-setting/key-validator/ValidateStatus.tsx
@@ -1,9 +1,11 @@
 import { useTranslation } from 'react-i18next'
-import { AlertCircle } from '@/app/components/base/icons/src/vender/solid/alertsAndFeedback'
+import {
+  RiErrorWarningFill,
+} from '@remixicon/react'
 import { CheckCircle } from '@/app/components/base/icons/src/vender/solid/general'

 export const ValidatedErrorIcon = () => {
-  return <AlertCircle className='w-4 h-4 text-[#D92D20]' />
+  return <RiErrorWarningFill className='w-4 h-4 text-[#D92D20]' />
 }

 export const ValidatedSuccessIcon = () => {
--- a/web/app/components/header/account-setting/members-page/index.tsx
+++ b/web/app/components/header/account-setting/members-page/index.tsx
@@ -5,7 +5,7 @@ import dayjs from 'dayjs'
 import 'dayjs/locale/zh-cn'
 import relativeTime from 'dayjs/plugin/relativeTime'
 import { useContext } from 'use-context-selector'
-import { UserPlusIcon } from '@heroicons/react/24/outline'
+import { RiUserAddLine } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import InviteModal from './invite-modal'
 import InvitedModal from './invited-modal'
@@ -80,7 +80,7 @@ const MembersPage = () => {
            text-[13px] font-medium text-primary-600 bg-white
            shadow-xs rounded-lg ${(isCurrentWorkspaceManager && !isMemberFull) ? 'cursor-pointer' : 'grayscale opacity-50 cursor-default'}`
          } onClick={() => (isCurrentWorkspaceManager && !isMemberFull) && setInviteModalVisible(true)}>
-            <UserPlusIcon className='w-4 h-4 mr-2 ' />
+            <RiUserAddLine className='w-4 h-4 mr-2 ' />
            {t('common.members.invite')}
          </div>
        </div>
--- a/web/app/components/header/account-setting/model-provider-page/model-modal/Form.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-modal/Form.tsx
@@ -1,6 +1,9 @@
 import { useState } from 'react'
 import type { FC } from 'react'
 import cn from 'classnames'
+import {
+  RiQuestionLine,
+} from '@remixicon/react'
 import { ValidatingTip } from '../../key-validator/ValidateStatus'
 import type {
  CredentialFormSchema,
@@ -16,7 +19,6 @@ import { useLanguage } from '../hooks'
 import Input from './Input'
 import { SimpleSelect } from '@/app/components/base/select'
 import Tooltip from '@/app/components/base/tooltip-plus'
-import { HelpCircle } from '@/app/components/base/icons/src/vender/line/general'
 import Radio from '@/app/components/base/radio'
 type FormProps = {
  className?: string
@@ -78,7 +80,7 @@ const Form: FC<FormProps> = ({
            {tooltip[language] || tooltip.en_US}
          </div>
        } >
-          <HelpCircle className='w-3 h-3  text-gray-500' />
+          <RiQuestionLine className='w-3 h-3  text-gray-500' />
        </Tooltip>
      </span>))
    if (formSchema.type === FormTypeEnum.textInput || formSchema.type === FormTypeEnum.secretInput || formSchema.type === FormTypeEnum.textNumber) {
--- a/web/app/components/header/account-setting/model-provider-page/model-modal/index.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-modal/index.tsx
@@ -7,6 +7,9 @@ import {
  useState,
 } from 'react'
 import { useTranslation } from 'react-i18next'
+import {
+  RiErrorWarningFill,
+} from '@remixicon/react'
 import type {
  CredentialFormSchema,
  CredentialFormSchemaRadio,
@@ -40,7 +43,6 @@ import Form from './Form'
 import Button from '@/app/components/base/button'
 import { Lock01 } from '@/app/components/base/icons/src/vender/solid/security'
 import { LinkExternal02 } from '@/app/components/base/icons/src/vender/line/general'
-import { AlertCircle } from '@/app/components/base/icons/src/vender/solid/alertsAndFeedback'
 import {
  PortalToFollowElem,
  PortalToFollowElemContent,
@@ -358,7 +360,7 @@ const ModelModal: FC<ModelModalProps> = ({
                (validatedStatusState.status === ValidatedStatus.Error && validatedStatusState.message)
                  ? (
                    <div className='flex px-[10px] py-3 bg-[#FEF3F2] text-xs text-[#D92D20]'>
-                      <AlertCircle className='mt-[1px] mr-2 w-[14px] h-[14px]' />
+                      <RiErrorWarningFill className='mt-[1px] mr-2 w-[14px] h-[14px]' />
                      {validatedStatusState.message}
                    </div>
                  )
--- a/web/app/components/header/account-setting/model-provider-page/model-modal/model-load-balancing-entry-modal.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-modal/model-load-balancing-entry-modal.tsx
@@ -7,6 +7,9 @@ import {
  useState,
 } from 'react'
 import { useTranslation } from 'react-i18next'
+import {
+  RiErrorWarningFill,
+} from '@remixicon/react'
 import type {
  CredentialFormSchema,
  CredentialFormSchemaRadio,
@@ -32,7 +35,6 @@ import Form from './Form'
 import Button from '@/app/components/base/button'
 import { Lock01 } from '@/app/components/base/icons/src/vender/solid/security'
 import { LinkExternal02 } from '@/app/components/base/icons/src/vender/line/general'
-import { AlertCircle } from '@/app/components/base/icons/src/vender/solid/alertsAndFeedback'
 import {
  PortalToFollowElem,
  PortalToFollowElemContent,
@@ -303,7 +305,7 @@ const ModelLoadBalancingEntryModal: FC<ModelModalProps> = ({
                (validatedStatusState.status === ValidatedStatus.Error && validatedStatusState.message)
                  ? (
                    <div className='flex px-[10px] py-3 bg-[#FEF3F2] text-xs text-[#D92D20]'>
-                      <AlertCircle className='mt-[1px] mr-2 w-[14px] h-[14px]' />
+                      <RiErrorWarningFill className='mt-[1px] mr-2 w-[14px] h-[14px]' />
                      {validatedStatusState.message}
                    </div>
                  )
--- a/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/parameter-item.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/parameter-item.tsx
@@ -1,10 +1,12 @@
 import type { FC } from 'react'
 import { useEffect, useRef, useState } from 'react'
 import cn from 'classnames'
+import {
+  RiQuestionLine,
+} from '@remixicon/react'
 import type { ModelParameterRule } from '../declarations'
 import { useLanguage } from '../hooks'
 import { isNullOrUndefined } from '../utils'
-import { HelpCircle } from '@/app/components/base/icons/src/vender/line/general'
 import Switch from '@/app/components/base/switch'
 import Tooltip from '@/app/components/base/tooltip'
 import Slider from '@/app/components/base/slider'
@@ -234,7 +236,7 @@ const ParameterItem: FC<ParameterItemProps> = ({
                  <div className='w-[200px] whitespace-pre-wrap'>{parameterRule.help[language] || parameterRule.help.en_US}</div>
                )}
              >
-                <HelpCircle className='mr-1.5 w-3.5 h-3.5 text-gray-400' />
+                <RiQuestionLine className='mr-1.5 w-3.5 h-3.5 text-gray-400' />
              </Tooltip>
            )
          }
--- a/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/presets-parameter.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/presets-parameter.tsx
@@ -1,9 +1,9 @@
 import type { FC } from 'react'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
+import { RiArrowDownSLine } from '@remixicon/react'
 import Dropdown from '@/app/components/base/dropdown'
 import { SlidersH } from '@/app/components/base/icons/src/vender/line/mediaAndDevices'
-import { ChevronDown } from '@/app/components/base/icons/src/vender/line/arrows'
 import { Brush01 } from '@/app/components/base/icons/src/vender/solid/editor'
 import { Scales02 } from '@/app/components/base/icons/src/vender/solid/FinanceAndECommerce'
 import { Target04 } from '@/app/components/base/icons/src/vender/solid/general'
@@ -27,7 +27,7 @@ const PresetsParameter: FC<PresetsParameterProps> = ({
      >
        <SlidersH className='mr-[5px] w-3.5 h-3.5 text-gray-500' />
        {t('common.modelProvider.loadPresets')}
-        <ChevronDown className='ml-0.5 w-3.5 h-3.5 text-gray-500' />
+        <RiArrowDownSLine className='ml-0.5 w-3.5 h-3.5 text-gray-500' />
      </div>
    )
  }, [])
--- a/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/trigger.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/trigger.tsx
@@ -1,6 +1,7 @@
 import type { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 import cn from 'classnames'
+import { RiArrowDownSLine } from '@remixicon/react'
 import type {
  Model,
  ModelItem,
@@ -14,7 +15,6 @@ import { useProviderContext } from '@/context/provider-context'
 import { SlidersH } from '@/app/components/base/icons/src/vender/line/mediaAndDevices'
 import { AlertTriangle } from '@/app/components/base/icons/src/vender/line/alertsAndFeedback'
 import TooltipPlus from '@/app/components/base/tooltip-plus'
-import { ChevronDown } from '@/app/components/base/icons/src/vender/line/arrows'

 export type TriggerProps = {
  open?: boolean
@@ -106,7 +106,7 @@ const Trigger: FC<TriggerProps> = ({
            <SlidersH className={cn(!isInWorkflow ? 'text-indigo-600' : 'text-gray-500', 'shrink-0 w-4 h-4')} />
          )
      }
-      {isInWorkflow && (<ChevronDown className='absolute top-[9px] right-2 w-3.5 h-3.5 text-gray-500' />)}
+      {isInWorkflow && (<RiArrowDownSLine className='absolute top-[9px] right-2 w-3.5 h-3.5 text-gray-500' />)}
    </div>
  )
 }
--- a/web/app/components/header/account-setting/model-provider-page/model-selector/empty-trigger.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-selector/empty-trigger.tsx
@@ -1,5 +1,5 @@
 import type { FC } from 'react'
-import { ChevronDown } from '@/app/components/base/icons/src/vender/line/arrows'
+import { RiArrowDownSLine } from '@remixicon/react'
 import { CubeOutline } from '@/app/components/base/icons/src/vender/line/shapes'

 type ModelTriggerProps = {
@@ -30,7 +30,7 @@ const ModelTrigger: FC<ModelTriggerProps> = ({
        </div>
      </div>
      <div className='shrink-0 flex items-center justify-center w-4 h-4'>
-        <ChevronDown className='w-3.5 h-3.5 text-gray-500' />
+        <RiArrowDownSLine className='w-3.5 h-3.5 text-gray-500' />
      </div>
    </div>
  )
--- a/web/app/components/header/account-setting/model-provider-page/model-selector/model-trigger.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-selector/model-trigger.tsx
@@ -1,4 +1,5 @@
 import type { FC } from 'react'
+import { RiArrowDownSLine } from '@remixicon/react'
 import type {
  Model,
  ModelItem,
@@ -11,7 +12,6 @@ import { useLanguage } from '../hooks'
 import ModelIcon from '../model-icon'
 import ModelName from '../model-name'
 import { AlertTriangle } from '@/app/components/base/icons/src/vender/line/alertsAndFeedback'
-import { ChevronDown } from '@/app/components/base/icons/src/vender/line/arrows'
 import TooltipPlus from '@/app/components/base/tooltip-plus'

 type ModelTriggerProps = {
@@ -61,7 +61,7 @@ const ModelTrigger: FC<ModelTriggerProps> = ({
                </TooltipPlus>
              )
              : (
-                <ChevronDown
+                <RiArrowDownSLine
                  className='w-3.5 h-3.5 text-gray-500'
                />
              )
--- a/web/app/components/header/account-setting/model-provider-page/model-selector/popup.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-selector/popup.tsx
@@ -1,5 +1,8 @@
 import type { FC } from 'react'
 import { useState } from 'react'
+import {
+  RiSearchLine,
+} from '@remixicon/react'
 import type {
  DefaultModel,
  Model,
@@ -7,7 +10,6 @@ import type {
 } from '../declarations'
 import { useLanguage } from '../hooks'
 import PopupItem from './popup-item'
-import { SearchLg } from '@/app/components/base/icons/src/vender/line/general'
 import { XCircle } from '@/app/components/base/icons/src/vender/solid/general'

 type PopupProps = {
@@ -47,7 +49,7 @@ const Popup: FC<PopupProps> = ({
          flex items-center pl-[9px] pr-[10px] h-8 rounded-lg border
          ${searchText ? 'bg-white border-gray-300 shadow-xs' : 'bg-gray-100 border-transparent'}
        `}>
-          <SearchLg
+          <RiSearchLine
            className={`
              shrink-0 mr-[7px] w-[14px] h-[14px]
              ${searchText ? 'text-gray-500' : 'text-gray-400'}
--- a/web/app/components/header/account-setting/model-provider-page/model-selector/rerank-trigger.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-selector/rerank-trigger.tsx
@@ -1,5 +1,7 @@
+import {
+  RiExternalLinkLine,
+} from '@remixicon/react'
 import { CubeOutline } from '@/app/components/base/icons/src/vender/line/shapes'
-import { LinkExternal01 } from '@/app/components/base/icons/src/vender/line/general'

 const ModelTrigger = () => {
  return (
@@ -16,7 +18,7 @@ const ModelTrigger = () => {
        </div>
      </div>
      <div className='shrink-0 flex items-center justify-center w-4 h-4'>
-        <LinkExternal01 className='w-3.5 h-3.5 text-gray-500' />
+        <RiExternalLinkLine className='w-3.5 h-3.5 text-gray-500' />
      </div>
    </div>
  )
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/index.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/index.tsx
@@ -1,6 +1,9 @@
 import type { FC } from 'react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import {
+  RiLoader2Line,
+} from '@remixicon/react'
 import type {
  CustomConfigurationModelFixedFields,
  ModelItem,
@@ -19,7 +22,6 @@ import QuotaPanel from './quota-panel'
 import ModelList from './model-list'
 import AddModelButton from './add-model-button'
 import { ChevronDownDouble } from '@/app/components/base/icons/src/vender/line/arrows'
-import { Loading02 } from '@/app/components/base/icons/src/vender/line/general'
 import { fetchModelProviderModelList } from '@/service/common'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
 import { IS_CE_EDITION } from '@/config'
@@ -131,7 +133,7 @@ const ProviderAddedCard: FC<ProviderAddedCardProps> = ({
              }
              {
                loading && (
-                  <Loading02 className='ml-0.5 animate-spin w-3 h-3' />
+                  <RiLoader2Line className='ml-0.5 animate-spin w-3 h-3' />
                )
              }
            </div>
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-load-balancing-configs.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-load-balancing-configs.tsx
@@ -2,13 +2,17 @@ import classNames from 'classnames'
 import type { Dispatch, SetStateAction } from 'react'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
+import {
+  RiDeleteBinLine,
+  RiQuestionLine,
+} from '@remixicon/react'
 import type { ConfigurationMethodEnum, CustomConfigurationModelFixedFields, ModelLoadBalancingConfig, ModelLoadBalancingConfigEntry, ModelProvider } from '../declarations'
 import Indicator from '../../../indicator'
 import CooldownTimer from './cooldown-timer'
 import TooltipPlus from '@/app/components/base/tooltip-plus'
 import Switch from '@/app/components/base/switch'
 import { Balance } from '@/app/components/base/icons/src/vender/line/financeAndECommerce'
-import { Edit02, HelpCircle, Plus02, Trash03 } from '@/app/components/base/icons/src/vender/line/general'
+import { Edit02, Plus02 } from '@/app/components/base/icons/src/vender/line/general'
 import { AlertTriangle } from '@/app/components/base/icons/src/vender/solid/alertsAndFeedback'
 import { useModalContextSelector } from '@/context/modal-context'
 import UpgradeBtn from '@/app/components/billing/upgrade-btn'
@@ -157,7 +161,7 @@ const ModelLoadBalancingConfigs = ({
            <div className='flex items-center gap-1 text-sm'>
              {t('common.modelProvider.loadBalancing')}
              <TooltipPlus popupContent={t('common.modelProvider.loadBalancingInfo')} popupClassName='max-w-[300px]'>
-                <HelpCircle className='w-3 h-3 text-gray-400' />
+                <RiQuestionLine className='w-3 h-3 text-gray-400' />
              </TooltipPlus>
            </div>
            <div className='text-xs text-gray-500'>{t('common.modelProvider.loadBalancingDescription')}</div>
@@ -213,7 +217,7 @@ const ModelLoadBalancingConfigs = ({
                            className='flex items-center justify-center w-8 h-8 text-gray-500 bg-white rounded-lg transition-colors cursor-pointer hover:bg-black/5'
                            onClick={() => updateConfigEntry(index, () => undefined)}
                          >
-                            <Trash03 className='w-4 h-4' />
+                            <RiDeleteBinLine className='w-4 h-4' />
                          </span>
                          <span className='mr-2 h-3 border-r border-r-gray-100' />
                        </div>
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/priority-selector.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/priority-selector.tsx
@@ -2,8 +2,11 @@ import { Fragment } from 'react'
 import type { FC } from 'react'
 import { Popover, Transition } from '@headlessui/react'
 import { useTranslation } from 'react-i18next'
+import {
+  RiCheckLine,
+  RiMoreFill,
+} from '@remixicon/react'
 import { PreferredProviderTypeEnum } from '../declarations'
-import { Check, DotsHorizontal } from '@/app/components/base/icons/src/vender/line/general'
 import Button from '@/app/components/base/button'

 type SelectorProps = {
@@ -35,7 +38,7 @@ const Selector: FC<SelectorProps> = ({
              px-0 w-6 h-6 bg-white rounded-md
              ${open && '!bg-gray-100'}
            `}>
-              <DotsHorizontal className='w-3 h-3 text-gray-700' />
+              <RiMoreFill className='w-3 h-3 text-gray-700' />
            </Button>
          )
        }
@@ -57,7 +60,7 @@ const Selector: FC<SelectorProps> = ({
                    onClick={() => onSelect(option.key)}
                  >
                    <div className='grow'>{option.text}</div>
-                    {value === option.key && <Check className='w-4 h-4 text-primary-600' />}
+                    {value === option.key && <RiCheckLine className='w-4 h-4 text-primary-600' />}
                  </div>
                </Popover.Button>
              ))
--- a/web/app/components/header/account-setting/model-provider-page/provider-card/index.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-card/index.tsx
@@ -1,5 +1,8 @@
 import type { FC } from 'react'
 import { useTranslation } from 'react-i18next'
+import {
+  RiAddLine,
+} from '@remixicon/react'
 import type {
  ModelProvider,
 } from '../declarations'
@@ -14,7 +17,7 @@ import {
 import ModelBadge from '../model-badge'
 import ProviderIcon from '../provider-icon'
 import s from './index.module.css'
-import { Plus, Settings01 } from '@/app/components/base/icons/src/vender/line/general'
+import { Settings01 } from '@/app/components/base/icons/src/vender/line/general'
 import Button from '@/app/components/base/button'

 type ProviderCardProps = {
@@ -76,7 +79,7 @@ const ProviderCard: FC<ProviderCardProps> = ({
                  className='px-0 h-7 bg-white text-xs text-gray-700'
                  onClick={() => onOpenModal(method)}
                >
-                  <Plus className='mr-[5px] w-3.5 h-3.5' />
+                  <RiAddLine className='mr-[5px] w-3.5 h-3.5' />
                  {t('common.modelProvider.addModel')}
                </Button>
              )
--- a/web/app/components/header/account-setting/model-provider-page/system-model-selector/index.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/system-model-selector/index.tsx
@@ -1,6 +1,9 @@
 import type { FC } from 'react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import {
+  RiQuestionLine,
+} from '@remixicon/react'
 import ModelSelector from '../model-selector'
 import {
  useModelList,
@@ -13,7 +16,7 @@ import type {
 } from '../declarations'
 import { ModelTypeEnum } from '../declarations'
 import Tooltip from '@/app/components/base/tooltip'
-import { HelpCircle, Settings01 } from '@/app/components/base/icons/src/vender/line/general'
+import { Settings01 } from '@/app/components/base/icons/src/vender/line/general'
 import {
  PortalToFollowElem,
  PortalToFollowElemContent,
@@ -148,7 +151,7 @@ const SystemModel: FC<SystemModelSelectorProps> = ({
                  <div className='w-[261px] text-gray-500'>{t('common.modelProvider.systemReasoningModel.tip')}</div>
                }
              >
-                <HelpCircle className='ml-0.5 w-[14px] h-[14px] text-gray-400' />
+                <RiQuestionLine className='ml-0.5 w-[14px] h-[14px] text-gray-400' />
              </Tooltip>
            </div>
            <div>
@@ -168,7 +171,7 @@ const SystemModel: FC<SystemModelSelectorProps> = ({
                  <div className='w-[261px] text-gray-500'>{t('common.modelProvider.embeddingModel.tip')}</div>
                }
              >
-                <HelpCircle className='ml-0.5 w-[14px] h-[14px] text-gray-400' />
+                <RiQuestionLine className='ml-0.5 w-[14px] h-[14px] text-gray-400' />
              </Tooltip>
            </div>
            <div>
@@ -188,7 +191,7 @@ const SystemModel: FC<SystemModelSelectorProps> = ({
                  <div className='w-[261px] text-gray-500'>{t('common.modelProvider.rerankModel.tip')}</div>
                }
              >
-                <HelpCircle className='ml-0.5 w-[14px] h-[14px] text-gray-400' />
+                <RiQuestionLine className='ml-0.5 w-[14px] h-[14px] text-gray-400' />
              </Tooltip>
            </div>
            <div>
@@ -208,7 +211,7 @@ const SystemModel: FC<SystemModelSelectorProps> = ({
                  <div className='w-[261px] text-gray-500'>{t('common.modelProvider.speechToTextModel.tip')}</div>
                }
              >
-                <HelpCircle className='ml-0.5 w-[14px] h-[14px] text-gray-400' />
+                <RiQuestionLine className='ml-0.5 w-[14px] h-[14px] text-gray-400' />
              </Tooltip>
            </div>
            <div>
@@ -228,7 +231,7 @@ const SystemModel: FC<SystemModelSelectorProps> = ({
                  <div className='w-[261px] text-gray-500'>{t('common.modelProvider.ttsModel.tip')}</div>
                }
              >
-                <HelpCircle className='ml-0.5 w-[14px] h-[14px] text-gray-400' />
+                <RiQuestionLine className='ml-0.5 w-[14px] h-[14px] text-gray-400' />
              </Tooltip>
            </div>
            <div>
--- a/web/app/components/header/app-nav/index.tsx
+++ b/web/app/components/header/app-nav/index.tsx
@@ -6,9 +6,12 @@ import { useParams } from 'next/navigation'
 import useSWRInfinite from 'swr/infinite'
 import { flatten } from 'lodash-es'
 import produce from 'immer'
+import {
+  RiRobot2Fill,
+  RiRobot2Line,
+} from '@remixicon/react'
 import Nav from '../nav'
 import { type NavItem } from '../nav/nav-selector'
-import { Robot, RobotActive } from '../../base/icons/src/public/header-nav/studio'
 import { fetchAppList } from '@/service/apps'
 import CreateAppTemplateDialog from '@/app/components/app/create-app-dialog'
 import CreateAppModal from '@/app/components/app/create-app-modal'
@@ -112,8 +115,8 @@ const AppNav = () => {
    <>
      <Nav
        isApp
-        icon={<Robot className='w-4 h-4' />}
-        activeIcon={<RobotActive className='w-4 h-4' />}
+        icon={<RiRobot2Line className='w-4 h-4' />}
+        activeIcon={<RiRobot2Fill className='w-4 h-4' />}
        text={t('common.menus.apps')}
        activeSegment={['apps', 'app']}
        link='/apps'
--- a/web/app/components/header/dataset-nav/index.tsx
+++ b/web/app/components/header/dataset-nav/index.tsx
@@ -3,11 +3,14 @@
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useParams, useRouter } from 'next/navigation'
+import {
+  RiBook2Fill,
+  RiBook2Line,
+} from '@remixicon/react'
 import useSWR from 'swr'
 import useSWRInfinite from 'swr/infinite'
 import { flatten } from 'lodash-es'
 import Nav from '../nav'
-import { Knowledge, KnowledgeActive } from '../../base/icons/src/public/header-nav/knowledge'
 import { fetchDatasetDetail, fetchDatasets } from '@/service/datasets'
 import type { DataSetListResponse } from '@/models/datasets'

@@ -38,8 +41,8 @@ const DatasetNav = () => {

  return (
    <Nav
-      icon={<Knowledge className='w-4 h-4' />}
-      activeIcon={<KnowledgeActive className='w-4 h-4' />}
+      icon={<RiBook2Line className='w-4 h-4' />}
+      activeIcon={<RiBook2Fill className='w-4 h-4' />}
      text={t('common.menus.datasets')}
      activeSegment='datasets'
      link='/datasets'
--- a/web/app/components/header/explore-nav/index.tsx
+++ b/web/app/components/header/explore-nav/index.tsx
@@ -4,7 +4,10 @@ import { useTranslation } from 'react-i18next'
 import Link from 'next/link'
 import { useSelectedLayoutSegment } from 'next/navigation'
 import classNames from 'classnames'
-import { Explore, ExploreActive } from '../../base/icons/src/public/header-nav/explore'
+import {
+  RiPlanetFill,
+  RiPlanetLine,
+} from '@remixicon/react'
 type ExploreNavProps = {
  className?: string
 }
@@ -24,8 +27,8 @@ const ExploreNav = ({
    )}>
      {
        actived
-          ? <ExploreActive className='mr-2 w-4 h-4' />
-          : <Explore className='mr-2 w-4 h-4' />
+          ? <RiPlanetFill className='mr-2 w-4 h-4' />
+          : <RiPlanetLine className='mr-2 w-4 h-4' />
      }
      {t('common.menus.explore')}
    </Link>
--- a/web/app/components/header/nav/nav-selector/index.tsx
+++ b/web/app/components/header/nav/nav-selector/index.tsx
@@ -2,6 +2,11 @@
 import { useTranslation } from 'react-i18next'
 import { Fragment, useCallback } from 'react'
 import cn from 'classnames'
+import {
+  RiAddLine,
+  RiArrowDownSLine,
+  RiArrowRightSLine,
+} from '@remixicon/react'
 import { Menu, Transition } from '@headlessui/react'
 import { useRouter } from 'next/navigation'
 import { debounce } from 'lodash-es'
@@ -10,9 +15,7 @@ import { AiText, ChatBot, CuteRobote } from '@/app/components/base/icons/src/ven
 import { Route } from '@/app/components/base/icons/src/vender/solid/mapsAndTravel'
 import { useAppContext } from '@/context/app-context'
 import { useStore as useAppStore } from '@/app/components/app/store'
-import { ChevronDown, ChevronRight } from '@/app/components/base/icons/src/vender/line/arrows'
 import { FileArrow01, FilePlus01, FilePlus02 } from '@/app/components/base/icons/src/vender/line/files'
-import { Plus } from '@/app/components/base/icons/src/vender/line/general'

 export type NavItem = {
  id: string
@@ -56,7 +59,7 @@ const NavSelector = ({ curNav, navs, createText, isApp, onCreate, onLoadmore }:
              open && 'bg-primary-50',
            )}>
              <div className='max-w-[180px] truncate' title={curNav?.name}>{curNav?.name}</div>
-              <ChevronDown
+              <RiArrowDownSLine
                className={cn('shrink-0 w-3 h-3 ml-1 opacity-50 group-hover:opacity-100', open && '!opacity-100')}
                aria-hidden="true"
              />
@@ -116,7 +119,7 @@ const NavSelector = ({ curNav, navs, createText, isApp, onCreate, onLoadmore }:
                    'flex items-center gap-2 px-3 py-[6px] rounded-lg cursor-pointer hover:bg-gray-100',
                  )}>
                    <div className='shrink-0 flex justify-center items-center w-6 h-6 bg-gray-50 rounded-[6px] border-[0.5px] border-gray-200 border'>
-                      <Plus className='w-4 h-4 text-gray-500' />
+                      <RiAddLine className='w-4 h-4 text-gray-500' />
                    </div>
                    <div className='grow text-left font-normal text-[14px] text-gray-700'>{createText}</div>
                  </div>
@@ -132,10 +135,10 @@ const NavSelector = ({ curNav, navs, createText, isApp, onCreate, onLoadmore }:
                          open && '!bg-gray-100',
                        )}>
                          <div className='shrink-0 flex justify-center items-center w-6 h-6 bg-gray-50 rounded-[6px] border-[0.5px] border-gray-200 border'>
-                            <Plus className='w-4 h-4 text-gray-500' />
+                            <RiAddLine className='w-4 h-4 text-gray-500' />
                          </div>
                          <div className='grow text-left font-normal text-[14px] text-gray-700'>{createText}</div>
-                          <ChevronRight className='shrink-0 w-3.5 h-3.5  text-gray-500'/>
+                          <RiArrowRightSLine className='shrink-0 w-3.5 h-3.5  text-gray-500'/>
                        </div>
                      </Menu.Button>
                      <Transition
--- a/web/app/components/header/tools-nav/index.tsx
+++ b/web/app/components/header/tools-nav/index.tsx
@@ -4,7 +4,10 @@ import { useTranslation } from 'react-i18next'
 import Link from 'next/link'
 import { useSelectedLayoutSegment } from 'next/navigation'
 import classNames from 'classnames'
-import { Tools, ToolsActive } from '../../base/icons/src/public/header-nav/tools'
+import {
+  RiHammerFill,
+  RiHammerLine,
+} from '@remixicon/react'
 type ToolsNavProps = {
  className?: string
 }
@@ -24,8 +27,8 @@ const ToolsNav = ({
    )}>
      {
        actived
-          ? <ToolsActive className='mr-2 w-4 h-4' />
-          : <Tools className='mr-2 w-4 h-4' />
+          ? <RiHammerFill className='mr-2 w-4 h-4' />
+          : <RiHammerLine className='mr-2 w-4 h-4' />
      }
      {t('common.menus.tools')}
    </Link>