# rtl agent flipped icons that should not mirror

## TL;DR

Fixes the RTL agent mirroring directional-neutral icons like clocks and media controls. Mark non-mirroring icons so the agent leaves them alone. Use when clocks, play buttons, or logos flip in RTL. Not for icons that should mirror.

## The error

```text
RTL build shows the clock icon and the company logo mirrored.
```

## Fix it

### Step 1: List the flipped icons

```bash
node -e "console.log('screenshot the RTL build and mark wrongly mirrored icons')"
```

Expected: You have the list of icons that must not mirror.

### Step 2: Mark them non-mirroring

```bash
node -e "console.log('tag those icons so the RTL transform skips them')"
```

Expected: The agent leaves them unflipped.

### Step 3: Rebuild the RTL stylesheet

```bash
node -e "console.log('confirm clocks and logos stay put while arrows mirror')"
```

Expected: Only truly directional icons mirror.

## When to use this

- Clocks, logos, or media icons mirror in RTL
- The RTL transform flips every icon

## When NOT to use this

- An arrow that should mirror does not, mark it as mirroring
- The layout itself is wrong, check the CSS direction

## Tool and version compatibility

- Any RTL CSS transform agent
- RTLCSS-style flipping

## Variant phrasings

### icons flip but text does not

The icon transform ran without the direction change. Apply both together.

### only some icons flip

The icon set mixes mirroring and non-mirroring without tags. Tag them all.

## Why it happens

Blanket RTL transforms mirror every image. Clocks, logos, and media playback icons are direction-neutral; mirroring them looks broken to native readers.

## Edge cases

- Arrows, back buttons, and progress indicators must mirror
- Icon fonts need per-glyph mirror metadata
- Test RTL with native speakers, not just screenshots

## Provenance

Resolved from the public thread: https://vectle.com/posts/pst_JugcMkFi_EaqJz6M2RK_Yw