diff --git a/src/checkbox/src/CheckMark.tsx b/src/checkbox/src/CheckMark.tsx
index 4897034d68b..c1c89eaf83e 100644
--- a/src/checkbox/src/CheckMark.tsx
+++ b/src/checkbox/src/CheckMark.tsx
@@ -1,6 +1,7 @@
+import type { VNode } from 'vue'
 import { h } from 'vue'
 
-export default (
+export default (): VNode => (
   <svg viewBox="0 0 64 64" class="check-icon">
     <path d="M50.42,16.76L22.34,39.45l-8.1-11.46c-1.12-1.58-3.3-1.96-4.88-0.84c-1.58,1.12-1.95,3.3-0.84,4.88l10.26,14.51  c0.56,0.79,1.42,1.31,2.38,1.45c0.16,0.02,0.32,0.03,0.48,0.03c0.8,0,1.57-0.27,2.2-0.78l30.99-25.03c1.5-1.21,1.74-3.42,0.52-4.92  C54.13,15.78,51.93,15.55,50.42,16.76z" />
   </svg>
diff --git a/src/checkbox/src/Checkbox.tsx b/src/checkbox/src/Checkbox.tsx
index 5e9633e94ca..558fd2a4905 100644
--- a/src/checkbox/src/Checkbox.tsx
+++ b/src/checkbox/src/Checkbox.tsx
@@ -32,8 +32,8 @@ import {
 } from '../../_utils'
 import { checkboxLight } from '../styles'
 import { checkboxGroupInjectionKey } from './CheckboxGroup'
-import CheckMark from './CheckMark'
-import LineMark from './LineMark'
+import renderCheckMark from './CheckMark'
+import renderLineMark from './LineMark'
 import style from './styles/index.cssr'
 
 export const checkboxProps = {
@@ -246,8 +246,8 @@ export default defineComponent({
           colorTableHeader,
           colorTableHeaderModal,
           colorTableHeaderPopover,
-          checkMarkColor,
-          checkMarkColorDisabled,
+          renderCheckMarkColor,
+          renderCheckMarkColorDisabled,
           border,
           borderFocus,
           borderDisabled,
@@ -255,7 +255,7 @@ export default defineComponent({
           boxShadowFocus,
           textColor,
           textColorDisabled,
-          checkMarkColorDisabledChecked,
+          renderCheckMarkColorDisabledChecked,
           colorDisabledChecked,
           borderDisabledChecked,
           labelPadding,
@@ -286,9 +286,10 @@ export default defineComponent({
         '--n-color-disabled-checked': colorDisabledChecked,
         '--n-text-color': textColor,
         '--n-text-color-disabled': textColorDisabled,
-        '--n-check-mark-color': checkMarkColor,
-        '--n-check-mark-color-disabled': checkMarkColorDisabled,
-        '--n-check-mark-color-disabled-checked': checkMarkColorDisabledChecked,
+        '--n-check-mark-color': renderCheckMarkColor,
+        '--n-check-mark-color-disabled': renderCheckMarkColorDisabled,
+        '--n-check-mark-color-disabled-checked':
+          renderCheckMarkColorDisabledChecked,
         '--n-font-size': fontSize,
         '--n-label-padding': labelPadding
       }
@@ -389,11 +390,11 @@ export default defineComponent({
                       key="indeterminate"
                       class={`${mergedClsPrefix}-checkbox-icon`}
                     >
-                      {LineMark}
+                      {renderLineMark()}
                     </div>
                   ) : (
                     <div key="check" class={`${mergedClsPrefix}-checkbox-icon`}>
-                      {CheckMark}
+                      {renderCheckMark()}
                     </div>
                   )
               }}
diff --git a/src/checkbox/src/LineMark.tsx b/src/checkbox/src/LineMark.tsx
index 2053beb42f9..802bda3254e 100644
--- a/src/checkbox/src/LineMark.tsx
+++ b/src/checkbox/src/LineMark.tsx
@@ -1,6 +1,7 @@
+import type { VNode } from 'vue'
 import { h } from 'vue'
 
-export default (
+export default (): VNode => (
   <svg viewBox="0 0 100 100" class="line-icon">
     <path d="M80.2,55.5H21.4c-2.8,0-5.1-2.5-5.1-5.5l0,0c0-3,2.3-5.5,5.1-5.5h58.7c2.8,0,5.1,2.5,5.1,5.5l0,0C85.2,53.1,82.9,55.5,80.2,55.5z" />
   </svg>