diff --git a/src/design-system/formcheckbox.css b/src/design-system/formcheckbox.css
index 4170de34..899df85c 100644
--- a/src/design-system/formcheckbox.css
+++ b/src/design-system/formcheckbox.css
@@ -72,7 +72,7 @@
       content: '';
       width: 0.8em;
       height: 0.8em;
-      clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
+      clip-path: token('clip-path-formcontrol_checkmark');
       transform: scale(0);
       transform-origin: bottom left;
       transition: 120ms transform ease-in-out;
diff --git a/src/design-system/tokens.json b/src/design-system/tokens.json
index 634cf74e..cac412d5 100644
--- a/src/design-system/tokens.json
+++ b/src/design-system/tokens.json
@@ -49,6 +49,7 @@
   "color-background-formcontrol_suffix": "transparent",
   "color-background-formcontrol_prefix": "transparent",
   "color-background-formcontrol_checkmark": "white",
+  "clip-path-formcontrol_checkmark": "polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%)",
   "color-background-highlight_body": "yellow",
   "color-background-pre_box": "transparent",
   "color-chevron-formcontrol": "#000",
diff --git a/stories/themes/material.theme.css b/stories/themes/material.theme.css
index 04124ab0..769b9e14 100644
--- a/stories/themes/material.theme.css
+++ b/stories/themes/material.theme.css
@@ -55,6 +55,7 @@
   --dcx-border-radius-formcontrol: 6px;
   --dcx-color-text-formcontrol: #00000099;
   --dcx-color-text-formcontrol_label: #00000099;
+  --dcx-clip-path-formcontrol_checkmark: inset(4px 1px);
 }
 
 .dcx-radio-button-group {