diff --git a/core/src/components/checkbox/checkbox.ionic.scss b/core/src/components/checkbox/checkbox.ionic.scss
index 7793d0dcbba..36750fed934 100644
--- a/core/src/components/checkbox/checkbox.ionic.scss
+++ b/core/src/components/checkbox/checkbox.ionic.scss
@@ -1,4 +1,17 @@
+@import "./checkbox";
 @import "./checkbox.ionic.vars";
 
 // Ionic Checkbox
-// --------------------------------------------------
\ No newline at end of file
+// --------------------------------------------------
+
+:host {
+  // Border
+  --border-radius: #{$checkbox-ionic-border-radius};
+  --border-width: #{$checkbox-ionic-border-width};
+  --border-style: #{$checkbox-ionic-border-style};
+  --border-color: #{$checkbox-ionic-background-color-off};
+  --checkmark-width: 3;
+
+  // Size
+  --size: #{$checkbox-ionic-size};
+}
diff --git a/core/src/components/checkbox/checkbox.ionic.vars.scss b/core/src/components/checkbox/checkbox.ionic.vars.scss
index 72c686c5cb4..cf922d32cbb 100644
--- a/core/src/components/checkbox/checkbox.ionic.vars.scss
+++ b/core/src/components/checkbox/checkbox.ionic.vars.scss
@@ -1,2 +1,21 @@
+@import "../../themes/ionic.globals.ionic";
+
 // Ionic Checkbox Variables
-// --------------------------------------------------
\ No newline at end of file
+// --------------------------------------------------
+
+/// @prop - The default width and height of the checkbox
+$checkbox-ionic-size: 24px !default;
+
+/// @prop - The background color of the checkbox when the checkbox is unchecked
+$checkbox-ionic-background-color-off: $background-color-step-400 !default;
+
+/// @prop - Border style of the checkbox
+$checkbox-ionic-border-style: solid !default;
+
+/// @prop - Border width of the checkbox
+$checkbox-ionic-border-width: 1px !default;
+
+/// @prop - The border radius of the checkbox
+/// With a default size of 24px, the border radius is calculated as 24px / 4 - 2px = 4px
+/// With a small size of 16px, the border radius is calculated as 16px / 4 - 2px = 2px;
+$checkbox-ionic-border-radius: calc(var(--size) / 4 - 2px) !default;
diff --git a/core/src/components/checkbox/test/basic/checkbox.e2e.ts b/core/src/components/checkbox/test/basic/checkbox.e2e.ts
index 957c6da31b8..d6a304393c2 100644
--- a/core/src/components/checkbox/test/basic/checkbox.e2e.ts
+++ b/core/src/components/checkbox/test/basic/checkbox.e2e.ts
@@ -1,7 +1,7 @@
 import { expect } from '@playwright/test';
 import { configs, test } from '@utils/test/playwright';
 
-configs().forEach(({ title, screenshot, config }) => {
+configs({ modes: ['ios', 'md', 'ionic-md'] }).forEach(({ title, screenshot, config }) => {
   test.describe(title('checkbox: basic visual tests'), () => {
     test('should not have visual regressions', async ({ page }) => {
       await page.setContent(
diff --git a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-basic-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-basic-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..8d85254c775
Binary files /dev/null and b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-basic-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-basic-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-basic-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..213673db5ba
Binary files /dev/null and b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-basic-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-basic-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-basic-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..07194b2506e
Binary files /dev/null and b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-basic-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-basic-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-basic-ionic-md-rtl-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..2690550559d
Binary files /dev/null and b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-basic-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-basic-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-basic-ionic-md-rtl-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..a8c4bef2260
Binary files /dev/null and b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-basic-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-basic-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-basic-ionic-md-rtl-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..307ccd0ef4e
Binary files /dev/null and b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-basic-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-checkmark-width-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-checkmark-width-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..849e4700770
Binary files /dev/null and b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-checkmark-width-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-checkmark-width-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-checkmark-width-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..e6ade1a1746
Binary files /dev/null and b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-checkmark-width-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-checkmark-width-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-checkmark-width-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..c938750aa21
Binary files /dev/null and b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-checkmark-width-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-checkmark-width-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-checkmark-width-ionic-md-rtl-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..8d53b18cdba
Binary files /dev/null and b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-checkmark-width-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-checkmark-width-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-checkmark-width-ionic-md-rtl-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..b34f4e9d745
Binary files /dev/null and b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-checkmark-width-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-checkmark-width-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-checkmark-width-ionic-md-rtl-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..2a16c739d30
Binary files /dev/null and b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-checkmark-width-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-size-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-size-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..f3871091d1f
Binary files /dev/null and b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-size-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-size-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-size-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..02e8e27dec6
Binary files /dev/null and b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-size-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-size-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-size-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..029ea9e5bfc
Binary files /dev/null and b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-size-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-size-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-size-ionic-md-rtl-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..b580a75318b
Binary files /dev/null and b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-size-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-size-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-size-ionic-md-rtl-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..7277ab9b425
Binary files /dev/null and b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-size-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-size-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-size-ionic-md-rtl-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..1ecf579ca77
Binary files /dev/null and b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-size-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/themes/ionic.globals.ionic.scss b/core/src/themes/ionic.globals.ionic.scss
new file mode 100644
index 00000000000..d8a54973f7d
--- /dev/null
+++ b/core/src/themes/ionic.globals.ionic.scss
@@ -0,0 +1,2 @@
+// Core Globals
+@import "./ionic.globals";