How to rtl icon design and localization guide for svg
- Step 1Categorize your icon set — Sort every icon into three groups: (1) Mirror — directional arrows, chevrons, UI controls; (2) No-mirror — logos, abstract shapes, universal symbols; (3) Redesign — icons that need cultural adaptation beyond a simple flip.
- Step 2Generate RTL variants — Use the JAD RTL Mirror tool to batch-generate all icons in the Mirror category. Store them in an rtl/ subfolder with the same file names for easy swapping.
- Step 3Implement automatic serving — Use CSS: [dir='rtl'] .icon { transform: scaleX(-1) } for inline SVGs, or a build-time conditional import based on the locale to load from the rtl/ folder.
Frequently asked questions
Should I mirror a clock icon for RTL?+
No. Clocks are universal — they always run clockwise regardless of reading direction. Similarly, musical notes, pie charts, and scientific diagrams should not be mirrored.
What is the difference between RTL mirroring and RTL flipping?+
They mean the same thing: a horizontal reflection along the vertical axis. The correct transform is scale(-1, 1) applied around the icon's horizontal centre. Do not rotate 180° — that would also flip vertically.
How do Material Design icons handle RTL?+
Material Design icons include an RTL metadata flag per icon. Icons marked as RTL-mirrored are automatically flipped by the Material web component when the page's dir attribute is 'rtl'. You can adopt the same pattern for your custom icon system.
Do I need separate SVG files for RTL or can I use a single file?+
Both approaches work. A single file with CSS scaleX(-1) on [dir='rtl'] is simpler to maintain. Separate files are better for sprite sheets, native mobile apps, and email clients where CSS transforms may not apply.
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.