diff --git a/packages/ui/src/components/collapsible.css b/packages/ui/src/components/collapsible.css
index 88f37ea7f..6408cfb5e 100644
--- a/packages/ui/src/components/collapsible.css
+++ b/packages/ui/src/components/collapsible.css
@@ -29,11 +29,10 @@
     }
 
     [data-slot="collapsible-arrow-icon"] {
-      display: none;
-    }
-
-    [data-slot="collapsible-arrow-icon"][data-direction="right"] {
       display: inline-flex;
+      color: var(--icon-weaker);
+      transform: rotate(-90deg);
+      transition: transform 0.15s ease;
     }
 
     &:hover [data-slot="collapsible-arrow"] {
@@ -74,12 +73,8 @@
       opacity: 1;
     }
 
-    [data-slot="collapsible-arrow-icon"][data-direction="right"] {
-      display: none;
-    }
-
-    [data-slot="collapsible-arrow-icon"][data-direction="down"] {
-      display: inline-flex;
+    [data-slot="collapsible-arrow-icon"] {
+      transform: rotate(0deg);
     }
   }
 
diff --git a/packages/ui/src/components/collapsible.tsx b/packages/ui/src/components/collapsible.tsx
index 548088287..8b5cd825c 100644
--- a/packages/ui/src/components/collapsible.tsx
+++ b/packages/ui/src/components/collapsible.tsx
@@ -34,10 +34,7 @@ function CollapsibleContent(props: ComponentProps<typeof Kobalte.Content>) {
 function CollapsibleArrow(props?: ComponentProps<"div">) {
   return (
     <div data-slot="collapsible-arrow" {...(props || {})}>
-      <span data-slot="collapsible-arrow-icon" data-direction="right">
-        <Icon name="chevron-right" size="small" />
-      </span>
-      <span data-slot="collapsible-arrow-icon" data-direction="down">
+      <span data-slot="collapsible-arrow-icon">
         <Icon name="chevron-down" size="small" />
       </span>
     </div>