[Bug]: Icon Alignment Issues in Large-Sized Button Components

[riddhybansal]

Package

@carbon/react, @carbon/web-components

Browser

Chrome, Safari, Firefox, Edge

Package version

1.75.0

React version

No response

Description

When using icon-only buttons with sizes larger than lg:

• Icons are not vertically centered
• Inconsistent padding/spacing around the icon
• Misalignment becomes more noticeable as button size increases

According to the Figma:

• Icons should be perfectly centered within the button container
• Consistent padding should be maintained proportionally across all button sizes
• Icon alignment should remain consistent regardless of button size

This issue affects all icon-only button variants (primary, secondary, ghost, etc.)

Reproduction/example

https://react.carbondesignsystem.com/?path=/story/components-button--icon-button&args=isExpressive:!false;isSelected:!false;kind:primary;size:2xl

Steps to reproduce

• Go to storybook -> Button -> Icon Button
• From Controls set size as xl/2xl
• You can see Icons are not alligned in any of the variant (primary, secondary, danger) or (isSelected or Isexpressive) states

Suggested Severity

None

Application/PAL

No response

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems