Icon Direction: What Flips and What Doesn't

The Golden Rule

When localizing interfaces for RTL languages, one of the trickiest questions designers and developers face is: Which icons should flip?

The answer seems simple at first—flip everything for RTL, right? Wrong. Some icons should mirror, while others must stay exactly the same. Getting this wrong creates confusing, sometimes broken user experiences.

Here's the golden rule:

Let's break down what this means and how to apply it consistently.

The Two Categories

Directional Icons (FLIP)

These icons represent movement or direction in physical or interface space. They should flip because the concept of "forward" and "back" reverses in RTL.

Examples:

Back/Forward arrows
Chevrons (left/right)
Reply icon
Undo/Redo
Text alignment (left/center/right)
Dropdown arrows pointing left/right
Progress indicators showing direction
Breadcrumb separators

Semantic Icons (DON'T FLIP)

These icons represent concepts, objects, or actions that are universal regardless of reading direction. They communicate meaning through symbolism, not direction.

Examples:

Search (magnifying glass)
Close (X)
Download/Upload arrows (vertical movement)
Settings/Gear
Checkmark
Plus/Minus
Heart/Star (favorites)
Clock/Calendar
User/Profile
Lock/Unlock

Visual Reference Guide

Icon Type	LTR Example	RTL Behavior	Reason
Directional
Back arrow	←	→ (flip)	Direction represents navigation
Forward arrow	→	← (flip)	Direction represents navigation
Chevron right	›	‹ (flip)	Points to content direction
Reply	↩	↪ (flip)	Curves toward reading start
Undo	↶	↷ (flip)	Cultural reading direction
Semantic
Search	🔍	🔍 (stay)	Universal object
Close	✕	✕ (stay)	No directional meaning
Download	⬇	⬇ (stay)	Vertical, not horizontal
Settings	⚙	⚙ (stay)	Universal symbol
Plus	+	+ (stay)	Mathematical symbol
Checkmark	✓	✓ (stay)	Universal approval

The Physical Metaphor Test: If an icon represents physical movement through space or directional flow (like arrows), it flips. If it represents an object, concept, or vertical action, it doesn't.

Edge Cases Explained

Some icons aren't immediately obvious. Here's how to handle the tricky ones:

Play Button ▶ (DON'T FLIP)

The play button points right in both LTR and RTL. Why? It represents the universal direction of time and media progression, which is standardized globally as left-to-right regardless of writing system.

Other media controls:

Play: ▶ (don't flip)
Fast-forward: ⏩ (don't flip)
Rewind: ⏪ (don't flip)
Skip: ⏭ (don't flip)

These are learned conventions from physical media devices and should remain consistent.

Text Alignment Icons (FLIP)

Text alignment icons are directional because they represent where text aligns:

LTR: Align left

Center (unchanged)

LTR: Align right

In RTL, "align left" and "align right" swap meanings because the content frame itself flips.

List Bullets/Indentation (DON'T FLIP... mostly)

Unordered list bullets (•): Don't flip—they're semantic markers
List indentation: Should shift to the right side in RTL
Numbered lists (1, 2, 3): Don't flip the numbers

Volume/Sound (DON'T FLIP)

Speaker icons with sound waves typically point right (🔊). This shouldn't flip—it's a symbolic representation of sound propagation, not directional movement in the interface.

External Link (DEPENDS)

The external link icon (↗) typically points up and to the right. Opinion is divided:

Flip camp: The diagonal represents "exiting" in a direction, so it should flip
Don't flip camp: It's standardized globally and users recognize it

Recommendation: Don't flip. It's become a universal symbol.

Implementation Strategies

Method 1: CSS Transform

The simplest approach for icons in HTML:

/* Flip icons in RTL */
[dir="rtl"] .icon-directional {
  transform: scaleX(-1);
}

<button>
  <svg class="icon-directional">
    <!-- back arrow icon -->
  </svg>
  Back
</button>

Don't flip logos, brand marks, or text inside icons! Use this technique only for simple directional icons.

Pros:

Simple, one-line solution
Works with any icon source

Cons:

Flips text/numbers inside icons
Can distort asymmetric icons
Affects icon aliasing/rendering

Method 2: Conditional Rendering

Load different icon variants based on direction:

import { ChevronLeft, ChevronRight } from 'lucide-react';
 
function BackButton() {
  const dir = useDirection(); // 'ltr' or 'rtl'
  const BackIcon = dir === 'rtl' ? ChevronRight : ChevronLeft;
 
  return (
    <button>
      <BackIcon />
      {t('back')}
    </button>
  );
}

Pros:

Perfect control
Icons optimized for each direction
No transform artifacts

Cons:

More code
Requires per-icon logic
Bundle size (if not tree-shaken)

Method 3: Icon Library Features

Many modern icon libraries have built-in RTL support:

// Lucide React
import { ArrowLeft } from 'lucide-react';
 
<ArrowLeft className="rtl-flip" />
 
// With Tailwind
<ArrowLeft className="rtl:rotate-180" />

// Material-UI with auto-mirroring
import ArrowBack from '@mui/icons-material/ArrowBack';
 
<ArrowBack /> {/* Automatically flips in RTL */}

Method 4: Utility Class System

Create a systematic approach:

/* Utility classes */
.flip-in-rtl {
  [dir="rtl"] & {
    transform: scaleX(-1);
  }
}
 
.rotate-in-rtl {
  [dir="rtl"] & {
    transform: rotate(180deg);
  }
}
 
/* Never flip */
.no-flip {
  transform: none !important;
}

<!-- Usage -->
<ChevronRight class="flip-in-rtl" />
<SearchIcon class="no-flip" />

Icon Library Support

How popular icon libraries handle RTL:

Library	RTL Support	Method	Notes
Material Icons	Built-in	Auto-flip	Automatically mirrors directional icons
Heroicons	Manual	CSS classes	Provide direction-specific variants
Lucide	Manual	Transform	Use CSS transform or conditional rendering
Font Awesome	Manual	CSS classes	Use `.fa-flip-horizontal` with RTL context
Feather Icons	Manual	Transform	Apply CSS transform
Bootstrap Icons	Manual	Transform	Apply CSS transform

Testing Checklist

Before shipping RTL support, verify these icon behaviors:

Navigation:

Back button points right in RTL
Forward button points left in RTL
Breadcrumb chevrons point correct direction
Dropdown arrows point correct direction

Forms:

Text alignment icons swap appropriately
Search icon doesn't flip
Clear/close icons don't flip

Actions:

Undo/redo swap directions
Reply/forward icons flip
Share icon behavior (varies by design)

Media:

Play button stays right-pointing
Volume icons don't flip
Progress indicators flip if directional

Content:

Checkmarks don't flip
Stars/hearts don't flip
Download/upload arrows don't flip (vertical)

Pro tip: Create a dedicated "Icon Gallery" page in your app that displays all icons in both LTR and RTL side-by-side. This makes QA much easier.

Common Mistakes

1. Flipping Everything

/* DON'T: Flip all icons blindly */
[dir="rtl"] svg {
  transform: scaleX(-1);
}

This breaks semantic icons like search, settings, and media controls.

2. Flipping Brand Icons

<!-- DON'T: Flip logos or brand marks -->
<img src="logo.svg" class="flip-in-rtl" />

Logos and brand identities should never flip. They're designed with specific orientation.

<!-- BAD: Back button doesn't flip but chevron does -->
<button>
  <ArrowLeft /> <!-- Not flipped -->
  <ChevronRight class="flip-in-rtl" /> <!-- Flipped -->
</button>

Be consistent: if one navigation icon flips, all navigation icons should flip.

4. Flipping Icons with Text

<!-- DON'T: This will flip the text too -->
<svg class="flip-in-rtl">
  <text>Save</text>
  <path d="..." />
</svg>

Extracting the icon from text or using conditional rendering instead.

Real-World Examples

GitHub

GitHub flips:

Pull request icon (arrows merge)
Back/forward navigation
Dropdown chevrons

GitHub doesn't flip:

Octocat logo
Search icon
Star/fork icons
Settings gear

Google Material Design

Material Design has comprehensive guidelines and auto-flips these icons:

Navigation arrows
Tab indicators
Expansion panels
List item disclosure

Check out their documentation:

https://material.io/design/usability/bidirectionality.html

Key Takeaways

Two categories: Directional icons flip (represent movement), semantic icons don't (represent objects/concepts).
Physical metaphor test: Does the icon represent directional flow through space? If yes, flip it.
Media controls stay: Play, pause, fast-forward use universal conventions—don't flip.
Text alignment flips: These are contextual to content direction.
Choose implementation: CSS transform is simplest, conditional rendering is most flexible.
Test systematically: Create an icon gallery view to QA all icons at once.
When in doubt, don't flip: It's better to have a consistent icon that users recognize than a flipped one that confuses.

The Golden Rule

When localizing interfaces for RTL languages, one of the trickiest questions designers and developers face is: Which icons should flip?

Here's the golden rule:

Let's break down what this means and how to apply it consistently.

The Two Categories

Directional Icons (FLIP)

These icons represent movement or direction in physical or interface space. They should flip because the concept of "forward" and "back" reverses in RTL.

Examples:

Back/Forward arrows
Chevrons (left/right)
Reply icon
Undo/Redo
Text alignment (left/center/right)
Dropdown arrows pointing left/right
Progress indicators showing direction
Breadcrumb separators

Semantic Icons (DON'T FLIP)

These icons represent concepts, objects, or actions that are universal regardless of reading direction. They communicate meaning through symbolism, not direction.

Examples:

Search (magnifying glass)
Close (X)
Download/Upload arrows (vertical movement)
Settings/Gear
Checkmark
Plus/Minus
Heart/Star (favorites)
Clock/Calendar
User/Profile
Lock/Unlock

Visual Reference Guide

Icon Type	LTR Example	RTL Behavior	Reason
Directional
Back arrow	←	→ (flip)	Direction represents navigation
Forward arrow	→	← (flip)	Direction represents navigation
Chevron right	›	‹ (flip)	Points to content direction
Reply	↩	↪ (flip)	Curves toward reading start
Undo	↶	↷ (flip)	Cultural reading direction
Semantic
Search	🔍	🔍 (stay)	Universal object
Close	✕	✕ (stay)	No directional meaning
Download	⬇	⬇ (stay)	Vertical, not horizontal
Settings	⚙	⚙ (stay)	Universal symbol
Plus	+	+ (stay)	Mathematical symbol
Checkmark	✓	✓ (stay)	Universal approval

The Physical Metaphor Test: If an icon represents physical movement through space or directional flow (like arrows), it flips. If it represents an object, concept, or vertical action, it doesn't.

Edge Cases Explained

Some icons aren't immediately obvious. Here's how to handle the tricky ones:

Play Button ▶ (DON'T FLIP)

Other media controls:

Play: ▶ (don't flip)
Fast-forward: ⏩ (don't flip)
Rewind: ⏪ (don't flip)
Skip: ⏭ (don't flip)

These are learned conventions from physical media devices and should remain consistent.

Text Alignment Icons (FLIP)

Text alignment icons are directional because they represent where text aligns:

LTR: Align left

Center (unchanged)

LTR: Align right

In RTL, "align left" and "align right" swap meanings because the content frame itself flips.

List Bullets/Indentation (DON'T FLIP... mostly)

Unordered list bullets (•): Don't flip—they're semantic markers
List indentation: Should shift to the right side in RTL
Numbered lists (1, 2, 3): Don't flip the numbers

Volume/Sound (DON'T FLIP)

Speaker icons with sound waves typically point right (🔊). This shouldn't flip—it's a symbolic representation of sound propagation, not directional movement in the interface.

External Link (DEPENDS)

The external link icon (↗) typically points up and to the right. Opinion is divided:

Flip camp: The diagonal represents "exiting" in a direction, so it should flip
Don't flip camp: It's standardized globally and users recognize it

Recommendation: Don't flip. It's become a universal symbol.

Implementation Strategies

Method 1: CSS Transform

The simplest approach for icons in HTML:

/* Flip icons in RTL */
[dir="rtl"] .icon-directional {
  transform: scaleX(-1);
}

<button>
  <svg class="icon-directional">
    <!-- back arrow icon -->
  </svg>
  Back
</button>

Don't flip logos, brand marks, or text inside icons! Use this technique only for simple directional icons.

Pros:

Simple, one-line solution
Works with any icon source

Cons:

Flips text/numbers inside icons
Can distort asymmetric icons
Affects icon aliasing/rendering

Method 2: Conditional Rendering

Load different icon variants based on direction:

import { ChevronLeft, ChevronRight } from 'lucide-react';
 
function BackButton() {
  const dir = useDirection(); // 'ltr' or 'rtl'
  const BackIcon = dir === 'rtl' ? ChevronRight : ChevronLeft;
 
  return (
    <button>
      <BackIcon />
      {t('back')}
    </button>
  );
}

Pros:

Perfect control
Icons optimized for each direction
No transform artifacts

Cons:

More code
Requires per-icon logic
Bundle size (if not tree-shaken)

Method 3: Icon Library Features

Many modern icon libraries have built-in RTL support:

// Lucide React
import { ArrowLeft } from 'lucide-react';
 
<ArrowLeft className="rtl-flip" />
 
// With Tailwind
<ArrowLeft className="rtl:rotate-180" />

// Material-UI with auto-mirroring
import ArrowBack from '@mui/icons-material/ArrowBack';
 
<ArrowBack /> {/* Automatically flips in RTL */}

Method 4: Utility Class System

Create a systematic approach:

/* Utility classes */
.flip-in-rtl {
  [dir="rtl"] & {
    transform: scaleX(-1);
  }
}
 
.rotate-in-rtl {
  [dir="rtl"] & {
    transform: rotate(180deg);
  }
}
 
/* Never flip */
.no-flip {
  transform: none !important;
}

<!-- Usage -->
<ChevronRight class="flip-in-rtl" />
<SearchIcon class="no-flip" />

Icon Library Support

How popular icon libraries handle RTL:

Library	RTL Support	Method	Notes
Material Icons	Built-in	Auto-flip	Automatically mirrors directional icons
Heroicons	Manual	CSS classes	Provide direction-specific variants
Lucide	Manual	Transform	Use CSS transform or conditional rendering
Font Awesome	Manual	CSS classes	Use `.fa-flip-horizontal` with RTL context
Feather Icons	Manual	Transform	Apply CSS transform
Bootstrap Icons	Manual	Transform	Apply CSS transform

Testing Checklist

Before shipping RTL support, verify these icon behaviors:

Navigation:

Back button points right in RTL
Forward button points left in RTL
Breadcrumb chevrons point correct direction
Dropdown arrows point correct direction

Forms:

Text alignment icons swap appropriately
Search icon doesn't flip
Clear/close icons don't flip

Actions:

Undo/redo swap directions
Reply/forward icons flip
Share icon behavior (varies by design)

Media:

Play button stays right-pointing
Volume icons don't flip
Progress indicators flip if directional

Content:

Checkmarks don't flip
Stars/hearts don't flip
Download/upload arrows don't flip (vertical)

Pro tip: Create a dedicated "Icon Gallery" page in your app that displays all icons in both LTR and RTL side-by-side. This makes QA much easier.

Common Mistakes

1. Flipping Everything

/* DON'T: Flip all icons blindly */
[dir="rtl"] svg {
  transform: scaleX(-1);
}

This breaks semantic icons like search, settings, and media controls.

2. Flipping Brand Icons

<!-- DON'T: Flip logos or brand marks -->
<img src="logo.svg" class="flip-in-rtl" />

Logos and brand identities should never flip. They're designed with specific orientation.

<!-- BAD: Back button doesn't flip but chevron does -->
<button>
  <ArrowLeft /> <!-- Not flipped -->
  <ChevronRight class="flip-in-rtl" /> <!-- Flipped -->
</button>

Be consistent: if one navigation icon flips, all navigation icons should flip.

4. Flipping Icons with Text

<!-- DON'T: This will flip the text too -->
<svg class="flip-in-rtl">
  <text>Save</text>
  <path d="..." />
</svg>

Extracting the icon from text or using conditional rendering instead.

Real-World Examples

GitHub

GitHub flips:

Pull request icon (arrows merge)
Back/forward navigation
Dropdown chevrons

GitHub doesn't flip:

Octocat logo
Search icon
Star/fork icons
Settings gear

Google Material Design

Material Design has comprehensive guidelines and auto-flips these icons:

Navigation arrows
Tab indicators
Expansion panels
List item disclosure

Check out their documentation:

https://material.io/design/usability/bidirectionality.html

Key Takeaways

Two categories: Directional icons flip (represent movement), semantic icons don't (represent objects/concepts).
Physical metaphor test: Does the icon represent directional flow through space? If yes, flip it.
Media controls stay: Play, pause, fast-forward use universal conventions—don't flip.
Text alignment flips: These are contextual to content direction.
Choose implementation: CSS transform is simplest, conditional rendering is most flexible.
Test systematically: Create an icon gallery view to QA all icons at once.
When in doubt, don't flip: It's better to have a consistent icon that users recognize than a flipped one that confuses.

The Golden Rule

When localizing interfaces for RTL languages, one of the trickiest questions designers and developers face is: Which icons should flip?

Here's the golden rule:

Let's break down what this means and how to apply it consistently.

The Two Categories

Directional Icons (FLIP)

These icons represent movement or direction in physical or interface space. They should flip because the concept of "forward" and "back" reverses in RTL.

Examples:

Back/Forward arrows
Chevrons (left/right)
Reply icon
Undo/Redo
Text alignment (left/center/right)
Dropdown arrows pointing left/right
Progress indicators showing direction
Breadcrumb separators

Semantic Icons (DON'T FLIP)

These icons represent concepts, objects, or actions that are universal regardless of reading direction. They communicate meaning through symbolism, not direction.

Examples:

Search (magnifying glass)
Close (X)
Download/Upload arrows (vertical movement)
Settings/Gear
Checkmark
Plus/Minus
Heart/Star (favorites)
Clock/Calendar
User/Profile
Lock/Unlock

Visual Reference Guide

Icon Type	LTR Example	RTL Behavior	Reason
Directional
Back arrow	←	→ (flip)	Direction represents navigation
Forward arrow	→	← (flip)	Direction represents navigation
Chevron right	›	‹ (flip)	Points to content direction
Reply	↩	↪ (flip)	Curves toward reading start
Undo	↶	↷ (flip)	Cultural reading direction
Semantic
Search	🔍	🔍 (stay)	Universal object
Close	✕	✕ (stay)	No directional meaning
Download	⬇	⬇ (stay)	Vertical, not horizontal
Settings	⚙	⚙ (stay)	Universal symbol
Plus	+	+ (stay)	Mathematical symbol
Checkmark	✓	✓ (stay)	Universal approval

The Physical Metaphor Test: If an icon represents physical movement through space or directional flow (like arrows), it flips. If it represents an object, concept, or vertical action, it doesn't.

Edge Cases Explained

Some icons aren't immediately obvious. Here's how to handle the tricky ones:

Play Button ▶ (DON'T FLIP)

Other media controls:

Play: ▶ (don't flip)
Fast-forward: ⏩ (don't flip)
Rewind: ⏪ (don't flip)
Skip: ⏭ (don't flip)

These are learned conventions from physical media devices and should remain consistent.

Text Alignment Icons (FLIP)

Text alignment icons are directional because they represent where text aligns:

LTR: Align left

Center (unchanged)

LTR: Align right

In RTL, "align left" and "align right" swap meanings because the content frame itself flips.

List Bullets/Indentation (DON'T FLIP... mostly)

Unordered list bullets (•): Don't flip—they're semantic markers
List indentation: Should shift to the right side in RTL
Numbered lists (1, 2, 3): Don't flip the numbers

Volume/Sound (DON'T FLIP)

Speaker icons with sound waves typically point right (🔊). This shouldn't flip—it's a symbolic representation of sound propagation, not directional movement in the interface.

External Link (DEPENDS)

The external link icon (↗) typically points up and to the right. Opinion is divided:

Flip camp: The diagonal represents "exiting" in a direction, so it should flip
Don't flip camp: It's standardized globally and users recognize it

Recommendation: Don't flip. It's become a universal symbol.

Implementation Strategies

Method 1: CSS Transform

The simplest approach for icons in HTML:

/* Flip icons in RTL */
[dir="rtl"] .icon-directional {
  transform: scaleX(-1);
}

<button>
  <svg class="icon-directional">
    <!-- back arrow icon -->
  </svg>
  Back
</button>

Don't flip logos, brand marks, or text inside icons! Use this technique only for simple directional icons.

Pros:

Simple, one-line solution
Works with any icon source

Cons:

Flips text/numbers inside icons
Can distort asymmetric icons
Affects icon aliasing/rendering

Method 2: Conditional Rendering

Load different icon variants based on direction:

import { ChevronLeft, ChevronRight } from 'lucide-react';
 
function BackButton() {
  const dir = useDirection(); // 'ltr' or 'rtl'
  const BackIcon = dir === 'rtl' ? ChevronRight : ChevronLeft;
 
  return (
    <button>
      <BackIcon />
      {t('back')}
    </button>
  );
}

Pros:

Perfect control
Icons optimized for each direction
No transform artifacts

Cons:

More code
Requires per-icon logic
Bundle size (if not tree-shaken)

Method 3: Icon Library Features

Many modern icon libraries have built-in RTL support:

// Lucide React
import { ArrowLeft } from 'lucide-react';
 
<ArrowLeft className="rtl-flip" />
 
// With Tailwind
<ArrowLeft className="rtl:rotate-180" />

// Material-UI with auto-mirroring
import ArrowBack from '@mui/icons-material/ArrowBack';
 
<ArrowBack /> {/* Automatically flips in RTL */}

Method 4: Utility Class System

Create a systematic approach:

/* Utility classes */
.flip-in-rtl {
  [dir="rtl"] & {
    transform: scaleX(-1);
  }
}
 
.rotate-in-rtl {
  [dir="rtl"] & {
    transform: rotate(180deg);
  }
}
 
/* Never flip */
.no-flip {
  transform: none !important;
}

<!-- Usage -->
<ChevronRight class="flip-in-rtl" />
<SearchIcon class="no-flip" />

Icon Library Support

How popular icon libraries handle RTL:

Library	RTL Support	Method	Notes
Material Icons	Built-in	Auto-flip	Automatically mirrors directional icons
Heroicons	Manual	CSS classes	Provide direction-specific variants
Lucide	Manual	Transform	Use CSS transform or conditional rendering
Font Awesome	Manual	CSS classes	Use `.fa-flip-horizontal` with RTL context
Feather Icons	Manual	Transform	Apply CSS transform
Bootstrap Icons	Manual	Transform	Apply CSS transform

Testing Checklist

Before shipping RTL support, verify these icon behaviors:

Navigation:

Back button points right in RTL
Forward button points left in RTL
Breadcrumb chevrons point correct direction
Dropdown arrows point correct direction

Forms:

Text alignment icons swap appropriately
Search icon doesn't flip
Clear/close icons don't flip

Actions:

Undo/redo swap directions
Reply/forward icons flip
Share icon behavior (varies by design)

Media:

Play button stays right-pointing
Volume icons don't flip
Progress indicators flip if directional

Content:

Checkmarks don't flip
Stars/hearts don't flip
Download/upload arrows don't flip (vertical)

Pro tip: Create a dedicated "Icon Gallery" page in your app that displays all icons in both LTR and RTL side-by-side. This makes QA much easier.

Common Mistakes

1. Flipping Everything

/* DON'T: Flip all icons blindly */
[dir="rtl"] svg {
  transform: scaleX(-1);
}

This breaks semantic icons like search, settings, and media controls.

2. Flipping Brand Icons

<!-- DON'T: Flip logos or brand marks -->
<img src="logo.svg" class="flip-in-rtl" />

Logos and brand identities should never flip. They're designed with specific orientation.

<!-- BAD: Back button doesn't flip but chevron does -->
<button>
  <ArrowLeft /> <!-- Not flipped -->
  <ChevronRight class="flip-in-rtl" /> <!-- Flipped -->
</button>

Be consistent: if one navigation icon flips, all navigation icons should flip.

4. Flipping Icons with Text

<!-- DON'T: This will flip the text too -->
<svg class="flip-in-rtl">
  <text>Save</text>
  <path d="..." />
</svg>

Extracting the icon from text or using conditional rendering instead.

Real-World Examples

GitHub

GitHub flips:

Pull request icon (arrows merge)
Back/forward navigation
Dropdown chevrons

GitHub doesn't flip:

Octocat logo
Search icon
Star/fork icons
Settings gear

Google Material Design

Material Design has comprehensive guidelines and auto-flips these icons:

Navigation arrows
Tab indicators
Expansion panels
List item disclosure

Check out their documentation:

https://material.io/design/usability/bidirectionality.html

Key Takeaways

Two categories: Directional icons flip (represent movement), semantic icons don't (represent objects/concepts).
Physical metaphor test: Does the icon represent directional flow through space? If yes, flip it.
Media controls stay: Play, pause, fast-forward use universal conventions—don't flip.
Text alignment flips: These are contextual to content direction.
Choose implementation: CSS transform is simplest, conditional rendering is most flexible.
Test systematically: Create an icon gallery view to QA all icons at once.
When in doubt, don't flip: It's better to have a consistent icon that users recognize than a flipped one that confuses.

The Golden Rule

When localizing interfaces for RTL languages, one of the trickiest questions designers and developers face is: Which icons should flip?

Here's the golden rule:

Let's break down what this means and how to apply it consistently.

The Two Categories

Directional Icons (FLIP)

These icons represent movement or direction in physical or interface space. They should flip because the concept of "forward" and "back" reverses in RTL.

Examples:

Back/Forward arrows
Chevrons (left/right)
Reply icon
Undo/Redo
Text alignment (left/center/right)
Dropdown arrows pointing left/right
Progress indicators showing direction
Breadcrumb separators

Semantic Icons (DON'T FLIP)

These icons represent concepts, objects, or actions that are universal regardless of reading direction. They communicate meaning through symbolism, not direction.

Examples:

Search (magnifying glass)
Close (X)
Download/Upload arrows (vertical movement)
Settings/Gear
Checkmark
Plus/Minus
Heart/Star (favorites)
Clock/Calendar
User/Profile
Lock/Unlock

Visual Reference Guide

Icon Type	LTR Example	RTL Behavior	Reason
Directional
Back arrow	←	→ (flip)	Direction represents navigation
Forward arrow	→	← (flip)	Direction represents navigation
Chevron right	›	‹ (flip)	Points to content direction
Reply	↩	↪ (flip)	Curves toward reading start
Undo	↶	↷ (flip)	Cultural reading direction
Semantic
Search	🔍	🔍 (stay)	Universal object
Close	✕	✕ (stay)	No directional meaning
Download	⬇	⬇ (stay)	Vertical, not horizontal
Settings	⚙	⚙ (stay)	Universal symbol
Plus	+	+ (stay)	Mathematical symbol
Checkmark	✓	✓ (stay)	Universal approval

The Physical Metaphor Test: If an icon represents physical movement through space or directional flow (like arrows), it flips. If it represents an object, concept, or vertical action, it doesn't.

Edge Cases Explained

Some icons aren't immediately obvious. Here's how to handle the tricky ones:

Play Button ▶ (DON'T FLIP)

Other media controls:

Play: ▶ (don't flip)
Fast-forward: ⏩ (don't flip)
Rewind: ⏪ (don't flip)
Skip: ⏭ (don't flip)

These are learned conventions from physical media devices and should remain consistent.

Text Alignment Icons (FLIP)

Text alignment icons are directional because they represent where text aligns:

LTR: Align left

Center (unchanged)

LTR: Align right

In RTL, "align left" and "align right" swap meanings because the content frame itself flips.

List Bullets/Indentation (DON'T FLIP... mostly)

Unordered list bullets (•): Don't flip—they're semantic markers
List indentation: Should shift to the right side in RTL
Numbered lists (1, 2, 3): Don't flip the numbers

Volume/Sound (DON'T FLIP)

Speaker icons with sound waves typically point right (🔊). This shouldn't flip—it's a symbolic representation of sound propagation, not directional movement in the interface.

External Link (DEPENDS)

The external link icon (↗) typically points up and to the right. Opinion is divided:

Flip camp: The diagonal represents "exiting" in a direction, so it should flip
Don't flip camp: It's standardized globally and users recognize it

Recommendation: Don't flip. It's become a universal symbol.

Implementation Strategies

Method 1: CSS Transform

The simplest approach for icons in HTML:

/* Flip icons in RTL */
[dir="rtl"] .icon-directional {
  transform: scaleX(-1);
}

<button>
  <svg class="icon-directional">
    <!-- back arrow icon -->
  </svg>
  Back
</button>

Don't flip logos, brand marks, or text inside icons! Use this technique only for simple directional icons.

Pros:

Simple, one-line solution
Works with any icon source

Cons:

Flips text/numbers inside icons
Can distort asymmetric icons
Affects icon aliasing/rendering

Method 2: Conditional Rendering

Load different icon variants based on direction:

import { ChevronLeft, ChevronRight } from 'lucide-react';
 
function BackButton() {
  const dir = useDirection(); // 'ltr' or 'rtl'
  const BackIcon = dir === 'rtl' ? ChevronRight : ChevronLeft;
 
  return (
    <button>
      <BackIcon />
      {t('back')}
    </button>
  );
}

Pros:

Perfect control
Icons optimized for each direction
No transform artifacts

Cons:

More code
Requires per-icon logic
Bundle size (if not tree-shaken)

Method 3: Icon Library Features

Many modern icon libraries have built-in RTL support:

// Lucide React
import { ArrowLeft } from 'lucide-react';
 
<ArrowLeft className="rtl-flip" />
 
// With Tailwind
<ArrowLeft className="rtl:rotate-180" />

// Material-UI with auto-mirroring
import ArrowBack from '@mui/icons-material/ArrowBack';
 
<ArrowBack /> {/* Automatically flips in RTL */}

Method 4: Utility Class System

Create a systematic approach:

/* Utility classes */
.flip-in-rtl {
  [dir="rtl"] & {
    transform: scaleX(-1);
  }
}
 
.rotate-in-rtl {
  [dir="rtl"] & {
    transform: rotate(180deg);
  }
}
 
/* Never flip */
.no-flip {
  transform: none !important;
}

<!-- Usage -->
<ChevronRight class="flip-in-rtl" />
<SearchIcon class="no-flip" />

Icon Library Support

How popular icon libraries handle RTL:

Library	RTL Support	Method	Notes
Material Icons	Built-in	Auto-flip	Automatically mirrors directional icons
Heroicons	Manual	CSS classes	Provide direction-specific variants
Lucide	Manual	Transform	Use CSS transform or conditional rendering
Font Awesome	Manual	CSS classes	Use `.fa-flip-horizontal` with RTL context
Feather Icons	Manual	Transform	Apply CSS transform
Bootstrap Icons	Manual	Transform	Apply CSS transform

Testing Checklist

Before shipping RTL support, verify these icon behaviors:

Navigation:

Back button points right in RTL
Forward button points left in RTL
Breadcrumb chevrons point correct direction
Dropdown arrows point correct direction

Forms:

Text alignment icons swap appropriately
Search icon doesn't flip
Clear/close icons don't flip

Actions:

Undo/redo swap directions
Reply/forward icons flip
Share icon behavior (varies by design)

Media:

Play button stays right-pointing
Volume icons don't flip
Progress indicators flip if directional

Content:

Checkmarks don't flip
Stars/hearts don't flip
Download/upload arrows don't flip (vertical)

Pro tip: Create a dedicated "Icon Gallery" page in your app that displays all icons in both LTR and RTL side-by-side. This makes QA much easier.

Common Mistakes

1. Flipping Everything

/* DON'T: Flip all icons blindly */
[dir="rtl"] svg {
  transform: scaleX(-1);
}

This breaks semantic icons like search, settings, and media controls.

2. Flipping Brand Icons

<!-- DON'T: Flip logos or brand marks -->
<img src="logo.svg" class="flip-in-rtl" />

Logos and brand identities should never flip. They're designed with specific orientation.

<!-- BAD: Back button doesn't flip but chevron does -->
<button>
  <ArrowLeft /> <!-- Not flipped -->
  <ChevronRight class="flip-in-rtl" /> <!-- Flipped -->
</button>

Be consistent: if one navigation icon flips, all navigation icons should flip.

4. Flipping Icons with Text

<!-- DON'T: This will flip the text too -->
<svg class="flip-in-rtl">
  <text>Save</text>
  <path d="..." />
</svg>

Extracting the icon from text or using conditional rendering instead.

Real-World Examples

GitHub

GitHub flips:

Pull request icon (arrows merge)
Back/forward navigation
Dropdown chevrons

GitHub doesn't flip:

Octocat logo
Search icon
Star/fork icons
Settings gear

Google Material Design

Material Design has comprehensive guidelines and auto-flips these icons:

Navigation arrows
Tab indicators
Expansion panels
List item disclosure

Check out their documentation:

https://material.io/design/usability/bidirectionality.html

Key Takeaways

Two categories: Directional icons flip (represent movement), semantic icons don't (represent objects/concepts).
Physical metaphor test: Does the icon represent directional flow through space? If yes, flip it.
Media controls stay: Play, pause, fast-forward use universal conventions—don't flip.
Text alignment flips: These are contextual to content direction.
Choose implementation: CSS transform is simplest, conditional rendering is most flexible.
Test systematically: Create an icon gallery view to QA all icons at once.
When in doubt, don't flip: It's better to have a consistent icon that users recognize than a flipped one that confuses.

The Golden Rule

The Two Categories

Directional Icons (FLIP)

Semantic Icons (DON'T FLIP)

Visual Reference Guide

Edge Cases Explained

Play Button ▶ (DON'T FLIP)

Text Alignment Icons (FLIP)

List Bullets/Indentation (DON'T FLIP... mostly)

Volume/Sound (DON'T FLIP)

External Link (DEPENDS)

Implementation Strategies

Method 1: CSS Transform

Method 2: Conditional Rendering

Method 3: Icon Library Features

Method 4: Utility Class System

Icon Library Support

Testing Checklist

Common Mistakes

1. Flipping Everything

2. Flipping Brand Icons

3. Inconsistent Navigation

4. Flipping Icons with Text

Real-World Examples

GitHub

Google Material Design

Key Takeaways

Further Reading

The Golden Rule

The Two Categories

Directional Icons (FLIP)

Semantic Icons (DON'T FLIP)

Visual Reference Guide

Edge Cases Explained

Play Button ▶ (DON'T FLIP)

Text Alignment Icons (FLIP)

List Bullets/Indentation (DON'T FLIP... mostly)

Volume/Sound (DON'T FLIP)

External Link (DEPENDS)

Implementation Strategies

Method 1: CSS Transform

Method 2: Conditional Rendering

Method 3: Icon Library Features

Method 4: Utility Class System

Icon Library Support

Testing Checklist

Common Mistakes

1. Flipping Everything

2. Flipping Brand Icons

3. Inconsistent Navigation

4. Flipping Icons with Text

Real-World Examples

GitHub

Google Material Design

Key Takeaways

Further Reading

The Golden Rule

The Two Categories

Directional Icons (FLIP)

Semantic Icons (DON'T FLIP)

Visual Reference Guide

Edge Cases Explained

Play Button ▶ (DON'T FLIP)

Text Alignment Icons (FLIP)

List Bullets/Indentation (DON'T FLIP... mostly)

Volume/Sound (DON'T FLIP)

External Link (DEPENDS)

Implementation Strategies

Method 1: CSS Transform

Method 2: Conditional Rendering

Method 3: Icon Library Features

Method 4: Utility Class System

Icon Library Support

Testing Checklist

Common Mistakes

1. Flipping Everything

2. Flipping Brand Icons

3. Inconsistent Navigation

4. Flipping Icons with Text

Real-World Examples