diff --git a/packages/components/checkbox/README.en-US.md b/packages/components/checkbox/README.en-US.md
index 06f9258332..5aeb0d00a4 100644
--- a/packages/components/checkbox/README.en-US.md
+++ b/packages/components/checkbox/README.en-US.md
@@ -86,12 +86,12 @@ The component provides the following CSS variables, which can be used to customi
 Name | Default Value | Description
 -- | -- | --
 --td-checkbox-bg-color | @bg-color-container | -
---td-checkbox-border-color | @component-stroke | -
+--td-checkbox-border-color | @component-border | -
 --td-checkbox-description-color | @text-color-secondary | -
 --td-checkbox-description-disabled-color | @text-color-disabled | -
 --td-checkbox-description-font | @font-body-medium | -
 --td-checkbox-icon-checked-color | @brand-color | -
---td-checkbox-icon-color | @component-border | -
+--td-checkbox-icon-color | @text-color-anti | -
 --td-checkbox-icon-disabled-bg-color | @bg-color-component-disabled | -
 --td-checkbox-icon-disabled-color | @brand-color-disabled | -
 --td-checkbox-icon-size | 48rpx | -
diff --git a/packages/components/checkbox/README.md b/packages/components/checkbox/README.md
index 1dfb86e493..38e883a4c3 100644
--- a/packages/components/checkbox/README.md
+++ b/packages/components/checkbox/README.md
@@ -154,12 +154,12 @@ change | `(value: CheckboxGroupValue, context: { value: boolean\|number\|string,
 名称 | 默认值 | 描述
 -- | -- | --
 --td-checkbox-bg-color | @bg-color-container | -
---td-checkbox-border-color | @component-stroke | -
+--td-checkbox-border-color | @component-border | -
 --td-checkbox-description-color | @text-color-secondary | -
 --td-checkbox-description-disabled-color | @text-color-disabled | -
 --td-checkbox-description-font | @font-body-medium | -
 --td-checkbox-icon-checked-color | @brand-color | -
---td-checkbox-icon-color | @component-border | -
+--td-checkbox-icon-color | @text-color-anti | -
 --td-checkbox-icon-disabled-bg-color | @bg-color-component-disabled | -
 --td-checkbox-icon-disabled-color | @brand-color-disabled | -
 --td-checkbox-icon-size | 48rpx | -
diff --git a/packages/components/checkbox/_example/special/index.wxss b/packages/components/checkbox/_example/special/index.wxss
index f7b213304f..9586a43aa1 100644
--- a/packages/components/checkbox/_example/special/index.wxss
+++ b/packages/components/checkbox/_example/special/index.wxss
@@ -33,6 +33,7 @@
   left: 1.5px;
   top: 1.5px;
   z-index: 1;
+  font-size: 28rpx;
 }
 
 /* 横向布局 */
diff --git a/packages/components/checkbox/checkbox.less b/packages/components/checkbox/checkbox.less
index b1df3ddb85..68626c7bbb 100644
--- a/packages/components/checkbox/checkbox.less
+++ b/packages/components/checkbox/checkbox.less
@@ -9,12 +9,12 @@
 @checkbox-description-font: var(--td-checkbox-description-font, @font-body-medium);
 @checkbox-vertical-padding: var(--td-checkbox-vertical-padding, @spacer-2);
 @checkbox-bg-color: var(--td-checkbox-bg-color, @bg-color-container);
-@checkbox-border-color: var(--td-checkbox-border-color, @component-stroke);
+@checkbox-border-color: var(--td-checkbox-border-color, @component-border);
 @checkbox-title-color: var(--td-checkbox-title-color, @text-color-primary);
 @checkbox-title-disabled-color: var(--td-checkbox-title-disabled-color, @text-color-disabled);
 @checkbox-description-color: var(--td-checkbox-description-color, @text-color-secondary);
 @checkbox-description-disabled-color: var(--td-checkbox-description-disabled-color, @text-color-disabled);
-@checkbox-icon-color: var(--td-checkbox-icon-color, @component-border);
+@checkbox-icon-color: var(--td-checkbox-icon-color, @text-color-anti);
 @checkbox-icon-disabled-color: var(--td-checkbox-icon-disabled-color, @brand-color-disabled);
 @checkbox-icon-disabled-bg-color: var(--td-checkbox-icon-disabled-bg-color, @bg-color-component-disabled);
 @checkbox-icon-checked-color: var(--td-checkbox-icon-checked-color, @brand-color);
@@ -57,6 +57,10 @@
     transform: translateY(-50%);
   }
 
+  &__icon-wrapper {
+    display: block;
+  }
+
   &__icon-left {
     margin-right: 20rpx;
     width: 40rpx;
@@ -76,12 +80,11 @@
 
   &__icon {
     position: relative;
-    display: block;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     width: @checkbox-icon-size;
     height: @checkbox-icon-size;
-    color: @checkbox-icon-color;
-    font-size: @checkbox-icon-size;
-    margin-top: calc((@checkbox-title-line-height - @checkbox-icon-size) / 2);
 
     &:empty {
       display: none;
@@ -100,68 +103,55 @@
       margin-right: @spacer;
     }
 
-    &-circle {
-      width: calc((@checkbox-icon-size - @checkbox-border-width) * 2);
-      height: calc((@checkbox-icon-size - @checkbox-border-width) * 2);
-      border: calc(@checkbox-border-width * 2) solid @checkbox-icon-color;
-      border-radius: @radius-circle;
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%) scale(0.5);
+    &-circle,
+    &-rectangle {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: @checkbox-icon-size;
+      height: @checkbox-icon-size;
+      color: @checkbox-icon-color;
+      font-size: calc(@checkbox-icon-size - 16rpx);
+      border: @checkbox-border-width solid @checkbox-border-color;
       box-sizing: border-box;
 
-      &--disabled {
-        background: @checkbox-icon-disabled-bg-color;
+      &--checked {
+        background: @checkbox-icon-checked-color;
+        border-color: @checkbox-icon-checked-color;
       }
-    }
-
-    &-rectangle {
-      width: calc((@checkbox-icon-size - @checkbox-border-width * 2) * 2);
-      height: calc((@checkbox-icon-size - @checkbox-border-width * 2) * 2);
-      border: calc(@checkbox-border-width * 2) solid @checkbox-icon-color;
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%) scale(0.5);
-      box-sizing: border-box;
 
       &--disabled {
         background: @checkbox-icon-disabled-bg-color;
       }
-    }
 
-    &-line {
-      &::before,
-      &::after {
-        content: '';
-        display: block;
-        position: absolute;
-        width: 5rpx;
-        border-radius: 2rpx;
-        background: @checkbox-icon-checked-color;
-        transform-origin: top center;
+      &--checked&--disabled {
+        background: @checkbox-icon-disabled-color;
+        border-color: @checkbox-icon-disabled-color;
       }
+    }
 
-      &::before {
-        height: 16rpx;
-        left: 8rpx;
-        top: 22rpx;
-        transform: rotate(-45deg);
-      }
+    &-circle {
+      width: calc(@checkbox-icon-size - 4rpx);
+      height: calc(@checkbox-icon-size - 4rpx);
+      border-radius: @radius-circle;
+    }
 
-      &::after {
-        height: 26rpx;
-        right: 8rpx;
-        top: 14rpx;
-        transform: rotate(45deg);
-      }
+    &-rectangle {
+      width: calc(@checkbox-icon-size - 8rpx);
+      height: calc(@checkbox-icon-size - 8rpx);
+    }
+
+    &-line {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: @checkbox-icon-size;
+      height: @checkbox-icon-size;
+      color: @checkbox-icon-checked-color;
+      font-size: @checkbox-icon-size;
 
       &--disabled {
-        &::before,
-        &::after {
-          background: @checkbox-icon-disabled-color;
-        }
+        color: @checkbox-icon-disabled-color;
       }
     }
   }
@@ -200,14 +190,14 @@
   &__border {
     position: absolute;
     bottom: 0;
-    left: 96rpx;
+    left: @spacer-5;
     right: 0;
     height: 1px;
     background: @checkbox-border-color;
     transform: scaleY(0.5);
 
     &--right {
-      left: 32rpx;
+      left: @spacer-2;
     }
   }
 
diff --git a/packages/components/checkbox/checkbox.wxml b/packages/components/checkbox/checkbox.wxml
index 639125b515..bcca35ff87 100644
--- a/packages/components/checkbox/checkbox.wxml
+++ b/packages/components/checkbox/checkbox.wxml
@@ -15,29 +15,21 @@
     class="{{_.cls(classPrefix + '__icon', [placement, ['checked', checked], ['disabled', _disabled]])}} {{prefix}}-class-icon"
   >
     <slot name="icon" wx:if="{{icon === 'slot'}}" />
-    <view wx:elif="{{_.isArray(icon)}}" class="{{classPrefix}}__icon">
+    <view wx:elif="{{_.isArray(icon)}}" class="{{classPrefix}}__icon-wrapper">
       <image
         src="{{checked ? indeterminate && icon[2] ? icon[2] : icon[0] : icon[1]}}"
         class="{{classPrefix}}__icon-image"
       />
     </view>
-    <block wx:else>
-      <t-icon
-        wx:if="{{checked && (icon == 'circle' || icon == 'rectangle')}}"
-        name="{{indeterminate ? ('minus-' + icon + '-filled') : ('check-' + icon + '-filled')}}"
-        class="{{classPrefix}}__icon-wrapper"
-      />
-      <t-icon
-        wx:if="{{checked && icon == 'line'}}"
-        name="{{indeterminate ? ('minus-' + icon + '-filled') : 'check'}}"
-        class="{{classPrefix}}__icon-wrapper"
-      />
-      <view
-        wx:elif="{{!checked && (icon == 'circle' || icon == 'rectangle')}}"
-        class="{{_.cls(classPrefix + '__icon-' + icon, [['disabled', _disabled]])}}"
-      />
-      <view wx:if="{{!checked && icon == 'line'}}" class="placeholder"></view>
-    </block>
+    <view
+      wx:elif="{{icon == 'circle' || icon == 'rectangle'}}"
+      class="{{_.cls(classPrefix + '__icon-' + icon, [['checked', checked], ['disabled', _disabled]])}}"
+    >
+      <t-icon wx:if="{{checked}}" name="{{indeterminate ? 'remove-1' : 'check-1'}}" />
+    </view>
+    <view wx:elif="{{icon == 'line'}}" class="{{_.cls(classPrefix + '__icon-line', [['disabled', _disabled]])}}">
+      <t-icon wx:if="{{checked}}" name="{{indeterminate ? 'minus' : 'check'}}" />
+    </view>
   </view>
   <view class="{{classPrefix}}__content" data-target="text" mut-bind:tap="handleTap">
     <view
diff --git a/packages/components/dropdown-menu/__test__/__snapshots__/index.test.js.snap b/packages/components/dropdown-menu/__test__/__snapshots__/index.test.js.snap
index 7983eb5617..34654d4643 100644
--- a/packages/components/dropdown-menu/__test__/__snapshots__/index.test.js.snap
+++ b/packages/components/dropdown-menu/__test__/__snapshots__/index.test.js.snap
@@ -229,7 +229,7 @@ exports[`dropdown-menu :base 1`] = `
                                 class="t-radio__icon t-radio__icon--left t-class-icon"
                               >
                                 <wx-view
-                                  class="placeholder"
+                                  class="t-radio__icon-line"
                                 />
                               </wx-view>
                               <wx-view
@@ -279,7 +279,7 @@ exports[`dropdown-menu :base 1`] = `
                                 class="t-radio__icon t-radio__icon--left t-class-icon"
                               >
                                 <wx-view
-                                  class="placeholder"
+                                  class="t-radio__icon-line"
                                 />
                               </wx-view>
                               <wx-view
@@ -328,22 +328,24 @@ exports[`dropdown-menu :base 1`] = `
                               <wx-view
                                 class="t-radio__icon t-radio__icon--left t-radio__icon--checked t-class-icon"
                               >
-                                <t-icon
-                                  class="t-radio__icon-wrap"
+                                <wx-view
+                                  class="t-radio__icon-line"
                                 >
-                                  <wx-view
-                                    ariaHidden="{{false}}"
-                                    ariaLabel=""
-                                    ariaRole=""
-                                    class="t-icon class t-class"
-                                    style=""
-                                    bind:tap="onTap"
-                                  >
-                                    <wx-label
-                                      class="t-icon-check t-icon-base"
-                                    />
-                                  </wx-view>
-                                </t-icon>
+                                  <t-icon>
+                                    <wx-view
+                                      ariaHidden="{{false}}"
+                                      ariaLabel=""
+                                      ariaRole=""
+                                      class="t-icon class t-class"
+                                      style=""
+                                      bind:tap="onTap"
+                                    >
+                                      <wx-label
+                                        class="t-icon-check t-icon-base"
+                                      />
+                                    </wx-view>
+                                  </t-icon>
+                                </wx-view>
                               </wx-view>
                               <wx-view
                                 class="t-radio__content"
@@ -392,7 +394,7 @@ exports[`dropdown-menu :base 1`] = `
                                 class="t-radio__icon t-radio__icon--left t-class-icon"
                               >
                                 <wx-view
-                                  class="placeholder"
+                                  class="t-radio__icon-line"
                                 />
                               </wx-view>
                               <wx-view
@@ -442,7 +444,7 @@ exports[`dropdown-menu :base 1`] = `
                                 class="t-radio__icon t-radio__icon--left t-class-icon"
                               >
                                 <wx-view
-                                  class="placeholder"
+                                  class="t-radio__icon-line"
                                 />
                               </wx-view>
                               <wx-view
@@ -492,7 +494,7 @@ exports[`dropdown-menu :base 1`] = `
                                 class="t-radio__icon t-radio__icon--left t-class-icon"
                               >
                                 <wx-view
-                                  class="placeholder"
+                                  class="t-radio__icon-line"
                                 />
                               </wx-view>
                               <wx-view
@@ -542,7 +544,7 @@ exports[`dropdown-menu :base 1`] = `
                                 class="t-radio__icon t-radio__icon--left t-class-icon"
                               >
                                 <wx-view
-                                  class="placeholder"
+                                  class="t-radio__icon-line"
                                 />
                               </wx-view>
                               <wx-view
@@ -592,7 +594,7 @@ exports[`dropdown-menu :base 1`] = `
                                 class="t-radio__icon t-radio__icon--left t-class-icon"
                               >
                                 <wx-view
-                                  class="placeholder"
+                                  class="t-radio__icon-line"
                                 />
                               </wx-view>
                               <wx-view
@@ -642,7 +644,7 @@ exports[`dropdown-menu :base 1`] = `
                                 class="t-radio__icon t-radio__icon--left t-radio__icon--disabled t-class-icon"
                               >
                                 <wx-view
-                                  class="placeholder"
+                                  class="t-radio__icon-line t-radio__icon-line--disabled"
                                 />
                               </wx-view>
                               <wx-view
diff --git a/packages/components/radio/README.en-US.md b/packages/components/radio/README.en-US.md
index 745b943256..584311b9d4 100644
--- a/packages/components/radio/README.en-US.md
+++ b/packages/components/radio/README.en-US.md
@@ -87,14 +87,14 @@ The component provides the following CSS variables, which can be used to customi
 Name | Default Value | Description
 -- | -- | --
 --td-radio-bg-color | @bg-color-container | -
---td-radio-border-color | @component-stroke | -
+--td-radio-border-color | @component-border | -
 --td-radio-content-checked-color | @text-color-secondary | -
 --td-radio-content-color | @text-color-secondary | -
 --td-radio-content-disabled-color | @text-color-disabled | -
 --td-radio-content-font | @font-body-medium | -
 --td-radio-font | @font-body-large | -
 --td-radio-icon-checked-color | @brand-color | -
---td-radio-icon-color | @component-border | -
+--td-radio-icon-color | @text-color-anti | -
 --td-radio-icon-disabled-bg-color | @bg-color-component-disabled | -
 --td-radio-icon-disabled-color | @brand-color-disabled | -
 --td-radio-icon-size | 48rpx | -
diff --git a/packages/components/radio/README.md b/packages/components/radio/README.md
index 95c050746b..cfec3493ff 100644
--- a/packages/components/radio/README.md
+++ b/packages/components/radio/README.md
@@ -144,14 +144,14 @@ change | `(value: RadioValue)` | 选中值发生变化时触发
 名称 | 默认值 | 描述
 -- | -- | --
 --td-radio-bg-color | @bg-color-container | -
---td-radio-border-color | @component-stroke | -
+--td-radio-border-color | @component-border | -
 --td-radio-content-checked-color | @text-color-secondary | -
 --td-radio-content-color | @text-color-secondary | -
 --td-radio-content-disabled-color | @text-color-disabled | -
 --td-radio-content-font | @font-body-medium | -
 --td-radio-font | @font-body-large | -
 --td-radio-icon-checked-color | @brand-color | -
---td-radio-icon-color | @component-border | -
+--td-radio-icon-color | @text-color-anti | -
 --td-radio-icon-disabled-bg-color | @bg-color-component-disabled | -
 --td-radio-icon-disabled-color | @brand-color-disabled | -
 --td-radio-icon-size | 48rpx | -
diff --git a/packages/components/radio/radio.less b/packages/components/radio/radio.less
index 870ce2144d..4fde26e711 100644
--- a/packages/components/radio/radio.less
+++ b/packages/components/radio/radio.less
@@ -1,18 +1,19 @@
 @import '../common/style/base.less';
 
+@radio-border-width: 4rpx;
 @radio-icon-size: var(--td-radio-icon-size, 48rpx);
 @radio-label-font: var(--td-radio-font, @font-body-large);
 @radio-label-line-height: var(--td-radio-label-line-height, @text-line-height-m);
 @radio-vertical-padding: var(--td-radio-vertical-padding, @spacer-2);
 @radio-bg-color: var(--td-radio-bg-color, @bg-color-container);
-@radio-border-color: var(--td-radio-border-color, @component-stroke);
+@radio-border-color: var(--td-radio-border-color, @component-border);
 @radio-label-color: var(--td-radio-label-color, @text-color-primary);
 @radio-label-disabled-color: var(--td-radio-label-disabled-color, @text-color-disabled);
 @radio-label-checked-color: var(--td-radio-label-checked-color, @text-color-primary);
 @radio-content-color: var(--td-radio-content-color, @text-color-secondary);
 @radio-content-disabled-color: var(--td-radio-content-disabled-color, @text-color-disabled);
 @radio-content-checked-color: var(--td-radio-content-checked-color, @text-color-secondary);
-@radio-icon-color: var(--td-radio-icon-color, @component-border);
+@radio-icon-color: var(--td-radio-icon-color, @text-color-anti);
 @radio-icon-disabled-color: var(--td-radio-icon-disabled-color, @brand-color-disabled);
 @radio-icon-disabled-bg-color: var(--td-radio-icon-disabled-bg-color, @bg-color-component-disabled);
 @radio-icon-checked-color: var(--td-radio-icon-checked-color, @brand-color);
@@ -51,12 +52,11 @@
 
   &__icon {
     position: relative;
-    margin-top: calc((@radio-label-line-height - @radio-icon-size) / 2);
+    display: flex;
+    align-items: center;
+    justify-content: center;
     width: @radio-icon-size;
     height: @radio-icon-size;
-    font-size: @radio-icon-size;
-    color: @radio-icon-color;
-    overflow: hidden;
 
     &:empty {
       display: none;
@@ -75,92 +75,73 @@
       color: @radio-icon-disabled-color;
     }
 
-    &-circle {
-      width: @radio-icon-size;
-      height: @radio-icon-size;
+    &-circle,
+    &-dot {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: calc(@radio-icon-size - 4rpx);
+      height: calc(@radio-icon-size - 4rpx);
+      border: @radio-border-width solid @radio-border-color;
+      border-radius: @radius-circle;
       box-sizing: border-box;
+    }
 
-      &::after {
-        content: '';
-        width: calc(200% - 6rpx);
-        height: calc(200% - 6rpx);
-        border-radius: @radius-circle;
-        border: 3px solid @radio-icon-color;
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%) scale(0.5);
-        box-sizing: border-box;
+    &-circle {
+      color: @radio-icon-color;
+      font-size: calc(@radio-icon-size - 16rpx);
+
+      &--checked {
+        background: @radio-icon-checked-color;
+        border-color: @radio-icon-checked-color;
       }
 
-      &--disabled::after {
+      &--disabled {
         background: @radio-icon-disabled-bg-color;
       }
-    }
 
-    &-line {
-      &::before,
-      &::after {
-        content: '';
-        display: block;
-        position: absolute;
-        width: 5rpx;
-        border-radius: 2rpx;
-        background: @radio-icon-checked-color;
-        transform-origin: top center;
+      &--checked&--disabled {
+        background: @radio-icon-disabled-color;
+        border-color: @radio-icon-disabled-color;
       }
+    }
 
-      &::before {
-        height: 16rpx;
-        left: 8rpx;
-        top: 22rpx;
-        transform: rotate(-45deg);
+    &-dot {
+      &--checked {
+        border-color: @radio-icon-checked-color;
       }
 
-      &::after {
-        height: 26rpx;
-        right: 8rpx;
-        top: 14rpx;
-        transform: rotate(45deg);
+      &--disabled {
+        background-color: @radio-icon-disabled-bg-color;
       }
 
-      &--disabled {
-        &::before,
-        &::after {
-          background: @radio-icon-disabled-color;
-        }
+      &--checked&--disabled {
+        border-color: @radio-icon-disabled-color;
       }
     }
 
-    &-dot {
-      width: calc((@radio-icon-size - 6rpx) * 2);
-      height: calc((@radio-icon-size - 6rpx) * 2);
-      border: 6rpx solid @radio-icon-checked-color;
+    &-dot-inner {
+      width: calc(@radio-icon-size / 2);
+      height: calc(@radio-icon-size / 2);
+      background-color: @radio-icon-checked-color;
       border-radius: @radius-circle;
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%) scale(0.5);
-      box-sizing: border-box;
+    }
+
+    &-dot--disabled &-dot-inner {
+      background-color: @radio-icon-disabled-color;
+    }
+
+    &-line {
       display: flex;
       align-items: center;
       justify-content: center;
-
-      &::after {
-        content: '';
-        display: block;
-        width: @radio-icon-size;
-        height: @radio-icon-size;
-        background: @radio-icon-checked-color;
-        border-radius: @radius-circle;
-      }
+      width: @radio-icon-size;
+      height: @radio-icon-size;
+      color: @radio-icon-checked-color;
+      font-size: @radio-icon-size;
 
       &--disabled {
-        border-color: @radio-icon-disabled-color;
-
-        &::after {
-          background: @radio-icon-disabled-color;
-        }
+        color: @radio-icon-disabled-color;
       }
     }
   }
diff --git a/packages/components/radio/radio.wxml b/packages/components/radio/radio.wxml
index 1e4fecee34..ab8940e2c1 100644
--- a/packages/components/radio/radio.wxml
+++ b/packages/components/radio/radio.wxml
@@ -19,23 +19,21 @@
     <view wx:elif="{{customIcon}}" class="{{classPrefix}}__image">
       <image src="{{checked ? iconVal[0] : iconVal[1]}}" class="{{classPrefix}}-icon__image" webp />
     </view>
-    <block wx:else>
-      <t-icon
-        wx:if="{{checked && (icon == 'circle' || icon == 'line')}}"
-        name="{{icon == 'circle' ? 'check-circle-filled' : 'check'}}"
-        class="{{classPrefix}}__icon-wrap"
-      />
-      <view
-        wx:if="{{checked && icon == 'dot'}}"
-        class="{{_.cls(classPrefix + '__icon-' + icon, [['disabled', _disabled]])}}"
-      />
-      <view
-        wx:if="{{!checked && (icon == 'circle' || icon == 'dot')}}"
-        class="{{_.cls(classPrefix + '__icon-circle', [['disabled', _disabled]])}}"
-      />
-      <!-- line && unchecked 为空 需要展位元素 -->
-      <view wx:if="{{!checked && icon == 'line'}}" class="placeholder"></view>
-    </block>
+    <view
+      wx:elif="{{icon == 'circle'}}"
+      class="{{_.cls(classPrefix + '__icon-circle', [['checked', checked], ['disabled', _disabled]])}}"
+    >
+      <t-icon wx:if="{{checked}}" name="check-1" />
+    </view>
+    <view
+      wx:elif="{{icon == 'dot'}}"
+      class="{{_.cls(classPrefix + '__icon-dot', [['checked', checked], ['disabled', _disabled]])}}"
+    >
+      <view wx:if="{{checked}}" class="{{classPrefix}}__icon-dot-inner" />
+    </view>
+    <view wx:elif="{{icon == 'line'}}" class="{{_.cls(classPrefix + '__icon-line', [['disabled', _disabled]])}}">
+      <t-icon wx:if="{{checked}}" name="check" />
+    </view>
   </view>
 
   <view class="{{classPrefix}}__content" data-target="text" mut-bind:tap="handleTap">
diff --git a/packages/uniapp-components/checkbox/README.en-US.md b/packages/uniapp-components/checkbox/README.en-US.md
index 54332ddd30..83f7be4eca 100644
--- a/packages/uniapp-components/checkbox/README.en-US.md
+++ b/packages/uniapp-components/checkbox/README.en-US.md
@@ -85,12 +85,12 @@ The component provides the following CSS variables, which can be used to customi
 Name | Default Value | Description
 -- | -- | --
 --td-checkbox-bg-color | @bg-color-container | -
---td-checkbox-border-color | @component-stroke | -
+--td-checkbox-border-color | @component-border | -
 --td-checkbox-description-color | @text-color-secondary | -
 --td-checkbox-description-disabled-color | @text-color-disabled | -
 --td-checkbox-description-font | @font-body-medium | -
 --td-checkbox-icon-checked-color | @brand-color | -
---td-checkbox-icon-color | @component-border | -
+--td-checkbox-icon-color | @text-color-anti | -
 --td-checkbox-icon-disabled-bg-color | @bg-color-component-disabled | -
 --td-checkbox-icon-disabled-color | @brand-color-disabled | -
 --td-checkbox-icon-size | 48rpx | -
diff --git a/packages/uniapp-components/checkbox/README.md b/packages/uniapp-components/checkbox/README.md
index 430df2c6dc..5293456dab 100644
--- a/packages/uniapp-components/checkbox/README.md
+++ b/packages/uniapp-components/checkbox/README.md
@@ -142,12 +142,12 @@ change | `(context: { value: CheckboxGroupValue, context: { value: boolean\|numb
 名称 | 默认值 | 描述
 -- | -- | --
 --td-checkbox-bg-color | @bg-color-container | -
---td-checkbox-border-color | @component-stroke | -
+--td-checkbox-border-color | @component-border | -
 --td-checkbox-description-color | @text-color-secondary | -
 --td-checkbox-description-disabled-color | @text-color-disabled | -
 --td-checkbox-description-font | @font-body-medium | -
 --td-checkbox-icon-checked-color | @brand-color | -
---td-checkbox-icon-color | @component-border | -
+--td-checkbox-icon-color | @text-color-anti | -
 --td-checkbox-icon-disabled-bg-color | @bg-color-component-disabled | -
 --td-checkbox-icon-disabled-color | @brand-color-disabled | -
 --td-checkbox-icon-size | 48rpx | -
diff --git a/packages/uniapp-components/checkbox/_example/special/index.vue b/packages/uniapp-components/checkbox/_example/special/index.vue
index 17070b868d..d9dddda25b 100644
--- a/packages/uniapp-components/checkbox/_example/special/index.vue
+++ b/packages/uniapp-components/checkbox/_example/special/index.vue
@@ -147,7 +147,7 @@ export default {
   left: 1.5px;
   top: 1.5px;
   z-index: 1;
-  font-size: 16px;
+  font-size: 14px;
 }
 
 /* 横向布局 */
diff --git a/packages/uniapp-components/checkbox/checkbox.less b/packages/uniapp-components/checkbox/checkbox.less
index 1d63309ce3..acc016c7ff 100644
--- a/packages/uniapp-components/checkbox/checkbox.less
+++ b/packages/uniapp-components/checkbox/checkbox.less
@@ -9,12 +9,12 @@
 @checkbox-description-font: var(--td-checkbox-description-font, @font-body-medium);
 @checkbox-vertical-padding: var(--td-checkbox-vertical-padding, @spacer-2);
 @checkbox-bg-color: var(--td-checkbox-bg-color, @bg-color-container);
-@checkbox-border-color: var(--td-checkbox-border-color, @component-stroke);
+@checkbox-border-color: var(--td-checkbox-border-color, @component-border);
 @checkbox-title-color: var(--td-checkbox-title-color, @text-color-primary);
 @checkbox-title-disabled-color: var(--td-checkbox-title-disabled-color, @text-color-disabled);
 @checkbox-description-color: var(--td-checkbox-description-color, @text-color-secondary);
 @checkbox-description-disabled-color: var(--td-checkbox-description-disabled-color, @text-color-disabled);
-@checkbox-icon-color: var(--td-checkbox-icon-color, @component-border);
+@checkbox-icon-color: var(--td-checkbox-icon-color, @text-color-anti);
 @checkbox-icon-disabled-color: var(--td-checkbox-icon-disabled-color, @brand-color-disabled);
 @checkbox-icon-disabled-bg-color: var(--td-checkbox-icon-disabled-bg-color, @bg-color-component-disabled);
 @checkbox-icon-checked-color: var(--td-checkbox-icon-checked-color, @brand-color);
@@ -52,6 +52,10 @@
     transform: translateY(-50%);
   }
 
+  &__icon-wrapper {
+    display: block;
+  }
+
   &__icon-left {
     margin-right: 20rpx;
     width: 40rpx;
@@ -71,12 +75,11 @@
 
   &__icon {
     position: relative;
-    display: block;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     width: @checkbox-icon-size;
     height: @checkbox-icon-size;
-    color: @checkbox-icon-color;
-    font-size: @checkbox-icon-size;
-    margin-top: calc((@checkbox-title-line-height - @checkbox-icon-size) / 2);
 
     &:empty {
       display: none;
@@ -92,71 +95,58 @@
     }
 
     &--left {
-      margin-right: 16rpx;
+      margin-right: @spacer;
     }
 
-    &-circle {
-      width: calc((@checkbox-icon-size - @checkbox-border-width) * 2);
-      height: calc((@checkbox-icon-size - @checkbox-border-width) * 2);
-      border: calc(@checkbox-border-width * 2) solid @checkbox-icon-color;
-      border-radius: 50%;
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%) scale(0.5);
+    &-circle,
+    &-rectangle {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: @checkbox-icon-size;
+      height: @checkbox-icon-size;
+      color: @checkbox-icon-color;
+      font-size: calc(@checkbox-icon-size - 16rpx);
+      border: @checkbox-border-width solid @checkbox-border-color;
       box-sizing: border-box;
 
-      &--disabled {
-        background: @checkbox-icon-disabled-bg-color;
+      &--checked {
+        background: @checkbox-icon-checked-color;
+        border-color: @checkbox-icon-checked-color;
       }
-    }
-
-    &-rectangle {
-      width: calc((@checkbox-icon-size - @checkbox-border-width * 2) * 2);
-      height: calc((@checkbox-icon-size - @checkbox-border-width * 2) * 2);
-      border: calc(@checkbox-border-width * 2) solid @checkbox-icon-color;
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%) scale(0.5);
-      box-sizing: border-box;
 
       &--disabled {
         background: @checkbox-icon-disabled-bg-color;
       }
-    }
 
-    &-line {
-      &::before,
-      &::after {
-        content: '';
-        display: block;
-        position: absolute;
-        width: 5rpx;
-        border-radius: 2rpx;
-        background: @checkbox-icon-checked-color;
-        transform-origin: top center;
+      &--checked&--disabled {
+        background: @checkbox-icon-disabled-color;
+        border-color: @checkbox-icon-disabled-color;
       }
+    }
 
-      &::before {
-        height: 16rpx;
-        left: 8rpx;
-        top: 22rpx;
-        transform: rotate(-45deg);
-      }
+    &-circle {
+      width: calc(@checkbox-icon-size - 4rpx);
+      height: calc(@checkbox-icon-size - 4rpx);
+      border-radius: @radius-circle;
+    }
 
-      &::after {
-        height: 26rpx;
-        right: 8rpx;
-        top: 14rpx;
-        transform: rotate(45deg);
-      }
+    &-rectangle {
+      width: calc(@checkbox-icon-size - 8rpx);
+      height: calc(@checkbox-icon-size - 8rpx);
+    }
+
+    &-line {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: @checkbox-icon-size;
+      height: @checkbox-icon-size;
+      color: @checkbox-icon-checked-color;
+      font-size: @checkbox-icon-size;
 
       &--disabled {
-        &::before,
-        &::after {
-          background: @checkbox-icon-disabled-color;
-        }
+        color: @checkbox-icon-disabled-color;
       }
     }
   }
diff --git a/packages/uniapp-components/checkbox/checkbox.vue b/packages/uniapp-components/checkbox/checkbox.vue
index c501c445dc..12fbec1e0e 100644
--- a/packages/uniapp-components/checkbox/checkbox.vue
+++ b/packages/uniapp-components/checkbox/checkbox.vue
@@ -23,29 +23,27 @@
       "
     >
       <slot v-if="icon === 'slot'" name="icon" />
-      <view v-else-if="tools.isArray(icon)" :class="classPrefix + '__icon'">
+      <view v-else-if="tools.isArray(icon)" :class="classPrefix + '__icon-wrapper'">
         <image
           :src="dataChecked ? (dataIndeterminate && icon[2] ? icon[2] : icon[0]) : icon[1]"
           :class="classPrefix + '__icon-image'"
         />
       </view>
-      <block v-else>
-        <t-icon
-          v-if="dataChecked && (icon == 'circle' || icon == 'rectangle')"
-          :name="dataIndeterminate ? 'minus-' + icon + '-filled' : 'check-' + icon + '-filled'"
-          :class="'' + tools.cls(classPrefix + '__icon-wrapper', [])"
-        />
-        <t-icon
-          v-if="dataChecked && icon == 'line'"
-          :name="dataIndeterminate ? 'minus-' + icon + '-filled' : 'check'"
-          :class="'' + tools.cls(classPrefix + '__icon-wrapper', [])"
-        />
-        <view
-          v-else-if="!dataChecked && (icon == 'circle' || icon == 'rectangle')"
-          :class="'' + tools.cls(classPrefix + '__icon-' + icon, [['disabled', iDisabled]])"
-        />
-        <view v-if="!dataChecked && icon == 'line'" class="placeholder" />
-      </block>
+      <view
+        v-else-if="icon == 'circle' || icon == 'rectangle'"
+        :class="
+          '' +
+          tools.cls(classPrefix + '__icon-' + icon, [
+            ['checked', dataChecked],
+            ['disabled', iDisabled],
+          ])
+        "
+      >
+        <t-icon v-if="dataChecked" :name="dataIndeterminate ? 'remove-1' : 'check-1'" />
+      </view>
+      <view v-else-if="icon == 'line'" :class="'' + tools.cls(classPrefix + '__icon-line', [['disabled', iDisabled]])">
+        <t-icon v-if="dataChecked" :name="dataIndeterminate ? 'minus' : 'check'" />
+      </view>
     </view>
     <view :class="classPrefix + '__content'" data-target="text" @click.stop="handleTap">
       <view
diff --git a/packages/uniapp-components/radio/README.en-US.md b/packages/uniapp-components/radio/README.en-US.md
index 4728e66f96..4304be0413 100644
--- a/packages/uniapp-components/radio/README.en-US.md
+++ b/packages/uniapp-components/radio/README.en-US.md
@@ -86,14 +86,14 @@ The component provides the following CSS variables, which can be used to customi
 Name | Default Value | Description
 -- | -- | --
 --td-radio-bg-color | @bg-color-container | -
---td-radio-border-color | @component-stroke | -
+--td-radio-border-color | @component-border | -
 --td-radio-content-checked-color | @text-color-secondary | -
 --td-radio-content-color | @text-color-secondary | -
 --td-radio-content-disabled-color | @text-color-disabled | -
 --td-radio-content-font | @font-body-medium | -
 --td-radio-font | @font-body-large | -
 --td-radio-icon-checked-color | @brand-color | -
---td-radio-icon-color | @component-border | -
+--td-radio-icon-color | @text-color-anti | -
 --td-radio-icon-disabled-bg-color | @bg-color-component-disabled | -
 --td-radio-icon-disabled-color | @brand-color-disabled | -
 --td-radio-icon-size | 48rpx | -
diff --git a/packages/uniapp-components/radio/README.md b/packages/uniapp-components/radio/README.md
index a6da2bf1c8..434f24a457 100644
--- a/packages/uniapp-components/radio/README.md
+++ b/packages/uniapp-components/radio/README.md
@@ -132,14 +132,14 @@ change | `(context: { value: RadioValue })` | 选中值发生变化时触发
 名称 | 默认值 | 描述
 -- | -- | --
 --td-radio-bg-color | @bg-color-container | -
---td-radio-border-color | @component-stroke | -
+--td-radio-border-color | @component-border | -
 --td-radio-content-checked-color | @text-color-secondary | -
 --td-radio-content-color | @text-color-secondary | -
 --td-radio-content-disabled-color | @text-color-disabled | -
 --td-radio-content-font | @font-body-medium | -
 --td-radio-font | @font-body-large | -
 --td-radio-icon-checked-color | @brand-color | -
---td-radio-icon-color | @component-border | -
+--td-radio-icon-color | @text-color-anti | -
 --td-radio-icon-disabled-bg-color | @bg-color-component-disabled | -
 --td-radio-icon-disabled-color | @brand-color-disabled | -
 --td-radio-icon-size | 48rpx | -
diff --git a/packages/uniapp-components/radio/radio.less b/packages/uniapp-components/radio/radio.less
index 3bb1f3f115..5de707639c 100644
--- a/packages/uniapp-components/radio/radio.less
+++ b/packages/uniapp-components/radio/radio.less
@@ -1,18 +1,19 @@
 @import '../common/style/base.less';
 
+@radio-border-width: 4rpx;
 @radio-icon-size: var(--td-radio-icon-size, 48rpx);
 @radio-label-font: var(--td-radio-font, @font-body-large);
 @radio-label-line-height: var(--td-radio-label-line-height, 48rpx);
 @radio-vertical-padding: var(--td-radio-vertical-padding, 32rpx);
 @radio-bg-color: var(--td-radio-bg-color, @bg-color-container);
-@radio-border-color: var(--td-radio-border-color, @component-stroke);
+@radio-border-color: var(--td-radio-border-color, @component-border);
 @radio-label-color: var(--td-radio-label-color, @text-color-primary);
 @radio-label-disabled-color: var(--td-radio-label-disabled-color, @text-color-disabled);
 @radio-label-checked-color: var(--td-radio-label-checked-color, @text-color-primary);
 @radio-content-color: var(--td-radio-content-color, @text-color-secondary);
 @radio-content-disabled-color: var(--td-radio-content-disabled-color, @text-color-disabled);
 @radio-content-checked-color: var(--td-radio-content-checked-color, @text-color-secondary);
-@radio-icon-color: var(--td-radio-icon-color, @component-border);
+@radio-icon-color: var(--td-radio-icon-color, @text-color-anti);
 @radio-icon-disabled-color: var(--td-radio-icon-disabled-color, @brand-color-disabled);
 @radio-icon-disabled-bg-color: var(--td-radio-icon-disabled-bg-color, @bg-color-component-disabled);
 @radio-icon-checked-color: var(--td-radio-icon-checked-color, @brand-color);
@@ -45,19 +46,18 @@
 
   &__icon {
     position: relative;
-    margin-top: calc((@radio-label-line-height - @radio-icon-size) / 2);
+    display: flex;
+    align-items: center;
+    justify-content: center;
     width: @radio-icon-size;
     height: @radio-icon-size;
-    font-size: @radio-icon-size;
-    color: @radio-icon-color;
-    overflow: hidden;
 
     &:empty {
       display: none;
     }
 
     &--left {
-      margin-right: 16rpx;
+      margin-right: @spacer;
     }
 
     &--checked {
@@ -69,92 +69,73 @@
       color: @radio-icon-disabled-color;
     }
 
-    &-circle {
-      width: @radio-icon-size;
-      height: @radio-icon-size;
+    &-circle,
+    &-dot {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: calc(@radio-icon-size - 4rpx);
+      height: calc(@radio-icon-size - 4rpx);
+      border: @radio-border-width solid @radio-border-color;
+      border-radius: @radius-circle;
       box-sizing: border-box;
+    }
 
-      &::after {
-        content: '';
-        width: calc(200% - 6rpx);
-        height: calc(200% - 6rpx);
-        border-radius: 50%;
-        border: 3px solid @radio-icon-color;
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%) scale(0.5);
-        box-sizing: border-box;
+    &-circle {
+      color: @radio-icon-color;
+      font-size: calc(@radio-icon-size - 16rpx);
+
+      &--checked {
+        background: @radio-icon-checked-color;
+        border-color: @radio-icon-checked-color;
       }
 
-      &--disabled::after {
+      &--disabled {
         background: @radio-icon-disabled-bg-color;
       }
-    }
 
-    &-line {
-      &::before,
-      &::after {
-        content: '';
-        display: block;
-        position: absolute;
-        width: 5rpx;
-        border-radius: 2rpx;
-        background: @radio-icon-checked-color;
-        transform-origin: top center;
+      &--checked&--disabled {
+        background: @radio-icon-disabled-color;
+        border-color: @radio-icon-disabled-color;
       }
+    }
 
-      &::before {
-        height: 16rpx;
-        left: 8rpx;
-        top: 22rpx;
-        transform: rotate(-45deg);
+    &-dot {
+      &--checked {
+        border-color: @radio-icon-checked-color;
       }
 
-      &::after {
-        height: 26rpx;
-        right: 8rpx;
-        top: 14rpx;
-        transform: rotate(45deg);
+      &--disabled {
+        background-color: @radio-icon-disabled-bg-color;
       }
 
-      &--disabled {
-        &::before,
-        &::after {
-          background: @radio-icon-disabled-color;
-        }
+      &--checked&--disabled {
+        border-color: @radio-icon-disabled-color;
       }
     }
 
-    &-dot {
-      width: calc((@radio-icon-size - 6rpx) * 2);
-      height: calc((@radio-icon-size - 6rpx) * 2);
-      border: 6rpx solid @radio-icon-checked-color;
-      border-radius: 50%;
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%) scale(0.5);
-      box-sizing: border-box;
+    &-dot-inner {
+      width: calc(@radio-icon-size / 2);
+      height: calc(@radio-icon-size / 2);
+      background-color: @radio-icon-checked-color;
+      border-radius: @radius-circle;
+    }
+
+    &-dot--disabled &-dot-inner {
+      background-color: @radio-icon-disabled-color;
+    }
+
+    &-line {
       display: flex;
       align-items: center;
       justify-content: center;
-
-      &::after {
-        content: '';
-        display: block;
-        width: @radio-icon-size;
-        height: @radio-icon-size;
-        background: @radio-icon-checked-color;
-        border-radius: 50%;
-      }
+      width: @radio-icon-size;
+      height: @radio-icon-size;
+      color: @radio-icon-checked-color;
+      font-size: @radio-icon-size;
 
       &--disabled {
-        border-color: @radio-icon-disabled-color;
-
-        &::after {
-          background: @radio-icon-disabled-color;
-        }
+        color: @radio-icon-disabled-color;
       }
     }
   }
diff --git a/packages/uniapp-components/radio/radio.vue b/packages/uniapp-components/radio/radio.vue
index e06114667e..1968efc621 100644
--- a/packages/uniapp-components/radio/radio.vue
+++ b/packages/uniapp-components/radio/radio.vue
@@ -22,22 +22,33 @@
       <view v-else-if="customIcon" :class="classPrefix + '__image'">
         <image :src="dataChecked ? iconVal[0] : iconVal[1]" :class="classPrefix + '-icon__image'" webp />
       </view>
-      <block v-else>
-        <t-icon
-          v-if="dataChecked && (icon == 'circle' || icon == 'line')"
-          :name="icon == 'circle' ? 'check-circle-filled' : 'check'"
-          :class="classPrefix + '__icon-wrap'"
-        />
-        <view
-          v-if="dataChecked && icon == 'dot'"
-          :class="'' + tools.cls(classPrefix + '__icon-' + icon, [['disabled', iDisabled]])"
-        />
-        <view
-          v-if="!dataChecked && (icon == 'circle' || icon == 'dot')"
-          :class="'' + tools.cls(classPrefix + '__icon-circle', [['disabled', iDisabled]])"
-        />
-        <view v-if="!dataChecked && icon == 'line'" class="placeholder" />
-      </block>
+      <view
+        v-else-if="icon == 'circle'"
+        :class="
+          '' +
+          tools.cls(classPrefix + '__icon-circle', [
+            ['checked', dataChecked],
+            ['disabled', iDisabled],
+          ])
+        "
+      >
+        <t-icon v-if="dataChecked" name="check-1" />
+      </view>
+      <view
+        v-else-if="icon == 'dot'"
+        :class="
+          '' +
+          tools.cls(classPrefix + '__icon-dot', [
+            ['checked', dataChecked],
+            ['disabled', iDisabled],
+          ])
+        "
+      >
+        <view v-if="dataChecked" :class="classPrefix + '__icon-dot-inner'" />
+      </view>
+      <view v-else-if="icon == 'line'" :class="'' + tools.cls(classPrefix + '__icon-line', [['disabled', iDisabled]])">
+        <t-icon v-if="dataChecked" name="check" />
+      </view>
     </view>
     <view :class="classPrefix + '__content'" data-target="text" @click.stop="handleTap">
       <view