diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
index 1b1f7fbdcf15..e9021ec11c03 100644
--- a/src/components/Button/index.tsx
+++ b/src/components/Button/index.tsx
@@ -293,11 +293,11 @@ function Button(
)}
@@ -312,6 +312,7 @@ function Button(
small={small}
medium={medium}
large={large}
+ isButtonIcon
/>
) : (
)}
diff --git a/src/components/Icon/index.tsx b/src/components/Icon/index.tsx
index b4da5c0b0fa2..4ec4556e1c86 100644
--- a/src/components/Icon/index.tsx
+++ b/src/components/Icon/index.tsx
@@ -40,9 +40,6 @@ type IconProps = {
/** Is icon pressed */
pressed?: boolean;
- /** Is icon will be used with text */
- hasText?: boolean;
-
/** Additional styles to add to the Icon */
additionalStyles?: StyleProp;
@@ -51,6 +48,9 @@ type IconProps = {
/** Determines how the image should be resized to fit its container */
contentFit?: ImageContentFit;
+
+ /** Determines whether the icon is being used within a button. The icon size will remain the same for both icon-only buttons and buttons with text. */
+ isButtonIcon?: boolean;
};
function Icon({
@@ -59,7 +59,6 @@ function Icon({
height = variables.iconSizeNormal,
fill = undefined,
small = false,
- hasText = false,
large = false,
medium = false,
inline = false,
@@ -68,10 +67,11 @@ function Icon({
pressed = false,
testID = '',
contentFit = 'cover',
+ isButtonIcon = false,
}: IconProps) {
const StyleUtils = useStyleUtils();
const styles = useThemeStyles();
- const {width: iconWidth, height: iconHeight} = StyleUtils.getIconWidthAndHeightStyle(small, medium, large, width, height, hasText);
+ const {width: iconWidth, height: iconHeight} = StyleUtils.getIconWidthAndHeightStyle(small, medium, large, width, height, isButtonIcon);
const iconStyles = [StyleUtils.getWidthAndHeightStyle(width ?? 0, height), IconWrapperStyles, styles.pAbsolute, additionalStyles];
if (inline) {
diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts
index 070e78265ff2..02778b4ca351 100644
--- a/src/styles/utils/index.ts
+++ b/src/styles/utils/index.ts
@@ -490,14 +490,14 @@ function getWidthAndHeightStyle(width: number, height?: number): Pick {
+function getIconWidthAndHeightStyle(small: boolean, medium: boolean, large: boolean, width: number, height: number, isButtonIcon: boolean): Pick {
switch (true) {
case small:
- return {width: hasText ? variables.iconSizeExtraSmall : variables.iconSizeSmall, height: hasText ? variables.iconSizeExtraSmall : variables?.iconSizeSmall};
+ return {width: isButtonIcon ? variables.iconSizeExtraSmall : variables.iconSizeSmall, height: isButtonIcon ? variables.iconSizeExtraSmall : variables?.iconSizeSmall};
case medium:
- return {width: hasText ? variables.iconSizeSmall : variables.iconSizeNormal, height: hasText ? variables.iconSizeSmall : variables.iconSizeNormal};
+ return {width: isButtonIcon ? variables.iconSizeSmall : variables.iconSizeNormal, height: isButtonIcon ? variables.iconSizeSmall : variables.iconSizeNormal};
case large:
- return {width: hasText ? variables.iconSizeNormal : variables.iconSizeLarge, height: hasText ? variables.iconSizeNormal : variables.iconSizeLarge};
+ return {width: isButtonIcon ? variables.iconSizeNormal : variables.iconSizeLarge, height: isButtonIcon ? variables.iconSizeNormal : variables.iconSizeLarge};
default: {
return {width, height};
}