From 1d7bb0de1ba66008aaa50cc3cdbcadc5e33fc95e Mon Sep 17 00:00:00 2001
From: Red Ochsenbein <red.ochsenbein@frontify.com>
Date: Tue, 12 May 2026 11:33:23 +0200
Subject: [PATCH 1/3] feat(SegmentedControl): allow square display for icon
 items

---
 .../SegmentedControl.stories.tsx              |  6 +++---
 .../SegmentedControl/SegmentedControl.tsx     | 21 +++++++++++++------
 .../styles/segmentedControl.module.scss       |  8 +++++++
 3 files changed, 26 insertions(+), 9 deletions(-)

diff --git a/packages/components/src/components/SegmentedControl/SegmentedControl.stories.tsx b/packages/components/src/components/SegmentedControl/SegmentedControl.stories.tsx
index 72bf748789..aa208a089d 100644
--- a/packages/components/src/components/SegmentedControl/SegmentedControl.stories.tsx
+++ b/packages/components/src/components/SegmentedControl/SegmentedControl.stories.tsx
@@ -80,13 +80,13 @@ export const WithTooltip: Story = {
 export const IconOnly: Story = {
     render: (args) => (
         <SegmentedControl.Root {...args}>
-            <SegmentedControl.Item value="first">
+            <SegmentedControl.Item value="first" iconOnly>
                 <IconIcon size={20} />
             </SegmentedControl.Item>
-            <SegmentedControl.Item value="second">
+            <SegmentedControl.Item value="second" iconOnly>
                 <IconIcon size={20} />
             </SegmentedControl.Item>
-            <SegmentedControl.Item value="third">
+            <SegmentedControl.Item value="third" iconOnly>
                 <IconIcon size={20} />
             </SegmentedControl.Item>
         </SegmentedControl.Root>
diff --git a/packages/components/src/components/SegmentedControl/SegmentedControl.tsx b/packages/components/src/components/SegmentedControl/SegmentedControl.tsx
index b3bc56dde2..b184297c43 100644
--- a/packages/components/src/components/SegmentedControl/SegmentedControl.tsx
+++ b/packages/components/src/components/SegmentedControl/SegmentedControl.tsx
@@ -79,20 +79,29 @@ SegmentedControlRoot.displayName = 'SegmentedControl.Root';
 type SegmentedControlItemProps = {
     children: ReactNode;
     value: string;
+    /**
+     * Render the item as a square, sized to match the control's height. Intended for
+     * icon-only content. For the active-indicator animation to look correct, apply this
+     * prop consistently to every item in the control.
+     * @default false
+     */
+    iconOnly?: boolean;
 };
 
 export const SegmentedControlItem = (
-    { children, ...itemProps }: SegmentedControlItemProps,
+    { children, iconOnly, ...itemProps }: SegmentedControlItemProps,
     ref: ForwardedRef<HTMLButtonElement>,
 ) => (
-    <ToggleGroupPrimitive.Item ref={ref} {...itemProps} className={styles.item} asChild={false}>
-        {/* Separator */}
+    <ToggleGroupPrimitive.Item
+        ref={ref}
+        {...itemProps}
+        className={styles.item}
+        asChild={false}
+        data-icon-only={iconOnly}
+    >
         <span className={styles.separator} />
         <span className={styles.itemLabel}>
-            {/* Active children */}
             <span className={styles.itemLabelActive}>{children}</span>
-
-            {/* Inactive children */}
             <span className={styles.itemLabelInactive}>{children}</span>
         </span>
     </ToggleGroupPrimitive.Item>
diff --git a/packages/components/src/components/SegmentedControl/styles/segmentedControl.module.scss b/packages/components/src/components/SegmentedControl/styles/segmentedControl.module.scss
index e44417cb31..be211e2f01 100644
--- a/packages/components/src/components/SegmentedControl/styles/segmentedControl.module.scss
+++ b/packages/components/src/components/SegmentedControl/styles/segmentedControl.module.scss
@@ -49,6 +49,14 @@ $radius-without-border: calc(var(--border-radius-medium) - var(--border-width-de
     user-select: none;
     min-width: 0;
 
+    &[data-icon-only='true'] {
+        aspect-ratio: 1;
+    }
+
+    &[data-icon-only='true'] .itemLabel {
+        padding-inline: 0;
+    }
+
     // Hover on unselected items but not when disabled
     &[aria-checked='false']:enabled:hover:not(:focus-visible) {
         background-color: var(--color-surface-hover);

From db11db9dc3d1f75d2545f226d006a84e57f89b0b Mon Sep 17 00:00:00 2001
From: Red Ochsenbein <red.ochsenbein@frontify.com>
Date: Tue, 12 May 2026 11:54:56 +0200
Subject: [PATCH 2/3] chore: add changeset

---
 .changeset/warm-rocks-leave.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/warm-rocks-leave.md

diff --git a/.changeset/warm-rocks-leave.md b/.changeset/warm-rocks-leave.md
new file mode 100644
index 0000000000..566578666d
--- /dev/null
+++ b/.changeset/warm-rocks-leave.md
@@ -0,0 +1,5 @@
+---
+"@frontify/fondue-components": minor
+---
+
+feat(SegmentedControl): allow square display for icon items

From d38eda56b10bbc7387a6cc25ab4e53c80df69a79 Mon Sep 17 00:00:00 2001
From: Red Ochsenbein <red.ochsenbein@frontify.com>
Date: Wed, 20 May 2026 14:12:05 +0200
Subject: [PATCH 3/3] chore: fix icon sizes

---
 .../SegmentedControl/SegmentedControl.stories.tsx           | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/components/src/components/SegmentedControl/SegmentedControl.stories.tsx b/packages/components/src/components/SegmentedControl/SegmentedControl.stories.tsx
index 89185ab4ca..4013a7ae5f 100644
--- a/packages/components/src/components/SegmentedControl/SegmentedControl.stories.tsx
+++ b/packages/components/src/components/SegmentedControl/SegmentedControl.stories.tsx
@@ -81,13 +81,13 @@ export const IconOnly: Story = {
     render: (args) => (
         <SegmentedControl.Root {...args}>
             <SegmentedControl.Item value="first" iconOnly>
-                <IconIcon size={20} />
+                <IconIcon size={16} />
             </SegmentedControl.Item>
             <SegmentedControl.Item value="second" iconOnly>
-                <IconIcon size={20} />
+                <IconIcon size={16} />
             </SegmentedControl.Item>
             <SegmentedControl.Item value="third" iconOnly>
-                <IconIcon size={20} />
+                <IconIcon size={16} />
             </SegmentedControl.Item>
         </SegmentedControl.Root>
     ),