diff --git a/.changeset/silent-crews-pay.md b/.changeset/silent-crews-pay.md
new file mode 100644
index 0000000000..1a2ec8eef1
--- /dev/null
+++ b/.changeset/silent-crews-pay.md
@@ -0,0 +1,5 @@
+---
+"@primer/css": patch
+---
+
+Rename SegmentedControl--iconOnly-whenNarrow to SegmentedControl-button--iconOnly-whenNarrow and place on button
diff --git a/src/segmented-control/segmented-control.scss b/src/segmented-control/segmented-control.scss
index fba58f8674..225865f3d3 100644
--- a/src/segmented-control/segmented-control.scss
+++ b/src/segmented-control/segmented-control.scss
@@ -135,10 +135,8 @@
 
 // Icon only when narrow
 @media (max-width: $width-md) {
-  .SegmentedControl--iconOnly-whenNarrow {
-    .SegmentedControl-button {
-      width: var(--primer-control-medium-size, 32px);
-    }
+  .SegmentedControl-button--iconOnly-whenNarrow {
+    width: var(--primer-control-medium-size, 32px);
 
     .SegmentedControl-content {
       padding: 0;
@@ -163,7 +161,7 @@
 
   // reset for icon-only buttons
   .SegmentedControl-button--iconOnly,
-  .SegmentedControl--iconOnly-whenNarrow .SegmentedControl-button {
+  .SegmentedControl-button--iconOnly-whenNarrow {
     min-width: unset;
   }
 }