diff --git a/src/components/nav-bar/nav-bar.tsx b/src/components/nav-bar/nav-bar.tsx
index 79baa5abf2..15ad98b940 100644
--- a/src/components/nav-bar/nav-bar.tsx
+++ b/src/components/nav-bar/nav-bar.tsx
@@ -3,7 +3,7 @@ import classNames from 'classnames'
 import type { FC, ReactNode } from 'react'
 import React from 'react'
 import { NativeProps, withNativeProps } from '../../utils/native-props'
-import { mergeProps } from '../../utils/with-default-props'
+import { mergeProp, mergeProps } from '../../utils/with-default-props'
 import { useConfig } from '../config-provider'
 
 const classPrefix = `adm-nav-bar`
@@ -21,26 +21,31 @@ export type NavBarProps = {
   children?: ReactNode
 } & NativeProps<'--height' | '--border-bottom'>
 
-const defaultProps = {
-  backIcon: true,
-}
+const defaultBackIcon = <LeftOutline />
 
 export const NavBar: FC<NavBarProps> = props => {
   const { navBar: componentConfig = {} } = useConfig()
-  const mergedProps = mergeProps(defaultProps, componentConfig, props)
+  const mergedProps = mergeProps(componentConfig, props)
   const { back, backIcon, backArrow } = mergedProps
 
+  const mergedDefaultBackIcon = componentConfig.backIcon || defaultBackIcon
+
+  const mergedBackIcon = mergeProp<ReactNode>(
+    defaultBackIcon,
+    componentConfig.backIcon,
+    backArrow === true ? mergedDefaultBackIcon : backArrow,
+    backIcon === true ? mergedDefaultBackIcon : backIcon
+  )
+
   return withNativeProps(
     mergedProps,
     <div className={classNames(classPrefix)}>
       <div className={`${classPrefix}-left`} role='button'>
         {back !== null && (
           <div className={`${classPrefix}-back`} onClick={mergedProps.onBack}>
-            {(backIcon || backArrow) && (
+            {mergedBackIcon && (
               <span className={`${classPrefix}-back-arrow`}>
-                {backIcon === true || backArrow === true
-                  ? componentConfig.backIcon || <LeftOutline />
-                  : backIcon || backArrow}
+                {mergedBackIcon}
               </span>
             )}
             <span aria-hidden='true'>{back}</span>
diff --git a/src/components/nav-bar/tests/nav-bar.test.tsx b/src/components/nav-bar/tests/nav-bar.test.tsx
index dc2791733a..31f2549e67 100644
--- a/src/components/nav-bar/tests/nav-bar.test.tsx
+++ b/src/components/nav-bar/tests/nav-bar.test.tsx
@@ -16,8 +16,10 @@ describe('NavBar', () => {
     })
 
     it('legacy', () => {
-      const { baseElement } = render(<NavBar backArrow>Title</NavBar>)
-      expect(baseElement.querySelector('.antd-mobile-icon')).toBeTruthy()
+      const { baseElement } = render(
+        <NavBar backArrow={<span className='bamboo' />}>Title</NavBar>
+      )
+      expect(baseElement.querySelector('.bamboo')).toBeTruthy()
     })
 
     it('props', () => {
@@ -35,23 +37,23 @@ describe('NavBar', () => {
     })
 
     it('context', () => {
-      render(
-        <ConfigProvider navBar={{ backIcon: 'little' }}>
+      const { baseElement } = render(
+        <ConfigProvider navBar={{ backIcon: <span className='little' /> }}>
           <NavBar backIcon>Title</NavBar>
         </ConfigProvider>
       )
 
-      expect(screen.getByText('little')).toBeVisible()
+      expect(baseElement.querySelector('.little')).toBeTruthy()
     })
 
     it('props override context', () => {
-      render(
-        <ConfigProvider navBar={{ backIcon: 'little' }}>
-          <NavBar backIcon='bamboo'>Title</NavBar>
+      const { baseElement } = render(
+        <ConfigProvider navBar={{ backIcon: <span className='little' /> }}>
+          <NavBar backIcon={<span className='bamboo' />}>Title</NavBar>
         </ConfigProvider>
       )
 
-      expect(screen.getByText('bamboo')).toBeVisible()
+      expect(baseElement.querySelector('.bamboo')).toBeTruthy()
     })
   })
 })