How to flip svg icons for rtl languages online
- Step 1Open the tool on a Pro plan — RTL Mirror is a Pro-tier SVG tool. On a free plan you will see the upgrade overlay instead of the upload box. Signed in on Pro (or higher), you get the full single-file processor.
- Step 2Add your left-to-right icon — Drag one
.svgonto the drop zone, click to browse, or paste the SVG source into the text box. Only one icon is processed at a time in the browser — if you drop several, the tool keeps the first. Accepted input is.svg/image/svg+xml. - Step 3Confirm the icon has a viewBox — The flip distance comes from the third number in
viewBox="minX minY width height". AviewBox="0 0 24 24"givesW = 24. If there is no viewBox, or the width parses to0, the tool usesW = 24— fine for a standard 24-unit grid, wrong for anything else, so add a correct viewBox first. - Step 4Click Process SVG — There are no options to set. The tool inserts
<g transform="scale(-1,1) translate(-W,0)">right after the opening<svg>tag and a matching</g>before</svg>. Processing is instant for icon-scale files. - Step 5Check the preview — The result panel renders the mirrored icon and an Original / Output byte readout. Verify directional shapes now point the right way and that the icon is still centred inside its frame — not pushed off one edge (that signals a wrong or missing viewBox width).
- Step 6Download the RTL variant — Download saves the file as
{name}-rtl.svg(e.g.arrow-back.svg→arrow-back-rtl.svg), or copy the source to clipboard. The flip lives in the wrapping group, not in the path numbers, so embed it however you like — inline,<img>, or in a sprite.
What the flip actually writes into your file
The tool performs two string replacements on the SVG markup. Nothing else in the document is touched.
| Step | Before | After |
|---|---|---|
| Opening tag | <svg viewBox="0 0 24 24"> | <svg viewBox="0 0 24 24"><g transform="scale(-1,1) translate(-24,0)"> |
| Closing tag | </svg> | </g></svg> |
| Path / shape data | <path d="M4 12h16…"/> | <path d="M4 12h16…"/> (unchanged — coordinates are NOT rewritten) |
| Fills, strokes, gradients, masks | as authored | carried through verbatim inside the new group |
Where the flip width (W) comes from
W is the third value of the viewBox. It controls the translate that slides the mirrored icon back into frame.
| Input | Parsed W | Result |
|---|---|---|
viewBox="0 0 24 24" | 24 | translate(-24,0) — icon stays centred |
viewBox="0 0 512 512" | 512 | translate(-512,0) — correct for the larger canvas |
No viewBox attribute | 24 (fallback) | Off-frame unless the icon really is on a 24-unit grid — add a viewBox first |
viewBox="0 0 0 24" (width 0) | 24 (fallback) | Width parses to 0 → fallback kicks in; fix the viewBox width |
Cookbook
Real before/after markup so you can see exactly what the RTL Mirror adds — and what it deliberately leaves alone.
A back-arrow icon flipped for RTL
The canonical case: a navigation arrow that points left in LTR must point right in RTL. The path data is untouched; the wrapping group does the reflection.
Input (arrow-back.svg): <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="M15 18l-6-6 6-6" fill="none" stroke="#111" stroke-width="2"/> </svg> Output (arrow-back-rtl.svg): <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g transform="scale(-1,1) translate(-24,0)"> <path d="M15 18l-6-6 6-6" fill="none" stroke="#111" stroke-width="2"/> </g></svg> The arrow now points right; the d="…" string is byte-for-byte identical.
Colours and gradients survive the flip
The tool copies every paint definition through unchanged. Note the gradient coordinates are NOT recalculated — they simply travel along inside the mirrored group.
Input:
<svg viewBox="0 0 48 48">
<defs><linearGradient id="g" x1="0" x2="1">
<stop offset="0" stop-color="#6366f1"/>
<stop offset="1" stop-color="#a5b4fc"/>
</linearGradient></defs>
<rect width="48" height="48" fill="url(#g)"/>
</svg>
Output:
<svg viewBox="0 0 48 48"><g transform="scale(-1,1) translate(-48,0)">
<defs><linearGradient id="g" x1="0" x2="1">…unchanged…</linearGradient></defs>
<rect width="48" height="48" fill="url(#g)"/>
</g></svg>
The whole rect (gradient included) is reflected as one unit.A missing viewBox forces the W=24 fallback
Without a viewBox the tool cannot know the canvas width, so it assumes 24. If your icon is on a 100-unit grid, the result lands off-screen.
Input (no viewBox, width/height only): <svg width="100" height="100"> <path d="M10 10h80v80"/> </svg> Output (W defaulted to 24): <svg width="100" height="100"><g transform="scale(-1,1) translate(-24,0)"> <path d="M10 10h80v80"/> </g></svg> The icon mirrors across x=0 then shifts back only 24 units → most of it is now off the left edge. Fix: add viewBox="0 0 100 100" first, then re-run.
Verify in the browser before shipping
Drop both files into a page side by side to confirm the directional element actually reads correctly in RTL context, not just that it flipped.
<div dir="ltr"><img src="arrow-back.svg" width="32"></div> <div dir="rtl"><img src="arrow-back-rtl.svg" width="32"></div> LTR row: arrow points left (go back ←) RTL row: arrow points right (go back → in RTL reading order) If the RTL arrow still points left, you flipped a file that was already RTL, or the source wasn't directional to begin with.
Flatten the wrapper afterward (optional)
If you would rather not ship the extra <g>, run the mirrored file through the minifier, which can collapse the transform group into the geometry.
Pipeline:
arrow-back.svg
→ RTL Mirror → arrow-back-rtl.svg (adds <g transform=…>)
→ svg-pro-minifier→ arrow-back-rtl.min.svg (collapses + shrinks)
Use /svg-tools/svg-pro-minifier for the second step.
The visual result is identical; the markup is tidier.Edge cases and what actually happens
SVG has no viewBox attribute
Fallback W=24The flip width is read from the viewBox. With no viewBox the tool defaults W to 24. That is correct only if your icon really sits on a 24-unit grid; on any other canvas the translate(-24,0) is too small and the mirrored icon lands off the left edge. Add a correct viewBox="0 0 width height" (the viewBox fixer can compute one) before mirroring.
viewBox width parses to 0
Fallback W=24If the third viewBox value is 0 (or non-numeric), the width evaluates to falsy and the tool falls back to W = 24. Same off-frame symptom as a missing viewBox. Set a real positive width in the viewBox first.
Icon contains live <text> elements
Renders reversedText inside the icon is mirrored along with everything else, so the glyphs render back-to-front. The tool does nothing special for text and does not swap text-anchor. Convert text to outlines with svg-font-to-path before mirroring so the shapes flip without becoming unreadable.
Gradient direction looks wrong after the flip
By designThe tool does NOT recompute gradient coordinates — it copies linearGradient / radialGradient definitions through unchanged inside the flipped group, so the whole paint reflects as one piece. For most icons this is exactly what you want. If you specifically need the gradient stops re-anchored independently of the flip, edit the x1/x2 yourself or use svg-hex-swapper on the colours afterward.
The icon isn't actually directional
AvoidLogos, clocks, checkmarks, hearts, stars and most state icons have no left-right meaning and should not be flipped — mirroring them just produces a subtly wrong asset. The tool will happily flip anything; deciding what to flip is on you. See the which-icons reference.
Double-mirroring an already-RTL file
Cancels outRunning the tool twice wraps the content in two nested scale(-1,1) groups, which cancel and return the icon to its original orientation (now with redundant markup). If a flip seems to do nothing, check you aren't mirroring a file that was already mirrored. Re-export from the LTR source instead.
Free-tier user opens the tool
Pro requiredRTL Mirror is gated to the Pro plan. Free accounts see the upgrade overlay in place of the uploader. Upgrade to Pro (or higher) to process files.
Multiple files dropped at once
First onlyThe browser tool is single-file: the file input is not multi-select and a multi-file drop keeps only the first file. To flip a whole icon set, drive the tool through the @jadapps/runner one file per call, or run them sequentially. See the batch automation guide.
Existing transform on the root <svg>
PreservedThe flip group is inserted as a child of <svg>, so any attributes already on the root tag (width, height, class, style, even a transform on a child) are left in place. The new mirror transform composes on top of whatever was there — review nested transforms if the result looks doubled.
Malformed or non-SVG input
Invalid SVGPasted source is validated as SVG XML before processing; markup that doesn't parse to an <svg> root is rejected with an 'Invalid SVG' message. Fix the markup (or export a clean file from your editor) and try again.
Frequently asked questions
How exactly does the tool flip my icon?
It wraps every child of your <svg> in <g transform="scale(-1,1) translate(-W,0)"> and closes it with </g> before </svg>. scale(-1,1) reflects across the left edge; translate(-W,0) slides the result back into frame, where W is the width from your viewBox (defaulting to 24 if there isn't one). Your path coordinates are never rewritten.
Does it bake the flip into the path data?
No. The flip lives in the wrapping <g> group, not in the d="…" numbers — the path data is byte-for-byte identical to the input. If you want the transform collapsed into the geometry instead, run the mirrored file through svg-pro-minifier afterward.
Are there any options or settings?
None. There is a single Process SVG button and no configuration — the transform is fully determined by your viewBox width. That makes the output identical every time and safe to automate.
Which icons should I mirror, and which should I leave alone?
Mirror directional icons: back/forward arrows, chevrons, reply, undo/redo, progress, sliders. Do not mirror non-directional ones: logos, clocks, checkmarks, stars, hearts, gears, and most state icons. The tool flips whatever you give it — the which-icons reference covers 50+ categories.
Can I use CSS transform: scaleX(-1) instead?
Yes, and for inline SVG or <img> with known dimensions a [dir='rtl'] .icon { transform: scaleX(-1) } rule is the simplest approach — no extra files. Baking the flip into a separate file (what this tool produces) is better for sprite sheets, native apps, email, and assets handed to a design team, where CSS transforms may not apply.
Will my gradients and colours survive?
Yes — all fills, strokes, linearGradient/radialGradient defs, masks and clip paths are copied through verbatim inside the mirrored group. Note the tool does not recompute gradient coordinates; the whole paint reflects as one unit, which is what you want for almost every icon.
What happens if my SVG has no viewBox?
The tool can't read the canvas width, so it falls back to W = 24. The icon will only stay centred if it really is on a 24-unit grid; otherwise it lands off-frame. Add a correct viewBox first — svg-viewbox-fixer can compute one from the geometry.
Does it handle text inside the icon?
Live <text> is mirrored along with everything else, so it renders reversed and text-anchor is not swapped. Convert text to outlines first with svg-font-to-path, then mirror, so the letterforms flip as shapes rather than turning into backwards text.
What does the downloaded file get named?
The output filename is the input stem plus -rtl.svg. So arrow-back.svg becomes arrow-back-rtl.svg. Pasted source (no filename) downloads under a generic name. You can also copy the source straight to the clipboard.
Can I flip a whole folder of icons at once?
Not in the browser — it processes one file at a time. For a batch, drive the tool through the paired @jadapps/runner one file per call. The batch automation guide shows the runner-based workflow.
Is my icon uploaded anywhere?
No. The flip is a couple of string replacements that run entirely in your browser; nothing is sent to a server. When automated through the runner, the transform executes locally on your machine as well.
What plan do I need?
RTL Mirror is a Pro-tier tool. Free accounts see an upgrade prompt instead of the uploader. Pro raises the per-file SVG limit to 50 MB (free is 5 MB), far more than any icon needs.
Privacy first
Every JAD SVG tool runs entirely in your browser using the DOM API and Canvas. Your SVG files never leave your device — verified by zero outbound network requests during processing.