diff --git a/components/collapse/Collapse.tsx b/components/collapse/Collapse.tsx
index b7e4bf813b..e8ca7ea3dc 100644
--- a/components/collapse/Collapse.tsx
+++ b/components/collapse/Collapse.tsx
@@ -106,7 +106,7 @@ const Collapse = React.forwardRef<HTMLDivElement, CollapseProps>((props, ref) =>
           mergedExpandIcon(panelProps)
         ) : (
           <RightOutlined
-            rotate={panelProps.isActive ? 90 : undefined}
+            rotate={panelProps.isActive ? (direction === 'rtl' ? -90 : 90) : undefined}
             aria-label={panelProps.isActive ? 'expanded' : 'collapsed'}
           />
         );
diff --git a/components/layout/Sider.tsx b/components/layout/Sider.tsx
index f5edd636bf..504854bc4b 100644
--- a/components/layout/Sider.tsx
+++ b/components/layout/Sider.tsx
@@ -99,7 +99,7 @@ const Sider = React.forwardRef<HTMLDivElement, SiderProps>((props, ref) => {
   };
 
   // =========================== Prefix ===========================
-  const { getPrefixCls } = useContext(ConfigContext);
+  const { getPrefixCls, direction } = useContext(ConfigContext);
   const prefixCls = getPrefixCls('layout-sider', customizePrefixCls);
 
   const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
@@ -171,9 +171,10 @@ const Sider = React.forwardRef<HTMLDivElement, SiderProps>((props, ref) => {
           {trigger || <BarsOutlined />}
         </span>
       ) : null;
+    const reverseIcon = (direction === 'rtl') === !reverseArrow;
     const iconObj = {
-      expanded: reverseArrow ? <RightOutlined /> : <LeftOutlined />,
-      collapsed: reverseArrow ? <LeftOutlined /> : <RightOutlined />,
+      expanded: reverseIcon ? <RightOutlined /> : <LeftOutlined />,
+      collapsed: reverseIcon ? <LeftOutlined /> : <RightOutlined />,
     };
     const status = collapsed ? 'collapsed' : 'expanded';
     const defaultTrigger = iconObj[status];