diff --git a/packages/lib/src/action-icon/ActionIcon.tsx b/packages/lib/src/action-icon/ActionIcon.tsx
index f7a9022ee3..a8cca8dd62 100644
--- a/packages/lib/src/action-icon/ActionIcon.tsx
+++ b/packages/lib/src/action-icon/ActionIcon.tsx
@@ -28,8 +28,8 @@ const ActionIconContainer = styled.div<
   display: flex;
   justify-content: center;
   align-items: center;
+  width: ${({ size }) => getSize(size)};
   height: ${({ size }) => getSize(size)};
-  aspect-ratio: 1 / 1;
   text-decoration: none;
   border-radius: ${({ shape, size }) => getBorderRadius(shape, size)};
   background-color: ${({ color }) => getBackgroundColor(color)};
diff --git a/packages/lib/src/action-icon/utils.ts b/packages/lib/src/action-icon/utils.ts
index 8daf642ca7..73d6287c80 100644
--- a/packages/lib/src/action-icon/utils.ts
+++ b/packages/lib/src/action-icon/utils.ts
@@ -49,10 +49,10 @@ const borderRadiusMap = {
 };
 
 const sizeMap = {
-  xsmall: "var(--height-s)",
-  small: "var(--height-m)",
-  medium: "var(--height-xl)",
-  large: "var(--height-xxxl)",
+  xsmall: "24px",
+  small: "32px",
+  medium: "40px",
+  large: "56px",
   xlarge: "72px",
   xxlarge: "80px",
 };
@@ -91,8 +91,7 @@ export const getBorderRadius = (shape: ActionIconPropTypes["shape"], size: Actio
   return "100%";
 };
 
-export const getSize = (size: ActionIconPropTypes["size"]) =>
-  size && sizeMap[size] ? sizeMap[size] : "var(--height-xl)";
+export const getSize = (size: ActionIconPropTypes["size"]) => (size && sizeMap[size] ? sizeMap[size] : "40px");
 
 export const getIconSize = (size: ActionIconPropTypes["size"]) =>
   size && iconSizeMap[size] ? iconSizeMap[size] : "var(--height-s)";