diff --git a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 1588ab2880..b871d68f97 100644
Binary files a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 58133ba724..b4354b99b7 100644
Binary files a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-ltr-light-Mobile-Safari-linux.png
index 4f3f39f758..a67d26b6a6 100644
Binary files a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-rtl-light-Mobile-Chrome-linux.png
index a4e1ba96f7..1da42fc3fd 100644
Binary files a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-rtl-light-Mobile-Firefox-linux.png
index b9d1ea8035..c5c6258639 100644
Binary files a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-rtl-light-Mobile-Safari-linux.png
index 8a06de4dab..58ea56b378 100644
Binary files a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-rtl-light-Mobile-Safari-linux.png and b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/tab-button/tab-button.scss b/core/src/components/tab-button/tab-button.common.scss
similarity index 92%
rename from core/src/components/tab-button/tab-button.scss
rename to core/src/components/tab-button/tab-button.common.scss
index fd2b8cd34f..5d8b5eee41 100644
--- a/core/src/components/tab-button/tab-button.scss
+++ b/core/src/components/tab-button/tab-button.common.scss
@@ -1,5 +1,3 @@
-@import "../../themes/native/native.globals";
-
 :host {
   /**
    * @prop --background: Background of the tab button
@@ -38,11 +36,6 @@
 // --------------------------------------------------
 
 .button-native {
-  @include border-radius(inherit);
-  @include margin(0);
-  @include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));
-  @include text-inherit();
-
   display: flex;
   position: relative;
 
@@ -67,10 +60,6 @@
   -webkit-user-drag: none;
 }
 
-.button-native::after {
-  @include button-state();
-}
-
 .button-inner {
   display: flex;
   position: relative;
diff --git a/core/src/components/tab-button/tab-button.ionic.scss b/core/src/components/tab-button/tab-button.ionic.scss
index ebdb872675..79e905f5f8 100644
--- a/core/src/components/tab-button/tab-button.ionic.scss
+++ b/core/src/components/tab-button/tab-button.ionic.scss
@@ -1,5 +1,5 @@
-@use "../../foundations/ionic.vars.scss" as globals;
-@import "./tab-button";
+@use "../../themes/ionic/ionic.globals.scss" as globals;
+@use "./tab-button.common";
 
 // Ionic Tab Button
 // --------------------------------------------------------------
@@ -8,17 +8,43 @@
   --focus-ring-color: #{globals.$ionic-state-focus-1};
   --focus-ring-width: #{globals.$ionic-border-radius-050};
 
-  @include border-radius(globals.$ionic-border-radius-200);
+  @include globals.border-radius(globals.$ionic-border-radius-200);
+
+  align-content: center;
+
+  min-height: globals.$ionic-scale-1200;
+  max-height: globals.$ionic-scale-1800;
+
+  font-size: globals.$ionic-font-size-300;
+  font-weight: globals.$ionic-font-weight-medium;
+
+  line-height: globals.$ionic-line-height-500;
+}
+
+// Tab Button: Native
+// --------------------------------------------------
+
+.button-native {
+  @include globals.border-radius(inherit);
+  @include globals.margin(0);
+  @include globals.padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));
+  @include globals.text-inherit();
+}
+
+.button-native::after {
+  @include globals.button-state();
 }
 
 // Tab Button Focused
 // -------------------------------------------------------------------------------
 
 .button-native {
+  min-width: globals.$ionic-scale-1200;
+
   overflow: visible;
 
   &::after {
-    @include border-radius(inherit);
+    @include globals.border-radius(inherit);
   }
 }
 
@@ -37,3 +63,13 @@
 
   opacity: var(--background-activated-opacity);
 }
+
+// Tab Button Slots
+// -------------------------------------------------------------------------------
+
+// Icon
+
+::slotted(ion-icon) {
+  width: globals.$ionic-scale-600;
+  height: globals.$ionic-scale-600;
+}
diff --git a/core/src/components/tab-button/tab-button.ios.scss b/core/src/components/tab-button/tab-button.ios.scss
index b9ea2e408b..a63e2de4c7 100644
--- a/core/src/components/tab-button/tab-button.ios.scss
+++ b/core/src/components/tab-button/tab-button.ios.scss
@@ -1,4 +1,4 @@
-@import "./tab-button";
+@import "./tab-button.native";
 @import "./tab-button.ios.vars";
 
 :host {
diff --git a/core/src/components/tab-button/tab-button.md.scss b/core/src/components/tab-button/tab-button.md.scss
index c863ada84f..cf6633141c 100644
--- a/core/src/components/tab-button/tab-button.md.scss
+++ b/core/src/components/tab-button/tab-button.md.scss
@@ -1,4 +1,4 @@
-@import "./tab-button";
+@import "./tab-button.native";
 @import "./tab-button.md.vars";
 
 // Material Design Tab Button
diff --git a/core/src/components/tab-button/tab-button.native.scss b/core/src/components/tab-button/tab-button.native.scss
new file mode 100644
index 0000000000..ee594a3dc9
--- /dev/null
+++ b/core/src/components/tab-button/tab-button.native.scss
@@ -0,0 +1,16 @@
+@import "./tab-button.common";
+@import "../../themes/native/native.globals";
+
+// Tab Button: Native
+// --------------------------------------------------
+
+.button-native {
+  @include border-radius(inherit);
+  @include margin(0);
+  @include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));
+  @include text-inherit();
+}
+
+.button-native::after {
+  @include button-state();
+}