diff --git a/scripts/build-taro.mjs b/scripts/build-taro.mjs
index ae4f270888..1500f00ae2 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/checkbox/__test__/__snapshots__/checkbox.spec.tsx.snap b/src/packages/checkbox/__test__/__snapshots__/checkbox.spec.tsx.snap
index 43eeb2ebe9..d8d689d5fd 100644
--- a/src/packages/checkbox/__test__/__snapshots__/checkbox.spec.tsx.snap
+++ b/src/packages/checkbox/__test__/__snapshots__/checkbox.spec.tsx.snap
@@ -5,19 +5,9 @@ exports[`should match snapshot 1`] = `
   <div
     class="nut-checkbox nut-checkbox-reverse"
   >
-    <svg
-      aria-labelledby="Checked"
-      class="nut-icon nut-icon-Checked nut-checkbox-icon nut-checkbox-icon-checked"
-      role="presentation"
-      viewBox="0 0 1024 1024"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M512 0C230.4 0 0 230.4 0 512s230.4 512 512 512 512-230.4 512-512S793.6 0 512 0m281.6 369.78c-14.22 11.38-193.42 130.84-321.42 321.42 0 0 0 2.84-2.85 2.84-8.53 5.69-48.35 36.98-88.17-8.53-39.82-51.2-62.58-99.56-142.23-142.22-2.84 0-2.84-2.85-2.84-2.85-8.53-11.38-39.82-56.89 19.91-56.88 45.51 0 91.02 11.38 162.13 73.95 5.69 5.69 14.22 5.69 17.07 0 34.13-39.82 173.51-190.58 332.8-238.93 0 0 19.91-2.85 31.29 14.22 5.69 11.38 11.38 22.76-5.69 36.98"
-        fill="currentColor"
-        fill-opacity="0.9"
-      />
-    </svg>
+    <div
+      class="nut-checkbox-self nut-checkbox-self-checked"
+    />
     <span
       class="nut-checkbox-label "
     >
diff --git a/src/packages/checkbox/__test__/checkbox.spec.tsx b/src/packages/checkbox/__test__/checkbox.spec.tsx
index e453285673..ed68fcc713 100644
--- a/src/packages/checkbox/__test__/checkbox.spec.tsx
+++ b/src/packages/checkbox/__test__/checkbox.spec.tsx
@@ -75,7 +75,7 @@ test('should fireEvent correctly', () => {
 
   fireEvent.click(getByTestId('checkbox3'))
   fireEvent.click(getByTestId('checkbox1'))
-  const icons = container.querySelectorAll('.nut-checkbox-icon-checked')
+  const icons = container.querySelectorAll('.nut-checkbox-self-checked')
   expect(icons.length).toBe(1)
   expect(limit).toBeCalledWith('min')
 
@@ -117,28 +117,26 @@ test('Render checkboxs by configure indeterminate', () => {
   const { container } = render(
     <Checkbox value="1" checked label="labe1" indeterminate />
   )
-  expect(
-    container.querySelector('.nut-checkbox-icon-indeterminate')
-  ).toBeTruthy()
+  expect(container.querySelector('.nut-checkbox-self-disabled')).toBeTruthy()
 })
 
 test('Render checkboxs by configure disabled', () => {
   const { container } = render(
     <Checkbox value="1" checked label="labe1" disabled />
   )
-  expect(container.querySelector('.nut-checkbox-icon-disabled')).toBeTruthy()
+  expect(
+    container.querySelector('.nut-checkbox-self-checked-disabled')
+  ).toBeTruthy()
 })
 
 test('Render checkboxs by configure disabled and indeterminate', () => {
   const { container } = render(
     <Checkbox value="1" checked label="labe1" disabled indeterminate />
   )
-  expect(
-    container.querySelector('.nut-checkbox-icon-indeterminate')
-  ).toBeTruthy()
-  expect(
-    container.querySelector('.nut-checkbox-icon-indeterminate')
-  ).toHaveClass('nut-checkbox-icon-disabled')
+  expect(container.querySelector('.nut-checkbox-self-disabled')).toBeTruthy()
+  // expect(
+  //   container.querySelector('.nut-checkbox-self-indeterminate')
+  // ).toHaveClass('nut-checkbox-self-disabled')
 })
 
 test('list model should fireEvent correctly', () => {
@@ -181,7 +179,7 @@ test('list model should fireEvent correctly', () => {
 
   fireEvent.click(getByTestId('checkbox3'))
   fireEvent.click(getByTestId('checkbox1'))
-  const icons = container.querySelectorAll('.nut-checkbox-icon-checked')
+  const icons = container.querySelectorAll('.nut-checkbox-self-checked')
   expect(icons.length).toBe(1)
   expect(limit).toBeCalledWith('min')
 
diff --git a/src/packages/checkbox/checkbox.scss b/src/packages/checkbox/checkbox.scss
index 4ec7292b9a..494bb8dd38 100644
--- a/src/packages/checkbox/checkbox.scss
+++ b/src/packages/checkbox/checkbox.scss
@@ -1,46 +1,82 @@
 @import '../checkboxgroup/checkboxgroup.scss';
 
-.nut-checkbox {
-  display: flex;
-  align-items: center;
+.nut-checkbox-self {
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+  position: relative;
+  box-sizing: border-box;
+  border-radius: 50%;
+
+  &-normal {
+    border: 0.5px solid $color-text-disabled;
+    background: $color-background-overlay;
+  }
 
-  &-icon {
-    color: $color-text-disabled;
-    font-size: $checkbox-icon-font-size;
+  &-checked,
+  &-disabled,
+  &-checked-disabled {
+    &:after {
+      display: block;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      content: ' ';
+      background: $color-primary-text;
+    }
   }
 
-  &-icon-checked {
-    color: $color-primary;
-    transition-duration: 0.3s;
-    transition-property: color, border-color, background-color;
+  &-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;
 
-    &.nut-checkbox-icon-disabled {
-      color: $color-primary-disabled-special;
+    &:after {
+      width: 8px;
+      height: 1.5px;
     }
   }
 
+  &-checked-disabled {
+    background: $color-primary-disabled-special;
+
+    &:after {
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+    }
+  }
+}
+
+.nut-checkbox {
+  display: flex;
+  align-items: center;
+
   &-label {
     margin-left: $checkbox-label-margin-left;
     font-size: $checkbox-label-font-size;
     color: $checkbox-label-color;
+    white-space: nowrap;
 
     &-disabled {
       color: $color-text-disabled;
     }
   }
 
-  &-icon-indeterminate {
-    color: $color-primary;
-
-    &.nut-checkbox-icon-disabled {
-      color: $color-primary-disabled-special;
-    }
-  }
-
-  &-icon-disabled {
-    color: $color-text-disabled;
-  }
-
   &-reverse {
     flex-direction: row-reverse;
 
diff --git a/src/packages/checkbox/checkbox.taro.tsx b/src/packages/checkbox/checkbox.taro.tsx
index 41cdce02e0..b50d83fe7e 100644
--- a/src/packages/checkbox/checkbox.taro.tsx
+++ b/src/packages/checkbox/checkbox.taro.tsx
@@ -1,11 +1,11 @@
 import React, { ReactNode, useContext, useEffect, useState, FC } from 'react'
-import { CheckDisabled, Checked, CheckNormal } from '@nutui/icons-react-taro'
 import classNames from 'classnames'
 import { View } from '@tarojs/components'
 import { BasicComponent, ComponentDefaults } from '@/utils/typings'
 import Context from '../checkboxgroup/context'
 import { usePropsValue } from '@/utils/use-props-value'
 import { CheckboxLabelPosition } from '@/packages/checkboxgroup/types'
+import Icon from '@/packages/checkbox/icon'
 
 export type CheckboxShape = 'button' | 'round'
 
@@ -97,31 +97,31 @@ export const Checkbox: FC<
   const renderIcon = () => {
     if (innerDisabled) {
       if (innerIndeterminate) {
-        return <CheckDisabled className={color()} />
+        return <Icon tag={View} name="disabled" />
       }
       if (innerChecked) {
-        return <Checked className={color()} />
+        return <Icon tag={View} name="checked-disabled" />
       }
-      return <CheckDisabled className={color()} />
+      return <Icon tag={View} name="disabled" />
     }
     if (!innerChecked) {
       return React.isValidElement(icon) ? (
         icon
       ) : (
-        <CheckNormal className={color()} />
+        <Icon tag={View} name="normal" />
       )
     }
     if (innerIndeterminate) {
       return React.isValidElement(indeterminateIcon) ? (
         indeterminateIcon
       ) : (
-        <CheckDisabled className={color()} />
+        <Icon tag={View} name="disabled" />
       )
     }
     return React.isValidElement(activeIcon) ? (
       activeIcon
     ) : (
-      <Checked className={color()} />
+      <Icon tag={View} name="checked" />
     )
   }
   const color = () => {
diff --git a/src/packages/checkbox/checkbox.tsx b/src/packages/checkbox/checkbox.tsx
index 71c8dd4300..edb8f11b91 100644
--- a/src/packages/checkbox/checkbox.tsx
+++ b/src/packages/checkbox/checkbox.tsx
@@ -5,12 +5,12 @@ import React, {
   useEffect,
   useState,
 } from 'react'
-import { CheckDisabled, Checked, CheckNormal } from '@nutui/icons-react'
 import classNames from 'classnames'
 import { BasicComponent, ComponentDefaults } from '@/utils/typings'
 import Context from '../checkboxgroup/context'
 import { usePropsValue } from '@/utils/use-props-value'
 import { CheckboxLabelPosition } from '@/packages/checkboxgroup/types'
+import Icon from '@/packages/checkbox/icon'
 
 export type CheckboxShape = 'button' | 'round'
 
@@ -102,52 +102,29 @@ export const Checkbox: FunctionComponent<
   const renderIcon = () => {
     if (innerDisabled) {
       if (innerIndeterminate) {
-        return <CheckDisabled className={color()} />
+        return <Icon name="disabled" />
       }
       if (innerChecked) {
-        return <Checked className={color()} />
+        return <Icon name="checked-disabled" />
       }
-      return <CheckDisabled className={color()} />
+      return <Icon name="disabled" />
     }
     if (!innerChecked) {
-      return React.isValidElement(icon) ? (
-        icon
-      ) : (
-        <CheckNormal className={color()} />
-      )
+      return React.isValidElement(icon) ? icon : <Icon name="normal" />
     }
     if (innerIndeterminate) {
       return React.isValidElement(indeterminateIcon) ? (
         indeterminateIcon
       ) : (
-        <CheckDisabled className={color()} />
+        <Icon name="disabled" />
       )
     }
     return React.isValidElement(activeIcon) ? (
       activeIcon
     ) : (
-      <Checked className={color()} />
+      <Icon name="checked" />
     )
   }
-  const color = () => {
-    const cls = `${classPrefix}-icon `
-    if (innerDisabled) {
-      if (innerChecked && !innerIndeterminate) {
-        return `${cls}${classPrefix}-icon-checked ${classPrefix}-icon-disabled`
-      }
-      if (innerChecked && innerIndeterminate) {
-        return `${cls}${classPrefix}-icon-indeterminate ${classPrefix}-icon-disabled`
-      }
-      return `${cls}${classPrefix}-icon-disabled`
-    }
-    if (innerChecked) {
-      if (innerIndeterminate) {
-        return `${cls}${classPrefix}-icon-indeterminate`
-      }
-      return `${cls}${classPrefix}-icon-checked`
-    }
-    return cls
-  }
   const renderLabel = () => {
     return (
       <span
diff --git a/src/packages/checkbox/icon.tsx b/src/packages/checkbox/icon.tsx
new file mode 100644
index 0000000000..44f2237b30
--- /dev/null
+++ b/src/packages/checkbox/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-checkbox-self',
+      name: 'normal',
+    },
+    props
+  )
+  return createElement<{ className: string }>(tag, {
+    className: `${classPrefix} ${classPrefix}-${name}`,
+  })
+}
+
+export default Icon