Which icons to mirror in RTL
The basic rule
When a layout flips to right-to-left, some icons should flip with it. The test is simple: does the icon show direction, movement or reading order? If yes, mirror it. If it shows an object or a symbol, keep it as it is.
Mirroring is not decoration. It keeps the meaning of an icon aligned with the way the reader moves through the screen. An arrow that points to the right on an Arabic page suggests moving away from the start of the content, which is the opposite of what a back button should say.
Icons that should be mirrored
- Back and forward arrows, because back points toward the start of the reading direction.
- Chevrons that open a next level, such as a list row that leads to a detail screen.
- Progress direction in steppers and progress bars that fill along the reading direction.
- Reply, forward and send arrows.
- List indent and outdent icons, and text-alignment icons.
In practice, keep one source icon and flip it with CSS or a mirrored variant in the icon set. Name the directional icons in your design system, so developers know which ones need the flip and the rest stay untouched.
Icons that should not be mirrored
Logos and brand marks
A mirrored logo changes the brand. Keep it exactly as designed.
Clocks and checkmarks
Clocks turn the same way everywhere, and a checkmark is a fixed symbol.
Real-world objects
Phone, camera, magnifier and similar object icons keep their shape.
Numerals
Digits keep their form and their order, so do not flip them.
Cases where context decides
Some elements are debated. A media-playback timeline usually stays left to right, because play and seek controls follow a convention that many users know from physical players. A chart with a time axis can go either way, since the answer depends on whether the audience reads the axis as text or as a graph.
Material Design publishes bidirectionality guidance that lists which icons to mirror and which to keep. Use it as a starting point, then adapt it to the product.
Icons with a built-in direction need a second look. A send icon drawn as a paper plane points forward in the reading direction, so it usually flips. A share icon built from connected dots has no direction, so it stays.
When a case is unclear, show both versions to native Arabic readers and follow what they find natural.
Sources
- Material Design. Bidirectionality guidance. https://m2.material.io/design/usability/bidirectionality.html
This guide was drafted with AI assistance from public standards and references. For the exact wording of a standard, use the sources listed above.