diff --git a/packages/components/src/toggle-group-control/toggle-group-control-option-base/styles.ts b/packages/components/src/toggle-group-control/toggle-group-control-option-base/styles.ts
index da2cc709f50454..885ff171eb211f 100644
--- a/packages/components/src/toggle-group-control/toggle-group-control-option-base/styles.ts
+++ b/packages/components/src/toggle-group-control/toggle-group-control-option-base/styles.ts
@@ -55,13 +55,6 @@ export const buttonView = css`
 	}
 `;
 
-export const buttonActive = css`
-	color: ${ COLORS.white };
-	&:active {
-		background: transparent;
-	}
-`;
-
 export const ButtonContentView = styled.div`
 	font-size: ${ CONFIG.fontSize };
 	line-height: 1;
@@ -82,8 +75,17 @@ export const isIcon = ( {
 	};
 
 	return css`
+		color: ${ COLORS.gray[ 900 ] };
 		width: ${ iconButtonSizes[ size ] };
 		padding-left: 0;
 		padding-right: 0;
 	`;
 };
+
+export const buttonActive = css`
+	color: ${ COLORS.white };
+
+	&:active {
+		background: transparent;
+	}
+`;