diff --git a/res/css/views/elements/_Spinner.scss b/res/css/views/elements/_Spinner.scss
index db9f54b56c..6966a60e52 100644
--- a/res/css/views/elements/_Spinner.scss
+++ b/res/css/views/elements/_Spinner.scss
@@ -23,7 +23,7 @@ limitations under the License.
     flex: 1;
 }
 
-.mx_Spinner img {
+.mx_Spinner_spin img {
     animation: spin 1s linear infinite;
 }
 
diff --git a/src/components/views/elements/InlineSpinner.js b/src/components/views/elements/InlineSpinner.js
index 4842cba0c6..dba2479d57 100644
--- a/src/components/views/elements/InlineSpinner.js
+++ b/src/components/views/elements/InlineSpinner.js
@@ -17,6 +17,7 @@ limitations under the License.
 import React from "react";
 import createReactClass from 'create-react-class';
 import {_t} from "../../../languageHandler";
+import SettingsStore from "../../../settings/SettingsStore";
 
 export default createReactClass({
     displayName: 'InlineSpinner',
@@ -27,10 +28,20 @@ export default createReactClass({
         const imgClass = this.props.imgClassName || "";
         const alt = this.props.alt || _t("Loading...");
 
+        let divClass;
+        let imageSource;
+        if (SettingsStore.isFeatureEnabled('feature_new_spinner')) {
+            divClass = "mx_InlineSpinner mx_Spinner_spin";
+            imageSource = require("../../../../res/img/spinner.svg");
+        } else {
+            divClass = "mx_InlineSpinner";
+            imageSource = require("../../../../res/img/spinner.gif");
+        }
+
         return (
-            <div className="mx_InlineSpinner">
+            <div className={divClass}>
                 <img
-                    src={require("../../../../res/img/spinner.svg")}
+                    src={imageSource}
                     width={w}
                     height={h}
                     className={imgClass}
diff --git a/src/components/views/elements/Spinner.js b/src/components/views/elements/Spinner.js
index 3d5697c72e..c192f7d499 100644
--- a/src/components/views/elements/Spinner.js
+++ b/src/components/views/elements/Spinner.js
@@ -18,18 +18,29 @@ limitations under the License.
 import React from "react";
 import PropTypes from "prop-types";
 import {_t} from "../../../languageHandler";
+import SettingsStore from "../../../settings/SettingsStore";
 
 const Spinner = ({w = 32, h = 32, imgClassName, alt, message}) => {
+    let divClass;
+    let imageSource;
+    if (SettingsStore.isFeatureEnabled('feature_new_spinner')) {
+        divClass = "mx_Spinner mx_Spinner_spin";
+        imageSource = require("../../../../res/img/spinner.svg");
+    } else {
+        divClass = "mx_Spinner";
+        imageSource = require("../../../../res/img/spinner.gif");
+    }
+
     return (
-        <div className="mx_Spinner">
+        <div className={divClass}>
             { message && <React.Fragment><div className="mx_Spinner_Msg">{ message}</div>&nbsp;</React.Fragment> }
-            <img
-                src={require("../../../../res/img/spinner.svg")}
-                width={w}
-                height={h}
-                className={imgClassName}
-                alt={alt || _t("Loading...")}
-            />
+                <img
+                    src={imageSource}
+                    width={w}
+                    height={h}
+                    className={imgClassName}
+                    alt={alt || _t("Loading...")}
+                />
         </div>
     );
 };
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 4970a650db..ae44d59c59 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -427,6 +427,7 @@
     "Sorry, your homeserver is too old to participate in this room.": "Sorry, your homeserver is too old to participate in this room.",
     "Please contact your homeserver administrator.": "Please contact your homeserver administrator.",
     "Failed to join room": "Failed to join room",
+    "New spinner design": "New spinner design",
     "Font scaling": "Font scaling",
     "Message Pinning": "Message Pinning",
     "Custom user status messages": "Custom user status messages",
diff --git a/src/settings/Settings.js b/src/settings/Settings.js
index f19b827307..820329f6c6 100644
--- a/src/settings/Settings.js
+++ b/src/settings/Settings.js
@@ -97,6 +97,12 @@ export const SETTINGS = {
     //     // not use this for new settings.
     //     invertedSettingName: "my-negative-setting",
     // },
+    "feature_new_spinner": {
+        isFeature: true,
+        displayName: _td("New spinner design"),
+        supportedLevels: LEVELS_FEATURE,
+        default: false,
+    },
     "feature_font_scaling": {
         isFeature: true,
         displayName: _td("Font scaling"),