diff --git a/scripts/build-taro.mjs b/scripts/build-taro.mjs
index 0d7de9d4b4..6a590bea97 100644
--- a/scripts/build-taro.mjs
+++ b/scripts/build-taro.mjs
@@ -68,6 +68,7 @@ async function buildES(p) {
     [
       'src/packages/**/*.taro.{ts,tsx}',
       'src/packages/**/types.ts',
+      'src/packages/**/icon.tsx',
       'src/packages/**/context.ts',
       'src/packages/**/utils.ts',
       'src/utils/**/*.{ts,tsx}',
diff --git a/src/packages/radio/__test__/radio.spec.tsx b/src/packages/radio/__test__/radio.spec.tsx
index 05ed9a8076..c99aef1654 100644
--- a/src/packages/radio/__test__/radio.spec.tsx
+++ b/src/packages/radio/__test__/radio.spec.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
-import { render, fireEvent, screen } from '@testing-library/react'
-import '@testing-library/jest-dom'
 import { useState } from 'react'
+import { fireEvent, render, screen } from '@testing-library/react'
+import '@testing-library/jest-dom'
 import { Checklist } from '@nutui/icons-react'
 import Radio from '@/packages/radio'
 import RadioGroup from '@/packages/radiogroup'
@@ -16,16 +16,23 @@ describe('radio', () => {
 
   test('radio disable', () => {
     const { container } = render(<Radio disabled>Test Case</Radio>)
-    expect(container.querySelector('.nut-icon')).toHaveClass(
-      'nut-radio-icon-disabled'
-    )
+    expect(container.querySelector('.nut-radio-self-disabled')).toBeTruthy()
   })
 
   test('radio checked', () => {
     const { container } = render(<Radio checked>Test Case</Radio>)
-    expect(container.querySelector('.nut-icon')).toHaveClass(
-      'nut-icon-CheckChecked'
+    expect(container.querySelector('.nut-radio-self-checked')).toBeTruthy()
+  })
+
+  test('radio checked-disabled', () => {
+    const { container } = render(
+      <Radio checked disabled>
+        Test Case
+      </Radio>
     )
+    expect(
+      container.querySelector('.nut-radio-self-checked-disabled')
+    ).toBeTruthy()
   })
 
   test('radio custom icon', () => {
diff --git a/src/packages/radio/demo.taro.tsx b/src/packages/radio/demo.taro.tsx
index a9f5baec2f..59556e4c4b 100644
--- a/src/packages/radio/demo.taro.tsx
+++ b/src/packages/radio/demo.taro.tsx
@@ -10,7 +10,6 @@ import Demo3 from './demos/taro/demo3'
 import Demo4 from './demos/taro/demo4'
 import Demo5 from './demos/taro/demo5'
 import Demo6 from './demos/taro/demo6'
-import Demo7 from './demos/taro/demo7'
 import Demo8 from './demos/taro/demo8'
 import Demo9 from './demos/taro/demo9'
 import Demo10 from './demos/taro/demo10'
@@ -23,7 +22,6 @@ const RadioDemo = () => {
       '74fc5d8a': '基础用法',
       bb7486f4: '选项',
       c1bae1ec: '水平使用',
-      '8a2e2847': '自定义尺寸',
       '70ffa5d8': '自定义图标',
       '70ffa5d9': '自定义图标，通过Group实现列表形式',
       '0f261484': '触发事件',
@@ -37,7 +35,6 @@ const RadioDemo = () => {
       '74fc5d8a': '基礎用法',
       bb7486f4: '選項',
       c1bae1ec: '水準使用',
-      '8a2e2847': '自定義尺寸',
       '70ffa5d8': '自定義圖標',
       '70ffa5d9': '自定義圖標，通過Group實現列表形式',
       '0f261484': '觸發事件',
@@ -51,7 +48,6 @@ const RadioDemo = () => {
       '74fc5d8a': 'Basic Usage',
       bb7486f4: 'Options',
       c1bae1ec: 'Horizontal use',
-      '8a2e2847': 'Custom size',
       '70ffa5d8': 'Custom Icon',
       '70ffa5d9': 'Custom Icon, render list in Group mode',
       '0f261484': 'Trigger Event',
@@ -87,10 +83,6 @@ const RadioDemo = () => {
         </Cell>
         <View className="h2">{translated.c1bae1ec}</View>
         <Demo6 />
-        <View className="h2">{translated['8a2e2847']}</View>
-        <Cell>
-          <Demo7 />
-        </Cell>
         <View className="h2">{translated['70ffa5d8']}</View>
         <Cell>
           <Demo8 />
diff --git a/src/packages/radio/demo.tsx b/src/packages/radio/demo.tsx
index 868a64f3c7..2bcdf67d8e 100644
--- a/src/packages/radio/demo.tsx
+++ b/src/packages/radio/demo.tsx
@@ -7,7 +7,6 @@ import Demo3 from './demos/h5/demo3'
 import Demo4 from './demos/h5/demo4'
 import Demo5 from './demos/h5/demo5'
 import Demo6 from './demos/h5/demo6'
-import Demo7 from './demos/h5/demo7'
 import Demo8 from './demos/h5/demo8'
 import Demo9 from './demos/h5/demo9'
 import Demo10 from './demos/h5/demo10'
@@ -20,7 +19,6 @@ const RadioDemo = () => {
       '74fc5d8a': '基础用法',
       bb7486f4: '选项',
       c1bae1ec: '水平使用',
-      '8a2e2847': '自定义尺寸',
       '70ffa5d8': '自定义图标',
       '70ffa5d9': '自定义图标，通过Group实现列表形式',
       '0f261484': '触发事件',
@@ -34,7 +32,6 @@ const RadioDemo = () => {
       '74fc5d8a': '基礎用法',
       bb7486f4: '選項',
       c1bae1ec: '水準使用',
-      '8a2e2847': '自定義尺寸',
       '70ffa5d8': '自定義圖標',
       '70ffa5d9': '自定義圖標，通過Group實現列表形式',
       '0f261484': '觸發事件',
@@ -48,7 +45,6 @@ const RadioDemo = () => {
       '74fc5d8a': 'Basic Usage',
       bb7486f4: 'Options',
       c1bae1ec: 'Horizontal use',
-      '8a2e2847': 'Custom size',
       '70ffa5d8': 'Custom Icon',
       '70ffa5d9': 'Custom Icon, render list in Group mode',
       '0f261484': 'Trigger Event',
@@ -83,10 +79,6 @@ const RadioDemo = () => {
         </Cell>
         <h2>{translated.c1bae1ec}</h2>
         <Demo6 />
-        <h2>{translated['8a2e2847']}</h2>
-        <Cell>
-          <Demo7 />
-        </Cell>
         <h2>{translated['70ffa5d8']}</h2>
         <Cell>
           <Demo8 />
diff --git a/src/packages/radio/demos/h5/demo7.tsx b/src/packages/radio/demos/h5/demo7.tsx
deleted file mode 100644
index a8c58125d7..0000000000
--- a/src/packages/radio/demos/h5/demo7.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from 'react'
-import { Radio } from '@nutui/nutui-react'
-
-const Demo7 = () => {
-  return (
-    <Radio
-      style={{
-        '--nut-icon-width': '12px',
-        '--nutui-icon-height': '12px',
-      }}
-    >
-      自定义尺寸
-    </Radio>
-  )
-}
-export default Demo7
diff --git a/src/packages/radio/demos/taro/demo7.tsx b/src/packages/radio/demos/taro/demo7.tsx
deleted file mode 100644
index 64a9bbbf85..0000000000
--- a/src/packages/radio/demos/taro/demo7.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from 'react'
-import { Radio } from '@nutui/nutui-react-taro'
-
-const Demo7 = () => {
-  return (
-    <Radio
-      style={{
-        '--nut-icon-width': '12px',
-        '--nutui-icon-height': '12px',
-      }}
-    >
-      自定义尺寸
-    </Radio>
-  )
-}
-export default Demo7
diff --git a/src/packages/radio/icon.tsx b/src/packages/radio/icon.tsx
new file mode 100644
index 0000000000..8844d0618d
--- /dev/null
+++ b/src/packages/radio/icon.tsx
@@ -0,0 +1,24 @@
+import { createElement } from 'react'
+import { mergeProps } from '@/utils/merge-props'
+
+interface IconProps {
+  tag: any
+  classPrefix: string
+  name: 'normal' | 'disabled' | 'checked' | 'checked-disabled'
+}
+
+const Icon = (props: Partial<IconProps>) => {
+  const { tag, classPrefix, name } = mergeProps(
+    {
+      tag: 'div',
+      classPrefix: 'nut-radio-self',
+      name: 'normal',
+    },
+    props
+  )
+  return createElement<{ className: string }>(tag, {
+    className: `${classPrefix} ${classPrefix}-${name}`,
+  })
+}
+
+export default Icon
diff --git a/src/packages/radio/radio.scss b/src/packages/radio/radio.scss
index ebd765a7dd..62cdf87e2f 100644
--- a/src/packages/radio/radio.scss
+++ b/src/packages/radio/radio.scss
@@ -1,5 +1,66 @@
 @import '../radiogroup/radiogroup.scss';
 
+.nut-radio-self {
+  width: 16px;
+  height: 16px;
+  position: relative;
+  box-sizing: border-box;
+  border-radius: 50%;
+
+  &-normal {
+    border: 0.5px solid $color-text-disabled;
+    background: $color-background-overlay;
+  }
+
+  &-checked,
+  &-disabled,
+  &-checked-disabled {
+    &:after {
+      display: block;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      content: ' ';
+      background: $color-primary-text;
+    }
+  }
+
+  &-checked {
+    background: linear-gradient(
+      90deg,
+      $color-primary-stop-1 0%,
+      $color-primary-stop-2 100%
+    );
+    box-shadow: 0px 2px 4px 0px rgba(255, 15, 35, 0.2);
+
+    &:after {
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+    }
+  }
+
+  &-disabled {
+    background: $color-text-disabled;
+
+    &:after {
+      width: 8px;
+      height: 1.5px;
+    }
+  }
+
+  &-checked-disabled {
+    background: $color-primary-disabled-special;
+
+    &:after {
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+    }
+  }
+}
+
 .nut-radio {
   display: flex;
   align-items: center;
diff --git a/src/packages/radio/radio.taro.tsx b/src/packages/radio/radio.taro.tsx
index 1b4b46eb5e..839033643c 100644
--- a/src/packages/radio/radio.taro.tsx
+++ b/src/packages/radio/radio.taro.tsx
@@ -1,15 +1,11 @@
 import React, { FC, useContext } from 'react'
-import {
-  CheckChecked,
-  CheckDisabled,
-  CheckNormal,
-} from '@nutui/icons-react-taro'
 import classNames, { Mapping } from 'classnames'
 import { ITouchEvent, View } from '@tarojs/components'
 import RadioContext from '../radiogroup/context'
 import { BasicComponent, ComponentDefaults } from '@/utils/typings'
 import { usePropsValue } from '@/utils/use-props-value'
 import { RadioPosition, RadioShape } from '@/packages/radio/types'
+import Icon from '@/packages/radio/icon'
 
 export interface RadioProps extends BasicComponent {
   disabled: boolean
@@ -88,18 +84,25 @@ export const Radio: FC<
   }
   const renderIcon = () => {
     const { icon, activeIcon } = props
+
+    function renderIconByDisabledProperty() {
+      return disabled ? (
+        <Icon name="checked-disabled" tag={View} />
+      ) : (
+        <Icon name="checked" tag={View} />
+      )
+    }
+
     if (disabled && !checkedStatement) {
-      return <CheckDisabled className={classNames(color())} />
+      return <Icon name="disabled" tag={View} />
     }
     if (checkedStatement) {
-      return React.isValidElement(activeIcon) ? (
-        React.cloneElement<any>(activeIcon, {
-          ...activeIcon.props,
-          className: classNames(color()),
-        })
-      ) : (
-        <CheckChecked className={classNames(color())} />
-      )
+      return React.isValidElement(activeIcon)
+        ? React.cloneElement<any>(activeIcon, {
+            ...activeIcon.props,
+            className: classNames(color()),
+          })
+        : renderIconByDisabledProperty()
     }
     return React.isValidElement(icon) ? (
       React.cloneElement<any>(icon, {
@@ -107,7 +110,7 @@ export const Radio: FC<
         className: classNames(color()),
       })
     ) : (
-      <CheckNormal className={classNames(color())} />
+      <Icon name="normal" tag={View} />
     )
   }
   const renderLabel = () => {
@@ -117,7 +120,7 @@ export const Radio: FC<
     return (
       <>
         {renderIcon()}
-        <View className={labelcls}>{children}</View>
+        {children ? <View className={labelcls}>{children}</View> : null}
       </>
     )
   }
diff --git a/src/packages/radio/radio.tsx b/src/packages/radio/radio.tsx
index 5eeab9ba28..0c9c4f4f27 100644
--- a/src/packages/radio/radio.tsx
+++ b/src/packages/radio/radio.tsx
@@ -1,10 +1,10 @@
 import React, { FunctionComponent, MouseEventHandler, useContext } from 'react'
-import { CheckChecked, CheckNormal, CheckDisabled } from '@nutui/icons-react'
 import classNames from 'classnames'
 import RadioContext from '../radiogroup/context'
 import { BasicComponent, ComponentDefaults } from '@/utils/typings'
 import { usePropsValue } from '@/utils/use-props-value'
 import { RadioPosition, RadioShape } from '@/packages/radio/types'
+import Icon from '@/packages/radio/icon'
 
 export interface RadioProps extends BasicComponent {
   disabled: boolean
@@ -83,18 +83,25 @@ export const Radio: FunctionComponent<
   }
   const renderIcon = () => {
     const { icon, activeIcon } = props
+
+    function renderIconByDisabledProperty() {
+      return disabled ? (
+        <Icon name="checked-disabled" />
+      ) : (
+        <Icon name="checked" />
+      )
+    }
+
     if (disabled && !checkedStatement) {
-      return <CheckDisabled className={classNames(color())} />
+      return <Icon name="disabled" />
     }
     if (checkedStatement) {
-      return React.isValidElement(activeIcon) ? (
-        React.cloneElement<any>(activeIcon, {
-          ...activeIcon.props,
-          className: classNames(color()),
-        })
-      ) : (
-        <CheckChecked className={classNames(color())} />
-      )
+      return React.isValidElement(activeIcon)
+        ? React.cloneElement<any>(activeIcon, {
+            ...activeIcon.props,
+            className: classNames(color()),
+          })
+        : renderIconByDisabledProperty()
     }
     return React.isValidElement(icon) ? (
       React.cloneElement<any>(icon, {
@@ -102,7 +109,7 @@ export const Radio: FunctionComponent<
         className: classNames(color()),
       })
     ) : (
-      <CheckNormal className={classNames(color())} />
+      <Icon name="normal" />
     )
   }
   const renderLabel = () => {
@@ -112,7 +119,7 @@ export const Radio: FunctionComponent<
     return (
       <>
         {renderIcon()}
-        <div className={labelcls}>{children}</div>
+        {children ? <div className={labelcls}>{children}</div> : null}
       </>
     )
   }