Right-to-Left (RTL) Iconography Guide

The 4 Categories of RTL Icon Classification

When localizing web applications into RTL languages (Arabic, Hebrew, Persian, Farsi, Urdu), blindly mirroring the entire UI with CSS transform: scaleX(-1) ruins the user experience. Follow this definitive 4-tier taxonomy:

1. Directional & Reading Flow (MUST FLIP)

Icons communicating navigation progression, step sequences, or document layout orientation must mirror to reflect right-to-left reading flow:

• Back / Forward Arrows: Back points right (→), Forward points left (←).
• Undo / Redo: Undo arches clockwise to the right.
• Text Alignment & Bullet Lists: Indents and bullet points shift to the right margin.
• Search Magnifying Glass (Contextual): In input fields positioned on the right side.

2. Media & Playback Controls (NEVER FLIP)

Physical playback conventions are universal globally. The standard Play triangle always points to the right (▸), Fast-Forward points right (▸▸), and Rewind points left (◂◂). Inverting media controls breaks decades of learned hardware muscle memory.

3. Clocks, Timers & Physical Tools (NEVER FLIP)

Clocks, hourglasses, and circular speedometers turn clockwise worldwide. Mirroring a clock produces a non-existent reverse dial. Similarly, physical tools (coffee cup handle, camera lens, headphone jacks) reflect real-world right-handed ergonomics and should not be flipped.

4. Brand Logos & Currency (NEVER FLIP)

Logos (Apple, GitHub, Google, Visa) and currency symbols ($, €, £, ¥) are trademarked or fixed graphical entities and must never be altered.

Implementing Clean CSS RTL Mirroring

Use targeted CSS classes attached to your design system's directional icon components:

/* Apply only to directional icons */
.icon-flip-rtl {
  /* Default LTR: normal orientation */
  transform: scaleX(1);
  transition: transform 150ms ease;
}

/* Automatically mirror when parent container has dir="rtl" */
[dir="rtl"] .icon-flip-rtl,
html[dir="rtl"] .icon-flip-rtl {
  transform: scaleX(-1);
}

React / Next.js RTL Icon Component Pattern

Wrap your iconography components with an automatic direction-aware prop:

import React from 'react';

interface IconProps {
  svg: React.ReactNode;
  autoMirror?: boolean; // True for navigation arrows and step indicators
}

export const Icon: React.FC<IconProps> = ({ svg, autoMirror = false }) => {
  return (
    <span className={`inline-flex items-center ${autoMirror ? 'icon-flip-rtl' : ''}`}>
      {svg}
    </span>
  );
};

Frequently Asked Questions