diff --git a/core/api.txt b/core/api.txt
index 7a6248f9f2e..eaec193c248 100644
--- a/core/api.txt
+++ b/core/api.txt
@@ -1958,16 +1958,12 @@ ion-segment-button,css-prop,--background,md
 ion-segment-button,css-prop,--background-checked,ionic
 ion-segment-button,css-prop,--background-checked,ios
 ion-segment-button,css-prop,--background-checked,md
-ion-segment-button,css-prop,--background-focused,ionic
 ion-segment-button,css-prop,--background-focused,ios
 ion-segment-button,css-prop,--background-focused,md
-ion-segment-button,css-prop,--background-focused-opacity,ionic
 ion-segment-button,css-prop,--background-focused-opacity,ios
 ion-segment-button,css-prop,--background-focused-opacity,md
-ion-segment-button,css-prop,--background-hover,ionic
 ion-segment-button,css-prop,--background-hover,ios
 ion-segment-button,css-prop,--background-hover,md
-ion-segment-button,css-prop,--background-hover-opacity,ionic
 ion-segment-button,css-prop,--background-hover-opacity,ios
 ion-segment-button,css-prop,--background-hover-opacity,md
 ion-segment-button,css-prop,--border-color,ionic
@@ -1988,10 +1984,9 @@ ion-segment-button,css-prop,--color,md
 ion-segment-button,css-prop,--color-checked,ionic
 ion-segment-button,css-prop,--color-checked,ios
 ion-segment-button,css-prop,--color-checked,md
-ion-segment-button,css-prop,--color-focused,ionic
+ion-segment-button,css-prop,--color-disabled,ionic
 ion-segment-button,css-prop,--color-focused,ios
 ion-segment-button,css-prop,--color-focused,md
-ion-segment-button,css-prop,--color-hover,ionic
 ion-segment-button,css-prop,--color-hover,ios
 ion-segment-button,css-prop,--color-hover,md
 ion-segment-button,css-prop,--indicator-box-shadow,ionic
diff --git a/core/src/components/segment-button/segment-button.scss b/core/src/components/segment-button/segment-button.common.scss
similarity index 76%
rename from core/src/components/segment-button/segment-button.scss
rename to core/src/components/segment-button/segment-button.common.scss
index f0ea7d6ab93..fc56465b00e 100644
--- a/core/src/components/segment-button/segment-button.scss
+++ b/core/src/components/segment-button/segment-button.common.scss
@@ -1,6 +1,7 @@
-@import "../../themes/native/native.globals";
+@import "../../themes/functions.string";
+@import "../../themes/mixins";
 
-// Segment Button
+// Segment Button: Common
 // --------------------------------------------------
 
 :host {
@@ -8,16 +9,8 @@
    * @prop --background: Background of the segment button
    * @prop --background-checked: Background of the checked segment button
    *
-   * @prop --background-hover: Background of the segment button on hover
-   * @prop --background-focused: Background of the segment button when focused with the tab key
-   *
-   * @prop --background-hover-opacity: Opacity of the segment button background on hover
-   * @prop --background-focused-opacity: Opacity of the segment button background when focused with the tab key
-   *
    * @prop --color: Color of the segment button
    * @prop --color-checked: Color of the checked segment button
-   * @prop --color-hover: Color of the segment button on hover
-   * @prop --color-focused: Color of the segment button when focused with the tab key
    *
    * @prop --border-radius: Radius of the segment button border
    * @prop --border-color: Color of the segment button border
@@ -42,14 +35,6 @@
    * @prop --indicator-transition: Transition of the indicator for the checked segment button
    * @prop --indicator-transform: Transform of the indicator for the checked segment button
    */
-  --color: initial;
-  --color-hover: var(--color);
-  --color-checked: var(--color);
-  --color-disabled: var(--color);
-  --padding-start: 0;
-  --padding-end: 0;
-  --padding-top: 0;
-  --padding-bottom: 0;
 
   @include border-radius(var(--border-radius));
 
@@ -79,7 +64,6 @@
 
 .button-native {
   @include border-radius(0);
-  @include text-inherit();
   @include margin(var(--margin-top), var(--margin-end), var(--margin-bottom), var(--margin-start));
   @include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));
   @include transform(translate3d(0, 0, 0));
@@ -117,10 +101,6 @@
   z-index: 2;
 }
 
-.button-native::after {
-  @include button-state();
-}
-
 .button-inner {
   display: flex;
   position: relative;
@@ -151,42 +131,6 @@
   pointer-events: none;
 }
 
-// Segment Button: Focused
-// --------------------------------------------------
-
-:host(.ion-focused) .button-native {
-  color: var(--color-focused);
-
-  &::after {
-    background: var(--background-focused);
-
-    opacity: var(--background-focused-opacity);
-  }
-}
-
-:host(:focus) {
-  outline: none;
-}
-
-// Segment Button: Hover
-// --------------------------------------------------
-
-@media (any-hover: hover) {
-  :host(:hover) .button-native {
-    color: var(--color-hover);
-
-    &::after {
-      background: var(--background-hover);
-
-      opacity: var(--background-hover-opacity);
-    }
-  }
-
-  :host(.segment-button-checked:hover) .button-native {
-    color: var(--color-checked);
-  }
-}
-
 // Segment Button Icon
 // --------------------------------------------------
 
@@ -208,8 +152,6 @@
 
   max-width: 100%;
 
-  line-height: 22px;
-
   text-overflow: ellipsis;
 
   white-space: nowrap;
@@ -254,13 +196,6 @@
   display: none;
 }
 
-// Segment Button Ripple
-// --------------------------------------------------
-
-ion-ripple-effect {
-  color: var(--ripple-color, var(--color-checked));
-}
-
 // Segment Button: Indicator
 // --------------------------------------------------
 
@@ -284,6 +219,8 @@ ion-ripple-effect {
 
   transform: var(--indicator-transform);
 
+  background: var(--indicator-color);
+
   box-shadow: var(--indicator-box-shadow);
 
   pointer-events: none;
diff --git a/core/src/components/segment-button/segment-button.ionic.scss b/core/src/components/segment-button/segment-button.ionic.scss
new file mode 100644
index 00000000000..67153d96a07
--- /dev/null
+++ b/core/src/components/segment-button/segment-button.ionic.scss
@@ -0,0 +1,114 @@
+@use "../../themes/ionic/ionic.globals.scss" as globals;
+@use "./segment-button.common";
+
+// Ionic Segment Button
+// --------------------------------------------------
+
+:host {
+  /**
+   * @prop --color-disabled: Color of the disabled segment button
+   */
+  --background: none;
+  --background-checked: var(--background);
+  --color: #{globals.$ionic-color-neutral-1000};
+  --color-checked: #{globals.$ionic-color-primary-base};
+  --color-disabled: #{globals.$ionic-color-neutral-500};
+  --border-width: #{globals.$ionic-border-size-025};
+  --border-color: #{globals.$ionic-color-neutral-300};
+  --border-style: #{globals.$ionic-border-style-solid};
+  --indicator-box-shadow: none;
+  --indicator-color: var(--color-checked);
+  --indicator-height: #{globals.$ionic-border-size-025};
+  --indicator-transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  --indicator-transform: none;
+  --padding-top: #{globals.$ionic-space-200};
+  --padding-end: #{globals.$ionic-space-200};
+  --padding-bottom: #{globals.$ionic-space-200};
+  --padding-start: #{globals.$ionic-space-200};
+  --transition: color 0.15s linear 0s, opacity 0.15s linear 0s;
+
+  min-width: globals.$ionic-scale-1200;
+  min-height: globals.$ionic-scale-1200;
+}
+
+.button-native {
+  border-bottom: var(--border-width) var(--border-style) var(--border-color);
+
+  // Ensures the indicator moves correctly between segment buttons
+  z-index: 1;
+}
+
+.button-inner {
+  @include globals.padding(globals.$ionic-space-100, null, globals.$ionic-space-100, null);
+
+  gap: globals.$ionic-space-100;
+}
+
+// Segment Button Label
+// --------------------------------------------------
+
+::slotted(ion-label) {
+  @include globals.typography(globals.$ionic-action-md);
+
+  color: var(--color);
+}
+
+// Segment Button Icon
+// --------------------------------------------------
+
+::slotted(ion-icon) {
+  width: globals.$ionic-scale-600;
+  height: globals.$ionic-scale-600;
+
+  color: var(--color);
+}
+
+// Segment Button: Checked
+// --------------------------------------------------
+
+:host(.segment-button-checked) ::slotted(ion-label),
+:host(.segment-button-checked) ::slotted(ion-icon) {
+  color: var(--color-checked);
+}
+
+// Segment Button: Disabled
+// --------------------------------------------------
+
+:host(.segment-button-disabled) ::slotted(ion-label),
+:host(.segment-button-disabled) ::slotted(ion-icon) {
+  color: var(--color-disabled);
+}
+
+// Segment Button: Indicator
+// --------------------------------------------------
+
+.segment-button-indicator {
+  @include globals.position(null, 0, 0, 0);
+
+  // Ensures the indicator displays correctly above the border
+  z-index: 2;
+}
+
+// Segment Button Layout
+// --------------------------------------------------
+
+// Segments with icons above or below the label
+// should have a fixed height of 72px
+:host(.segment-button-layout-icon-top),
+:host(.segment-button-layout-icon-bottom) {
+  height: globals.$ionic-scale-1800;
+}
+
+// Segments with icons at the start or end, or with only
+// icons or labels, should have a fixed height of 48px
+:host(.segment-button-has-label-only),
+:host(.segment-button-has-icon-only),
+:host(.segment-button-layout-icon-start),
+:host(.segment-button-layout-icon-end) {
+  height: globals.$ionic-scale-1200;
+}
+
+:host(.segment-button-layout-icon-start) .button-inner,
+:host(.segment-button-layout-icon-end) .button-inner {
+  gap: globals.$ionic-space-200;
+}
diff --git a/core/src/components/segment-button/segment-button.ios.scss b/core/src/components/segment-button/segment-button.ios.scss
index 0ee589ba2e0..74666e782da 100644
--- a/core/src/components/segment-button/segment-button.ios.scss
+++ b/core/src/components/segment-button/segment-button.ios.scss
@@ -1,4 +1,4 @@
-@import "./segment-button";
+@import "./segment-button.native";
 @import "./segment-button.ios.vars";
 
 // iOS Segment Button
@@ -95,7 +95,7 @@
   @include margin-horizontal(0, 2px);
 }
 
-// Segment Button: Checked Indicator
+// Segment Button: Indicator
 // --------------------------------------------------
 
 .segment-button-indicator {
@@ -106,10 +106,6 @@
 .segment-button-indicator-background {
   @include border-radius(var(--border-radius));
 
-  background: var(--indicator-color);
-}
-
-.segment-button-indicator-background {
   transition: var(--indicator-transition);
 }
 
diff --git a/core/src/components/segment-button/segment-button.md.scss b/core/src/components/segment-button/segment-button.md.scss
index 73496cde236..fa74aa96452 100644
--- a/core/src/components/segment-button/segment-button.md.scss
+++ b/core/src/components/segment-button/segment-button.md.scss
@@ -1,4 +1,4 @@
-@import "./segment-button";
+@import "./segment-button.native";
 @import "./segment-button.md.vars";
 
 // Material Design Segment Button
@@ -181,10 +181,6 @@
   @include position(null, 0, 0, 0);
 }
 
-.segment-button-indicator-background {
-  background: var(--indicator-color);
-}
-
 // Segment button indicator color should use the background checked variable with
 // a fallback to the default value of --indicator-color
 :host(.in-toolbar:not(.in-segment-color)) .segment-button-indicator-background {
diff --git a/core/src/components/segment-button/segment-button.native.scss b/core/src/components/segment-button/segment-button.native.scss
new file mode 100644
index 00000000000..c6cb82e00f8
--- /dev/null
+++ b/core/src/components/segment-button/segment-button.native.scss
@@ -0,0 +1,83 @@
+@import "segment-button.common";
+@import "../../themes/native/native.globals";
+
+// Segment Button: Native
+// --------------------------------------------------
+
+:host {
+  /**
+   * @prop --background-hover: Background of the segment button on hover
+   * @prop --background-focused: Background of the segment button when focused with the tab key
+   *
+   * @prop --background-hover-opacity: Opacity of the segment button background on hover
+   * @prop --background-focused-opacity: Opacity of the segment button background when focused with the tab key
+   *
+   * @prop --color-hover: Color of the segment button on hover
+   * @prop --color-focused: Color of the segment button when focused with the tab key
+   */
+  --color: initial;
+  --color-hover: var(--color);
+  --color-checked: var(--color);
+  --padding-start: 0;
+  --padding-end: 0;
+  --padding-top: 0;
+  --padding-bottom: 0;
+}
+
+.button-native {
+  @include text-inherit();
+}
+
+.button-native::after {
+  @include button-state();
+}
+
+// Segment Button: Focused
+// --------------------------------------------------
+
+:host(.ion-focused) .button-native {
+  color: var(--color-focused);
+
+  &::after {
+    background: var(--background-focused);
+
+    opacity: var(--background-focused-opacity);
+  }
+}
+
+:host(:focus) {
+  outline: none;
+}
+
+// Segment Button: Hover
+// --------------------------------------------------
+
+@media (any-hover: hover) {
+  :host(:hover) .button-native {
+    color: var(--color-hover);
+
+    &::after {
+      background: var(--background-hover);
+
+      opacity: var(--background-hover-opacity);
+    }
+  }
+
+  :host(.segment-button-checked:hover) .button-native {
+    color: var(--color-checked);
+  }
+}
+
+// Segment Button Label
+// --------------------------------------------------
+
+::slotted(ion-label) {
+  line-height: 22px;
+}
+
+// Segment Button Ripple
+// --------------------------------------------------
+
+ion-ripple-effect {
+  color: var(--ripple-color, var(--color-checked));
+}
diff --git a/core/src/components/segment-button/segment-button.tsx b/core/src/components/segment-button/segment-button.tsx
index 3f2894f4b93..eafe9d44bf4 100644
--- a/core/src/components/segment-button/segment-button.tsx
+++ b/core/src/components/segment-button/segment-button.tsx
@@ -25,7 +25,7 @@ let ids = 0;
   styleUrls: {
     ios: 'segment-button.ios.scss',
     md: 'segment-button.md.scss',
-    ionic: 'segment-button.md.scss',
+    ionic: 'segment-button.ionic.scss',
   },
   shadow: true,
 })
diff --git a/core/src/components/segment/segment.scss b/core/src/components/segment/segment.common.scss
similarity index 84%
rename from core/src/components/segment/segment.scss
rename to core/src/components/segment/segment.common.scss
index 5c1591f72e2..3f6b1aacf0a 100644
--- a/core/src/components/segment/segment.scss
+++ b/core/src/components/segment/segment.common.scss
@@ -1,14 +1,12 @@
-@import "../../themes/native/native.globals";
+@import "../../themes/mixins";
 
-// Segment
+// Segment: Common
 // --------------------------------------------------
 
 :host {
   /**
    * @prop --background: Background of the segment button
    */
-  --ripple-color: currentColor;
-
   @include font-smoothing();
 
   display: grid;
@@ -24,8 +22,6 @@
 
   background: var(--background);
 
-  font-family: $font-family-base;
-
   text-align: center;
 
   contain: paint;
diff --git a/core/src/components/segment/segment.ionic.scss b/core/src/components/segment/segment.ionic.scss
new file mode 100644
index 00000000000..41ea69d14f7
--- /dev/null
+++ b/core/src/components/segment/segment.ionic.scss
@@ -0,0 +1,9 @@
+@use "../../themes/ionic/ionic.globals.scss" as globals;
+@use "./segment.common";
+
+// Ionic Segment
+// --------------------------------------------------
+
+:host {
+  --background: #{globals.$ionic-color-base-white};
+}
diff --git a/core/src/components/segment/segment.ios.scss b/core/src/components/segment/segment.ios.scss
index 148179a1523..6fdb5156363 100644
--- a/core/src/components/segment/segment.ios.scss
+++ b/core/src/components/segment/segment.ios.scss
@@ -1,4 +1,4 @@
-@import "./segment";
+@import "./segment.native";
 @import "./segment.ios.vars";
 
 // iOS Segment
diff --git a/core/src/components/segment/segment.md.scss b/core/src/components/segment/segment.md.scss
index e61c8eba84d..5cbecd37c41 100644
--- a/core/src/components/segment/segment.md.scss
+++ b/core/src/components/segment/segment.md.scss
@@ -1,4 +1,4 @@
-@import "./segment";
+@import "./segment.native";
 @import "./segment.md.vars";
 
 // Material Design Segment
diff --git a/core/src/components/segment/segment.native.scss b/core/src/components/segment/segment.native.scss
new file mode 100644
index 00000000000..399f2338f26
--- /dev/null
+++ b/core/src/components/segment/segment.native.scss
@@ -0,0 +1,11 @@
+@import "../../themes/native/native.globals";
+@import "./segment.common";
+
+// Segment: Native
+// --------------------------------------------------
+
+:host {
+  --ripple-color: currentColor;
+
+  font-family: $font-family-base;
+}
diff --git a/core/src/components/segment/segment.tsx b/core/src/components/segment/segment.tsx
index 72424f772e3..35f74efe71d 100644
--- a/core/src/components/segment/segment.tsx
+++ b/core/src/components/segment/segment.tsx
@@ -19,7 +19,7 @@ import type { SegmentChangeEventDetail, SegmentValue } from './segment-interface
   styleUrls: {
     ios: 'segment.ios.scss',
     md: 'segment.md.scss',
-    ionic: 'segment.md.scss',
+    ionic: 'segment.ionic.scss',
   },
   shadow: true,
 })
diff --git a/core/src/components/segment/test/layout/index.html b/core/src/components/segment/test/layout/index.html
new file mode 100644
index 00000000000..fa31e0b5724
--- /dev/null
+++ b/core/src/components/segment/test/layout/index.html
@@ -0,0 +1,122 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Segment - Layout</title>
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
+    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
+    <script src="../../../../../scripts/testing/scripts.js"></script>
+    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
+    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+
+    <style>
+      ion-content {
+        --background: #f8f8f8;
+      }
+
+      ion-segment {
+        margin: 10px 0;
+      }
+    </style>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Segment - Layout</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content>
+        <ion-segment value="a">
+          <ion-segment-button value="a">
+            <ion-label>Tab</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="b">
+            <ion-label>Tab</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="c">
+            <ion-label>Tab</ion-label>
+          </ion-segment-button>
+        </ion-segment>
+
+        <ion-segment value="a">
+          <ion-segment-button value="a">
+            <ion-icon name="triangle-outline"></ion-icon>
+            <ion-label>Tab</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="b">
+            <ion-icon name="triangle-outline"></ion-icon>
+            <ion-label>Tab</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="c">
+            <ion-icon name="triangle-outline"></ion-icon>
+            <ion-label>Tab</ion-label>
+          </ion-segment-button>
+        </ion-segment>
+
+        <ion-segment value="a">
+          <ion-segment-button value="a" layout="icon-bottom">
+            <ion-icon name="triangle-outline"></ion-icon>
+            <ion-label>Tab</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="b" layout="icon-bottom">
+            <ion-icon name="triangle-outline"></ion-icon>
+            <ion-label>Tab</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="c" layout="icon-bottom">
+            <ion-icon name="triangle-outline"></ion-icon>
+            <ion-label>Tab</ion-label>
+          </ion-segment-button>
+        </ion-segment>
+
+        <ion-segment value="a">
+          <ion-segment-button value="a" layout="icon-start">
+            <ion-icon name="triangle-outline"></ion-icon>
+            <ion-label>Tab</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="b" layout="icon-start">
+            <ion-icon name="triangle-outline"></ion-icon>
+            <ion-label>Tab</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="c" layout="icon-start">
+            <ion-icon name="triangle-outline"></ion-icon>
+            <ion-label>Tab</ion-label>
+          </ion-segment-button>
+        </ion-segment>
+
+        <ion-segment value="a">
+          <ion-segment-button value="a" layout="icon-end">
+            <ion-icon name="triangle-outline"></ion-icon>
+            <ion-label>Tab</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="b" layout="icon-end">
+            <ion-icon name="triangle-outline"></ion-icon>
+            <ion-label>Tab</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="c" layout="icon-end">
+            <ion-icon name="triangle-outline"></ion-icon>
+            <ion-label>Tab</ion-label>
+          </ion-segment-button>
+        </ion-segment>
+
+        <ion-segment value="a">
+          <ion-segment-button value="a" layout="icon-end">
+            <ion-icon name="triangle-outline"></ion-icon>
+          </ion-segment-button>
+          <ion-segment-button value="b" layout="icon-end">
+            <ion-icon name="triangle-outline"></ion-icon>
+          </ion-segment-button>
+          <ion-segment-button value="c" layout="icon-end">
+            <ion-icon name="triangle-outline"></ion-icon>
+          </ion-segment-button>
+        </ion-segment>
+      </ion-content>
+    </ion-app>
+  </body>
+</html>
diff --git a/core/src/components/segment/test/layout/segment.e2e.ts b/core/src/components/segment/test/layout/segment.e2e.ts
new file mode 100644
index 00000000000..380accb1743
--- /dev/null
+++ b/core/src/components/segment/test/layout/segment.e2e.ts
@@ -0,0 +1,83 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+/**
+ * This behavior does not vary across directions.
+ */
+configs({ modes: ['ios', 'md', 'ionic-md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('segment: layout'), () => {
+    ['icon-top', 'icon-bottom', 'icon-start', 'icon-end'].forEach((layout) => {
+      test(`${layout} layout - should not have visual regressions`, async ({ page }) => {
+        await page.setContent(
+          `
+          <ion-segment value="a">
+            <ion-segment-button layout="${layout}" value="a">
+              <ion-icon name="triangle-outline"></ion-icon>
+              <ion-label>Tab</ion-label>
+            </ion-segment-button>
+            <ion-segment-button layout="${layout}" value="b">
+              <ion-icon name="triangle-outline"></ion-icon>
+              <ion-label>Tab</ion-label>
+            </ion-segment-button>
+            <ion-segment-button layout="${layout}" value="c">
+              <ion-icon name="triangle-outline"></ion-icon>
+              <ion-label>Tab</ion-label>
+            </ion-segment-button>
+          </ion-segment>
+        `,
+          config
+        );
+
+        const segment = page.locator('ion-segment');
+
+        await expect(segment).toHaveScreenshot(screenshot(`segment-layout-${layout}`));
+      });
+    });
+
+    test('icon only layout - should not have visual regressions', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-segment value="a">
+          <ion-segment-button value="a">
+            <ion-icon name="triangle-outline"></ion-icon>
+          </ion-segment-button>
+          <ion-segment-button value="b">
+            <ion-icon name="triangle-outline"></ion-icon>
+          </ion-segment-button>
+          <ion-segment-button value="c">
+            <ion-icon name="triangle-outline"></ion-icon>
+          </ion-segment-button>
+        </ion-segment>
+      `,
+        config
+      );
+
+      const segment = page.locator('ion-segment');
+
+      await expect(segment).toHaveScreenshot(screenshot(`segment-layout-icon-only`));
+    });
+
+    test('label only layout - should not have visual regressions', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-segment value="a">
+          <ion-segment-button value="a">
+            <ion-label>Tab</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="b">
+            <ion-label>Tab</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="c">
+            <ion-label>Tab</ion-label>
+          </ion-segment-button>
+        </ion-segment>
+      `,
+        config
+      );
+
+      const segment = page.locator('ion-segment');
+
+      await expect(segment).toHaveScreenshot(screenshot(`segment-layout-label-only`));
+    });
+  });
+});
diff --git a/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-bottom-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-bottom-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..4ca93bb7c0c
Binary files /dev/null and b/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-bottom-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-bottom-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-bottom-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..86550be688e
Binary files /dev/null and b/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-bottom-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-bottom-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-bottom-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..7aabc0283c7
Binary files /dev/null and b/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-bottom-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-bottom-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-bottom-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..392ef661856
Binary files /dev/null and b/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-bottom-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-bottom-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-bottom-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..48a379b07a4
Binary files /dev/null and b/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-bottom-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-bottom-ios-ltr-Mobile-Safari-linux.png b/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-bottom-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..4f092276b95
Binary files /dev/null and b/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-bottom-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-bottom-md-ltr-Mobile-Chrome-linux.png b/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-bottom-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..295a0309cdd
Binary files /dev/null and b/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-bottom-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-bottom-md-ltr-Mobile-Firefox-linux.png b/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-bottom-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..79b47c1c0df
Binary files /dev/null and b/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-bottom-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-bottom-md-ltr-Mobile-Safari-linux.png b/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-bottom-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..538c162f5da
Binary files /dev/null and b/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-bottom-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-end-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-end-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..07260b4d75e
Binary files /dev/null and b/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-end-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-end-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-end-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..28cf0eb348c
Binary files /dev/null and b/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-end-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-end-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-end-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..73ebfc19256
Binary files /dev/null and b/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-end-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-end-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-end-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..fe09ce753e9
Binary files /dev/null and b/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-end-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-end-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-end-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..f4bdd8fe881
Binary files /dev/null and b/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-end-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-end-ios-ltr-Mobile-Safari-linux.png b/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-end-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..aa6b603a46a
Binary files /dev/null and b/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-end-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-end-md-ltr-Mobile-Chrome-linux.png b/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-end-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..47c8fdf921e
Binary files /dev/null and b/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-end-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-end-md-ltr-Mobile-Firefox-linux.png b/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-end-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..1fba319e22f
Binary files /dev/null and b/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-end-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-end-md-ltr-Mobile-Safari-linux.png b/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-end-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..f7e012bcbed
Binary files /dev/null and b/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-end-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-only-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-only-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..cc762157df8
Binary files /dev/null and b/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-only-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-only-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-only-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..b96811e2947
Binary files /dev/null and b/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-only-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-only-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-only-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..a8058a9fb37
Binary files /dev/null and b/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-only-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-only-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-only-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..bf5d38acf4e
Binary files /dev/null and b/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-only-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-only-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-only-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..c696fbfa330
Binary files /dev/null and b/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-only-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-only-ios-ltr-Mobile-Safari-linux.png b/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-only-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..84a941d6fee
Binary files /dev/null and b/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-only-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-only-md-ltr-Mobile-Chrome-linux.png b/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-only-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..5f0bb97e8ea
Binary files /dev/null and b/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-only-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-only-md-ltr-Mobile-Firefox-linux.png b/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-only-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..227cfe19b02
Binary files /dev/null and b/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-only-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-only-md-ltr-Mobile-Safari-linux.png b/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-only-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..f8ed38372e3
Binary files /dev/null and b/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-only-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-start-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-start-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..47afe37a0d3
Binary files /dev/null and b/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-start-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-start-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-start-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..bb988021123
Binary files /dev/null and b/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-start-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-start-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-start-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..69d793dd770
Binary files /dev/null and b/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-start-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-start-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-start-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..8481c21fe00
Binary files /dev/null and b/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-start-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-start-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-start-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..384be422205
Binary files /dev/null and b/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-start-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-start-ios-ltr-Mobile-Safari-linux.png b/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-start-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..b208f5eae5b
Binary files /dev/null and b/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-start-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-start-md-ltr-Mobile-Chrome-linux.png b/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-start-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..16364fec008
Binary files /dev/null and b/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-start-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-start-md-ltr-Mobile-Firefox-linux.png b/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-start-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..3de9bcc8975
Binary files /dev/null and b/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-start-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-start-md-ltr-Mobile-Safari-linux.png b/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-start-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..aff32b395d6
Binary files /dev/null and b/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-start-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-top-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-top-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..2e23a58560e
Binary files /dev/null and b/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-top-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-top-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-top-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..8df6a2d5f67
Binary files /dev/null and b/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-top-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-top-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-top-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..7835d015ea0
Binary files /dev/null and b/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-top-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-top-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-top-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..9f027f5e5a6
Binary files /dev/null and b/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-top-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-top-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-top-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..2744eb48339
Binary files /dev/null and b/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-top-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-top-ios-ltr-Mobile-Safari-linux.png b/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-top-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..9d09ebda5c8
Binary files /dev/null and b/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-top-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-top-md-ltr-Mobile-Chrome-linux.png b/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-top-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..057e777b7d3
Binary files /dev/null and b/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-top-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-top-md-ltr-Mobile-Firefox-linux.png b/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-top-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..49872460350
Binary files /dev/null and b/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-top-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-top-md-ltr-Mobile-Safari-linux.png b/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-top-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..a8e7f938d37
Binary files /dev/null and b/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-icon-top-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-label-only-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-label-only-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..36b08d592b9
Binary files /dev/null and b/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-label-only-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-label-only-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-label-only-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..e2ca4625b59
Binary files /dev/null and b/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-label-only-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-label-only-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-label-only-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..55bf6d28856
Binary files /dev/null and b/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-label-only-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-label-only-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-label-only-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..55f4ff412cc
Binary files /dev/null and b/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-label-only-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-label-only-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-label-only-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..46b530f3963
Binary files /dev/null and b/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-label-only-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-label-only-ios-ltr-Mobile-Safari-linux.png b/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-label-only-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..a39bcd4a570
Binary files /dev/null and b/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-label-only-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-label-only-md-ltr-Mobile-Chrome-linux.png b/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-label-only-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..c05e4849dab
Binary files /dev/null and b/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-label-only-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-label-only-md-ltr-Mobile-Firefox-linux.png b/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-label-only-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..a83f0b87714
Binary files /dev/null and b/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-label-only-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-label-only-md-ltr-Mobile-Safari-linux.png b/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-label-only-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..482e76d6fe6
Binary files /dev/null and b/core/src/components/segment/test/layout/segment.e2e.ts-snapshots/segment-layout-label-only-md-ltr-Mobile-Safari-linux.png differ