diff --git a/components/node/src/toggle.js b/components/node/src/toggle.js
index 0f2fbd0e45..1937586128 100644
--- a/components/node/src/toggle.js
+++ b/components/node/src/toggle.js
@@ -4,18 +4,20 @@ import PropTypes from 'prop-types'
 import React from 'react'
 
 const ArrowDown = () => (
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-        <path d="M15.7041 10.3329L12.1495 14.3318C12.0699 14.4213 11.9301 14.4213 11.8505 14.3318L8.29589 10.3329C8.18124 10.2039 8.2728 10 8.44537 10H15.5546C15.7272 10 15.8188 10.2039 15.7041 10.3329Z" />
-        <style jsx>{`
-            svg {
-                fill: inherit;
-                height: 24px;
-                width: 24px;
-                vertical-align: middle;
-                pointer-events: none;
-            }
-        `}</style>
-    </svg>
+    <div className="nodeArrow">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+            <path d="M15.7041 10.3329L12.1495 14.3318C12.0699 14.4213 11.9301 14.4213 11.8505 14.3318L8.29589 10.3329C8.18124 10.2039 8.2728 10 8.44537 10H15.5546C15.7272 10 15.8188 10.2039 15.7041 10.3329Z" />
+            <style jsx>{`
+                svg {
+                    fill: inherit;
+                    height: 24px;
+                    width: 24px;
+                    vertical-align: middle;
+                    pointer-events: none;
+                }
+            `}</style>
+        </svg>
+    </div>
 )
 
 export const Toggle = ({ open, onOpen, onClose, dataTest }) => {
@@ -55,20 +57,21 @@ export const Toggle = ({ open, onOpen, onClose, dataTest }) => {
                     z-index: 2;
                     fill: ${colors.grey900};
                 }
-                div :global(svg) {
+                div :global(.nodeArrow) {
                     vertical-align: top;
                     transform: rotate(-90deg);
                     transition: transform 0.1s ease-out;
                 }
-                div :global(svg:dir(rtl)) {
+                div :global(.nodeArrow:dir(rtl)) {
                     transform: rotate(90deg);
                 }
-                .open :global(svg) {
+                .open :global(.nodeArrow) {
                     transform: rotate(0);
                 }
-                .open :global(svg:dir(rtl)) {
+                .open :global(.nodeArrow:dir(rtl)) {
                     transform: rotate(0);
                 }
+
                 div:hover {
                     cursor: pointer;
                     border-radius: 3px;
diff --git a/components/switch/src/switch/switch-icons.js b/components/switch/src/switch/switch-icons.js
index cb2b9e8fcd..9f7a74c744 100644
--- a/components/switch/src/switch/switch-icons.js
+++ b/components/switch/src/switch/switch-icons.js
@@ -15,6 +15,10 @@ const styles = css`
         transform: scale(-1, 1);
     }
 
+    svg[dir='rtl'] {
+        transform: scale(-1, 1);
+    }
+
     svg.dense {
         height: 14px;
         width: 27px;
@@ -35,6 +39,10 @@ const styles = css`
         display: none;
     }
 
+    svg[dir='rtl'] .checkmark {
+        display: none;
+    }
+
     svg.checked .handle-unchecked,
     svg:not(.checked) .handle-checked {
         fill: none;
@@ -93,6 +101,7 @@ export function SwitchRegular({ className }) {
             viewBox="0 0 42 22"
             xmlns="http://www.w3.org/2000/svg"
             className={className}
+            dir={document.documentElement?.dir ?? 'ltr'}
         >
             <path
                 d="M0,11 L0,11 C0,4.92486775 4.92076837,0 11.0075657,0 L30.9924343,0 C37.071745,0 42,4.923532 42,11 L42,11 C42,17.0751322 37.0792316,22 30.9924343,22 L11.0075657,22 C4.92825504,22 0,17.0791222 0,11 L0,11 Z"
diff --git a/components/switch/src/switch/switch.stories.js b/components/switch/src/switch/switch.stories.js
index f7e442bca1..d005ad39a6 100644
--- a/components/switch/src/switch/switch.stories.js
+++ b/components/switch/src/switch/switch.stories.js
@@ -1,5 +1,5 @@
 import { sharedPropTypes } from '@dhis2/ui-constants'
-import React from 'react'
+import React, { useEffect } from 'react'
 import { Switch } from './index.js'
 
 const subtitle = 'An input control that allows an on and an off state'
@@ -139,10 +139,19 @@ export const ImageLabelDense = Template.bind({})
 ImageLabelDense.args = { ...ImageLabel.args, ...DefaultDense.args }
 ImageLabelDense.storyName = 'Image label - Dense'
 
-export const RTL = (args) => (
-    <div dir="rtl">
-        <Template {...args} />
-        <Template checked={true} value="checked" />
-        <Template error={true} checked={true} value="error" />
-    </div>
-)
+export const RTL = (args) => {
+    useEffect(() => {
+        document.documentElement.setAttribute('dir', 'rtl')
+        return () => {
+            document.documentElement.setAttribute('dir', 'ltr')
+        }
+    }, [])
+
+    return (
+        <div dir="rtl">
+            <Template {...args} />
+            <Template checked={true} value="checked" />
+            <Template error={true} checked={true} value="error" />
+        </div>
+    )
+}
diff --git a/components/transfer/src/icons.js b/components/transfer/src/icons.js
index 3b41cd605a..b39d47ff7f 100644
--- a/components/transfer/src/icons.js
+++ b/components/transfer/src/icons.js
@@ -7,34 +7,37 @@ const centerButtonStyles = css`
     svg {
         min-width: 20px;
     }
-    svg:dir(rtl) {
+    div.centerButton:dir(rtl) {
         transform: rotate(180deg) translateX(4px);
     }
 `
 
 export const IconAddAll = ({ dataTest, disabled }) => (
-    <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="16"
-        height="16"
-        viewBox="0 0 16 16"
-        data-test={dataTest}
-        fill={disabled ? theme.disabled : '#404B5A'}
-    >
-        <g fillRule="evenodd">
-            <polygon
-                fillRule="nonzero"
-                points="6 2 4.94 3.06 9.13 7.25 0 7.25 0 8.75 9.13 8.75 4.94 12.94 6 14 12 8"
-            />
-
-            <polygon
-                fillRule="nonzero"
-                points="10 2 8.94 3.06 13.13 7.25 13.9 8 13.13 8.75 8.94 12.94 10 14 16 8"
-            />
-        </g>
-
+    <>
+        <div className="centerButton">
+            <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="16"
+                height="16"
+                viewBox="0 0 16 16"
+                data-test={dataTest}
+                fill={disabled ? theme.disabled : '#404B5A'}
+            >
+                <g fillRule="evenodd">
+                    <polygon
+                        fillRule="nonzero"
+                        points="6 2 4.94 3.06 9.13 7.25 0 7.25 0 8.75 9.13 8.75 4.94 12.94 6 14 12 8"
+                    />
+
+                    <polygon
+                        fillRule="nonzero"
+                        points="10 2 8.94 3.06 13.13 7.25 13.9 8 13.13 8.75 8.94 12.94 10 14 16 8"
+                    />
+                </g>
+            </svg>
+        </div>
         <style jsx>{centerButtonStyles}</style>
-    </svg>
+    </>
 )
 
 IconAddAll.propTypes = {
@@ -43,18 +46,21 @@ IconAddAll.propTypes = {
 }
 
 export const IconAddIndividual = ({ dataTest, disabled }) => (
-    <svg
-        fill={disabled ? theme.disabled : '#404B5A'}
-        xmlns="http://www.w3.org/2000/svg"
-        width="16"
-        height="16"
-        viewBox="0 0 16 16"
-        data-test={dataTest}
-    >
-        <polygon points="8 2 6.94 3.06 11.13 7.25 2 7.25 2 8.75 11.13 8.75 6.94 12.94 8 14 14 8" />
-
+    <>
+        <div className="centerButton">
+            <svg
+                fill={disabled ? theme.disabled : '#404B5A'}
+                xmlns="http://www.w3.org/2000/svg"
+                width="16"
+                height="16"
+                viewBox="0 0 16 16"
+                data-test={dataTest}
+            >
+                <polygon points="8 2 6.94 3.06 11.13 7.25 2 7.25 2 8.75 11.13 8.75 6.94 12.94 8 14 14 8" />
+            </svg>
+        </div>
         <style jsx>{centerButtonStyles}</style>
-    </svg>
+    </>
 )
 
 IconAddIndividual.propTypes = {
@@ -63,30 +69,33 @@ IconAddIndividual.propTypes = {
 }
 
 export const IconRemoveAll = ({ dataTest, disabled }) => (
-    <svg
-        fill={disabled ? theme.disabled : '#404B5A'}
-        width="16px"
-        height="16px"
-        viewBox="0 0 16 16"
-        data-test={dataTest}
-        xmlns="http://www.w3.org/2000/svg"
-    >
-        <g fillRule="evenodd">
-            <polygon
-                fillRule="nonzero"
-                points="10 2 8.94 3.06 13.13 7.25 4 7.25 4 8.75 13.13 8.75 8.94 12.94 10 14 16 8"
-                transform="matrix(-1 0 0 1 20 0)"
-            />
-
-            <polygon
-                fillRule="nonzero"
-                points="1.06 2 0 3.06 4.19 7.25 4.96 8 4.19 8.75 0 12.94 1.06 14 7.06 8"
-                transform="matrix(-1 0 0 1 7.06 0)"
-            />
-        </g>
-
+    <>
+        <div className="centerButton">
+            <svg
+                fill={disabled ? theme.disabled : '#404B5A'}
+                width="16px"
+                height="16px"
+                viewBox="0 0 16 16"
+                data-test={dataTest}
+                xmlns="http://www.w3.org/2000/svg"
+            >
+                <g fillRule="evenodd">
+                    <polygon
+                        fillRule="nonzero"
+                        points="10 2 8.94 3.06 13.13 7.25 4 7.25 4 8.75 13.13 8.75 8.94 12.94 10 14 16 8"
+                        transform="matrix(-1 0 0 1 20 0)"
+                    />
+
+                    <polygon
+                        fillRule="nonzero"
+                        points="1.06 2 0 3.06 4.19 7.25 4.96 8 4.19 8.75 0 12.94 1.06 14 7.06 8"
+                        transform="matrix(-1 0 0 1 7.06 0)"
+                    />
+                </g>
+            </svg>
+        </div>
         <style jsx>{centerButtonStyles}</style>
-    </svg>
+    </>
 )
 
 IconRemoveAll.propTypes = {
@@ -95,21 +104,24 @@ IconRemoveAll.propTypes = {
 }
 
 export const IconRemoveIndividual = ({ dataTest, disabled }) => (
-    <svg
-        fill={disabled ? theme.disabled : '#404B5A'}
-        xmlns="http://www.w3.org/2000/svg"
-        width="16"
-        height="16"
-        viewBox="0 0 16 16"
-        data-test={dataTest}
-    >
-        <polygon
-            points="8 2 6.94 3.06 11.13 7.25 2 7.25 2 8.75 11.13 8.75 6.94 12.94 8 14 14 8"
-            transform="matrix(-1 0 0 1 16 0)"
-        />
-
+    <>
+        <div className="centerButton">
+            <svg
+                fill={disabled ? theme.disabled : '#404B5A'}
+                xmlns="http://www.w3.org/2000/svg"
+                width="16"
+                height="16"
+                viewBox="0 0 16 16"
+                data-test={dataTest}
+            >
+                <polygon
+                    points="8 2 6.94 3.06 11.13 7.25 2 7.25 2 8.75 11.13 8.75 6.94 12.94 8 14 14 8"
+                    transform="matrix(-1 0 0 1 16 0)"
+                />
+            </svg>
+        </div>
         <style jsx>{centerButtonStyles}</style>
-    </svg>
+    </>
 )
 
 IconRemoveIndividual.propTypes = {