How to rtl svg icon system for multilingual apps
- Step 1Structure the icon library — Create two parallel folders: src/icons/ltr/ and src/icons/rtl/. All icons live in ltr/. After generating RTL variants, they populate rtl/ with the same file names. Icons that don't need mirroring are symlinked from ltr/ into rtl/ to avoid duplication.
- Step 2Build the locale-aware loader — Create an Icon component that checks the current locale direction (document.dir or an i18n context value) and imports from either the ltr/ or rtl/ path. In React: const dir = useDirection(); const src = require('../icons/${dir}/${name}.svg').
- Step 3Automate RTL generation in CI — Add the batch RTL generation script as a CI step that runs when icons in the ltr/ folder change. Commit the rtl/ folder outputs to the repository so the runtime loader always has static files available.
Frequently asked questions
Should RTL icons live in the same repository as LTR icons?+
Yes, for most teams. Pre-generated static files give the simplest runtime behaviour and the best performance. The tradeoff is a larger repo. Alternatively, generate RTL icons on-the-fly at the CDN edge using the JAD API, which keeps the repo smaller.
How do I handle RTL in React Native where SVG CSS transforms may not work?+
React Native's I18nManager.isRTL flag can drive a scaleX(-1) style transform on the Icon component. Alternatively, use pre-generated RTL SVG files loaded by the locale-aware loader — this approach works identically in web, native, and Flutter.
What about icon animations — do they need special RTL handling?+
Animated SVG icons (SMIL or CSS animations) need their directional offsets and translate values reviewed after mirroring. A left-to-right slide animation becomes a right-to-left slide after scaleX(-1). Test each animated icon manually in RTL context.
How do design teams manage parallel LTR and RTL icon variants in Figma?+
Use a Figma library with two component pages: Icons LTR and Icons RTL. Use the RTL Mirror plugin to generate the RTL page from the LTR page. Link the library to product files using Figma's multi-library support so designers always pull the correct variant for their locale.
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.