The icon's left and right directions are reversed in RTL (right-to-left) mode

[zerdazi-mo]

Description:
In LTR (left-to-right) mode, icons render correctly, but in RTL mode, their directions (left/right) appear reversed. How can I properly customize the icons to work in both LTR and RTL layouts?

Expected Behavior:
Icons should maintain logical orientation in both LTR and RTL (e.g., arrows point the correct way regardless of text direction).

Reproduction Steps:

Set the app/website to RTL mode.

Observe misaligned or mirrored icons (e.g., back/forward arrows).

Request:

Is there a built-in way to handle RTL icon flipping?

If manual adjustments are needed, what’s the recommended approach (CSS, framework-specific fixes, etc.)?

[kheireddinebou]

The RTL icon direction issue can indeed be resolved by explicitly handling the ltr/rtl states with CSS or framework-specific logic.

Fix Confirmed:
The following adjustment works as expected, forcing icons to rotate in LTR mode while retaining natural orientation in RTL:

You can just add this to DayPicker component props

components={{
  IconLeft: ({ ...props }) => (
    <ChevronRight className="h-4 w-4 ltr:rotate-180" />
  ),
  IconRight: ({ ...props }) => (
    <ChevronLeft className="h-4 w-4 ltr:rotate-180" />
  ),
}}