diff --git a/beta/src/components/Icon/IconArrow.tsx b/beta/src/components/Icon/IconArrow.tsx
index 6c93c7758..942f8a2db 100644
--- a/beta/src/components/Icon/IconArrow.tsx
+++ b/beta/src/components/Icon/IconArrow.tsx
@@ -19,7 +19,7 @@ export const IconArrow = React.memo<
       fill="currentColor"
       {...rest}
       className={cn(className, {
-        'transform rotate-180': displayDirection === 'right',
+        'rotate-180': displayDirection === 'right',
       })}>
       <path fill="none" d="M0 0h24v24H0z" />
       <path d="M7.828 11H20v2H7.828l5.364 5.364-1.414 1.414L4 12l7.778-7.778 1.414 1.414z" />
diff --git a/beta/src/components/Icon/IconArrowSmall.tsx b/beta/src/components/Icon/IconArrowSmall.tsx
index e415b9fac..ed838882e 100644
--- a/beta/src/components/Icon/IconArrowSmall.tsx
+++ b/beta/src/components/Icon/IconArrowSmall.tsx
@@ -11,8 +11,8 @@ export const IconArrowSmall = React.memo<
   }
 >(function IconArrowSmall({displayDirection, className, ...rest}) {
   const classes = cn(className, {
-    'transform rotate-180': displayDirection === 'left',
-    'transform rotate-90': displayDirection === 'down',
+    'rotate-180': displayDirection === 'left',
+    'rotate-90': displayDirection === 'down',
   });
   return (
     <svg
diff --git a/beta/src/components/Icon/IconChevron.tsx b/beta/src/components/Icon/IconChevron.tsx
index dfd77b11f..fd060dc46 100644
--- a/beta/src/components/Icon/IconChevron.tsx
+++ b/beta/src/components/Icon/IconChevron.tsx
@@ -12,10 +12,10 @@ export const IconChevron = React.memo<
 >(function IconChevron({className, displayDirection, ...rest}) {
   const classes = cn(
     {
-      'transform rotate-0': displayDirection === 'down',
-      'transform rotate-90': displayDirection === 'left',
-      'transform rotate-180': displayDirection === 'up',
-      'transform -rotate-90': displayDirection === 'right',
+      'rotate-0': displayDirection === 'down',
+      'rotate-90': displayDirection === 'left',
+      'rotate-180': displayDirection === 'up',
+      '-rotate-90': displayDirection === 'right',
     },
     className
   );
diff --git a/beta/src/components/Icon/IconNavArrow.tsx b/beta/src/components/Icon/IconNavArrow.tsx
index e153f48b4..a78ba1dc5 100644
--- a/beta/src/components/Icon/IconNavArrow.tsx
+++ b/beta/src/components/Icon/IconNavArrow.tsx
@@ -13,9 +13,9 @@ export const IconNavArrow = React.memo<
   const classes = cn(
     'duration-100 ease-in transition',
     {
-      'transform rotate-0': displayDirection === 'down',
-      'transform -rotate-90': displayDirection === 'right',
-      'transform rotate-90': displayDirection === 'left',
+      'rotate-0': displayDirection === 'down',
+      '-rotate-90': displayDirection === 'right',
+      'rotate-90': displayDirection === 'left',
     },
     className
   );