diff --git a/migrate-from-v1.md b/migrate-from-v1.md
index 24a1bd1b11..41788de6ea 100644
--- a/migrate-from-v1.md
+++ b/migrate-from-v1.md
@@ -633,11 +633,12 @@ plugins: [
 - `rate` 重命名为 `value`
 - `showSign` 重命名为 `symbol`
 - `showZero` 重命名为 `zero`
-- `syncTextColor` 重命名为 `syncColor`
+- `arrowLeft` 重命名为 `left`
+- `syncTextColor` 重命名为 `sync`
 - `textColor` 重命名为 `color`
 - `upIconName` 重命名为 `riseIcon`，类型修改为 `React.Node` 
-- `downIconName` 重重命名为命为 `downIcon`，类型修改为 `React.Node`
-- 移除 `iconSize`，通过`riseIcon`、`downIcon`自定义传入icon大小
+- `downIconName` 重命名为 `dropIcon`，类型修改为 `React.Node`
+- 移除 `iconSize`，通过`riseIcon`、`dropIcon`自定义传入icon大小
 
 #### Video
 - 在 `Taro` 下新增video的适配
diff --git a/src/packages/trendarrow/__test__/trendarrow.spec.tsx b/src/packages/trendarrow/__test__/trendarrow.spec.tsx
index c999d48141..3a8dc1c52f 100644
--- a/src/packages/trendarrow/__test__/trendarrow.spec.tsx
+++ b/src/packages/trendarrow/__test__/trendarrow.spec.tsx
@@ -39,8 +39,8 @@ test('should not render 0  when zero is false', async () => {
   )
 })
 
-test('should render left icon when arrowLeft', async () => {
-  const { container } = render(<TrendArrow value={12.325} arrowLeft />)
+test('should render left icon when left', async () => {
+  const { container } = render(<TrendArrow value={12.325} left />)
   expect(
     container.querySelectorAll('.nut-trendarrow__icon-before')?.length
   ).toBe(0)
@@ -49,8 +49,8 @@ test('should render left icon when arrowLeft', async () => {
   ).toBe(1)
 })
 
-test('should render sync text color when syncColor is true', async () => {
-  const { container } = render(<TrendArrow value={12.325} syncColor />)
+test('should render sync text color when sync is true', async () => {
+  const { container } = render(<TrendArrow value={12.325} sync />)
   expect(container.querySelector('.nut-trendarrow__value')).toHaveAttribute(
     'style',
     'color: rgb(250, 44, 25);'
@@ -59,7 +59,7 @@ test('should render sync text color when syncColor is true', async () => {
 
 test('should render sync text color when color is true', async () => {
   const { container } = render(
-    <TrendArrow value={12.325} syncColor={false} color="rgb(39,197,48)" />
+    <TrendArrow value={12.325} sync={false} color="rgb(39,197,48)" />
   )
   expect(container.querySelector('.nut-trendarrow__value')).toHaveAttribute(
     'style',
diff --git a/src/packages/trendarrow/demo.taro.tsx b/src/packages/trendarrow/demo.taro.tsx
index 8dfe151126..c2235dc03a 100644
--- a/src/packages/trendarrow/demo.taro.tsx
+++ b/src/packages/trendarrow/demo.taro.tsx
@@ -55,8 +55,8 @@ const TrendArrowDemo = () => {
       <div className={`demo ${Taro.getEnv() === 'WEB' ? 'web' : ''}`}>
         <h2>{translated.basic}</h2>
         <Cell>
-          <TrendArrow syncColor={false} value={1} />
-          <TrendArrow syncColor={false} value={-0.2535} />
+          <TrendArrow sync={false} value={1} />
+          <TrendArrow sync={false} value={-0.2535} />
         </Cell>
         <div className="title">{translated.title1}</div>
         <Cell>
@@ -70,8 +70,8 @@ const TrendArrowDemo = () => {
         </Cell>
         <div className="title">{translated.title3}</div>
         <Cell>
-          <TrendArrow arrowLeft value={0.2535} />
-          <TrendArrow arrowLeft value={-0.2535} />
+          <TrendArrow left value={0.2535} />
+          <TrendArrow left value={-0.2535} />
         </Cell>
         <div className="title">{translated.title4}</div>
         <Cell>
@@ -88,7 +88,7 @@ const TrendArrowDemo = () => {
           <TrendArrow value={10.2365} riseColor="rgb(73,143,242)" />
           <TrendArrow value={-0.2535} symbol dropColor="rgb(255, 190, 13)" />
           <TrendArrow
-            syncColor={false}
+            sync={false}
             value={-0.2535}
             symbol
             color="rgb(39,197,48)"
@@ -98,7 +98,7 @@ const TrendArrowDemo = () => {
         <div className="title">{translated.title7}</div>
         <Cell>
           <TrendArrow value={10.2365} riseIcon={<Success color="blue" />} />
-          <TrendArrow value={-10.2365} downIcon={<Failure color="red" />} />
+          <TrendArrow value={-10.2365} dropIcon={<Failure color="red" />} />
         </Cell>
       </div>
     </>
diff --git a/src/packages/trendarrow/demo.tsx b/src/packages/trendarrow/demo.tsx
index a42c8316ef..5f23a8143c 100644
--- a/src/packages/trendarrow/demo.tsx
+++ b/src/packages/trendarrow/demo.tsx
@@ -53,8 +53,8 @@ const TrendArrowDemo = () => {
       <div className="demo">
         <h2>{translated.basic}</h2>
         <Cell>
-          <TrendArrow syncColor={false} value={1} />
-          <TrendArrow syncColor={false} value={-0.2535} />
+          <TrendArrow sync={false} value={1} />
+          <TrendArrow sync={false} value={-0.2535} />
         </Cell>
         <div className="title">{translated.title1}</div>
         <Cell>
@@ -68,8 +68,8 @@ const TrendArrowDemo = () => {
         </Cell>
         <div className="title">{translated.title3}</div>
         <Cell>
-          <TrendArrow arrowLeft value={0.2535} />
-          <TrendArrow arrowLeft value={-0.2535} />
+          <TrendArrow left value={0.2535} />
+          <TrendArrow left value={-0.2535} />
         </Cell>
         <div className="title">{translated.title4}</div>
         <Cell>
@@ -86,7 +86,7 @@ const TrendArrowDemo = () => {
           <TrendArrow value={10.2365} riseColor="rgb(73,143,242)" />
           <TrendArrow value={-0.2535} symbol dropColor="rgb(255, 190, 13)" />
           <TrendArrow
-            syncColor={false}
+            sync={false}
             value={-0.2535}
             symbol
             color="rgb(39,197,48)"
@@ -96,7 +96,7 @@ const TrendArrowDemo = () => {
         <div className="title">{translated.title7}</div>
         <Cell>
           <TrendArrow value={10.2365} riseIcon={<Success color="blue" />} />
-          <TrendArrow value={-10.2365} downIcon={<Failure color="red" />} />
+          <TrendArrow value={-10.2365} dropIcon={<Failure color="red" />} />
         </Cell>
       </div>
     </>
diff --git a/src/packages/trendarrow/doc.en-US.md b/src/packages/trendarrow/doc.en-US.md
index 6c12eef8a5..8c5e99cf8e 100644
--- a/src/packages/trendarrow/doc.en-US.md
+++ b/src/packages/trendarrow/doc.en-US.md
@@ -23,8 +23,8 @@ import { TrendArrow, Cell } from '@nutui/nutui-react'
 const App = () => {
   return (
     <Cell>
-        <TrendArrow syncColor={false} value={1} />
-        <TrendArrow syncColor={false} value={-0.2535} />
+        <TrendArrow sync={false} value={1} />
+        <TrendArrow sync={false} value={-0.2535} />
     </Cell>
   );
 };
@@ -86,8 +86,8 @@ import { TrendArrow, Cell } from '@nutui/nutui-react'
 const App = () => {
   return (
     <Cell>
-        <TrendArrow arrowLeft value={0.2535} />
-        <TrendArrow arrowLeft value={-0.2535} />
+        <TrendArrow left value={0.2535} />
+        <TrendArrow left value={-0.2535} />
     </Cell>
   );
 };
@@ -152,7 +152,7 @@ const App = () => {
         <TrendArrow value={10.2365} riseColor="rgb(73,143,242)" />
         <TrendArrow value={-0.2535} symbol dropColor="rgb(255, 190, 13)" />
         <TrendArrow
-        syncColor={false}
+        sync={false}
         value={-0.2535}
         symbol
         color="rgb(39,197,48)"
@@ -179,7 +179,7 @@ const App = () => {
   return (
     <Cell>
         <TrendArrow value={10.2365} riseIcon={<Success color="blue" />} />
-        <TrendArrow value={-10.2365} downIcon={<Failure color="red" />} />
+        <TrendArrow value={-10.2365} dropIcon={<Failure color="red" />} />
     </Cell>
   );
 };
@@ -198,13 +198,13 @@ export default App;
 | digits | Decimal precision | `number` | `2` |
 | symbol | Whether to display plus and minus signs | `boolean` | `false` |
 | zero | Show zero or not | `boolean` | `false` |
-| arrowLeft | Whether to show an arrow to the left of the number | `boolean` | `false` |
-| syncColor | Whether the text color is in sync with the arrow | `boolean` | `true` |
+| left | Whether to show an arrow to the left of the number | `boolean` | `false` |
+| sync | Whether the text color is in sync with the arrow | `boolean` | `true` |
 | color | Text color | `string` | `#333333` |
 | riseColor | Rise arrow color | `string` | `#fa2c19` |
 | dropColor | Down arrow color | `string` | `#64b578` |
 | riseIcon | Custom Rise arrow icon | `string` | `<TriangleUp/>` |
-| downIcon | Custom down arrow icon | `string` | `<TriangleDown/>` |
+| dropIcon | Custom down arrow icon | `string` | `<TriangleDown/>` |
 
 ## Theming
 
diff --git a/src/packages/trendarrow/doc.md b/src/packages/trendarrow/doc.md
index 93f929d6a8..920e62e6d8 100644
--- a/src/packages/trendarrow/doc.md
+++ b/src/packages/trendarrow/doc.md
@@ -23,8 +23,8 @@ import { TrendArrow, Cell } from '@nutui/nutui-react'
 const App = () => {
   return (
     <Cell>
-        <TrendArrow syncColor={false} value={1} />
-        <TrendArrow syncColor={false} value={-0.2535} />
+        <TrendArrow sync={false} value={1} />
+        <TrendArrow sync={false} value={-0.2535} />
     </Cell>
   );
 };
@@ -86,8 +86,8 @@ import { TrendArrow, Cell } from '@nutui/nutui-react'
 const App = () => {
   return (
     <Cell>
-        <TrendArrow arrowLeft value={0.2535} />
-        <TrendArrow arrowLeft value={-0.2535} />
+        <TrendArrow left value={0.2535} />
+        <TrendArrow left value={-0.2535} />
     </Cell>
   );
 };
@@ -152,7 +152,7 @@ const App = () => {
         <TrendArrow value={10.2365} riseColor="rgb(73,143,242)" />
         <TrendArrow value={-0.2535} symbol dropColor="rgb(255, 190, 13)" />
         <TrendArrow
-        syncColor={false}
+        sync={false}
         value={-0.2535}
         symbol
         color="rgb(39,197,48)"
@@ -179,7 +179,7 @@ const App = () => {
   return (
     <Cell>
         <TrendArrow value={10.2365} riseIcon={<Success color="blue" />} />
-        <TrendArrow value={-10.2365} downIcon={<Failure color="red" />} />
+        <TrendArrow value={-10.2365} dropIcon={<Failure color="red" />} />
     </Cell>
   );
 };
@@ -198,14 +198,13 @@ export default App;
 | digits | 小数位精度 | `number` | `2` |
 | symbol | 是否显示加减号 | `boolean` | `false` |
 | zero | 是否显示 0 | `boolean` | `false` |
-| arrowLeft | 是否在数字左侧显示箭头 | `boolean` | `false` |
-| syncColor | 文字颜色是否与箭头同步 | `boolean` | `true` |
+| left | 是否在数字左侧显示箭头 | `boolean` | `false` |
+| sync | 文字颜色是否与箭头同步 | `boolean` | `true` |
 | color | 文字颜色 | `string` | `#333333` |
 | riseColor | 向上箭头颜色 | `string` | `#fa2c19` |
 | dropColor | 向下箭头颜色 | `string` | `#64b578` |
 | riseIcon | 自定义向上箭头icon | `React.ReactNode` | `<TriangleUp/>` |
-| downIcon | 自定义向下箭头icon | `React.ReactNode` | `<TriangleDown/>` |
-
+| dropIcon | 自定义向下箭头icon | `React.ReactNode` | `<TriangleDown/>` |
 
 ## 主题定制
 
diff --git a/src/packages/trendarrow/doc.taro.md b/src/packages/trendarrow/doc.taro.md
index 71bc857e97..0933863ef7 100644
--- a/src/packages/trendarrow/doc.taro.md
+++ b/src/packages/trendarrow/doc.taro.md
@@ -23,8 +23,8 @@ import { TrendArrow, Cell } from '@nutui/nutui-react-taro'
 const App = () => {
   return (
     <Cell>
-        <TrendArrow syncColor={false} value={1} />
-        <TrendArrow syncColor={false} value={-0.2535} />
+        <TrendArrow sync={false} value={1} />
+        <TrendArrow sync={false} value={-0.2535} />
     </Cell>
   );
 };
@@ -86,8 +86,8 @@ import { TrendArrow, Cell } from '@nutui/nutui-react-taro'
 const App = () => {
   return (
     <Cell>
-        <TrendArrow arrowLeft value={0.2535} />
-        <TrendArrow arrowLeft value={-0.2535} />
+        <TrendArrow left value={0.2535} />
+        <TrendArrow left value={-0.2535} />
     </Cell>
   );
 };
@@ -152,7 +152,7 @@ const App = () => {
         <TrendArrow value={10.2365} riseColor="rgb(73,143,242)" />
         <TrendArrow value={-0.2535} symbol dropColor="rgb(255, 190, 13)" />
         <TrendArrow
-        syncColor={false}
+        sync={false}
         value={-0.2535}
         symbol
         color="rgb(39,197,48)"
@@ -179,7 +179,7 @@ const App = () => {
   return (
     <Cell>
         <TrendArrow value={10.2365} riseIcon={<Success color="blue" />} />
-        <TrendArrow value={-10.2365} downIcon={<Failure color="red" />} />
+        <TrendArrow value={-10.2365} dropIcon={<Failure color="red" />} />
     </Cell>
   );
 };
@@ -198,13 +198,13 @@ export default App;
 | digits | 小数位精度 | `number` | `2` |
 | symbol | 是否显示加减号 | `boolean` | `false` |
 | zero | 是否显示 0 | `boolean` | `false` |
-| arrowLeft | 是否在数字左侧显示箭头 | `boolean` | `false` |
-| syncColor | 文字颜色是否与箭头同步 | `boolean` | `true` |
+| left | 是否在数字左侧显示箭头 | `boolean` | `false` |
+| sync | 文字颜色是否与箭头同步 | `boolean` | `true` |
 | color | 文字颜色 | `string` | `#333333` |
 | riseColor | 向上箭头颜色 | `string` | `#fa2c19` |
 | dropColor | 向下箭头颜色 | `string` | `#64b578` |
 | riseIcon | 自定义向上箭头icon | `React.ReactNode` | `<TriangleUp/>` |
-| downIcon | 自定义向下箭头icon | `React.ReactNode` | `<TriangleDown/>` |
+| dropIcon | 自定义向下箭头icon | `React.ReactNode` | `<TriangleDown/>` |
 
 ## 主题定制
 
diff --git a/src/packages/trendarrow/doc.zh-TW.md b/src/packages/trendarrow/doc.zh-TW.md
index 07083d9640..1eec99e730 100644
--- a/src/packages/trendarrow/doc.zh-TW.md
+++ b/src/packages/trendarrow/doc.zh-TW.md
@@ -23,8 +23,8 @@ import { TrendArrow, Cell } from '@nutui/nutui-react'
 const App = () => {
   return (
     <Cell>
-        <TrendArrow syncColor={false} value={1} />
-        <TrendArrow syncColor={false} value={-0.2535} />
+        <TrendArrow sync={false} value={1} />
+        <TrendArrow sync={false} value={-0.2535} />
     </Cell>
   );
 };
@@ -86,8 +86,8 @@ import { TrendArrow, Cell } from '@nutui/nutui-react'
 const App = () => {
   return (
     <Cell>
-        <TrendArrow arrowLeft value={0.2535} />
-        <TrendArrow arrowLeft value={-0.2535} />
+        <TrendArrow left value={0.2535} />
+        <TrendArrow left value={-0.2535} />
     </Cell>
   );
 };
@@ -152,7 +152,7 @@ const App = () => {
         <TrendArrow value={10.2365} riseColor="rgb(73,143,242)" />
         <TrendArrow value={-0.2535} symbol dropColor="rgb(255, 190, 13)" />
         <TrendArrow
-        syncColor={false}
+        sync={false}
         value={-0.2535}
         symbol
         color="rgb(39,197,48)"
@@ -179,7 +179,7 @@ const App = () => {
   return (
     <Cell>
         <TrendArrow value={10.2365} riseIcon={<Success color="blue" />} />
-        <TrendArrow value={-10.2365} downIcon={<Failure color="red" />} />
+        <TrendArrow value={-10.2365} dropIcon={<Failure color="red" />} />
     </Cell>
   );
 };
@@ -198,13 +198,13 @@ export default App;
 | digits | 小數位精度 | `number` | `2` |
 | symbol | 是否顯示加減號 | `boolean` | `false` |
 | zero | 是否顯示 0 | `boolean` | `false` |
-| arrowLeft | 是否在數字左側顯示箭頭 | `boolean` | `false` |
-| syncColor | 文字顏色是否與箭頭同步 | `boolean` | `true` |
+| left | 是否在數字左側顯示箭頭 | `boolean` | `false` |
+| sync | 文字顏色是否與箭頭同步 | `boolean` | `true` |
 | color | 文字顏色 | `string` | `#333333` |
 | riseColor | 嚮上箭頭顏色 | `string` | `#fa2c19` |
 | dropColor | 嚮下箭頭顏色 | `string` | `#64b578` |
 | riseIcon | 自定義嚮上箭頭icon | `React.ReactNode` | `<TriangleUp/>` |
-| downIcon | 自定義嚮下箭頭icon | `React.ReactNode` | `<TriangleDown/>` |
+| dropIcon | 自定義嚮下箭頭icon | `React.ReactNode` | `<TriangleDown/>` |
 
 
 ## 主題定制
diff --git a/src/packages/trendarrow/trendarrow.taro.tsx b/src/packages/trendarrow/trendarrow.taro.tsx
index ce3f83781f..0025cfab5c 100644
--- a/src/packages/trendarrow/trendarrow.taro.tsx
+++ b/src/packages/trendarrow/trendarrow.taro.tsx
@@ -7,13 +7,13 @@ export interface TrendArrowProps extends BasicComponent {
   digits: number
   symbol: boolean
   zero: boolean
-  arrowLeft: boolean
-  syncColor: boolean
+  left: boolean
+  sync: boolean
   color: string
   riseColor: string
   dropColor: string
   riseIcon: React.ReactNode
-  downIcon: React.ReactNode
+  dropIcon: React.ReactNode
 }
 const defaultProps = {
   ...ComponentDefaults,
@@ -21,13 +21,13 @@ const defaultProps = {
   digits: 2,
   symbol: false,
   zero: false,
-  arrowLeft: false,
-  syncColor: true,
+  left: false,
+  sync: true,
   color: '#333',
   riseColor: '#fa2c19',
   dropColor: '#64b578',
   riseIcon: null,
-  downIcon: null,
+  dropIcon: null,
 } as TrendArrowProps
 
 export const TrendArrow: FunctionComponent<
@@ -38,13 +38,13 @@ export const TrendArrow: FunctionComponent<
     digits,
     symbol,
     zero,
-    arrowLeft,
-    syncColor,
+    left,
+    sync,
     color,
     riseColor,
     dropColor,
     riseIcon,
-    downIcon,
+    dropIcon,
     className,
     style,
     children,
@@ -65,7 +65,7 @@ export const TrendArrow: FunctionComponent<
 
   const calcStyle = (() => {
     const arrowColor = rateTrend.current ? riseColor : dropColor
-    const textEquArrowColor = syncColor ? arrowColor : color
+    const textEquArrowColor = sync ? arrowColor : color
     const style = {
       color: value === 0 ? color : textEquArrowColor,
     }
@@ -93,8 +93,8 @@ export const TrendArrow: FunctionComponent<
     return iconProps
   })()
 
-  const renderContent = (arrowLeft: boolean) => {
-    const classNameSuffix = !arrowLeft ? 'icon-after' : 'icon-before'
+  const renderContent = (left: boolean) => {
+    const classNameSuffix = !left ? 'icon-after' : 'icon-before'
     return (
       <span
         className={`${classPrefix}__${classNameSuffix} ${classPrefix}__value`}
@@ -106,17 +106,17 @@ export const TrendArrow: FunctionComponent<
   }
   return (
     <div className={`${classPrefix} ${className}`} style={style} {...rest}>
-      {!arrowLeft && renderContent(!arrowLeft)}
+      {!left && renderContent(!left)}
       {Number(value) !== 0 && (
         <>
           {rateTrend.current ? (
             <>{riseIcon || <TriangleUp color={calcIconProps.color} />}</>
           ) : (
-            <>{downIcon || <TriangleDown color={calcIconProps.color} />}</>
+            <>{dropIcon || <TriangleDown color={calcIconProps.color} />}</>
           )}
         </>
       )}
-      {arrowLeft && renderContent(!arrowLeft)}
+      {left && renderContent(!left)}
     </div>
   )
 }
diff --git a/src/packages/trendarrow/trendarrow.tsx b/src/packages/trendarrow/trendarrow.tsx
index ddde0f3280..25639cc274 100644
--- a/src/packages/trendarrow/trendarrow.tsx
+++ b/src/packages/trendarrow/trendarrow.tsx
@@ -7,13 +7,13 @@ export interface TrendArrowProps extends BasicComponent {
   digits: number
   symbol: boolean
   zero: boolean
-  arrowLeft: boolean
-  syncColor: boolean
+  left: boolean
+  sync: boolean
   color: string
   riseColor: string
   dropColor: string
   riseIcon: React.ReactNode
-  downIcon: React.ReactNode
+  dropIcon: React.ReactNode
 }
 const defaultProps = {
   ...ComponentDefaults,
@@ -21,13 +21,13 @@ const defaultProps = {
   digits: 2,
   symbol: false,
   zero: false,
-  arrowLeft: false,
-  syncColor: true,
+  left: false,
+  sync: true,
   color: '#333',
   riseColor: '#fa2c19',
   dropColor: '#64b578',
   riseIcon: null,
-  downIcon: null,
+  dropIcon: null,
 } as TrendArrowProps
 
 export const TrendArrow: FunctionComponent<
@@ -38,13 +38,13 @@ export const TrendArrow: FunctionComponent<
     digits,
     symbol,
     zero,
-    arrowLeft,
-    syncColor,
+    left,
+    sync,
     color,
     riseColor,
     dropColor,
     riseIcon,
-    downIcon,
+    dropIcon,
     className,
     style,
     children,
@@ -65,7 +65,7 @@ export const TrendArrow: FunctionComponent<
 
   const calcStyle = (() => {
     const arrowColor = rateTrend.current ? riseColor : dropColor
-    const textEquArrowColor = syncColor ? arrowColor : color
+    const textEquArrowColor = sync ? arrowColor : color
     const style = {
       color: value === 0 ? color : textEquArrowColor,
     }
@@ -93,8 +93,8 @@ export const TrendArrow: FunctionComponent<
     return iconProps
   })()
 
-  const renderContent = (arrowLeft: boolean) => {
-    const classNameSuffix = !arrowLeft ? 'icon-after' : 'icon-before'
+  const renderContent = (left: boolean) => {
+    const classNameSuffix = !left ? 'icon-after' : 'icon-before'
     return (
       <span
         className={`${classPrefix}__${classNameSuffix} ${classPrefix}__value`}
@@ -106,17 +106,17 @@ export const TrendArrow: FunctionComponent<
   }
   return (
     <div className={`${classPrefix} ${className}`} style={style} {...rest}>
-      {!arrowLeft && renderContent(!arrowLeft)}
+      {!left && renderContent(!left)}
       {Number(value) !== 0 && (
         <>
           {rateTrend.current ? (
             <>{riseIcon || <TriangleUp color={calcIconProps.color} />}</>
           ) : (
-            <>{downIcon || <TriangleDown color={calcIconProps.color} />}</>
+            <>{dropIcon || <TriangleDown color={calcIconProps.color} />}</>
           )}
         </>
       )}
-      {arrowLeft && renderContent(!arrowLeft)}
+      {left && renderContent(!left)}
     </div>
   )
 }