diff --git a/migrate-from-v2.md b/migrate-from-v2.md
index 5bd3f8ec5e..c990d51b27 100644
--- a/migrate-from-v2.md
+++ b/migrate-from-v2.md
@@ -829,6 +829,8 @@ plugins: [
 - `upIconName` 重命名为 `riseIcon`，类型修改为 `React.Node`
 - `downIconName` 重命名为 `dropIcon`，类型修改为 `React.Node`
 - 移除 `iconSize`，通过`riseIcon`、`dropIcon`自定义传入icon大小
+- 新增 `size`，star 尺寸, 默认值 `normal` 为 `12px`
+- 新增 `showScore`, 展示评分
 
 #### Video
 
diff --git a/src/config.json b/src/config.json
index aa8170b338..b5737d8d6c 100644
--- a/src/config.json
+++ b/src/config.json
@@ -630,6 +630,7 @@
           "sort": 1,
           "show": true,
           "taro": true,
+          "v14": true,
           "author": "dsj"
         },
         {
@@ -989,8 +990,8 @@
           "sort": 17,
           "show": true,
           "taro": true,
-          "author": "songsong",
-          "v14": true
+          "v14": true,
+          "author": "songsong"
         },
         {
           "version": "2.0.0",
diff --git a/src/packages/rate/__test__/__snapshots__/rate.spec.tsx.snap b/src/packages/rate/__test__/__snapshots__/rate.spec.tsx.snap
new file mode 100644
index 0000000000..439759097b
--- /dev/null
+++ b/src/packages/rate/__test__/__snapshots__/rate.spec.tsx.snap
@@ -0,0 +1,31 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`size test 1`] = `
+<div>
+  <div
+    class="nut-rate"
+  >
+    <div
+      class="nut-rate-item nut-rate-item-large"
+    >
+      <div
+        class="nut-rate-item-icon nut-rate-item-icon-disabled"
+      >
+        <svg
+          aria-labelledby="StarFill"
+          class="nut-icon nut-icon-StarFill "
+          role="presentation"
+          viewBox="0 0 1024 1024"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="m908.1 353.1-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3-12.3 12.7-12.1 32.9.6 45.3l183.7 179.1-43.4 252.9c-1.2 6.9-.1 14.1 3.2 20.3 8.2 15.6 27.6 21.7 43.2 13.4L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3"
+            fill="currentColor"
+            fill-opacity="0.9"
+          />
+        </svg>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/src/packages/rate/__test__/rate.spec.tsx b/src/packages/rate/__test__/rate.spec.tsx
index c51fbd06c6..7fecf8af7c 100644
--- a/src/packages/rate/__test__/rate.spec.tsx
+++ b/src/packages/rate/__test__/rate.spec.tsx
@@ -74,6 +74,22 @@ test('allowHalf test', () => {
     )
   }
 })
+test('size test', () => {
+  const { container } = render(<Rate count={1} size="large" />)
+  const el = container.querySelector('.nut-rate-item')
+  if (el) {
+    expect(el).toHaveClass('nut-rate-item-large')
+  }
+  expect(container).toMatchSnapshot()
+})
+
+test('showScore test', () => {
+  const { container } = render(<Rate count={1} showScore defaultValue={0.5} />)
+  const el = container.querySelector('.nut-rate-score')
+  if (el) {
+    expect(el?.innerHTML).toBe('0.5')
+  }
+})
 
 test('touchable', () => {
   const state = {
diff --git a/src/packages/rate/demos/h5/demo1.tsx b/src/packages/rate/demos/h5/demo1.tsx
index 871713ef3b..cdb18fbbbf 100644
--- a/src/packages/rate/demos/h5/demo1.tsx
+++ b/src/packages/rate/demos/h5/demo1.tsx
@@ -1,7 +1,13 @@
 import React from 'react'
-import { Rate } from '@nutui/nutui-react'
+import { Rate, Space } from '@nutui/nutui-react'
 
 const Demo1 = () => {
-  return <Rate defaultValue={3} />
+  return (
+    <Space direction="vertical">
+      <Rate defaultValue={3} size="large" />
+      <Rate defaultValue={3} />
+      <Rate defaultValue={3} size="small" />
+    </Space>
+  )
 }
 export default Demo1
diff --git a/src/packages/rate/demos/h5/demo2.tsx b/src/packages/rate/demos/h5/demo2.tsx
index ecb3036b74..fc837a45f5 100644
--- a/src/packages/rate/demos/h5/demo2.tsx
+++ b/src/packages/rate/demos/h5/demo2.tsx
@@ -3,6 +3,6 @@ import { Rate } from '@nutui/nutui-react'
 
 const Demo2 = () => {
   const [score, setScore] = useState(2)
-  return <Rate value={score} onChange={(value) => setScore(value)} />
+  return <Rate value={score} showScore onChange={(value) => setScore(value)} />
 }
 export default Demo2
diff --git a/src/packages/rate/demos/h5/demo5.tsx b/src/packages/rate/demos/h5/demo5.tsx
index 78c747a11a..bf39d98f5e 100644
--- a/src/packages/rate/demos/h5/demo5.tsx
+++ b/src/packages/rate/demos/h5/demo5.tsx
@@ -2,6 +2,6 @@ import React from 'react'
 import { Rate } from '@nutui/nutui-react'
 
 const Demo5 = () => {
-  return <Rate count={6} defaultValue={3} />
+  return <Rate count={1} defaultValue={1} />
 }
 export default Demo5
diff --git a/src/packages/rate/demos/taro/demo1.tsx b/src/packages/rate/demos/taro/demo1.tsx
index c8d22ffd60..20f6942736 100644
--- a/src/packages/rate/demos/taro/demo1.tsx
+++ b/src/packages/rate/demos/taro/demo1.tsx
@@ -1,7 +1,13 @@
 import React from 'react'
-import { Rate } from '@nutui/nutui-react-taro'
+import { Rate, Space } from '@nutui/nutui-react-taro'
 
 const Demo1 = () => {
-  return <Rate defaultValue={3} />
+  return (
+    <Space direction="vertical">
+      <Rate defaultValue={3} size="large" />
+      <Rate defaultValue={3} />
+      <Rate defaultValue={3} size="small" />
+    </Space>
+  )
 }
 export default Demo1
diff --git a/src/packages/rate/demos/taro/demo2.tsx b/src/packages/rate/demos/taro/demo2.tsx
index 9081364d68..a3739f216f 100644
--- a/src/packages/rate/demos/taro/demo2.tsx
+++ b/src/packages/rate/demos/taro/demo2.tsx
@@ -3,6 +3,6 @@ import { Rate } from '@nutui/nutui-react-taro'
 
 const Demo2 = () => {
   const [score, setScore] = useState(2)
-  return <Rate value={score} onChange={(value) => setScore(value)} />
+  return <Rate value={score} showScore onChange={(value) => setScore(value)} />
 }
 export default Demo2
diff --git a/src/packages/rate/demos/taro/demo5.tsx b/src/packages/rate/demos/taro/demo5.tsx
index 9f0ebe2882..6d7b0d1930 100644
--- a/src/packages/rate/demos/taro/demo5.tsx
+++ b/src/packages/rate/demos/taro/demo5.tsx
@@ -2,6 +2,6 @@ import React from 'react'
 import { Rate } from '@nutui/nutui-react-taro'
 
 const Demo5 = () => {
-  return <Rate count={6} defaultValue={3} />
+  return <Rate count={1} defaultValue={1} />
 }
 export default Demo5
diff --git a/src/packages/rate/doc.en-US.md b/src/packages/rate/doc.en-US.md
index 57e94f2cdc..fa90b6072d 100644
--- a/src/packages/rate/doc.en-US.md
+++ b/src/packages/rate/doc.en-US.md
@@ -112,6 +112,8 @@ import { Rate } from '@nutui/nutui-react'
 
 | Property | Description | Type | Default |
 | --- | --- | --- | --- |
+| size | Score size | `large` \| `normal` \| `small` | `normal` |
+| showScore | Show Score | `boolean` | `false` |
 | defaultValue | Uncontrolled star value | `number` | `0` |
 | value | Controlled star value | `number` | `0` |
 | count | total number of stars | `number` | `5` |
@@ -133,6 +135,9 @@ The component provides the following CSS variables, which can be used to customi
 
 | Name | Description | Default Value |
 | --- | --- | --- |
-| \--nutui-rate-item-margin | rate item margin | `14px` |
-| \--nutui-rate-icon-color | checked icon color | `$color-primary` |
-| \--nutui-rate-icon-inactive-color | unchecked icon color | `$color-text-disabled` |
+| \--nutui-rate-item-margin | spacing | `4px` |
+| \--nutui-rate-icon-color | icon activation color | `$color-primary-icon` |
+| \--nutui-rate-icon-inactive-color | icon inactive color | `$color-primary-icon-disabled` |
+| \--nutui-rate-icon-size | icon size | `12px` |
+| \--nutui-rate-font-color | Rating font color | `$color-primary-icon` |
+| \--nutui-rate-font-size | Rating font size | `12px` |
diff --git a/src/packages/rate/doc.md b/src/packages/rate/doc.md
index 4ea9531b31..d9d1c69c8f 100644
--- a/src/packages/rate/doc.md
+++ b/src/packages/rate/doc.md
@@ -112,6 +112,8 @@ import { Rate } from '@nutui/nutui-react'
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
+| size | star 尺寸 | `large` \| `normal` \| `small` | `normal` |
+| showScore | 展示评分 | `boolean` | `false` |
 | defaultValue | 非受控的 star 默认值 | `number` | `0` |
 | value | 受控的 star 数值 | `number` | `0` |
 | count | star 总数 | `number` | `5` |
@@ -133,6 +135,9 @@ import { Rate } from '@nutui/nutui-react'
 
 | 名称 | 说明 | 默认值 |
 | --- | --- | --- |
-| \--nutui-rate-item-margin | 间距 | `14px` |
-| \--nutui-rate-icon-color | icon 激活颜色 | `$color-primary` |
-| \--nutui-rate-icon-inactive-color | icon 未激活颜色 | `$color-text-disabled` |
+| \--nutui-rate-item-margin | 间距 | `4px` |
+| \--nutui-rate-icon-color | icon 激活颜色 | `$color-primary-icon` |
+| \--nutui-rate-icon-inactive-color | icon 未激活颜色 | `$color-primary-icon-disabled` |
+| \--nutui-rate-icon-size | icon 尺寸 | `12px` |
+| \--nutui-rate-font-color | 评分字体颜色 | `$color-primary-icon` |
+| \--nutui-rate-font-size | 评分字体大小 | `12px` |
diff --git a/src/packages/rate/doc.taro.md b/src/packages/rate/doc.taro.md
index f1676e963b..1709373b14 100644
--- a/src/packages/rate/doc.taro.md
+++ b/src/packages/rate/doc.taro.md
@@ -112,6 +112,8 @@ import { Rate } from '@nutui/nutui-react-taro'
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
+| size | star 尺寸 | `large` \| `normal` \| `small` | `normal` |
+| showScore | 展示评分 | `boolean` | `false` |
 | defaultValue | 非受控的 star 默认值 | `number` | `0` |
 | value | 受控的 star 数值 | `number` | `0` |
 | count | star 总数 | `number` | `5` |
@@ -133,6 +135,9 @@ import { Rate } from '@nutui/nutui-react-taro'
 
 | 名称 | 说明 | 默认值 |
 | --- | --- | --- |
-| \--nutui-rate-item-margin | 间距 | `14px` |
-| \--nutui-rate-icon-color | icon 激活颜色 | `$color-primary` |
-| \--nutui-rate-icon-inactive-color | icon 未激活颜色 | `$color-text-disabled` |
+| \--nutui-rate-item-margin | 间距 | `4px` |
+| \--nutui-rate-icon-color | icon 激活颜色 | `$color-primary-icon` |
+| \--nutui-rate-icon-inactive-color | icon 未激活颜色 | `$color-primary-icon-disabled` |
+| \--nutui-rate-icon-size | icon 尺寸 | `12px` |
+| \--nutui-rate-font-color | 评分字体颜色 | `$color-primary-icon` |
+| \--nutui-rate-font-size | 评分字体大小 | `12px` |
diff --git a/src/packages/rate/doc.zh-TW.md b/src/packages/rate/doc.zh-TW.md
index 84f4710a16..e64b1ee237 100644
--- a/src/packages/rate/doc.zh-TW.md
+++ b/src/packages/rate/doc.zh-TW.md
@@ -112,6 +112,8 @@ import { Rate } from '@nutui/nutui-react'
 
 | 屬性 | 說明 | 類型 | 默認值 |
 | --- | --- | --- | --- |
+| size | star 尺寸 | `large` \| `normal` \| `small` | `normal` |
+| showScore | 展示評分 | `boolean` | `false` |
 | defaultValue | 非受控的 star 默認值 | `number` | `0` |
 | value | 受控的 star 數值 | `number` | `0` |
 | count | star 總數 | `number` | `5` |
@@ -133,6 +135,9 @@ import { Rate } from '@nutui/nutui-react'
 
 | 名稱 | 說明 | 默認值 |
 | --- | --- | --- |
-| \--nutui-rate-item-margin | 間距 | `14px` |
-| \--nutui-rate-icon-color | icon 激活顏色 | `$color-primary` |
-| \--nutui-rate-icon-inactive-color | icon 未激活顏色 | `$color-text-disabled` |
+| \--nutui-rate-item-margin | 間距 | `4px` |
+| \--nutui-rate-icon-color | icon 激活顏色 | `$color-primary-icon` |
+| \--nutui-rate-icon-inactive-color | icon 未激活顏色 | `$color-primary-icon-disabled` |
+| \--nutui-rate-icon-size | icon 尺寸 | `12px` |
+| \--nutui-rate-font-color | 評分字體顏色 | `$color-primary-icon` |
+| \--nutui-rate-font-size | 評分字體大小 | `12px` |
diff --git a/src/packages/rate/index.taro.ts b/src/packages/rate/index.taro.ts
index 4722b027de..bdc6ea4d5a 100644
--- a/src/packages/rate/index.taro.ts
+++ b/src/packages/rate/index.taro.ts
@@ -1,4 +1,4 @@
 import { Rate } from './rate.taro'
 
-export type { RateProps } from './rate.taro'
+export type { RateSize, RateProps } from './types'
 export default Rate
diff --git a/src/packages/rate/index.ts b/src/packages/rate/index.ts
index 1309ce035c..2409362ab8 100644
--- a/src/packages/rate/index.ts
+++ b/src/packages/rate/index.ts
@@ -1,4 +1,4 @@
 import { Rate } from './rate'
 
-export type { RateProps } from './rate'
+export type { RateSize, RateProps } from './types'
 export default Rate
diff --git a/src/packages/rate/rate.scss b/src/packages/rate/rate.scss
index 48a1dd1d8d..d72fd26e63 100644
--- a/src/packages/rate/rate.scss
+++ b/src/packages/rate/rate.scss
@@ -16,13 +16,9 @@
 
   &-item {
     display: flex;
+    align-items: center;
     flex-shrink: 0;
     position: relative;
-    margin-left: $rate-item-margin;
-
-    &:first-child {
-      margin-left: 0;
-    }
 
     &-half {
       position: absolute;
@@ -37,8 +33,41 @@
       }
     }
 
+    &-normal {
+      margin-left: $rate-item-margin;
+      .nut-icon {
+        height: $rate-icon-size;
+        width: $rate-icon-size;
+      }
+    }
+
+    &-large {
+      margin-left: calc($rate-item-margin * 2);
+      .nut-icon {
+        height: calc($rate-icon-size + 8px);
+        width: calc($rate-icon-size + 8px);
+      }
+    }
+
+    &-small {
+      margin-left: calc($rate-item-margin / 2);
+      .nut-icon {
+        height: calc($rate-icon-size - 4px);
+        width: calc($rate-icon-size - 4px);
+      }
+    }
+
+    &-normal,
+    &-large,
+    &-small {
+      &:first-child {
+        margin-left: 0;
+      }
+    }
+
     &-icon {
       display: flex;
+      align-items: center;
       cursor: pointer;
 
       .nut-icon {
@@ -66,18 +95,59 @@
       }
     }
   }
+
+  &-score {
+    display: inline-flex;
+    align-items: center;
+    color: $rate-font-color;
+    font-family: 'JD';
+    line-height: 1;
+
+    &-normal {
+      padding-left: $rate-item-margin;
+      font-size: $rate-font-size;
+    }
+
+    &-large {
+      font-size: calc($rate-font-size + 6px);
+      padding-left: calc($rate-item-margin * 2);
+    }
+
+    &-small {
+      font-size: calc($rate-font-size - 2px);
+      padding-left: calc($rate-item-margin / 2);
+    }
+
+    &-disabled {
+      color: $rate-icon-inactive-color;
+    }
+  }
 }
 
 [dir='rtl'] .nut-rate,
 .nut-rtl .nut-rate {
   &-item {
-    margin-right: 0;
-    margin-left: $rate-item-margin;
+    margin-left: 0;
+    &:first-child {
+      margin-right: 0;
+    }
+
+    &-normal {
+      margin-right: $rate-item-margin;
+    }
+
+    &-large {
+      margin-right: calc($rate-item-margin * 2);
+    }
+
+    &-small {
+      margin-right: calc($rate-item-margin - 2px);
+    }
 
     &:last-child {
-      margin-right: 0;
       margin-left: 0;
     }
+
     &-half {
       left: auto;
       right: 0;
@@ -95,4 +165,20 @@
       }
     }
   }
+
+  &-score {
+    padding-left: 0;
+
+    &-large {
+      padding-right: calc($rate-item-margin * 2);
+    }
+
+    &-normal {
+      padding-right: $rate-item-margin;
+    }
+
+    &-small {
+      padding-right: calc($rate-item-margin - 2px);
+    }
+  }
 }
diff --git a/src/packages/rate/rate.taro.tsx b/src/packages/rate/rate.taro.tsx
index e17aee116c..6511c7ac77 100644
--- a/src/packages/rate/rate.taro.tsx
+++ b/src/packages/rate/rate.taro.tsx
@@ -8,29 +8,17 @@ import React, {
 import classNames from 'classnames'
 import { StarFill } from '@nutui/icons-react-taro'
 import { useReady } from '@tarojs/taro'
-import { View, ITouchEvent } from '@tarojs/components'
-import { BasicComponent, ComponentDefaults } from '@/utils/typings'
+import { View, Text, ITouchEvent } from '@tarojs/components'
+import { ComponentDefaults } from '@/utils/typings'
 import { usePropsValue } from '@/utils/use-props-value'
 import { getRectByTaro } from '@/utils/get-rect-by-taro'
 import useRefs from '@/utils/use-refs'
-
-export interface RateProps extends BasicComponent {
-  count: number
-  value: number
-  defaultValue: number
-  min: number
-  checkedIcon: React.ReactNode
-  uncheckedIcon: React.ReactNode
-  disabled: boolean
-  readOnly: boolean
-  allowHalf: boolean
-  touchable: boolean
-  onChange: (value: number) => void
-  onTouchEnd: (e: TouchEvent, value: number) => void
-}
+import { RateProps } from './types'
 
 const defaultProps = {
   ...ComponentDefaults,
+  size: 'normal',
+  showScore: false,
   count: 5,
   min: 0,
   checkedIcon: null,
@@ -44,6 +32,8 @@ export const Rate: FunctionComponent<Partial<RateProps>> = (props) => {
   const {
     className,
     style,
+    size,
+    showScore,
     count,
     value,
     defaultValue,
@@ -216,7 +206,7 @@ export const Rate: FunctionComponent<Partial<RateProps>> = (props) => {
       {countArray.map((n, index) => {
         return (
           <View
-            className={`${classPrefix}-item`}
+            className={`${classPrefix}-item ${classPrefix}-item-${size}`}
             key={n}
             ref={setRefs(index)}
             onClick={(event) => onClick(event, n)}
@@ -243,6 +233,19 @@ export const Rate: FunctionComponent<Partial<RateProps>> = (props) => {
           </View>
         )
       })}
+      {showScore ? (
+        <Text
+          className={classNames(
+            `${classPrefix}-score`,
+            `${classPrefix}-score-${size}`,
+            {
+              [`${classPrefix}-score-disabled`]: disabled,
+            }
+          )}
+        >
+          {score.toFixed(1)}
+        </Text>
+      ) : null}
     </View>
   )
 }
diff --git a/src/packages/rate/rate.tsx b/src/packages/rate/rate.tsx
index a461f4e99f..17a382fab9 100644
--- a/src/packages/rate/rate.tsx
+++ b/src/packages/rate/rate.tsx
@@ -7,28 +7,16 @@ import React, {
 } from 'react'
 import classNames from 'classnames'
 import { StarFill } from '@nutui/icons-react'
-import { BasicComponent, ComponentDefaults } from '@/utils/typings'
+import { ComponentDefaults } from '@/utils/typings'
 import { usePropsValue } from '@/utils/use-props-value'
 import { getRect } from '@/utils/use-client-rect'
 import useRefs from '@/utils/use-refs'
-
-export interface RateProps extends BasicComponent {
-  count: number
-  value: number
-  defaultValue: number
-  min: number
-  checkedIcon: React.ReactNode
-  uncheckedIcon: React.ReactNode
-  disabled: boolean
-  readOnly: boolean
-  allowHalf: boolean
-  touchable: boolean
-  onChange: (value: number) => void
-  onTouchEnd: (e: TouchEvent, value: number) => void
-}
+import { RateProps } from './types'
 
 const defaultProps = {
   ...ComponentDefaults,
+  size: 'normal',
+  showScore: false,
   count: 5,
   min: 0,
   checkedIcon: null,
@@ -42,6 +30,8 @@ export const Rate: FunctionComponent<Partial<RateProps>> = (props) => {
   const {
     className,
     style,
+    size,
+    showScore,
     count,
     value,
     defaultValue,
@@ -219,7 +209,7 @@ export const Rate: FunctionComponent<Partial<RateProps>> = (props) => {
       {countArray.map((n, index) => {
         return (
           <div
-            className={`${classPrefix}-item`}
+            className={`${classPrefix}-item ${classPrefix}-item-${size}`}
             key={n}
             ref={setRefs(index)}
             onClick={(event) => onClick(event, n)}
@@ -246,6 +236,19 @@ export const Rate: FunctionComponent<Partial<RateProps>> = (props) => {
           </div>
         )
       })}
+      {showScore ? (
+        <span
+          className={classNames(
+            `${classPrefix}-score`,
+            `${classPrefix}-score-${size}`,
+            {
+              [`${classPrefix}-score-disabled`]: disabled,
+            }
+          )}
+        >
+          {score.toFixed(1)}
+        </span>
+      ) : null}
     </div>
   )
 }
diff --git a/src/packages/rate/types.ts b/src/packages/rate/types.ts
new file mode 100644
index 0000000000..5730be3a89
--- /dev/null
+++ b/src/packages/rate/types.ts
@@ -0,0 +1,20 @@
+import { BasicComponent } from '@/utils/typings'
+
+export type RateSize = 'large' | 'normal' | 'small'
+
+export interface RateProps extends BasicComponent {
+  size: RateSize
+  showScore: boolean
+  count: number
+  value: number
+  defaultValue: number
+  min: number
+  checkedIcon: React.ReactNode
+  uncheckedIcon: React.ReactNode
+  disabled: boolean
+  readOnly: boolean
+  allowHalf: boolean
+  touchable: boolean
+  onChange: (value: number) => void
+  onTouchEnd: (e: TouchEvent, value: number) => void
+}
diff --git a/src/styles/theme-dark.scss b/src/styles/theme-dark.scss
index 8fa047a669..49bbb0da78 100644
--- a/src/styles/theme-dark.scss
+++ b/src/styles/theme-dark.scss
@@ -68,6 +68,7 @@ page {
   // danger color
   --nutui-red-1: #ffebef;
   --nutui-red-2: #ff0f23;
+  --nutui-red-6: #ff3b3b;
 
   // danger color 语义化
   --nutui-color-danger: var(--nutui-red-2); // 背景或文字
@@ -110,6 +111,8 @@ page {
   --nutui-gray-6: #999999;
   // 一级文字色（重要）主要内容用色，常用语常规标题内容、细文浏览、常规按钮文字以及图表引导。
   --nutui-gray-7: #e6e6e6;
+  // icon 禁用颜色
+  --nutui-gray-8: #dadce0;
 
   --nutui-black-1: rgba(255, 255, 255, 0);
   // 蒙层色
diff --git a/src/styles/theme-default.scss b/src/styles/theme-default.scss
index 48e7f23a14..e7d5cd31be 100644
--- a/src/styles/theme-default.scss
+++ b/src/styles/theme-default.scss
@@ -68,6 +68,7 @@ page {
   // danger color
   --nutui-red-1: #ffebef;
   --nutui-red-2: #ff0f23;
+  --nutui-red-6: #ff3333;
 
   // danger color 语义化
   --nutui-color-danger: var(--nutui-red-2); // 背景或文字
@@ -110,6 +111,8 @@ page {
   --nutui-gray-6: #505259;
   // 一级文字色（重要）主要内容用色，常用语常规标题内容、细文浏览、常规按钮文字以及图表引导。
   --nutui-gray-7: #1a1a1a;
+  // icon 未选中颜色
+  --nutui-gray-8: #dadce0;
 
   --nutui-black-1: rgba(0, 0, 0, 0);
   // 蒙层色
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 14c4db7ab1..4184f5ecde 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -18,6 +18,8 @@ $color-primary-gradient-1: linear-gradient(
   $color-primary-stop-1 0%,
   $color-primary-stop-2 100%
 ) !default;
+$color-primary-icon: var(--nutui-red-6, #ff3333) !default;
+$color-primary-icon-disabled: var(--nutui-gray-8, #dadce0) !default;
 
 // 默认色
 $color-default: var(--nutui-color-default) !default;
@@ -1099,12 +1101,15 @@ $notify-warning-background-color: var(
 ) !default;
 
 // rate（✅）
-$rate-item-margin: var(--nutui-rate-item-margin, 14px) !default;
-$rate-icon-color: var(--nutui-rate-icon-color, $color-primary) !default;
+$rate-item-margin: var(--nutui-rate-item-margin, 4px) !default;
+$rate-icon-color: var(--nutui-rate-icon-color, $color-primary-icon) !default;
 $rate-icon-inactive-color: var(
   --nutui-rate-icon-inactive-color,
-  $color-text-disabled
+  $color-primary-icon-disabled
 ) !default;
+$rate-icon-size: var(--nutui-rate-icon-size, 12px) !default;
+$rate-font-color: var(--nutui-rate-font-color, $color-primary-icon) !default;
+$rate-font-size: var(--nutui-rate-font-size, 12px) !default;
 
 // tabbar（✅）
 $tabbar-height: var(--nutui-tabbar-height, 50px) !default;