RTL support

This article is for outdated Iconify SVG Framework version 1.0.

It has been deprecated, consider switching to modern web component.

Iconify SVG framework does not transform icons for RTL languages because it requires adding code to stylesheet. Iconify SVG framework does not add anything to the stylesheet because it might interfere with existing code.

To automatically transform icons add this to your stylesheet:

html[dir='rtl'] svg.iconify {
   transform: scaleX(-1) !important;
}

However, be aware that that code will change all icons. If you want to change only specific icon, add something like this:

/* transform ant-design:code-outline */
html[dir='rtl'] svg[data-icon='ant-design:code-outline'] {
   transform: scaleX(-1) !important;
}

/* transform all icons that contain "left" or "right", such as "mdi:hand-pointing-left" */
html[dir='rtl'] svg[data-icon*='left'],
html[dir='rtl'] svg[data-icon*='right'] {
   transform: scaleX(-1) !important;
}

See attribute selectors article on MDN web docs to understand how attribute selectors work. Do not use case-insensitive selector that you will find in MDN documentation because Microsoft browsers do not support it.

Why was !important added after transform? Because <svg> generated by Iconify SVG framework already has transform in style to fix rendering bug that existed in Firefox browser until 2020 and in some older browsers.

If you have many icons you want to transform when your website is using RTL language, but you do not want to transform all icons, you can add custom class to icon instead of making selectors for each icon:

Arrow will always point left, even in RTL languages
HTML:
<span class="iconify can-transform" data-icon="bi:arrow-left-circle"></span>
Stylesheet:
html[dir='rtl'] .iconify.can-transform {
   transform: scaleX(-1) !important;
}