diff --git a/res/css/views/elements/_StyledCheckbox.scss b/res/css/views/elements/_StyledCheckbox.scss
index 1467474b05..398214b9b0 100644
--- a/res/css/views/elements/_StyledCheckbox.scss
+++ b/res/css/views/elements/_StyledCheckbox.scss
@@ -48,22 +48,20 @@ limitations under the License.
             box-sizing: border-box;
             border-radius: $border-radius;
 
-            img {
+            .mx_Checkbox_checkmark {
                 display: none;
 
                 height: 100%;
                 width: 100%;
-                filter: invert(100%);
+                mask-image: url('$(res)/img/feather-customised/check.svg');
+                mask-position: center;
+                mask-size: 100%;
+                mask-repeat: no-repeat;
             }
         }
 
-        &:checked + label > .mx_Checkbox_background {
-            background: $accent-color;
-            border-color: $accent-color;
-
-            img {
-                display: block;
-            }
+        &:checked + label > .mx_Checkbox_background .mx_Checkbox_checkmark {
+            display: block;
         }
 
         & + label > *:not(.mx_Checkbox_background) {
@@ -75,11 +73,6 @@ limitations under the License.
             cursor: not-allowed;
         }
 
-        &:checked:disabled + label > .mx_Checkbox_background {
-            background-color: $accent-color;
-            border-color: $accent-color;
-        }
-
         &.focus-visible {
             & + label .mx_Checkbox_background {
                 @mixin unreal-focus;
@@ -87,3 +80,25 @@ limitations under the License.
         }
     }
 }
+
+.mx_Checkbox.mx_Checkbox_kind_solid input[type=checkbox] {
+    & + label > .mx_Checkbox_background .mx_Checkbox_checkmark {
+        background: #ffffff;
+    }
+
+    &:checked + label > .mx_Checkbox_background {
+        background: $accent-color;
+        border-color: $accent-color;
+    }
+}
+
+.mx_Checkbox.mx_Checkbox_kind_outline input[type=checkbox] {
+    & + label > .mx_Checkbox_background .mx_Checkbox_checkmark {
+        background: $accent-color;
+    }
+
+    &:checked + label > .mx_Checkbox_background {
+        background: transparent;
+        border-color: $accent-color;
+    }
+}
diff --git a/src/components/views/elements/StyledCheckbox.tsx b/src/components/views/elements/StyledCheckbox.tsx
index b609f7159e..05272f515d 100644
--- a/src/components/views/elements/StyledCheckbox.tsx
+++ b/src/components/views/elements/StyledCheckbox.tsx
@@ -17,8 +17,15 @@ limitations under the License.
 import React from "react";
 import { randomString } from "matrix-js-sdk/src/randomstring";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
+import classnames from 'classnames';
+
+export enum CheckboxStyle {
+    Solid = "solid",
+    Outline = "outline",
+}
 
 interface IProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    kind?: CheckboxStyle;
 }
 
 interface IState {
@@ -40,13 +47,21 @@ export default class StyledCheckbox extends React.PureComponent<IProps, IState>
 
     public render() {
         /* eslint @typescript-eslint/no-unused-vars: ["error", { "ignoreRestSiblings": true }] */
-        const { children, className, ...otherProps } = this.props;
-        return <span className={"mx_Checkbox " + className}>
+        const { children, className, kind = CheckboxStyle.Solid, ...otherProps } = this.props;
+        const newClassName = classnames(
+            "mx_Checkbox",
+            className,
+            {
+                "mx_Checkbox_hasKind": kind,
+                [`mx_Checkbox_kind_${kind}`]: kind,
+            },
+        );
+        return <span className={newClassName}>
             <input id={this.id} {...otherProps} type="checkbox" />
             <label htmlFor={this.id}>
                 { /* Using the div to center the image */ }
                 <div className="mx_Checkbox_background">
-                    <img src={require("../../../../res/img/feather-customised/check.svg")} />
+                    <div className="mx_Checkbox_checkmark" />
                 </div>
                 <div>
                     { this.props.children }
diff --git a/src/components/views/settings/DevicesPanelEntry.tsx b/src/components/views/settings/DevicesPanelEntry.tsx
index 1af0bac425..3ce5374cf7 100644
--- a/src/components/views/settings/DevicesPanelEntry.tsx
+++ b/src/components/views/settings/DevicesPanelEntry.tsx
@@ -21,6 +21,7 @@ import { _t } from '../../../languageHandler';
 import { MatrixClientPeg } from '../../../MatrixClientPeg';
 import { formatDate } from '../../../DateUtils';
 import StyledCheckbox from '../elements/StyledCheckbox';
+import { CheckboxStyle } from '../elements/StyledCheckbox';
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 import AccessibleButton from "../elements/AccessibleButton";
 import Field from "../elements/Field";
@@ -153,7 +154,7 @@ export default class DevicesPanelEntry extends React.Component<IProps, IState> {
                 <span className={"mx_DevicesPanel_icon mx_E2EIcon " + iconClass} />
             </div> :
             <div className="mx_DevicesPanel_checkbox">
-                <StyledCheckbox onChange={this.onDeviceToggled} checked={this.props.selected} />
+                <StyledCheckbox kind={CheckboxStyle.Outline} onChange={this.onDeviceToggled} checked={this.props.selected} />
             </div>;
 
         const buttons = this.state.renaming ?
diff --git a/test/components/views/settings/__snapshots__/FontScalingPanel-test.tsx.snap b/test/components/views/settings/__snapshots__/FontScalingPanel-test.tsx.snap
index 86163ab762..656144721d 100644
--- a/test/components/views/settings/__snapshots__/FontScalingPanel-test.tsx.snap
+++ b/test/components/views/settings/__snapshots__/FontScalingPanel-test.tsx.snap
@@ -243,7 +243,7 @@ exports[`FontScalingPanel renders the font scaling UI 1`] = `
           onChange={[Function]}
         >
           <span
-            className="mx_Checkbox "
+            className="mx_Checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
           >
             <input
               checked={false}
@@ -258,8 +258,8 @@ exports[`FontScalingPanel renders the font scaling UI 1`] = `
               <div
                 className="mx_Checkbox_background"
               >
-                <img
-                  src="image-file-stub"
+                <div
+                  className="mx_Checkbox_checkmark"
                 />
               </div>
               <div>