diff --git a/res/css/structures/_UserMenuButton.scss b/res/css/structures/_UserMenuButton.scss
index 3871fc22ef..85c3f53aa1 100644
--- a/res/css/structures/_UserMenuButton.scss
+++ b/res/css/structures/_UserMenuButton.scss
@@ -15,7 +15,26 @@ limitations under the License.
 */
 
 .mx_UserMenuButton {
-    // No special styles on the button itself
+    > span {
+        width: 16px;
+        height: 16px;
+        position: relative;
+        display: block;
+
+        &::before {
+            content: '';
+            width: 16px;
+            height: 16px;
+            position: absolute;
+            top: 0;
+            left: 0;
+            mask-position: center;
+            mask-size: contain;
+            mask-repeat: no-repeat;
+            background: $primary-fg-color;
+            mask-image: url('$(res)/img/feather-customised/more-horizontal.svg');
+        }
+    }
 }
 
 .mx_UserMenuButton_contextMenu {
@@ -76,4 +95,48 @@ limitations under the License.
             justify-content: center;
         }
     }
+
+    .mx_IconizedContextMenu_icon {
+        width: 16px;
+        height: 16px;
+        display: block;
+
+        &::before {
+            content: '';
+            width: 16px;
+            height: 16px;
+            mask-position: center;
+            mask-size: contain;
+            mask-repeat: no-repeat;
+            background: $primary-fg-color;
+        }
+    }
+
+    .mx_UserMenuButton_iconHome::before {
+        mask-image: url('$(res)/img/feather-customised/home.svg');
+    }
+
+    .mx_UserMenuButton_iconBell::before {
+        mask-image: url('$(res)/img/feather-customised/notifications.svg');
+    }
+
+    .mx_UserMenuButton_iconLock::before {
+        mask-image: url('$(res)/img/feather-customised/lock.svg');
+    }
+
+    .mx_UserMenuButton_iconSettings::before {
+        mask-image: url('$(res)/img/feather-customised/settings.svg');
+    }
+
+    .mx_UserMenuButton_iconArchive::before {
+        mask-image: url('$(res)/img/feather-customised/archive.svg');
+    }
+
+    .mx_UserMenuButton_iconMessage::before {
+        mask-image: url('$(res)/img/feather-customised/message-circle.svg');
+    }
+
+    .mx_UserMenuButton_iconSignOut::before {
+        mask-image: url('$(res)/img/feather-customised/sign-out.svg');
+    }
 }
diff --git a/src/components/structures/UserMenuButton.tsx b/src/components/structures/UserMenuButton.tsx
index de79bdf48d..27dfdac5a1 100644
--- a/src/components/structures/UserMenuButton.tsx
+++ b/src/components/structures/UserMenuButton.tsx
@@ -188,7 +188,7 @@ export default class UserMenuButton extends React.Component<IProps, IState> {
                 homeButton = (
                     <li>
                         <AccessibleButton onClick={this.onHomeClick}>
-                            <img src={require("../../../res/img/feather-customised/home.svg")} width={16} />
+                            <span className="mx_IconizedContextMenu_icon mx_UserMenuButton_iconHome" />
                             <span>{_t("Home")}</span>
                         </AccessibleButton>
                     </li>
@@ -231,31 +231,31 @@ export default class UserMenuButton extends React.Component<IProps, IState> {
                                 {homeButton}
                                 <li>
                                     <AccessibleButton onClick={(e) => this.onSettingsOpen(e, USER_NOTIFICATIONS_TAB)}>
-                                        <img src={require("../../../res/img/feather-customised/notifications.svg")} width={16} />
+                                        <span className="mx_IconizedContextMenu_icon mx_UserMenuButton_iconBell" />
                                         <span>{_t("Notification settings")}</span>
                                     </AccessibleButton>
                                 </li>
                                 <li>
                                     <AccessibleButton onClick={(e) => this.onSettingsOpen(e, USER_SECURITY_TAB)}>
-                                        <img src={require("../../../res/img/feather-customised/lock.svg")} width={16} />
+                                        <span className="mx_IconizedContextMenu_icon mx_UserMenuButton_iconLock" />
                                         <span>{_t("Security & privacy")}</span>
                                     </AccessibleButton>
                                 </li>
                                 <li>
                                     <AccessibleButton onClick={(e) => this.onSettingsOpen(e, null)}>
-                                        <img src={require("../../../res/img/feather-customised/settings.svg")} width={16} />
+                                        <span className="mx_IconizedContextMenu_icon mx_UserMenuButton_iconSettings" />
                                         <span>{_t("All settings")}</span>
                                     </AccessibleButton>
                                 </li>
                                 <li>
                                     <AccessibleButton onClick={this.onShowArchived}>
-                                        <img src={require("../../../res/img/feather-customised/archive.svg")} width={16} />
+                                        <span className="mx_IconizedContextMenu_icon mx_UserMenuButton_iconArchive" />
                                         <span>{_t("Archived rooms")}</span>
                                     </AccessibleButton>
                                 </li>
                                 <li>
                                     <AccessibleButton onClick={this.onProvideFeedback}>
-                                        <img src={require("../../../res/img/feather-customised/message-circle.svg")} width={16} />
+                                        <span className="mx_IconizedContextMenu_icon mx_UserMenuButton_iconMessage" />
                                         <span>{_t("Feedback")}</span>
                                     </AccessibleButton>
                                 </li>
@@ -265,7 +265,7 @@ export default class UserMenuButton extends React.Component<IProps, IState> {
                             <ul>
                                 <li>
                                     <AccessibleButton onClick={this.onSignOutClick}>
-                                        <img src={require("../../../res/img/feather-customised/sign-out.svg")} width={16} />
+                                        <span className="mx_IconizedContextMenu_icon mx_UserMenuButton_iconSignOut" />
                                         <span>{_t("Sign out")}</span>
                                     </AccessibleButton>
                                 </li>
@@ -285,7 +285,7 @@ export default class UserMenuButton extends React.Component<IProps, IState> {
                     label={_t("Account settings")}
                     isExpanded={this.state.menuDisplayed}
                 >
-                    <img src={require("../../../res/img/feather-customised/more-horizontal.svg")} alt="..." width={14} />
+                    <span>{/* masked image in CSS */}</span>
                 </ContextMenuButton>
                 {contextMenu}
             </React.Fragment>