diff --git a/src/css/tabs/motors.less b/src/css/tabs/motors.less
index 07f673a643..baf15648fa 100644
--- a/src/css/tabs/motors.less
+++ b/src/css/tabs/motors.less
@@ -54,7 +54,7 @@
 		border-bottom: 1px solid var(--subtleAccent);
 	}
 	.mixerPreview {
-		img {
+		svg {
 			width: 150px;
 			height: 150px;
 			margin-left: 15px;
diff --git a/src/js/tabs/motors.js b/src/js/tabs/motors.js
index 1950e4f880..71a46352cc 100644
--- a/src/js/tabs/motors.js
+++ b/src/js/tabs/motors.js
@@ -227,9 +227,17 @@ motors.initialize = async function (callback) {
         lines.attr('d', graphHelpers.line);
     }
 
+    function replace_mixer_preview(imgSrc) {
+        $.get(imgSrc, function(data) {
+            const svg = $(data).find('svg');
+            $('.mixerPreview').html(svg);
+        }, 'xml');
+    }
+
     function update_model(mixer) {
         const imgSrc = getMixerImageSrc(mixer, FC.MIXER_CONFIG.reverseMotorDir);
-        $('.mixerPreview img').attr('src', imgSrc);
+
+        replace_mixer_preview(imgSrc);
 
         const motorOutputReorderConfig = new MotorOutputReorderConfig(100);
         const domMotorOutputReorderDialogOpen = $('#motorOutputReorderDialogOpen');
@@ -350,10 +358,8 @@ motors.initialize = async function (callback) {
         mixerListElement.sortSelect();
 
         function refreshMixerPreview() {
-            const mixer = FC.MIXER_CONFIG.mixer;
-            const reverse = FC.MIXER_CONFIG.reverseMotorDir ? "_reversed" : "";
-
-            $('.mixerPreview img').attr('src', `./resources/motor_order/${mixerList[mixer - 1].image}${reverse}.svg`);
+            const imgSrc = getMixerImageSrc(FC.MIXER_CONFIG.mixer, FC.MIXER_CONFIG.reverseMotorDir);
+            replace_mixer_preview(imgSrc);
         }
 
         const reverseMotorSwitchElement = $('#reverseMotorSwitch');