diff --git a/res/css/_components.scss b/res/css/_components.scss
index 44c63b9df7..dca003918c 100644
--- a/res/css/_components.scss
+++ b/res/css/_components.scss
@@ -116,6 +116,7 @@
 @import "./views/elements/_RoomAliasField.scss";
 @import "./views/elements/_Slider.scss";
 @import "./views/elements/_Spinner.scss";
+@import "./views/elements/_StyledCheckbox.scss";
 @import "./views/elements/_SyntaxHighlight.scss";
 @import "./views/elements/_TextWithTooltip.scss";
 @import "./views/elements/_ToggleSwitch.scss";
diff --git a/res/css/_font-sizes.scss b/res/css/_font-sizes.scss
index 76a9b16425..2d7ab67e40 100644
--- a/res/css/_font-sizes.scss
+++ b/res/css/_font-sizes.scss
@@ -15,6 +15,7 @@ limitations under the License.
 */
 
 $font-1px: 0.067rem;
+$font-1-5px: 0.100rem;
 $font-2px: 0.133rem;
 $font-3px: 0.200rem;
 $font-4px: 0.267rem;
diff --git a/res/css/views/dialogs/_GroupAddressPicker.scss b/res/css/views/dialogs/_GroupAddressPicker.scss
index 20a7cc1047..5fa18931f0 100644
--- a/res/css/views/dialogs/_GroupAddressPicker.scss
+++ b/res/css/views/dialogs/_GroupAddressPicker.scss
@@ -18,8 +18,3 @@ limitations under the License.
     margin-top: 10px;
     display: flex;
 }
-
-.mx_GroupAddressPicker_checkboxContainer input[type="checkbox"] {
-    /* Stop flex from shrinking the checkbox */
-    width: 20px;
-}
diff --git a/res/css/views/elements/_StyledCheckbox.scss b/res/css/views/elements/_StyledCheckbox.scss
new file mode 100644
index 0000000000..14081f1e99
--- /dev/null
+++ b/res/css/views/elements/_StyledCheckbox.scss
@@ -0,0 +1,66 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+
+.mx_Checkbox {
+    $size: $font-16px;
+    $border-size: $font-1-5px;
+    $border-radius: $font-4px;
+
+    display: flex;
+    align-items: flex-start;
+
+    input[type=checkbox] {
+        display: none;
+
+        & + label {
+            display: flex;
+            align-items: center;
+
+            flex-grow: 1;
+        }
+
+        & + label > .mx_Checkbox_background {
+            display: inline-flex;
+            position: relative;
+
+            flex-shrink: 0;
+
+            height: $size;
+            width: $size;
+            size: 0.5rem;
+
+            border: $border-size solid rgba($muted-fg-color, 0.5);
+            box-sizing: border-box;
+            border-radius: $border-radius;
+
+            img {
+                height: 100%;
+                width: 100%;
+                filter: invert(100%);
+            }
+        }
+
+        &:checked + label > .mx_Checkbox_background {
+            background: $accent-color;
+            border-color: $accent-color;
+        }
+
+        & + label > *:not(.mx_Checkbox_background) {
+            margin-left: 10px;
+        }
+    }
+}
diff --git a/src/GroupAddressPicker.js b/src/GroupAddressPicker.js
index 2928137f9d..e7ae3217bb 100644
--- a/src/GroupAddressPicker.js
+++ b/src/GroupAddressPicker.js
@@ -22,6 +22,7 @@ import { _t } from './languageHandler';
 import {MatrixClientPeg} from './MatrixClientPeg';
 import GroupStore from './stores/GroupStore';
 import {allSettled} from "./utils/promise";
+import StyledCheckbox from './components/views/elements/StyledCheckbox';
 
 export function showGroupInviteDialog(groupId) {
     return new Promise((resolve, reject) => {
@@ -61,12 +62,12 @@ export function showGroupAddRoomDialog(groupId) {
             <div>{ _t("Which rooms would you like to add to this community?") }</div>
         </div>;
 
-        const checkboxContainer = <label className="mx_GroupAddressPicker_checkboxContainer">
-            <input type="checkbox" onChange={onCheckboxClicked} />
-            <div>
-                { _t("Show these rooms to non-members on the community page and room list?") }
-            </div>
-        </label>;
+        const checkboxContainer = <StyledCheckbox
+            className="mx_GroupAddressPicker_checkboxContainer"
+            onChange={onCheckboxClicked}
+        >
+            { _t("Show these rooms to non-members on the community page and room list?") }
+        </StyledCheckbox>;
 
         const AddressPickerDialog = sdk.getComponent("dialogs.AddressPickerDialog");
         Modal.createTrackedDialog('Add Rooms to Group', '', AddressPickerDialog, {
diff --git a/src/components/views/auth/InteractiveAuthEntryComponents.js b/src/components/views/auth/InteractiveAuthEntryComponents.js
index 655452fcee..b1fb5a6f60 100644
--- a/src/components/views/auth/InteractiveAuthEntryComponents.js
+++ b/src/components/views/auth/InteractiveAuthEntryComponents.js
@@ -355,6 +355,7 @@ export const TermsAuthEntry = createReactClass({
             allChecked = allChecked && checked;
 
             checkboxes.push(
+                // XXX: replace with StyledCheckbox
                 <label key={"policy_checkbox_" + policy.id} className="mx_InteractiveAuthEntryComponents_termsPolicy">
                     <input type="checkbox" onChange={() => this._togglePolicy(policy.id)} checked={checked} />
                     <a href={policy.url} target="_blank" rel="noreferrer noopener">{ policy.name }</a>
diff --git a/src/components/views/dialogs/DeactivateAccountDialog.js b/src/components/views/dialogs/DeactivateAccountDialog.js
index ffef2a30c7..fca8c42546 100644
--- a/src/components/views/dialogs/DeactivateAccountDialog.js
+++ b/src/components/views/dialogs/DeactivateAccountDialog.js
@@ -25,6 +25,7 @@ import * as Lifecycle from '../../../Lifecycle';
 import { _t } from '../../../languageHandler';
 import InteractiveAuth, {ERROR_USER_CANCELLED} from "../../structures/InteractiveAuth";
 import {DEFAULT_PHASE, PasswordAuthEntry, SSOAuthEntry} from "../auth/InteractiveAuthEntryComponents";
+import StyledCheckbox from "../elements/StyledCheckbox";
 
 export default class DeactivateAccountDialog extends React.Component {
     constructor(props) {
@@ -209,21 +210,18 @@ export default class DeactivateAccountDialog extends React.Component {
 
                     <div className="mx_DeactivateAccountDialog_input_section">
                         <p>
-                            <label htmlFor="mx_DeactivateAccountDialog_erase_account_input">
-                                <input
-                                    id="mx_DeactivateAccountDialog_erase_account_input"
-                                    type="checkbox"
-                                    checked={this.state.shouldErase}
-                                    onChange={this._onEraseFieldChange}
-                                />
-                                { _t(
+                            <StyledCheckbox
+                                checked={this.state.shouldErase}
+                                onChange={this._onEraseFieldChange}
+                            >
+                                {_t(
                                     "Please forget all messages I have sent when my account is deactivated " +
                                     "(<b>Warning:</b> this will cause future users to see an incomplete view " +
                                     "of conversations)",
                                     {},
                                     { b: (sub) => <b>{ sub }</b> },
-                                ) }
-                            </label>
+                                )}
+                            </StyledCheckbox>
                         </p>
 
                         {error}
diff --git a/src/components/views/dialogs/ShareDialog.tsx b/src/components/views/dialogs/ShareDialog.tsx
index 271f754fd2..2e1529cbf1 100644
--- a/src/components/views/dialogs/ShareDialog.tsx
+++ b/src/components/views/dialogs/ShareDialog.tsx
@@ -29,6 +29,7 @@ import {RoomPermalinkCreator, makeGroupPermalink, makeUserPermalink} from "../..
 import * as ContextMenu from "../../structures/ContextMenu";
 import {toRightOf} from "../../structures/ContextMenu";
 import {copyPlaintext, selectText} from "../../../utils/strings";
+import StyledCheckbox from '../elements/StyledCheckbox';
 
 const socials = [
     {
@@ -168,13 +169,12 @@ export default class ShareDialog extends React.PureComponent<IProps, IState> {
             const events = this.props.target.getLiveTimeline().getEvents();
             if (events.length > 0) {
                 checkbox = <div>
-                    <input type="checkbox"
-                           id="mx_ShareDialog_checkbox"
-                           checked={this.state.linkSpecificEvent}
-                           onChange={this.onLinkSpecificEventCheckboxClick} />
-                    <label htmlFor="mx_ShareDialog_checkbox">
+                    <StyledCheckbox
+                        checked={this.state.linkSpecificEvent}
+                        onChange={this.onLinkSpecificEventCheckboxClick}
+                    >
                         { _t('Link to most recent message') }
-                    </label>
+                    </StyledCheckbox>
                 </div>;
             }
         } else if (this.props.target instanceof User || this.props.target instanceof RoomMember) {
@@ -184,13 +184,12 @@ export default class ShareDialog extends React.PureComponent<IProps, IState> {
         } else if (this.props.target instanceof MatrixEvent) {
             title = _t('Share Room Message');
             checkbox = <div>
-                <input type="checkbox"
-                       id="mx_ShareDialog_checkbox"
+                <StyledCheckbox
                        checked={this.state.linkSpecificEvent}
-                       onClick={this.onLinkSpecificEventCheckboxClick} />
-                <label htmlFor="mx_ShareDialog_checkbox">
+                       onClick={this.onLinkSpecificEventCheckboxClick}
+                >
                     { _t('Link to selected message') }
-                </label>
+                </StyledCheckbox>
             </div>;
         }
 
diff --git a/src/components/views/elements/StyledCheckbox.tsx b/src/components/views/elements/StyledCheckbox.tsx
new file mode 100644
index 0000000000..025164a24f
--- /dev/null
+++ b/src/components/views/elements/StyledCheckbox.tsx
@@ -0,0 +1,57 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from "react";
+import { randomString } from "matrix-js-sdk/src/randomstring";
+
+const CHECK_BOX_SVG = require("../../../../res/img/feather-customised/check.svg");
+
+interface IProps extends React.InputHTMLAttributes<HTMLInputElement> {
+}
+
+interface IState {
+}
+
+export default class StyledCheckbox extends React.PureComponent<IProps, IState> {
+
+    public static readonly defaultProps = {
+        className: "",
+    }
+
+    constructor(props: IProps) {
+        super(props);
+    }
+
+    public render() {
+        const { children, className, ...otherProps } = this.props;
+        // 56^10 so unlikely chance of collision.
+        const id = "checkbox_" + randomString(10);
+        return [
+            <span className={"mx_Checkbox " + className}>
+                <input id={id} {...otherProps} type="checkbox" />
+                <label htmlFor={id}>
+                    {/* Using the div to center the image */}
+                    <div className="mx_Checkbox_background">
+                        <img src={CHECK_BOX_SVG}/>
+                    </div>
+                    <div>
+                        { this.props.children }
+                    </div>
+                </label>
+            </span>
+        ]
+    }
+}
\ No newline at end of file
diff --git a/src/components/views/settings/DevicesPanelEntry.js b/src/components/views/settings/DevicesPanelEntry.js
index ff3c318a92..567b144a92 100644
--- a/src/components/views/settings/DevicesPanelEntry.js
+++ b/src/components/views/settings/DevicesPanelEntry.js
@@ -21,6 +21,7 @@ import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 import {MatrixClientPeg} from '../../../MatrixClientPeg';
 import {formatDate} from '../../../DateUtils';
+import StyledCheckbox from '../elements/StyledCheckbox';
 
 export default class DevicesPanelEntry extends React.Component {
     constructor(props) {
@@ -81,7 +82,7 @@ export default class DevicesPanelEntry extends React.Component {
                     { lastSeen }
                 </div>
                 <div className="mx_DevicesPanel_deviceButtons">
-                    <input type="checkbox" onChange={this.onDeviceToggled} checked={this.props.selected} />
+                    <StyledCheckbox onChange={this.onDeviceToggled} checked={this.props.selected} />
                 </div>
             </div>
         );