Set color on SegmentedControl icons (#6275)

langermank · web-flow · commit c50d5307596a · 2025-07-03T21:09:40.000Z
diff --git a/.changeset/seven-kangaroos-collect.md b/.changeset/seven-kangaroos-collect.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Set `color` on SegmentedControl icons
diff --git a/packages/react/src/SegmentedControl/SegmentedControl.module.css b/packages/react/src/SegmentedControl/SegmentedControl.module.css
@@ -90,6 +90,7 @@
 
   & svg {
     fill: var(--fgColor-muted);
+    color: var(--fgColor-muted);
   }
 
   /* fallback :focus state */
@@ -146,7 +147,6 @@
   padding-right: calc(var(--segmented-control-button-inner-padding) - var(--segmented-control-button-bg-inset));
   /* stylelint-disable-next-line primer/spacing */
   padding-left: calc(var(--segmented-control-button-inner-padding) - var(--segmented-control-button-bg-inset));
-  background-color: transparent;
   border-color: transparent;
   border-style: solid;
   border-width: var(--borderWidth-thin);

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"@primer/react": patch
 +---
++
 +Set `color` on SegmentedControl icons