diff --git a/playwright/snapshots/settings/preferences-user-settings-tab.spec.ts/Preferences-user-settings-tab-should-be-rendered-properly-1-linux.png b/playwright/snapshots/settings/preferences-user-settings-tab.spec.ts/Preferences-user-settings-tab-should-be-rendered-properly-1-linux.png
index 884b10b038..b3ecf2c281 100644
Binary files a/playwright/snapshots/settings/preferences-user-settings-tab.spec.ts/Preferences-user-settings-tab-should-be-rendered-properly-1-linux.png and b/playwright/snapshots/settings/preferences-user-settings-tab.spec.ts/Preferences-user-settings-tab-should-be-rendered-properly-1-linux.png differ
diff --git a/playwright/snapshots/settings/quick-settings-menu.spec.ts/quick-settings-linux.png b/playwright/snapshots/settings/quick-settings-menu.spec.ts/quick-settings-linux.png
index 2992e35d60..bd95b29bfa 100644
Binary files a/playwright/snapshots/settings/quick-settings-menu.spec.ts/quick-settings-linux.png and b/playwright/snapshots/settings/quick-settings-menu.spec.ts/quick-settings-linux.png differ
diff --git a/playwright/snapshots/spaces/spaces.spec.ts/space-panel-expanded-linux.png b/playwright/snapshots/spaces/spaces.spec.ts/space-panel-expanded-linux.png
index 59d3f87bb2..6ebcb8635f 100644
Binary files a/playwright/snapshots/spaces/spaces.spec.ts/space-panel-expanded-linux.png and b/playwright/snapshots/spaces/spaces.spec.ts/space-panel-expanded-linux.png differ
diff --git a/playwright/snapshots/spaces/spaces.spec.ts/space-room-view-linux.png b/playwright/snapshots/spaces/spaces.spec.ts/space-room-view-linux.png
index f313bde9c4..fcee2c1d8c 100644
Binary files a/playwright/snapshots/spaces/spaces.spec.ts/space-room-view-linux.png and b/playwright/snapshots/spaces/spaces.spec.ts/space-room-view-linux.png differ
diff --git a/playwright/snapshots/spaces/threads-activity-centre/threadsActivityCentre.spec.ts/tac-button-expanded-linux.png b/playwright/snapshots/spaces/threads-activity-centre/threadsActivityCentre.spec.ts/tac-button-expanded-linux.png
index 30c7b662c5..5d47b6b9b5 100644
Binary files a/playwright/snapshots/spaces/threads-activity-centre/threadsActivityCentre.spec.ts/tac-button-expanded-linux.png and b/playwright/snapshots/spaces/threads-activity-centre/threadsActivityCentre.spec.ts/tac-button-expanded-linux.png differ
diff --git a/playwright/snapshots/spaces/threads-activity-centre/threadsActivityCentre.spec.ts/tac-hovered-expanded-linux.png b/playwright/snapshots/spaces/threads-activity-centre/threadsActivityCentre.spec.ts/tac-hovered-expanded-linux.png
index 30c7b662c5..5d47b6b9b5 100644
Binary files a/playwright/snapshots/spaces/threads-activity-centre/threadsActivityCentre.spec.ts/tac-hovered-expanded-linux.png and b/playwright/snapshots/spaces/threads-activity-centre/threadsActivityCentre.spec.ts/tac-hovered-expanded-linux.png differ
diff --git a/res/css/components/views/elements/_FilterDropdown.pcss b/res/css/components/views/elements/_FilterDropdown.pcss
index 22eb5f2ff1..5385a614cc 100644
--- a/res/css/components/views/elements/_FilterDropdown.pcss
+++ b/res/css/components/views/elements/_FilterDropdown.pcss
@@ -40,7 +40,7 @@ Please see LICENSE files in the repository root for full details.
     }
 
     .mx_Dropdown_arrow {
-        background: $secondary-content;
+        color: $secondary-content;
     }
 }
 
diff --git a/res/css/structures/_GenericDropdownMenu.pcss b/res/css/structures/_GenericDropdownMenu.pcss
index 1d0fb79648..a2aa022eee 100644
--- a/res/css/structures/_GenericDropdownMenu.pcss
+++ b/res/css/structures/_GenericDropdownMenu.pcss
@@ -13,6 +13,12 @@ Please see LICENSE files in the repository root for full details.
     user-select: none;
     font-size: $font-12px;
     color: $secondary-content;
+
+    svg {
+        width: 18px;
+        height: 18px;
+        float: right;
+    }
 }
 
 .mx_GenericDropdownMenu_button:hover,
@@ -20,17 +26,6 @@ Please see LICENSE files in the repository root for full details.
     background: $quinary-content;
 }
 
-.mx_GenericDropdownMenu_button::before {
-    content: "";
-    width: 18px;
-    height: 18px;
-    background: currentColor;
-    mask-image: url("@vector-im/compound-design-tokens/icons/chevron-down.svg");
-    mask-size: 100%;
-    mask-repeat: no-repeat;
-    float: right;
-}
-
 .mx_ContextualMenu_wrapper.mx_GenericDropdownMenu_wrapper {
     .mx_ContextualMenu {
         position: initial;
@@ -97,16 +92,12 @@ Please see LICENSE files in the repository root for full details.
                 background-color: $menu-selected-color;
             }
 
-            &[aria-checked="true"]::before {
-                content: "";
+            .mx_GenericDropdownMenu_Option--checkIcon {
                 width: 16px;
                 height: 16px;
                 margin-left: -22px;
                 margin-right: 6px;
-                mask-image: url("@vector-im/compound-design-tokens/icons/check.svg");
-                mask-size: 100%;
-                mask-repeat: no-repeat;
-                background-color: $primary-content;
+                color: $primary-content;
                 display: inline-block;
                 vertical-align: middle;
             }
diff --git a/res/css/structures/_QuickSettingsButton.pcss b/res/css/structures/_QuickSettingsButton.pcss
index f4b881f955..7fe7c5f35c 100644
--- a/res/css/structures/_QuickSettingsButton.pcss
+++ b/res/css/structures/_QuickSettingsButton.pcss
@@ -7,39 +7,54 @@ Please see LICENSE files in the repository root for full details.
 */
 
 .mx_QuickSettingsButton {
-    flex: 0 0 auto;
     border-radius: 8px;
-    position: relative;
-    margin: 12px auto;
-    color: $secondary-content;
-    min-width: 32px;
-    min-height: 32px;
-    line-height: 32px;
+    margin: 12px auto 12px;
 
-    &.expanded {
-        margin-left: 20px;
-        padding-left: 44px; /* align with toggle collapse button text */
-        padding-right: 8px;
-    }
-
-    &::before {
-        content: "";
-        position: absolute;
-        width: 32px;
-        height: 32px;
-        left: 0;
-        mask-image: url("@vector-im/compound-design-tokens/icons/settings-solid.svg");
-        mask-repeat: no-repeat;
-        mask-position: center;
-        mask-size: 24px;
-        background: $secondary-content;
+    svg {
+        fill: $secondary-content;
     }
 
     &:not(.expanded):hover {
-        background-color: $quaternary-content;
+        /**
+         * override compound default background color when hovered
+         * should disappear when the space panel will be migrated to compound
+         */
+        background-color: $quaternary-content !important;
+        color: $primary-content;
 
-        &::before {
-            background-color: $primary-content;
+        svg {
+            fill: $primary-content;
+        }
+    }
+
+    &.expanded {
+        /**
+         * override compound default background color when hovered
+         * should disappear when the space panel will be migrated to compound
+         */
+        background-color: transparent !important;
+
+        /* align with settings icon */
+        margin-left: 21px;
+
+        /**
+         * modify internal css of the compound component
+         * dirty but we need to add the label into the indicator icon button
+         **/
+        & > div {
+            display: flex;
+            align-items: center;
+        }
+
+        svg {
+            /* align with settings label */
+            margin-right: 14px;
+            /* required to set the icon width when into a flex container */
+            min-width: 24px;
+        }
+
+        & .mx_QuickSettingsButton_label {
+            color: $secondary-content;
         }
     }
 }
diff --git a/res/css/structures/_RoomSearch.pcss b/res/css/structures/_RoomSearch.pcss
index 8c82f73ea4..beb60e7ef9 100644
--- a/res/css/structures/_RoomSearch.pcss
+++ b/res/css/structures/_RoomSearch.pcss
@@ -26,10 +26,7 @@ Please see LICENSE files in the repository root for full details.
     .mx_RoomSearch_icon {
         width: 20px;
         height: 20px;
-        mask-image: url("@vector-im/compound-design-tokens/icons/search.svg");
-        mask-repeat: no-repeat;
-        mask-size: contain;
-        background-color: $secondary-content;
+        color: $secondary-content;
         margin-left: var(--cpd-space-2x);
         flex-shrink: 0;
     }
@@ -90,7 +87,7 @@ Please see LICENSE files in the repository root for full details.
         }
 
         .mx_RoomSearch_icon {
-            background-color: $background;
+            color: $background;
         }
     }
 }
diff --git a/res/css/structures/_SpaceHierarchy.pcss b/res/css/structures/_SpaceHierarchy.pcss
index 88c40b6fab..50f13e4d6f 100644
--- a/res/css/structures/_SpaceHierarchy.pcss
+++ b/res/css/structures/_SpaceHierarchy.pcss
@@ -109,22 +109,14 @@ Please see LICENSE files in the repository root for full details.
         border-radius: 4px;
         background-color: $background;
 
-        &::before {
-            content: "";
-            position: absolute;
-            top: 0;
-            left: 0;
-            height: 16px;
-            width: 16px;
-            mask-repeat: no-repeat;
-            mask-position: center;
-            background-color: $tertiary-content;
-            mask-size: 16px;
+        svg {
+            width: inherit;
+            height: inherit;
+            color: $tertiary-content;
             transform: rotate(270deg);
-            mask-image: url("@vector-im/compound-design-tokens/icons/chevron-down.svg");
         }
 
-        &.mx_SpaceHierarchy_subspace_toggle_shown::before {
+        &.mx_SpaceHierarchy_subspace_toggle_shown svg {
             transform: rotate(0deg);
         }
     }
@@ -196,22 +188,14 @@ Please see LICENSE files in the repository root for full details.
                         }
 
                         .mx_SpaceHierarchy_roomTile_joined {
-                            display: inline;
-                            position: relative;
-                            padding-left: 16px;
+                            display: inline-flex;
+                            align-items: center;
+                            vertical-align: middle;
 
-                            &::before {
-                                content: "";
+                            svg {
                                 width: 20px;
                                 height: 20px;
-                                top: -2px;
-                                left: -4px;
-                                position: absolute;
-                                mask-position: center;
-                                mask-size: contain;
-                                mask-repeat: no-repeat;
-                                background-color: $accent;
-                                mask-image: url("@vector-im/compound-design-tokens/icons/check.svg");
+                                color: $accent;
                             }
                         }
                     }
diff --git a/res/css/views/auth/_AuthBody.pcss b/res/css/views/auth/_AuthBody.pcss
index 062885f003..ad47ca8dc3 100644
--- a/res/css/views/auth/_AuthBody.pcss
+++ b/res/css/views/auth/_AuthBody.pcss
@@ -119,7 +119,7 @@ Please see LICENSE files in the repository root for full details.
     }
 
     .mx_Dropdown_arrow {
-        background: $authpage-primary-color;
+        color: $authpage-primary-color;
     }
 
     .mx_Dropdown_menu {
diff --git a/res/css/views/auth/_LanguageSelector.pcss b/res/css/views/auth/_LanguageSelector.pcss
index d5002d00b2..e620cd8ab5 100644
--- a/res/css/views/auth/_LanguageSelector.pcss
+++ b/res/css/views/auth/_LanguageSelector.pcss
@@ -17,5 +17,5 @@ Please see LICENSE files in the repository root for full details.
 }
 
 .mx_AuthBody_language .mx_Dropdown_arrow {
-    background: $authpage-lang-color;
+    color: $authpage-lang-color;
 }
diff --git a/res/css/views/directory/_NetworkDropdown.pcss b/res/css/views/directory/_NetworkDropdown.pcss
index 47180e3c2f..dc2a12ab41 100644
--- a/res/css/views/directory/_NetworkDropdown.pcss
+++ b/res/css/views/directory/_NetworkDropdown.pcss
@@ -39,12 +39,11 @@ Please see LICENSE files in the repository root for full details.
     .mx_GenericDropdownMenu_divider {
         margin-top: $spacing-4;
         margin-bottom: $spacing-4;
-    }
-}
 
-.mx_NetworkDropdown_addServer {
-    font-weight: normal;
-    font-size: $font-15px;
+        & + .mx_GenericDropdownMenu_Option .mx_GenericDropdownMenu_Option--label {
+            font-size: $font-15px;
+        }
+    }
 }
 
 .mx_NetworkDropdown_removeServer {
diff --git a/res/css/views/elements/_Dropdown.pcss b/res/css/views/elements/_Dropdown.pcss
index 355d79d569..158aa79275 100644
--- a/res/css/views/elements/_Dropdown.pcss
+++ b/res/css/views/elements/_Dropdown.pcss
@@ -38,15 +38,11 @@ Please see LICENSE files in the repository root for full details.
     filter: none;
 }
 
-.mx_Dropdown_arrow {
-    width: 16px;
-    height: 16px;
-    margin-right: 4px;
-    mask: url("@vector-im/compound-design-tokens/icons/chevron-down.svg");
-    mask-repeat: no-repeat;
-    mask-position: center;
-    mask-size: 18px;
-    background: $primary-content;
+svg.mx_Dropdown_arrow {
+    width: 18px;
+    height: 18px;
+    margin-right: 3px;
+    color: $primary-content;
 }
 
 .mx_Dropdown_option {
diff --git a/res/css/views/rooms/_JumpToBottomButton.pcss b/res/css/views/rooms/_JumpToBottomButton.pcss
index 912dda0f67..fbcfcf4b9f 100644
--- a/res/css/views/rooms/_JumpToBottomButton.pcss
+++ b/res/css/views/rooms/_JumpToBottomButton.pcss
@@ -42,21 +42,17 @@ Please see LICENSE files in the repository root for full details.
     position: relative;
     display: block;
     height: 38px;
-    border-radius: 19px;
+    border-radius: 50%;
     box-sizing: border-box;
     background: $background;
     border: 1.3px solid var(--cpd-color-icon-tertiary);
     cursor: pointer;
-}
 
-.mx_JumpToBottomButton_scrollDown::before {
-    content: "";
-    position: absolute;
-    inset: 0;
-    mask-image: url("@vector-im/compound-design-tokens/icons/chevron-up.svg");
-    mask-repeat: no-repeat;
-    mask-size: 24px;
-    mask-position: center 6px;
-    transform: rotate(180deg);
-    background: var(--cpd-color-icon-tertiary);
+    svg {
+        height: inherit;
+        width: inherit;
+        box-sizing: border-box;
+        padding: 7px 8px 7px 6px;
+        color: var(--cpd-color-icon-tertiary);
+    }
 }
diff --git a/res/css/views/rooms/_MessageComposerFormatBar.pcss b/res/css/views/rooms/_MessageComposerFormatBar.pcss
index 233fda1aff..41a5adad5e 100644
--- a/res/css/views/rooms/_MessageComposerFormatBar.pcss
+++ b/res/css/views/rooms/_MessageComposerFormatBar.pcss
@@ -38,54 +38,26 @@ Please see LICENSE files in the repository root for full details.
         vertical-align: middle;
         background: none;
         border: none;
+        padding: 0;
+
+        svg {
+            width: inherit;
+            height: inherit;
+            box-sizing: border-box;
+            padding: var(--cpd-space-1x);
+            color: var(--cpd-color-icon-secondary);
+        }
 
         &:hover {
             background: var(--cpd-color-bg-subtle-secondary);
             border-radius: 6px;
             z-index: 1;
+
+            svg {
+                color: var(--cpd-color-icon-primary);
+            }
         }
     }
-
-    .mx_MessageComposerFormatBar_button::after {
-        content: "";
-        position: absolute;
-        top: 0;
-        left: 0;
-        height: 100%;
-        width: 100%;
-        mask-repeat: no-repeat;
-        mask-position: center;
-        mask-size: 20px;
-        background-color: var(--cpd-color-icon-secondary);
-    }
-
-    .mx_MessageComposerFormatBar_button:hover::after {
-        background-color: var(--cpd-color-icon-primary);
-    }
-
-    .mx_MessageComposerFormatBar_buttonIconBold::after {
-        mask-image: url("@vector-im/compound-design-tokens/icons/bold.svg");
-    }
-
-    .mx_MessageComposerFormatBar_buttonIconItalic::after {
-        mask-image: url("@vector-im/compound-design-tokens/icons/italic.svg");
-    }
-
-    .mx_MessageComposerFormatBar_buttonIconStrikethrough::after {
-        mask-image: url("@vector-im/compound-design-tokens/icons/strikethrough.svg");
-    }
-
-    .mx_MessageComposerFormatBar_buttonIconQuote::after {
-        mask-image: url("@vector-im/compound-design-tokens/icons/quote.svg");
-    }
-
-    .mx_MessageComposerFormatBar_buttonIconCode::after {
-        mask-image: url("@vector-im/compound-design-tokens/icons/inline-code.svg");
-    }
-
-    .mx_MessageComposerFormatBar_buttonIconInsertLink::after {
-        mask-image: url("@vector-im/compound-design-tokens/icons/link.svg");
-    }
 }
 
 .mx_MessageComposerFormatBar_buttonTooltip {
diff --git a/res/css/views/settings/tabs/user/_SecurityUserSettingsTab.pcss b/res/css/views/settings/tabs/user/_SecurityUserSettingsTab.pcss
index 82f839042b..d3a5f6178f 100644
--- a/res/css/views/settings/tabs/user/_SecurityUserSettingsTab.pcss
+++ b/res/css/views/settings/tabs/user/_SecurityUserSettingsTab.pcss
@@ -27,20 +27,11 @@ Please see LICENSE files in the repository root for full details.
 
 .mx_SecurityUserSettingsTab_warning {
     color: $alert;
-    position: relative;
-    padding-left: 40px;
 
-    &::before {
-        mask-repeat: no-repeat;
-        mask-position: 0 center;
-        mask-size: $font-24px;
-        position: absolute;
-        width: $font-24px;
-        height: $font-24px;
-        content: "";
-        top: 0;
-        left: 0;
-        background-color: $alert;
-        mask-image: url("@vector-im/compound-design-tokens/icons/warning.svg");
+    svg {
+        width: 24px;
+        height: 24px;
+        margin-right: var(--cpd-space-4x);
+        color: $alert;
     }
 }
diff --git a/src/components/structures/GenericDropdownMenu.tsx b/src/components/structures/GenericDropdownMenu.tsx
index 78cd3d3ad4..f76e43c108 100644
--- a/src/components/structures/GenericDropdownMenu.tsx
+++ b/src/components/structures/GenericDropdownMenu.tsx
@@ -8,6 +8,7 @@ Please see LICENSE files in the repository root for full details.
 
 import classNames from "classnames";
 import React, { type JSX, type FunctionComponent, type Key, type PropsWithChildren, type ReactNode } from "react";
+import { ChevronDownIcon, CheckIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 
 import { MenuItemRadio } from "../../accessibility/context_menu/MenuItemRadio";
 import { type ButtonEvent } from "../views/elements/AccessibleButton";
@@ -42,9 +43,10 @@ export function GenericDropdownMenuOption<T extends Key>({
             className="mx_GenericDropdownMenu_Option mx_GenericDropdownMenu_Option--item"
             onClick={onClick}
         >
+            {isSelected && <CheckIcon className="mx_GenericDropdownMenu_Option--checkIcon" />}
             <div className="mx_GenericDropdownMenu_Option--label">
                 <span>{label}</span>
-                <span>{description}</span>
+                {description && <span>{description}</span>}
             </div>
             {adornment}
         </MenuItemRadio>
@@ -202,6 +204,7 @@ export function GenericDropdownMenu<T>({
                 }}
             >
                 {selectedLabel(selected)}
+                <ChevronDownIcon />
             </ContextMenuButton>
             {contextMenu}
         </>
diff --git a/src/components/structures/RoomSearch.tsx b/src/components/structures/RoomSearch.tsx
index 2130f4fa21..4c8329b6dd 100644
--- a/src/components/structures/RoomSearch.tsx
+++ b/src/components/structures/RoomSearch.tsx
@@ -8,6 +8,7 @@ Please see LICENSE files in the repository root for full details.
 
 import classNames from "classnames";
 import React from "react";
+import { SearchIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 
 import { ALTERNATE_KEY_NAME } from "../../accessibility/KeyboardShortcuts";
 import defaultDispatcher from "../../dispatcher/dispatcher";
@@ -34,8 +35,6 @@ export default class RoomSearch extends React.PureComponent<IProps> {
             "mx_RoomSearch_spotlightTrigger",
         );
 
-        const icon = <div className="mx_RoomSearch_icon" />;
-
         const shortcutPrompt = (
             <kbd className="mx_RoomSearch_shortcutPrompt">
                 {IS_MAC ? "⌘ K" : _t(ALTERNATE_KEY_NAME[Key.CONTROL]) + " K"}
@@ -44,7 +43,7 @@ export default class RoomSearch extends React.PureComponent<IProps> {
 
         return (
             <AccessibleButton onClick={this.openSpotlight} className={classes} aria-label={_t("action|search")}>
-                {icon}
+                <SearchIcon className="mx_RoomSearch_icon" />
                 {!this.props.isMinimized && (
                     <div className="mx_RoomSearch_spotlightTriggerText">{_t("action|search")}</div>
                 )}
diff --git a/src/components/structures/SpaceHierarchy.tsx b/src/components/structures/SpaceHierarchy.tsx
index 9a6fd85bdb..ef4f46df96 100644
--- a/src/components/structures/SpaceHierarchy.tsx
+++ b/src/components/structures/SpaceHierarchy.tsx
@@ -40,6 +40,7 @@ import classNames from "classnames";
 import { sortBy, uniqBy } from "lodash";
 import { logger } from "matrix-js-sdk/src/logger";
 import { KnownMembership, type SpaceChildEventContent } from "matrix-js-sdk/src/types";
+import { ChevronDownIcon, CheckIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 
 import defaultDispatcher from "../../dispatcher/dispatcher";
 import { _t } from "../../languageHandler";
@@ -251,7 +252,12 @@ const Tile: React.FC<ITileProps> = ({
 
     let joinedSection: ReactElement | undefined;
     if (joinedRoom) {
-        joinedSection = <div className="mx_SpaceHierarchy_roomTile_joined">{_t("common|joined")}</div>;
+        joinedSection = (
+            <div className="mx_SpaceHierarchy_roomTile_joined">
+                <CheckIcon />
+                {_t("common|joined")}
+            </div>
+        );
     }
 
     let suggestedSection: ReactElement | undefined;
@@ -294,7 +300,9 @@ const Tile: React.FC<ITileProps> = ({
                     ev.stopPropagation();
                     toggleShowChildren();
                 }}
-            />
+            >
+                <ChevronDownIcon />
+            </div>
         );
 
         if (showChildren) {
diff --git a/src/components/views/directory/NetworkDropdown.tsx b/src/components/views/directory/NetworkDropdown.tsx
index e46b89578a..71debfff9c 100644
--- a/src/components/views/directory/NetworkDropdown.tsx
+++ b/src/components/views/directory/NetworkDropdown.tsx
@@ -10,7 +10,6 @@ import { without } from "lodash";
 import React, { useCallback, useEffect, useState } from "react";
 import { MatrixError } from "matrix-js-sdk/src/matrix";
 
-import { MenuItemRadio } from "../../../accessibility/context_menu/MenuItemRadio";
 import { _t } from "../../../languageHandler";
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import Modal from "../../../Modal";
@@ -22,6 +21,7 @@ import {
     type AdditionalOptionsProps,
     GenericDropdownMenu,
     type GenericDropdownMenuItem,
+    GenericDropdownMenuOption,
 } from "../../structures/GenericDropdownMenu";
 import TextInputDialog from "../dialogs/TextInputDialog";
 import AccessibleButton from "../elements/AccessibleButton";
@@ -200,9 +200,8 @@ export const NetworkDropdown: React.FC<IProps> = ({ protocols, config, setConfig
         ({ closeMenu }: AdditionalOptionsProps) => (
             <>
                 <span className="mx_GenericDropdownMenu_divider" />
-                <MenuItemRadio
-                    active={false}
-                    className="mx_GenericDropdownMenu_Option mx_GenericDropdownMenu_Option--item"
+                <GenericDropdownMenuOption
+                    key="add-server"
                     onClick={async (): Promise<void> => {
                         closeMenu();
                         const { finished } = Modal.createDialog(
@@ -229,13 +228,9 @@ export const NetworkDropdown: React.FC<IProps> = ({ protocols, config, setConfig
                             });
                         }
                     }}
-                >
-                    <div className="mx_GenericDropdownMenu_Option--label">
-                        <span className="mx_NetworkDropdown_addServer">
-                            {_t("spotlight|public_rooms|network_dropdown_add_server_option")}
-                        </span>
-                    </div>
-                </MenuItemRadio>
+                    isSelected={false}
+                    label={_t("spotlight|public_rooms|network_dropdown_add_server_option")}
+                />
             </>
         ),
         [allServers, setConfig, setUserDefinedServers, userDefinedServers],
diff --git a/src/components/views/elements/Dropdown.tsx b/src/components/views/elements/Dropdown.tsx
index 1ab563d43a..cc298cd2a6 100644
--- a/src/components/views/elements/Dropdown.tsx
+++ b/src/components/views/elements/Dropdown.tsx
@@ -17,6 +17,7 @@ import React, {
     type Ref,
 } from "react";
 import classnames from "classnames";
+import { ChevronDownIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 
 import AccessibleButton, { type ButtonEvent } from "./AccessibleButton";
 import { _t } from "../../../languageHandler";
@@ -411,7 +412,7 @@ export default class Dropdown extends React.Component<DropdownProps, IState> {
                     onKeyDown={this.onKeyDown}
                 >
                     {currentValue}
-                    <span className="mx_Dropdown_arrow" />
+                    <ChevronDownIcon className="mx_Dropdown_arrow" />
                     {menu}
                 </AccessibleButton>
             </div>
diff --git a/src/components/views/rooms/JumpToBottomButton.tsx b/src/components/views/rooms/JumpToBottomButton.tsx
index b2a69cb5fe..7ea7a7c692 100644
--- a/src/components/views/rooms/JumpToBottomButton.tsx
+++ b/src/components/views/rooms/JumpToBottomButton.tsx
@@ -7,6 +7,7 @@ Please see LICENSE files in the repository root for full details.
 
 import React from "react";
 import classNames from "classnames";
+import { ChevronDownIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 
 import { _t } from "../../../languageHandler";
 import AccessibleButton, { type ButtonEvent } from "../elements/AccessibleButton";
@@ -32,7 +33,9 @@ const JumpToBottomButton: React.FC<IProps> = (props) => {
                 className="mx_JumpToBottomButton_scrollDown"
                 title={_t("room|jump_to_bottom_button")}
                 onClick={props.onScrollToBottomClick}
-            />
+            >
+                <ChevronDownIcon />
+            </AccessibleButton>
             {badge}
         </div>
     );
diff --git a/src/components/views/rooms/MessageComposerFormatBar.tsx b/src/components/views/rooms/MessageComposerFormatBar.tsx
index 855c7c1d40..0957aa9721 100644
--- a/src/components/views/rooms/MessageComposerFormatBar.tsx
+++ b/src/components/views/rooms/MessageComposerFormatBar.tsx
@@ -6,8 +6,16 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { createRef } from "react";
+import React, { createRef, type JSX } from "react";
 import classNames from "classnames";
+import {
+    BoldIcon,
+    ItalicIcon,
+    StrikethroughIcon,
+    InlineCodeIcon,
+    QuoteIcon,
+    LinkIcon,
+} from "@vector-im/compound-design-tokens/assets/web/icons";
 
 import { _t } from "../../../languageHandler";
 import { RovingAccessibleButton } from "../../../accessibility/RovingTabIndex";
@@ -54,41 +62,41 @@ export default class MessageComposerFormatBar extends React.PureComponent<IProps
                 <FormatButton
                     label={_t("composer|format_bold")}
                     onClick={() => this.props.onAction(Formatting.Bold)}
-                    icon="Bold"
+                    icon={<BoldIcon />}
                     shortcut={this.props.shortcuts.bold}
                     visible={this.state.visible}
                 />
                 <FormatButton
                     label={_t("composer|format_italics")}
                     onClick={() => this.props.onAction(Formatting.Italics)}
-                    icon="Italic"
+                    icon={<ItalicIcon />}
                     shortcut={this.props.shortcuts.italics}
                     visible={this.state.visible}
                 />
                 <FormatButton
                     label={_t("composer|format_strikethrough")}
                     onClick={() => this.props.onAction(Formatting.Strikethrough)}
-                    icon="Strikethrough"
+                    icon={<StrikethroughIcon />}
                     visible={this.state.visible}
                 />
                 <FormatButton
                     label={_t("composer|format_code_block")}
                     onClick={() => this.props.onAction(Formatting.Code)}
-                    icon="Code"
+                    icon={<InlineCodeIcon />}
                     shortcut={this.props.shortcuts.code}
                     visible={this.state.visible}
                 />
                 <FormatButton
                     label={_t("action|quote")}
                     onClick={() => this.props.onAction(Formatting.Quote)}
-                    icon="Quote"
+                    icon={<QuoteIcon />}
                     shortcut={this.props.shortcuts.quote}
                     visible={this.state.visible}
                 />
                 <FormatButton
                     label={_t("composer|format_insert_link")}
                     onClick={() => this.props.onAction(Formatting.InsertLink)}
-                    icon="InsertLink"
+                    icon={<LinkIcon />}
                     shortcut={this.props.shortcuts.insert_link}
                     visible={this.state.visible}
                 />
@@ -116,7 +124,7 @@ export default class MessageComposerFormatBar extends React.PureComponent<IProps
 
 interface IFormatButtonProps {
     label: string;
-    icon: string;
+    icon: JSX.Element;
     shortcut?: string;
     visible?: boolean;
     onClick(): void;
@@ -124,8 +132,6 @@ interface IFormatButtonProps {
 
 class FormatButton extends React.PureComponent<IFormatButtonProps> {
     public render(): React.ReactNode {
-        const className = `mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIcon${this.props.icon}`;
-
         // element="button" and type="button" are necessary for the buttons to work on WebKit,
         // otherwise the text is deselected before onClick can ever be called
         return (
@@ -136,8 +142,10 @@ class FormatButton extends React.PureComponent<IFormatButtonProps> {
                 aria-label={this.props.label}
                 title={this.props.label}
                 caption={this.props.shortcut}
-                className={className}
-            />
+                className="mx_MessageComposerFormatBar_button"
+            >
+                {this.props.icon}
+            </RovingAccessibleButton>
         );
     }
 }
diff --git a/src/components/views/settings/tabs/user/SecurityUserSettingsTab.tsx b/src/components/views/settings/tabs/user/SecurityUserSettingsTab.tsx
index 1c85aada34..c0e63f6f04 100644
--- a/src/components/views/settings/tabs/user/SecurityUserSettingsTab.tsx
+++ b/src/components/views/settings/tabs/user/SecurityUserSettingsTab.tsx
@@ -11,6 +11,7 @@ import { sleep } from "matrix-js-sdk/src/utils";
 import { type Room, RoomEvent, type IServerVersions } from "matrix-js-sdk/src/matrix";
 import { KnownMembership, type Membership } from "matrix-js-sdk/src/types";
 import { logger } from "matrix-js-sdk/src/logger";
+import { WarningIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 
 import { _t } from "../../../../../languageHandler";
 import { MatrixClientPeg } from "../../../../../MatrixClientPeg";
@@ -305,6 +306,7 @@ export default class SecurityUserSettingsTab extends React.Component<IProps, ISt
         if (!privateShouldBeEncrypted(MatrixClientPeg.safeGet())) {
             warning = (
                 <div className="mx_SecurityUserSettingsTab_warning">
+                    <WarningIcon />
                     {_t("settings|security|e2ee_default_disabled_warning")}
                 </div>
             );
diff --git a/src/components/views/spaces/QuickSettingsButton.tsx b/src/components/views/spaces/QuickSettingsButton.tsx
index 1bde2afef9..95171bb957 100644
--- a/src/components/views/spaces/QuickSettingsButton.tsx
+++ b/src/components/views/spaces/QuickSettingsButton.tsx
@@ -13,7 +13,9 @@ import {
     UserProfileSolidIcon,
     FavouriteSolidIcon,
     PinSolidIcon,
+    SettingsSolidIcon,
 } from "@vector-im/compound-design-tokens/assets/web/icons";
+import { IconButton, Text, Tooltip } from "@vector-im/compound-web";
 
 import { _t } from "../../../languageHandler";
 import ContextMenu, { alwaysAboveRightOf, ChevronFace, useContextMenu } from "../../structures/ContextMenu";
@@ -34,7 +36,7 @@ import { ReleaseAnnouncement } from "../../structures/ReleaseAnnouncement";
 const QuickSettingsButton: React.FC<{
     isPanelCollapsed: boolean;
 }> = ({ isPanelCollapsed = false }) => {
-    const [menuDisplayed, handle, openMenu, closeMenu] = useContextMenu<HTMLDivElement>();
+    const [menuDisplayed, handle, openMenu, closeMenu] = useContextMenu<HTMLButtonElement>();
 
     const { [MetaSpace.Favourites]: favouritesEnabled, [MetaSpace.People]: peopleEnabled } =
         useSettingValue("Spaces.enabledMetaSpaces");
@@ -136,6 +138,35 @@ const QuickSettingsButton: React.FC<{
         );
     }
 
+    let button = (
+        <IconButton
+            aria-label={_t("quick_settings|title")}
+            className={classNames("mx_QuickSettingsButton", { expanded: !isPanelCollapsed })}
+            onClick={openMenu}
+            title={isPanelCollapsed ? _t("quick_settings|title") : undefined}
+            ref={handle}
+            aria-expanded={!isPanelCollapsed}
+        >
+            <>
+                <SettingsSolidIcon />
+                {/* This is dirty, but we need to add the label to the indicator icon */}
+                {!isPanelCollapsed && (
+                    <Text className="mx_QuickSettingsButton_label" as="span" size="md" title={_t("common|settings")}>
+                        {_t("common|settings")}
+                    </Text>
+                )}
+            </>
+        </IconButton>
+    );
+
+    if (isPanelCollapsed) {
+        button = (
+            <Tooltip label={_t("quick_settings|title")} placement="right">
+                {button}
+            </Tooltip>
+        );
+    }
+
     return (
         <>
             <ReleaseAnnouncement
@@ -145,16 +176,7 @@ const QuickSettingsButton: React.FC<{
                 closeLabel={_t("room_list|release_announcement|done")}
                 placement="right"
             >
-                <AccessibleButton
-                    className={classNames("mx_QuickSettingsButton", { expanded: !isPanelCollapsed })}
-                    onClick={openMenu}
-                    aria-label={_t("quick_settings|title")}
-                    title={isPanelCollapsed ? _t("quick_settings|title") : undefined}
-                    ref={handle}
-                    aria-expanded={!isPanelCollapsed}
-                >
-                    {!isPanelCollapsed ? _t("common|settings") : null}
-                </AccessibleButton>
+                {button}
             </ReleaseAnnouncement>
 
             {contextMenu}
diff --git a/test/unit-tests/components/structures/GenericDropdownMenu-test.tsx b/test/unit-tests/components/structures/GenericDropdownMenu-test.tsx
new file mode 100644
index 0000000000..e2ea1c5a75
--- /dev/null
+++ b/test/unit-tests/components/structures/GenericDropdownMenu-test.tsx
@@ -0,0 +1,48 @@
+/*
+Copyright 2025 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import React from "react";
+import { render, screen, fireEvent } from "jest-matrix-react";
+
+import {
+    GenericDropdownMenu,
+    type GenericDropdownMenuItem,
+} from "../../../../src/components/structures/GenericDropdownMenu.tsx";
+
+describe("GenericDropdownMenu", () => {
+    it("should render check icon for checked option", async () => {
+        const options: GenericDropdownMenuItem<string>[] = [
+            {
+                key: "selected",
+                label: "Selected",
+                description: "This item is selected",
+            },
+            {
+                key: "not-selected",
+                label: "Not selected",
+            },
+        ];
+
+        render(
+            <GenericDropdownMenu
+                value="selected"
+                options={options}
+                onChange={jest.fn()}
+                selectedLabel={() => "Selected"}
+            />,
+        );
+
+        const trigger = screen.getByRole("button");
+        fireEvent.click(trigger);
+
+        const dropdown = await screen.findByRole("menu");
+        expect(
+            dropdown.querySelector('[aria-checked="true"]')?.querySelector(".mx_GenericDropdownMenu_Option--checkIcon"),
+        ).toBeTruthy();
+        expect(dropdown).toMatchSnapshot();
+    });
+});
diff --git a/test/unit-tests/components/structures/__snapshots__/GenericDropdownMenu-test.tsx.snap b/test/unit-tests/components/structures/__snapshots__/GenericDropdownMenu-test.tsx.snap
new file mode 100644
index 0000000000..e7e2c8618a
--- /dev/null
+++ b/test/unit-tests/components/structures/__snapshots__/GenericDropdownMenu-test.tsx.snap
@@ -0,0 +1,52 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`GenericDropdownMenu should render check icon for checked option 1`] = `
+<div
+  class="mx_ContextualMenu mx_ContextualMenu_right"
+  role="menu"
+>
+  <div
+    aria-checked="true"
+    class="mx_AccessibleButton mx_GenericDropdownMenu_Option mx_GenericDropdownMenu_Option--item"
+    role="menuitemradio"
+    tabindex="0"
+  >
+    <svg
+      class="mx_GenericDropdownMenu_Option--checkIcon"
+      fill="currentColor"
+      height="1em"
+      viewBox="0 0 24 24"
+      width="1em"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M9.55 17.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213L4.55 13q-.274-.274-.262-.713.012-.437.287-.712a.95.95 0 0 1 .7-.275q.425 0 .7.275L9.55 15.15l8.475-8.475q.274-.275.713-.275.437 0 .712.275.275.274.275.713 0 .437-.275.712l-9.2 9.2q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
+      />
+    </svg>
+    <div
+      class="mx_GenericDropdownMenu_Option--label"
+    >
+      <span>
+        Selected
+      </span>
+      <span>
+        This item is selected
+      </span>
+    </div>
+  </div>
+  <div
+    aria-checked="false"
+    class="mx_AccessibleButton mx_GenericDropdownMenu_Option mx_GenericDropdownMenu_Option--item"
+    role="menuitemradio"
+    tabindex="-1"
+  >
+    <div
+      class="mx_GenericDropdownMenu_Option--label"
+    >
+      <span>
+        Not selected
+      </span>
+    </div>
+  </div>
+</div>
+`;
diff --git a/test/unit-tests/components/structures/__snapshots__/MatrixChat-test.tsx.snap b/test/unit-tests/components/structures/__snapshots__/MatrixChat-test.tsx.snap
index 5aa149d284..d5ed4f79ce 100644
--- a/test/unit-tests/components/structures/__snapshots__/MatrixChat-test.tsx.snap
+++ b/test/unit-tests/components/structures/__snapshots__/MatrixChat-test.tsx.snap
@@ -162,9 +162,18 @@ exports[`<MatrixChat /> Multi-tab lockout waits for other tab to stop during sta
                   English
                 </div>
               </div>
-              <span
+              <svg
                 class="mx_Dropdown_arrow"
-              />
+                fill="currentColor"
+                height="1em"
+                viewBox="0 0 24 24"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M12 14.95q-.2 0-.375-.062a.9.9 0 0 1-.325-.213l-4.6-4.6a.95.95 0 0 1-.275-.7q0-.425.275-.7a.95.95 0 0 1 .7-.275q.425 0 .7.275l3.9 3.9 3.9-3.9a.95.95 0 0 1 .7-.275q.425 0 .7.275a.95.95 0 0 1 .275.7.95.95 0 0 1-.275.7l-4.6 4.6q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
+                />
+              </svg>
             </div>
           </div>
         </div>
@@ -278,9 +287,18 @@ exports[`<MatrixChat /> with a soft-logged-out session should show the soft-logo
                   English
                 </div>
               </div>
-              <span
+              <svg
                 class="mx_Dropdown_arrow"
-              />
+                fill="currentColor"
+                height="1em"
+                viewBox="0 0 24 24"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M12 14.95q-.2 0-.375-.062a.9.9 0 0 1-.325-.213l-4.6-4.6a.95.95 0 0 1-.275-.7q0-.425.275-.7a.95.95 0 0 1 .7-.275q.425 0 .7.275l3.9 3.9 3.9-3.9a.95.95 0 0 1 .7-.275q.425 0 .7.275a.95.95 0 0 1 .275.7.95.95 0 0 1-.275.7l-4.6 4.6q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
+                />
+              </svg>
             </div>
           </div>
         </div>
diff --git a/test/unit-tests/components/structures/__snapshots__/RoomView-test.tsx.snap b/test/unit-tests/components/structures/__snapshots__/RoomView-test.tsx.snap
index ac25954916..b1bafda8ed 100644
--- a/test/unit-tests/components/structures/__snapshots__/RoomView-test.tsx.snap
+++ b/test/unit-tests/components/structures/__snapshots__/RoomView-test.tsx.snap
@@ -390,46 +390,118 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
                 >
                   <button
                     aria-label="Bold"
-                    class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconBold"
+                    class="mx_AccessibleButton mx_MessageComposerFormatBar_button"
                     role="button"
                     tabindex="0"
                     type="button"
-                  />
+                  >
+                    <svg
+                      fill="currentColor"
+                      height="1em"
+                      viewBox="0 0 24 24"
+                      width="1em"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M8.8 19q-.824 0-1.413-.587A1.93 1.93 0 0 1 6.8 17V7q0-.824.587-1.412A1.93 1.93 0 0 1 8.8 5h3.525q1.624 0 3 1T16.7 8.775q0 1.275-.575 1.963-.575.687-1.075.987.626.275 1.387 1.025.763.75.763 2.25 0 2.224-1.625 3.113-1.625.887-3.05.887zm1.025-2.8h2.6q1.2 0 1.462-.612.263-.614.263-.888 0-.275-.263-.887-.262-.613-1.537-.613H9.825zm0-5.7h2.325q.825 0 1.2-.425a1.4 1.4 0 0 0 .375-.95q0-.6-.425-.975t-1.1-.375H9.825z"
+                      />
+                    </svg>
+                  </button>
                   <button
                     aria-label="Italics"
-                    class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconItalic"
+                    class="mx_AccessibleButton mx_MessageComposerFormatBar_button"
                     role="button"
                     tabindex="-1"
                     type="button"
-                  />
+                  >
+                    <svg
+                      fill="currentColor"
+                      height="1em"
+                      viewBox="0 0 24 24"
+                      width="1em"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M6.25 19q-.525 0-.888-.363A1.2 1.2 0 0 1 5 17.75q0-.525.362-.887.363-.363.888-.363H9l3-9H9.25q-.525 0-.887-.362A1.2 1.2 0 0 1 8 6.25q0-.525.363-.888Q8.725 5 9.25 5h7.5q.525 0 .887.362.363.363.363.888t-.363.888a1.2 1.2 0 0 1-.887.362H14.5l-3 9h2.25q.525 0 .887.363.363.362.363.887t-.363.887a1.2 1.2 0 0 1-.887.363z"
+                      />
+                    </svg>
+                  </button>
                   <button
                     aria-label="Strikethrough"
-                    class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconStrikethrough"
+                    class="mx_AccessibleButton mx_MessageComposerFormatBar_button"
                     role="button"
                     tabindex="-1"
                     type="button"
-                  />
+                  >
+                    <svg
+                      fill="currentColor"
+                      height="1em"
+                      viewBox="0 0 24 24"
+                      width="1em"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M12.15 20q-1.9 0-3.375-1.125T6.65 15.8l2.2-.95q.35 1.2 1.213 1.975.861.775 2.137.775 1.05 0 1.9-.5t.85-1.6q0-.45-.175-.825A2.4 2.4 0 0 0 14.3 14h2.8a4.3 4.3 0 0 1 .25 1.5q0 2.15-1.538 3.325Q14.277 20 12.15 20M3 12a.97.97 0 0 1-.712-.287A.97.97 0 0 1 2 11q0-.424.288-.713A.97.97 0 0 1 3 10h18q.424 0 .712.287.288.288.288.713 0 .424-.288.713A.97.97 0 0 1 21 12zm9.05-8.15q1.65 0 2.887.812T16.85 7.15l-2.2.975a3 3 0 0 0-.838-1.3Q13.2 6.25 12.1 6.25q-1.025 0-1.7.462-.675.463-.75 1.288h-2.4q.05-1.725 1.363-2.938Q9.925 3.85 12.05 3.85"
+                      />
+                    </svg>
+                  </button>
                   <button
                     aria-label="Code block"
-                    class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconCode"
+                    class="mx_AccessibleButton mx_MessageComposerFormatBar_button"
                     role="button"
                     tabindex="-1"
                     type="button"
-                  />
+                  >
+                    <svg
+                      fill="currentColor"
+                      height="1em"
+                      viewBox="0 0 24 24"
+                      width="1em"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M14.958 5.62a1 1 0 0 0-1.916-.574l-4 13.333a1 1 0 0 0 1.916.575zM5.974 7.232a1 1 0 0 0-1.409.128l-3.333 4a1 1 0 0 0 0 1.28l3.333 4a1 1 0 1 0 1.537-1.28L3.302 12l2.8-3.36a1 1 0 0 0-.128-1.408m12.053 0a1 1 0 0 1 1.408.128l3.333 4a1 1 0 0 1 0 1.28l-3.333 4a1 1 0 1 1-1.537-1.28l2.8-3.36-2.8-3.36a1 1 0 0 1 .128-1.408"
+                      />
+                    </svg>
+                  </button>
                   <button
                     aria-label="Quote"
-                    class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconQuote"
+                    class="mx_AccessibleButton mx_MessageComposerFormatBar_button"
                     role="button"
                     tabindex="-1"
                     type="button"
-                  />
+                  >
+                    <svg
+                      fill="currentColor"
+                      height="1em"
+                      viewBox="0 0 24 24"
+                      width="1em"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M4.719 4.34c.094-.642-.366-1.236-1.028-1.328-.663-.092-1.276.354-1.371.996l-.808 5.478c-.094.642.366 1.237 1.028 1.328.663.092 1.276-.354 1.371-.996zm12.115 10.174c.095-.642-.366-1.237-1.028-1.328-.662-.092-1.276.354-1.37.996l-.809 5.478c-.094.642.366 1.236 1.028 1.328.663.092 1.277-.354 1.371-.996zM9.318 3.009c.665.077 1.138.662 1.058 1.306l-.022.175a221 221 0 0 1-.266 2.006c-.161 1.171-.368 2.579-.535 3.386-.13.636-.769 1.049-1.425.921s-1.082-.745-.95-1.381c.148-.72.345-2.052.509-3.237a191 191 0 0 0 .262-1.981l.021-.17c.08-.644.684-1.103 1.348-1.025m13.17 11.505c.094-.642-.366-1.237-1.028-1.328-.663-.092-1.276.354-1.371.996l-.808 5.478c-.094.642.366 1.236 1.028 1.328.663.092 1.276-.354 1.371-.996z"
+                      />
+                    </svg>
+                  </button>
                   <button
                     aria-label="Insert link"
-                    class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconInsertLink"
+                    class="mx_AccessibleButton mx_MessageComposerFormatBar_button"
                     role="button"
                     tabindex="-1"
                     type="button"
-                  />
+                  >
+                    <svg
+                      fill="currentColor"
+                      height="1em"
+                      viewBox="0 0 24 24"
+                      width="1em"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M12 19.071q-1.467 1.467-3.536 1.467-2.067 0-3.535-1.467t-1.467-3.535q0-2.07 1.467-3.536L7.05 9.879q.3-.3.707-.3t.707.3.301.707-.3.707l-2.122 2.121a2.9 2.9 0 0 0-.884 2.122q0 1.237.884 2.12.884.885 2.121.885t2.122-.884l2.121-2.121q.3-.3.707-.3t.707.3.3.707q0 .405-.3.707zm-1.414-4.243q-.3.3-.707.301a.97.97 0 0 1-.707-.3q-.3-.3-.301-.708 0-.405.3-.707l4.243-4.242q.3-.3.707-.3t.707.3.3.707-.3.707zm6.364-.707q-.3.3-.707.3a.97.97 0 0 1-.707-.3q-.3-.3-.301-.707 0-.405.3-.707l2.122-2.121q.884-.885.884-2.121 0-1.238-.884-2.122a2.9 2.9 0 0 0-2.121-.884q-1.237 0-2.122.884l-2.121 2.122q-.3.3-.707.3a.97.97 0 0 1-.707-.3q-.3-.3-.3-.708 0-.405.3-.707L12 4.93q1.467-1.467 3.536-1.467t3.535 1.467 1.467 3.536T19.071 12z"
+                      />
+                    </svg>
+                  </button>
                 </div>
                 <div
                   aria-autocomplete="list"
@@ -621,46 +693,118 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
                 >
                   <button
                     aria-label="Bold"
-                    class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconBold"
+                    class="mx_AccessibleButton mx_MessageComposerFormatBar_button"
                     role="button"
                     tabindex="0"
                     type="button"
-                  />
+                  >
+                    <svg
+                      fill="currentColor"
+                      height="1em"
+                      viewBox="0 0 24 24"
+                      width="1em"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M8.8 19q-.824 0-1.413-.587A1.93 1.93 0 0 1 6.8 17V7q0-.824.587-1.412A1.93 1.93 0 0 1 8.8 5h3.525q1.624 0 3 1T16.7 8.775q0 1.275-.575 1.963-.575.687-1.075.987.626.275 1.387 1.025.763.75.763 2.25 0 2.224-1.625 3.113-1.625.887-3.05.887zm1.025-2.8h2.6q1.2 0 1.462-.612.263-.614.263-.888 0-.275-.263-.887-.262-.613-1.537-.613H9.825zm0-5.7h2.325q.825 0 1.2-.425a1.4 1.4 0 0 0 .375-.95q0-.6-.425-.975t-1.1-.375H9.825z"
+                      />
+                    </svg>
+                  </button>
                   <button
                     aria-label="Italics"
-                    class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconItalic"
+                    class="mx_AccessibleButton mx_MessageComposerFormatBar_button"
                     role="button"
                     tabindex="-1"
                     type="button"
-                  />
+                  >
+                    <svg
+                      fill="currentColor"
+                      height="1em"
+                      viewBox="0 0 24 24"
+                      width="1em"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M6.25 19q-.525 0-.888-.363A1.2 1.2 0 0 1 5 17.75q0-.525.362-.887.363-.363.888-.363H9l3-9H9.25q-.525 0-.887-.362A1.2 1.2 0 0 1 8 6.25q0-.525.363-.888Q8.725 5 9.25 5h7.5q.525 0 .887.362.363.363.363.888t-.363.888a1.2 1.2 0 0 1-.887.362H14.5l-3 9h2.25q.525 0 .887.363.363.362.363.887t-.363.887a1.2 1.2 0 0 1-.887.363z"
+                      />
+                    </svg>
+                  </button>
                   <button
                     aria-label="Strikethrough"
-                    class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconStrikethrough"
+                    class="mx_AccessibleButton mx_MessageComposerFormatBar_button"
                     role="button"
                     tabindex="-1"
                     type="button"
-                  />
+                  >
+                    <svg
+                      fill="currentColor"
+                      height="1em"
+                      viewBox="0 0 24 24"
+                      width="1em"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M12.15 20q-1.9 0-3.375-1.125T6.65 15.8l2.2-.95q.35 1.2 1.213 1.975.861.775 2.137.775 1.05 0 1.9-.5t.85-1.6q0-.45-.175-.825A2.4 2.4 0 0 0 14.3 14h2.8a4.3 4.3 0 0 1 .25 1.5q0 2.15-1.538 3.325Q14.277 20 12.15 20M3 12a.97.97 0 0 1-.712-.287A.97.97 0 0 1 2 11q0-.424.288-.713A.97.97 0 0 1 3 10h18q.424 0 .712.287.288.288.288.713 0 .424-.288.713A.97.97 0 0 1 21 12zm9.05-8.15q1.65 0 2.887.812T16.85 7.15l-2.2.975a3 3 0 0 0-.838-1.3Q13.2 6.25 12.1 6.25q-1.025 0-1.7.462-.675.463-.75 1.288h-2.4q.05-1.725 1.363-2.938Q9.925 3.85 12.05 3.85"
+                      />
+                    </svg>
+                  </button>
                   <button
                     aria-label="Code block"
-                    class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconCode"
+                    class="mx_AccessibleButton mx_MessageComposerFormatBar_button"
                     role="button"
                     tabindex="-1"
                     type="button"
-                  />
+                  >
+                    <svg
+                      fill="currentColor"
+                      height="1em"
+                      viewBox="0 0 24 24"
+                      width="1em"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M14.958 5.62a1 1 0 0 0-1.916-.574l-4 13.333a1 1 0 0 0 1.916.575zM5.974 7.232a1 1 0 0 0-1.409.128l-3.333 4a1 1 0 0 0 0 1.28l3.333 4a1 1 0 1 0 1.537-1.28L3.302 12l2.8-3.36a1 1 0 0 0-.128-1.408m12.053 0a1 1 0 0 1 1.408.128l3.333 4a1 1 0 0 1 0 1.28l-3.333 4a1 1 0 1 1-1.537-1.28l2.8-3.36-2.8-3.36a1 1 0 0 1 .128-1.408"
+                      />
+                    </svg>
+                  </button>
                   <button
                     aria-label="Quote"
-                    class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconQuote"
+                    class="mx_AccessibleButton mx_MessageComposerFormatBar_button"
                     role="button"
                     tabindex="-1"
                     type="button"
-                  />
+                  >
+                    <svg
+                      fill="currentColor"
+                      height="1em"
+                      viewBox="0 0 24 24"
+                      width="1em"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M4.719 4.34c.094-.642-.366-1.236-1.028-1.328-.663-.092-1.276.354-1.371.996l-.808 5.478c-.094.642.366 1.237 1.028 1.328.663.092 1.276-.354 1.371-.996zm12.115 10.174c.095-.642-.366-1.237-1.028-1.328-.662-.092-1.276.354-1.37.996l-.809 5.478c-.094.642.366 1.236 1.028 1.328.663.092 1.277-.354 1.371-.996zM9.318 3.009c.665.077 1.138.662 1.058 1.306l-.022.175a221 221 0 0 1-.266 2.006c-.161 1.171-.368 2.579-.535 3.386-.13.636-.769 1.049-1.425.921s-1.082-.745-.95-1.381c.148-.72.345-2.052.509-3.237a191 191 0 0 0 .262-1.981l.021-.17c.08-.644.684-1.103 1.348-1.025m13.17 11.505c.094-.642-.366-1.237-1.028-1.328-.663-.092-1.276.354-1.371.996l-.808 5.478c-.094.642.366 1.236 1.028 1.328.663.092 1.276-.354 1.371-.996z"
+                      />
+                    </svg>
+                  </button>
                   <button
                     aria-label="Insert link"
-                    class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconInsertLink"
+                    class="mx_AccessibleButton mx_MessageComposerFormatBar_button"
                     role="button"
                     tabindex="-1"
                     type="button"
-                  />
+                  >
+                    <svg
+                      fill="currentColor"
+                      height="1em"
+                      viewBox="0 0 24 24"
+                      width="1em"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M12 19.071q-1.467 1.467-3.536 1.467-2.067 0-3.535-1.467t-1.467-3.535q0-2.07 1.467-3.536L7.05 9.879q.3-.3.707-.3t.707.3.301.707-.3.707l-2.122 2.121a2.9 2.9 0 0 0-.884 2.122q0 1.237.884 2.12.884.885 2.121.885t2.122-.884l2.121-2.121q.3-.3.707-.3t.707.3.3.707q0 .405-.3.707zm-1.414-4.243q-.3.3-.707.301a.97.97 0 0 1-.707-.3q-.3-.3-.301-.708 0-.405.3-.707l4.243-4.242q.3-.3.707-.3t.707.3.3.707-.3.707zm6.364-.707q-.3.3-.707.3a.97.97 0 0 1-.707-.3q-.3-.3-.301-.707 0-.405.3-.707l2.122-2.121q.884-.885.884-2.121 0-1.238-.884-2.122a2.9 2.9 0 0 0-2.121-.884q-1.237 0-2.122.884l-2.121 2.122q-.3.3-.707.3a.97.97 0 0 1-.707-.3q-.3-.3-.3-.708 0-.405.3-.707L12 4.93q1.467-1.467 3.536-1.467t3.535 1.467 1.467 3.536T19.071 12z"
+                      />
+                    </svg>
+                  </button>
                 </div>
                 <div
                   aria-autocomplete="list"
@@ -1117,46 +1261,118 @@ exports[`RoomView should hide the header when hideHeader=true 1`] = `
                   >
                     <button
                       aria-label="Bold"
-                      class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconBold"
+                      class="mx_AccessibleButton mx_MessageComposerFormatBar_button"
                       role="button"
                       tabindex="0"
                       type="button"
-                    />
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M8.8 19q-.824 0-1.413-.587A1.93 1.93 0 0 1 6.8 17V7q0-.824.587-1.412A1.93 1.93 0 0 1 8.8 5h3.525q1.624 0 3 1T16.7 8.775q0 1.275-.575 1.963-.575.687-1.075.987.626.275 1.387 1.025.763.75.763 2.25 0 2.224-1.625 3.113-1.625.887-3.05.887zm1.025-2.8h2.6q1.2 0 1.462-.612.263-.614.263-.888 0-.275-.263-.887-.262-.613-1.537-.613H9.825zm0-5.7h2.325q.825 0 1.2-.425a1.4 1.4 0 0 0 .375-.95q0-.6-.425-.975t-1.1-.375H9.825z"
+                        />
+                      </svg>
+                    </button>
                     <button
                       aria-label="Italics"
-                      class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconItalic"
+                      class="mx_AccessibleButton mx_MessageComposerFormatBar_button"
                       role="button"
                       tabindex="-1"
                       type="button"
-                    />
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M6.25 19q-.525 0-.888-.363A1.2 1.2 0 0 1 5 17.75q0-.525.362-.887.363-.363.888-.363H9l3-9H9.25q-.525 0-.887-.362A1.2 1.2 0 0 1 8 6.25q0-.525.363-.888Q8.725 5 9.25 5h7.5q.525 0 .887.362.363.363.363.888t-.363.888a1.2 1.2 0 0 1-.887.362H14.5l-3 9h2.25q.525 0 .887.363.363.362.363.887t-.363.887a1.2 1.2 0 0 1-.887.363z"
+                        />
+                      </svg>
+                    </button>
                     <button
                       aria-label="Strikethrough"
-                      class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconStrikethrough"
+                      class="mx_AccessibleButton mx_MessageComposerFormatBar_button"
                       role="button"
                       tabindex="-1"
                       type="button"
-                    />
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M12.15 20q-1.9 0-3.375-1.125T6.65 15.8l2.2-.95q.35 1.2 1.213 1.975.861.775 2.137.775 1.05 0 1.9-.5t.85-1.6q0-.45-.175-.825A2.4 2.4 0 0 0 14.3 14h2.8a4.3 4.3 0 0 1 .25 1.5q0 2.15-1.538 3.325Q14.277 20 12.15 20M3 12a.97.97 0 0 1-.712-.287A.97.97 0 0 1 2 11q0-.424.288-.713A.97.97 0 0 1 3 10h18q.424 0 .712.287.288.288.288.713 0 .424-.288.713A.97.97 0 0 1 21 12zm9.05-8.15q1.65 0 2.887.812T16.85 7.15l-2.2.975a3 3 0 0 0-.838-1.3Q13.2 6.25 12.1 6.25q-1.025 0-1.7.462-.675.463-.75 1.288h-2.4q.05-1.725 1.363-2.938Q9.925 3.85 12.05 3.85"
+                        />
+                      </svg>
+                    </button>
                     <button
                       aria-label="Code block"
-                      class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconCode"
+                      class="mx_AccessibleButton mx_MessageComposerFormatBar_button"
                       role="button"
                       tabindex="-1"
                       type="button"
-                    />
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M14.958 5.62a1 1 0 0 0-1.916-.574l-4 13.333a1 1 0 0 0 1.916.575zM5.974 7.232a1 1 0 0 0-1.409.128l-3.333 4a1 1 0 0 0 0 1.28l3.333 4a1 1 0 1 0 1.537-1.28L3.302 12l2.8-3.36a1 1 0 0 0-.128-1.408m12.053 0a1 1 0 0 1 1.408.128l3.333 4a1 1 0 0 1 0 1.28l-3.333 4a1 1 0 1 1-1.537-1.28l2.8-3.36-2.8-3.36a1 1 0 0 1 .128-1.408"
+                        />
+                      </svg>
+                    </button>
                     <button
                       aria-label="Quote"
-                      class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconQuote"
+                      class="mx_AccessibleButton mx_MessageComposerFormatBar_button"
                       role="button"
                       tabindex="-1"
                       type="button"
-                    />
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M4.719 4.34c.094-.642-.366-1.236-1.028-1.328-.663-.092-1.276.354-1.371.996l-.808 5.478c-.094.642.366 1.237 1.028 1.328.663.092 1.276-.354 1.371-.996zm12.115 10.174c.095-.642-.366-1.237-1.028-1.328-.662-.092-1.276.354-1.37.996l-.809 5.478c-.094.642.366 1.236 1.028 1.328.663.092 1.277-.354 1.371-.996zM9.318 3.009c.665.077 1.138.662 1.058 1.306l-.022.175a221 221 0 0 1-.266 2.006c-.161 1.171-.368 2.579-.535 3.386-.13.636-.769 1.049-1.425.921s-1.082-.745-.95-1.381c.148-.72.345-2.052.509-3.237a191 191 0 0 0 .262-1.981l.021-.17c.08-.644.684-1.103 1.348-1.025m13.17 11.505c.094-.642-.366-1.237-1.028-1.328-.663-.092-1.276.354-1.371.996l-.808 5.478c-.094.642.366 1.236 1.028 1.328.663.092 1.276-.354 1.371-.996z"
+                        />
+                      </svg>
+                    </button>
                     <button
                       aria-label="Insert link"
-                      class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconInsertLink"
+                      class="mx_AccessibleButton mx_MessageComposerFormatBar_button"
                       role="button"
                       tabindex="-1"
                       type="button"
-                    />
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M12 19.071q-1.467 1.467-3.536 1.467-2.067 0-3.535-1.467t-1.467-3.535q0-2.07 1.467-3.536L7.05 9.879q.3-.3.707-.3t.707.3.301.707-.3.707l-2.122 2.121a2.9 2.9 0 0 0-.884 2.122q0 1.237.884 2.12.884.885 2.121.885t2.122-.884l2.121-2.121q.3-.3.707-.3t.707.3.3.707q0 .405-.3.707zm-1.414-4.243q-.3.3-.707.301a.97.97 0 0 1-.707-.3q-.3-.3-.301-.708 0-.405.3-.707l4.243-4.242q.3-.3.707-.3t.707.3.3.707-.3.707zm6.364-.707q-.3.3-.707.3a.97.97 0 0 1-.707-.3q-.3-.3-.301-.707 0-.405.3-.707l2.122-2.121q.884-.885.884-2.121 0-1.238-.884-2.122a2.9 2.9 0 0 0-2.121-.884q-1.237 0-2.122.884l-2.121 2.122q-.3.3-.707.3a.97.97 0 0 1-.707-.3q-.3-.3-.3-.708 0-.405.3-.707L12 4.93q1.467-1.467 3.536-1.467t3.535 1.467 1.467 3.536T19.071 12z"
+                        />
+                      </svg>
+                    </button>
                   </div>
                   <div
                     aria-autocomplete="list"
@@ -1479,46 +1695,118 @@ exports[`RoomView should hide the pinned message banner when hidePinnedMessageBa
                   >
                     <button
                       aria-label="Bold"
-                      class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconBold"
+                      class="mx_AccessibleButton mx_MessageComposerFormatBar_button"
                       role="button"
                       tabindex="0"
                       type="button"
-                    />
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M8.8 19q-.824 0-1.413-.587A1.93 1.93 0 0 1 6.8 17V7q0-.824.587-1.412A1.93 1.93 0 0 1 8.8 5h3.525q1.624 0 3 1T16.7 8.775q0 1.275-.575 1.963-.575.687-1.075.987.626.275 1.387 1.025.763.75.763 2.25 0 2.224-1.625 3.113-1.625.887-3.05.887zm1.025-2.8h2.6q1.2 0 1.462-.612.263-.614.263-.888 0-.275-.263-.887-.262-.613-1.537-.613H9.825zm0-5.7h2.325q.825 0 1.2-.425a1.4 1.4 0 0 0 .375-.95q0-.6-.425-.975t-1.1-.375H9.825z"
+                        />
+                      </svg>
+                    </button>
                     <button
                       aria-label="Italics"
-                      class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconItalic"
+                      class="mx_AccessibleButton mx_MessageComposerFormatBar_button"
                       role="button"
                       tabindex="-1"
                       type="button"
-                    />
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M6.25 19q-.525 0-.888-.363A1.2 1.2 0 0 1 5 17.75q0-.525.362-.887.363-.363.888-.363H9l3-9H9.25q-.525 0-.887-.362A1.2 1.2 0 0 1 8 6.25q0-.525.363-.888Q8.725 5 9.25 5h7.5q.525 0 .887.362.363.363.363.888t-.363.888a1.2 1.2 0 0 1-.887.362H14.5l-3 9h2.25q.525 0 .887.363.363.362.363.887t-.363.887a1.2 1.2 0 0 1-.887.363z"
+                        />
+                      </svg>
+                    </button>
                     <button
                       aria-label="Strikethrough"
-                      class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconStrikethrough"
+                      class="mx_AccessibleButton mx_MessageComposerFormatBar_button"
                       role="button"
                       tabindex="-1"
                       type="button"
-                    />
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M12.15 20q-1.9 0-3.375-1.125T6.65 15.8l2.2-.95q.35 1.2 1.213 1.975.861.775 2.137.775 1.05 0 1.9-.5t.85-1.6q0-.45-.175-.825A2.4 2.4 0 0 0 14.3 14h2.8a4.3 4.3 0 0 1 .25 1.5q0 2.15-1.538 3.325Q14.277 20 12.15 20M3 12a.97.97 0 0 1-.712-.287A.97.97 0 0 1 2 11q0-.424.288-.713A.97.97 0 0 1 3 10h18q.424 0 .712.287.288.288.288.713 0 .424-.288.713A.97.97 0 0 1 21 12zm9.05-8.15q1.65 0 2.887.812T16.85 7.15l-2.2.975a3 3 0 0 0-.838-1.3Q13.2 6.25 12.1 6.25q-1.025 0-1.7.462-.675.463-.75 1.288h-2.4q.05-1.725 1.363-2.938Q9.925 3.85 12.05 3.85"
+                        />
+                      </svg>
+                    </button>
                     <button
                       aria-label="Code block"
-                      class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconCode"
+                      class="mx_AccessibleButton mx_MessageComposerFormatBar_button"
                       role="button"
                       tabindex="-1"
                       type="button"
-                    />
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M14.958 5.62a1 1 0 0 0-1.916-.574l-4 13.333a1 1 0 0 0 1.916.575zM5.974 7.232a1 1 0 0 0-1.409.128l-3.333 4a1 1 0 0 0 0 1.28l3.333 4a1 1 0 1 0 1.537-1.28L3.302 12l2.8-3.36a1 1 0 0 0-.128-1.408m12.053 0a1 1 0 0 1 1.408.128l3.333 4a1 1 0 0 1 0 1.28l-3.333 4a1 1 0 1 1-1.537-1.28l2.8-3.36-2.8-3.36a1 1 0 0 1 .128-1.408"
+                        />
+                      </svg>
+                    </button>
                     <button
                       aria-label="Quote"
-                      class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconQuote"
+                      class="mx_AccessibleButton mx_MessageComposerFormatBar_button"
                       role="button"
                       tabindex="-1"
                       type="button"
-                    />
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M4.719 4.34c.094-.642-.366-1.236-1.028-1.328-.663-.092-1.276.354-1.371.996l-.808 5.478c-.094.642.366 1.237 1.028 1.328.663.092 1.276-.354 1.371-.996zm12.115 10.174c.095-.642-.366-1.237-1.028-1.328-.662-.092-1.276.354-1.37.996l-.809 5.478c-.094.642.366 1.236 1.028 1.328.663.092 1.277-.354 1.371-.996zM9.318 3.009c.665.077 1.138.662 1.058 1.306l-.022.175a221 221 0 0 1-.266 2.006c-.161 1.171-.368 2.579-.535 3.386-.13.636-.769 1.049-1.425.921s-1.082-.745-.95-1.381c.148-.72.345-2.052.509-3.237a191 191 0 0 0 .262-1.981l.021-.17c.08-.644.684-1.103 1.348-1.025m13.17 11.505c.094-.642-.366-1.237-1.028-1.328-.663-.092-1.276.354-1.371.996l-.808 5.478c-.094.642.366 1.236 1.028 1.328.663.092 1.276-.354 1.371-.996z"
+                        />
+                      </svg>
+                    </button>
                     <button
                       aria-label="Insert link"
-                      class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconInsertLink"
+                      class="mx_AccessibleButton mx_MessageComposerFormatBar_button"
                       role="button"
                       tabindex="-1"
                       type="button"
-                    />
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M12 19.071q-1.467 1.467-3.536 1.467-2.067 0-3.535-1.467t-1.467-3.535q0-2.07 1.467-3.536L7.05 9.879q.3-.3.707-.3t.707.3.301.707-.3.707l-2.122 2.121a2.9 2.9 0 0 0-.884 2.122q0 1.237.884 2.12.884.885 2.121.885t2.122-.884l2.121-2.121q.3-.3.707-.3t.707.3.3.707q0 .405-.3.707zm-1.414-4.243q-.3.3-.707.301a.97.97 0 0 1-.707-.3q-.3-.3-.301-.708 0-.405.3-.707l4.243-4.242q.3-.3.707-.3t.707.3.3.707-.3.707zm6.364-.707q-.3.3-.707.3a.97.97 0 0 1-.707-.3q-.3-.3-.301-.707 0-.405.3-.707l2.122-2.121q.884-.885.884-2.121 0-1.238-.884-2.122a2.9 2.9 0 0 0-2.121-.884q-1.237 0-2.122.884l-2.121 2.122q-.3.3-.707.3a.97.97 0 0 1-.707-.3q-.3-.3-.3-.708 0-.405.3-.707L12 4.93q1.467-1.467 3.536-1.467t3.535 1.467 1.467 3.536T19.071 12z"
+                        />
+                      </svg>
+                    </button>
                   </div>
                   <div
                     aria-autocomplete="list"
@@ -1841,46 +2129,118 @@ exports[`RoomView should hide the right panel when hideRightPanel=true 1`] = `
                   >
                     <button
                       aria-label="Bold"
-                      class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconBold"
+                      class="mx_AccessibleButton mx_MessageComposerFormatBar_button"
                       role="button"
                       tabindex="0"
                       type="button"
-                    />
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M8.8 19q-.824 0-1.413-.587A1.93 1.93 0 0 1 6.8 17V7q0-.824.587-1.412A1.93 1.93 0 0 1 8.8 5h3.525q1.624 0 3 1T16.7 8.775q0 1.275-.575 1.963-.575.687-1.075.987.626.275 1.387 1.025.763.75.763 2.25 0 2.224-1.625 3.113-1.625.887-3.05.887zm1.025-2.8h2.6q1.2 0 1.462-.612.263-.614.263-.888 0-.275-.263-.887-.262-.613-1.537-.613H9.825zm0-5.7h2.325q.825 0 1.2-.425a1.4 1.4 0 0 0 .375-.95q0-.6-.425-.975t-1.1-.375H9.825z"
+                        />
+                      </svg>
+                    </button>
                     <button
                       aria-label="Italics"
-                      class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconItalic"
+                      class="mx_AccessibleButton mx_MessageComposerFormatBar_button"
                       role="button"
                       tabindex="-1"
                       type="button"
-                    />
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M6.25 19q-.525 0-.888-.363A1.2 1.2 0 0 1 5 17.75q0-.525.362-.887.363-.363.888-.363H9l3-9H9.25q-.525 0-.887-.362A1.2 1.2 0 0 1 8 6.25q0-.525.363-.888Q8.725 5 9.25 5h7.5q.525 0 .887.362.363.363.363.888t-.363.888a1.2 1.2 0 0 1-.887.362H14.5l-3 9h2.25q.525 0 .887.363.363.362.363.887t-.363.887a1.2 1.2 0 0 1-.887.363z"
+                        />
+                      </svg>
+                    </button>
                     <button
                       aria-label="Strikethrough"
-                      class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconStrikethrough"
+                      class="mx_AccessibleButton mx_MessageComposerFormatBar_button"
                       role="button"
                       tabindex="-1"
                       type="button"
-                    />
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M12.15 20q-1.9 0-3.375-1.125T6.65 15.8l2.2-.95q.35 1.2 1.213 1.975.861.775 2.137.775 1.05 0 1.9-.5t.85-1.6q0-.45-.175-.825A2.4 2.4 0 0 0 14.3 14h2.8a4.3 4.3 0 0 1 .25 1.5q0 2.15-1.538 3.325Q14.277 20 12.15 20M3 12a.97.97 0 0 1-.712-.287A.97.97 0 0 1 2 11q0-.424.288-.713A.97.97 0 0 1 3 10h18q.424 0 .712.287.288.288.288.713 0 .424-.288.713A.97.97 0 0 1 21 12zm9.05-8.15q1.65 0 2.887.812T16.85 7.15l-2.2.975a3 3 0 0 0-.838-1.3Q13.2 6.25 12.1 6.25q-1.025 0-1.7.462-.675.463-.75 1.288h-2.4q.05-1.725 1.363-2.938Q9.925 3.85 12.05 3.85"
+                        />
+                      </svg>
+                    </button>
                     <button
                       aria-label="Code block"
-                      class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconCode"
+                      class="mx_AccessibleButton mx_MessageComposerFormatBar_button"
                       role="button"
                       tabindex="-1"
                       type="button"
-                    />
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M14.958 5.62a1 1 0 0 0-1.916-.574l-4 13.333a1 1 0 0 0 1.916.575zM5.974 7.232a1 1 0 0 0-1.409.128l-3.333 4a1 1 0 0 0 0 1.28l3.333 4a1 1 0 1 0 1.537-1.28L3.302 12l2.8-3.36a1 1 0 0 0-.128-1.408m12.053 0a1 1 0 0 1 1.408.128l3.333 4a1 1 0 0 1 0 1.28l-3.333 4a1 1 0 1 1-1.537-1.28l2.8-3.36-2.8-3.36a1 1 0 0 1 .128-1.408"
+                        />
+                      </svg>
+                    </button>
                     <button
                       aria-label="Quote"
-                      class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconQuote"
+                      class="mx_AccessibleButton mx_MessageComposerFormatBar_button"
                       role="button"
                       tabindex="-1"
                       type="button"
-                    />
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M4.719 4.34c.094-.642-.366-1.236-1.028-1.328-.663-.092-1.276.354-1.371.996l-.808 5.478c-.094.642.366 1.237 1.028 1.328.663.092 1.276-.354 1.371-.996zm12.115 10.174c.095-.642-.366-1.237-1.028-1.328-.662-.092-1.276.354-1.37.996l-.809 5.478c-.094.642.366 1.236 1.028 1.328.663.092 1.277-.354 1.371-.996zM9.318 3.009c.665.077 1.138.662 1.058 1.306l-.022.175a221 221 0 0 1-.266 2.006c-.161 1.171-.368 2.579-.535 3.386-.13.636-.769 1.049-1.425.921s-1.082-.745-.95-1.381c.148-.72.345-2.052.509-3.237a191 191 0 0 0 .262-1.981l.021-.17c.08-.644.684-1.103 1.348-1.025m13.17 11.505c.094-.642-.366-1.237-1.028-1.328-.663-.092-1.276.354-1.371.996l-.808 5.478c-.094.642.366 1.236 1.028 1.328.663.092 1.276-.354 1.371-.996z"
+                        />
+                      </svg>
+                    </button>
                     <button
                       aria-label="Insert link"
-                      class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconInsertLink"
+                      class="mx_AccessibleButton mx_MessageComposerFormatBar_button"
                       role="button"
                       tabindex="-1"
                       type="button"
-                    />
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M12 19.071q-1.467 1.467-3.536 1.467-2.067 0-3.535-1.467t-1.467-3.535q0-2.07 1.467-3.536L7.05 9.879q.3-.3.707-.3t.707.3.301.707-.3.707l-2.122 2.121a2.9 2.9 0 0 0-.884 2.122q0 1.237.884 2.12.884.885 2.121.885t2.122-.884l2.121-2.121q.3-.3.707-.3t.707.3.3.707q0 .405-.3.707zm-1.414-4.243q-.3.3-.707.301a.97.97 0 0 1-.707-.3q-.3-.3-.301-.708 0-.405.3-.707l4.243-4.242q.3-.3.707-.3t.707.3.3.707-.3.707zm6.364-.707q-.3.3-.707.3a.97.97 0 0 1-.707-.3q-.3-.3-.301-.707 0-.405.3-.707l2.122-2.121q.884-.885.884-2.121 0-1.238-.884-2.122a2.9 2.9 0 0 0-2.121-.884q-1.237 0-2.122.884l-2.121 2.122q-.3.3-.707.3a.97.97 0 0 1-.707-.3q-.3-.3-.3-.708 0-.405.3-.707L12 4.93q1.467-1.467 3.536-1.467t3.535 1.467 1.467 3.536T19.071 12z"
+                        />
+                      </svg>
+                    </button>
                   </div>
                   <div
                     aria-autocomplete="list"
@@ -2413,46 +2773,118 @@ exports[`RoomView should not display the timeline when the room encryption is lo
                   >
                     <button
                       aria-label="Bold"
-                      class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconBold"
+                      class="mx_AccessibleButton mx_MessageComposerFormatBar_button"
                       role="button"
                       tabindex="0"
                       type="button"
-                    />
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M8.8 19q-.824 0-1.413-.587A1.93 1.93 0 0 1 6.8 17V7q0-.824.587-1.412A1.93 1.93 0 0 1 8.8 5h3.525q1.624 0 3 1T16.7 8.775q0 1.275-.575 1.963-.575.687-1.075.987.626.275 1.387 1.025.763.75.763 2.25 0 2.224-1.625 3.113-1.625.887-3.05.887zm1.025-2.8h2.6q1.2 0 1.462-.612.263-.614.263-.888 0-.275-.263-.887-.262-.613-1.537-.613H9.825zm0-5.7h2.325q.825 0 1.2-.425a1.4 1.4 0 0 0 .375-.95q0-.6-.425-.975t-1.1-.375H9.825z"
+                        />
+                      </svg>
+                    </button>
                     <button
                       aria-label="Italics"
-                      class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconItalic"
+                      class="mx_AccessibleButton mx_MessageComposerFormatBar_button"
                       role="button"
                       tabindex="-1"
                       type="button"
-                    />
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M6.25 19q-.525 0-.888-.363A1.2 1.2 0 0 1 5 17.75q0-.525.362-.887.363-.363.888-.363H9l3-9H9.25q-.525 0-.887-.362A1.2 1.2 0 0 1 8 6.25q0-.525.363-.888Q8.725 5 9.25 5h7.5q.525 0 .887.362.363.363.363.888t-.363.888a1.2 1.2 0 0 1-.887.362H14.5l-3 9h2.25q.525 0 .887.363.363.362.363.887t-.363.887a1.2 1.2 0 0 1-.887.363z"
+                        />
+                      </svg>
+                    </button>
                     <button
                       aria-label="Strikethrough"
-                      class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconStrikethrough"
+                      class="mx_AccessibleButton mx_MessageComposerFormatBar_button"
                       role="button"
                       tabindex="-1"
                       type="button"
-                    />
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M12.15 20q-1.9 0-3.375-1.125T6.65 15.8l2.2-.95q.35 1.2 1.213 1.975.861.775 2.137.775 1.05 0 1.9-.5t.85-1.6q0-.45-.175-.825A2.4 2.4 0 0 0 14.3 14h2.8a4.3 4.3 0 0 1 .25 1.5q0 2.15-1.538 3.325Q14.277 20 12.15 20M3 12a.97.97 0 0 1-.712-.287A.97.97 0 0 1 2 11q0-.424.288-.713A.97.97 0 0 1 3 10h18q.424 0 .712.287.288.288.288.713 0 .424-.288.713A.97.97 0 0 1 21 12zm9.05-8.15q1.65 0 2.887.812T16.85 7.15l-2.2.975a3 3 0 0 0-.838-1.3Q13.2 6.25 12.1 6.25q-1.025 0-1.7.462-.675.463-.75 1.288h-2.4q.05-1.725 1.363-2.938Q9.925 3.85 12.05 3.85"
+                        />
+                      </svg>
+                    </button>
                     <button
                       aria-label="Code block"
-                      class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconCode"
+                      class="mx_AccessibleButton mx_MessageComposerFormatBar_button"
                       role="button"
                       tabindex="-1"
                       type="button"
-                    />
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M14.958 5.62a1 1 0 0 0-1.916-.574l-4 13.333a1 1 0 0 0 1.916.575zM5.974 7.232a1 1 0 0 0-1.409.128l-3.333 4a1 1 0 0 0 0 1.28l3.333 4a1 1 0 1 0 1.537-1.28L3.302 12l2.8-3.36a1 1 0 0 0-.128-1.408m12.053 0a1 1 0 0 1 1.408.128l3.333 4a1 1 0 0 1 0 1.28l-3.333 4a1 1 0 1 1-1.537-1.28l2.8-3.36-2.8-3.36a1 1 0 0 1 .128-1.408"
+                        />
+                      </svg>
+                    </button>
                     <button
                       aria-label="Quote"
-                      class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconQuote"
+                      class="mx_AccessibleButton mx_MessageComposerFormatBar_button"
                       role="button"
                       tabindex="-1"
                       type="button"
-                    />
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M4.719 4.34c.094-.642-.366-1.236-1.028-1.328-.663-.092-1.276.354-1.371.996l-.808 5.478c-.094.642.366 1.237 1.028 1.328.663.092 1.276-.354 1.371-.996zm12.115 10.174c.095-.642-.366-1.237-1.028-1.328-.662-.092-1.276.354-1.37.996l-.809 5.478c-.094.642.366 1.236 1.028 1.328.663.092 1.277-.354 1.371-.996zM9.318 3.009c.665.077 1.138.662 1.058 1.306l-.022.175a221 221 0 0 1-.266 2.006c-.161 1.171-.368 2.579-.535 3.386-.13.636-.769 1.049-1.425.921s-1.082-.745-.95-1.381c.148-.72.345-2.052.509-3.237a191 191 0 0 0 .262-1.981l.021-.17c.08-.644.684-1.103 1.348-1.025m13.17 11.505c.094-.642-.366-1.237-1.028-1.328-.663-.092-1.276.354-1.371.996l-.808 5.478c-.094.642.366 1.236 1.028 1.328.663.092 1.276-.354 1.371-.996z"
+                        />
+                      </svg>
+                    </button>
                     <button
                       aria-label="Insert link"
-                      class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconInsertLink"
+                      class="mx_AccessibleButton mx_MessageComposerFormatBar_button"
                       role="button"
                       tabindex="-1"
                       type="button"
-                    />
+                    >
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M12 19.071q-1.467 1.467-3.536 1.467-2.067 0-3.535-1.467t-1.467-3.535q0-2.07 1.467-3.536L7.05 9.879q.3-.3.707-.3t.707.3.301.707-.3.707l-2.122 2.121a2.9 2.9 0 0 0-.884 2.122q0 1.237.884 2.12.884.885 2.121.885t2.122-.884l2.121-2.121q.3-.3.707-.3t.707.3.3.707q0 .405-.3.707zm-1.414-4.243q-.3.3-.707.301a.97.97 0 0 1-.707-.3q-.3-.3-.301-.708 0-.405.3-.707l4.243-4.242q.3-.3.707-.3t.707.3.3.707-.3.707zm6.364-.707q-.3.3-.707.3a.97.97 0 0 1-.707-.3q-.3-.3-.301-.707 0-.405.3-.707l2.122-2.121q.884-.885.884-2.121 0-1.238-.884-2.122a2.9 2.9 0 0 0-2.121-.884q-1.237 0-2.122.884l-2.121 2.122q-.3.3-.707.3a.97.97 0 0 1-.707-.3q-.3-.3-.3-.708 0-.405.3-.707L12 4.93q1.467-1.467 3.536-1.467t3.535 1.467 1.467 3.536T19.071 12z"
+                        />
+                      </svg>
+                    </button>
                   </div>
                   <div
                     aria-autocomplete="list"
@@ -2846,46 +3278,118 @@ exports[`RoomView video rooms should render joined video room view 1`] = `
                       >
                         <button
                           aria-label="Bold"
-                          class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconBold"
+                          class="mx_AccessibleButton mx_MessageComposerFormatBar_button"
                           role="button"
                           tabindex="0"
                           type="button"
-                        />
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M8.8 19q-.824 0-1.413-.587A1.93 1.93 0 0 1 6.8 17V7q0-.824.587-1.412A1.93 1.93 0 0 1 8.8 5h3.525q1.624 0 3 1T16.7 8.775q0 1.275-.575 1.963-.575.687-1.075.987.626.275 1.387 1.025.763.75.763 2.25 0 2.224-1.625 3.113-1.625.887-3.05.887zm1.025-2.8h2.6q1.2 0 1.462-.612.263-.614.263-.888 0-.275-.263-.887-.262-.613-1.537-.613H9.825zm0-5.7h2.325q.825 0 1.2-.425a1.4 1.4 0 0 0 .375-.95q0-.6-.425-.975t-1.1-.375H9.825z"
+                            />
+                          </svg>
+                        </button>
                         <button
                           aria-label="Italics"
-                          class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconItalic"
+                          class="mx_AccessibleButton mx_MessageComposerFormatBar_button"
                           role="button"
                           tabindex="-1"
                           type="button"
-                        />
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M6.25 19q-.525 0-.888-.363A1.2 1.2 0 0 1 5 17.75q0-.525.362-.887.363-.363.888-.363H9l3-9H9.25q-.525 0-.887-.362A1.2 1.2 0 0 1 8 6.25q0-.525.363-.888Q8.725 5 9.25 5h7.5q.525 0 .887.362.363.363.363.888t-.363.888a1.2 1.2 0 0 1-.887.362H14.5l-3 9h2.25q.525 0 .887.363.363.362.363.887t-.363.887a1.2 1.2 0 0 1-.887.363z"
+                            />
+                          </svg>
+                        </button>
                         <button
                           aria-label="Strikethrough"
-                          class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconStrikethrough"
+                          class="mx_AccessibleButton mx_MessageComposerFormatBar_button"
                           role="button"
                           tabindex="-1"
                           type="button"
-                        />
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M12.15 20q-1.9 0-3.375-1.125T6.65 15.8l2.2-.95q.35 1.2 1.213 1.975.861.775 2.137.775 1.05 0 1.9-.5t.85-1.6q0-.45-.175-.825A2.4 2.4 0 0 0 14.3 14h2.8a4.3 4.3 0 0 1 .25 1.5q0 2.15-1.538 3.325Q14.277 20 12.15 20M3 12a.97.97 0 0 1-.712-.287A.97.97 0 0 1 2 11q0-.424.288-.713A.97.97 0 0 1 3 10h18q.424 0 .712.287.288.288.288.713 0 .424-.288.713A.97.97 0 0 1 21 12zm9.05-8.15q1.65 0 2.887.812T16.85 7.15l-2.2.975a3 3 0 0 0-.838-1.3Q13.2 6.25 12.1 6.25q-1.025 0-1.7.462-.675.463-.75 1.288h-2.4q.05-1.725 1.363-2.938Q9.925 3.85 12.05 3.85"
+                            />
+                          </svg>
+                        </button>
                         <button
                           aria-label="Code block"
-                          class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconCode"
+                          class="mx_AccessibleButton mx_MessageComposerFormatBar_button"
                           role="button"
                           tabindex="-1"
                           type="button"
-                        />
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M14.958 5.62a1 1 0 0 0-1.916-.574l-4 13.333a1 1 0 0 0 1.916.575zM5.974 7.232a1 1 0 0 0-1.409.128l-3.333 4a1 1 0 0 0 0 1.28l3.333 4a1 1 0 1 0 1.537-1.28L3.302 12l2.8-3.36a1 1 0 0 0-.128-1.408m12.053 0a1 1 0 0 1 1.408.128l3.333 4a1 1 0 0 1 0 1.28l-3.333 4a1 1 0 1 1-1.537-1.28l2.8-3.36-2.8-3.36a1 1 0 0 1 .128-1.408"
+                            />
+                          </svg>
+                        </button>
                         <button
                           aria-label="Quote"
-                          class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconQuote"
+                          class="mx_AccessibleButton mx_MessageComposerFormatBar_button"
                           role="button"
                           tabindex="-1"
                           type="button"
-                        />
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M4.719 4.34c.094-.642-.366-1.236-1.028-1.328-.663-.092-1.276.354-1.371.996l-.808 5.478c-.094.642.366 1.237 1.028 1.328.663.092 1.276-.354 1.371-.996zm12.115 10.174c.095-.642-.366-1.237-1.028-1.328-.662-.092-1.276.354-1.37.996l-.809 5.478c-.094.642.366 1.236 1.028 1.328.663.092 1.277-.354 1.371-.996zM9.318 3.009c.665.077 1.138.662 1.058 1.306l-.022.175a221 221 0 0 1-.266 2.006c-.161 1.171-.368 2.579-.535 3.386-.13.636-.769 1.049-1.425.921s-1.082-.745-.95-1.381c.148-.72.345-2.052.509-3.237a191 191 0 0 0 .262-1.981l.021-.17c.08-.644.684-1.103 1.348-1.025m13.17 11.505c.094-.642-.366-1.237-1.028-1.328-.663-.092-1.276.354-1.371.996l-.808 5.478c-.094.642.366 1.236 1.028 1.328.663.092 1.276-.354 1.371-.996z"
+                            />
+                          </svg>
+                        </button>
                         <button
                           aria-label="Insert link"
-                          class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconInsertLink"
+                          class="mx_AccessibleButton mx_MessageComposerFormatBar_button"
                           role="button"
                           tabindex="-1"
                           type="button"
-                        />
+                        >
+                          <svg
+                            fill="currentColor"
+                            height="1em"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M12 19.071q-1.467 1.467-3.536 1.467-2.067 0-3.535-1.467t-1.467-3.535q0-2.07 1.467-3.536L7.05 9.879q.3-.3.707-.3t.707.3.301.707-.3.707l-2.122 2.121a2.9 2.9 0 0 0-.884 2.122q0 1.237.884 2.12.884.885 2.121.885t2.122-.884l2.121-2.121q.3-.3.707-.3t.707.3.3.707q0 .405-.3.707zm-1.414-4.243q-.3.3-.707.301a.97.97 0 0 1-.707-.3q-.3-.3-.301-.708 0-.405.3-.707l4.243-4.242q.3-.3.707-.3t.707.3.3.707-.3.707zm6.364-.707q-.3.3-.707.3a.97.97 0 0 1-.707-.3q-.3-.3-.301-.707 0-.405.3-.707l2.122-2.121q.884-.885.884-2.121 0-1.238-.884-2.122a2.9 2.9 0 0 0-2.121-.884q-1.237 0-2.122.884l-2.121 2.122q-.3.3-.707.3a.97.97 0 0 1-.707-.3q-.3-.3-.3-.708 0-.405.3-.707L12 4.93q1.467-1.467 3.536-1.467t3.535 1.467 1.467 3.536T19.071 12z"
+                            />
+                          </svg>
+                        </button>
                       </div>
                       <div
                         aria-autocomplete="list"
diff --git a/test/unit-tests/components/structures/__snapshots__/SpaceHierarchy-test.tsx.snap b/test/unit-tests/components/structures/__snapshots__/SpaceHierarchy-test.tsx.snap
index fa83e0ac84..226db380dc 100644
--- a/test/unit-tests/components/structures/__snapshots__/SpaceHierarchy-test.tsx.snap
+++ b/test/unit-tests/components/structures/__snapshots__/SpaceHierarchy-test.tsx.snap
@@ -352,7 +352,19 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
         </div>
         <div
           class="mx_SpaceHierarchy_subspace_toggle mx_SpaceHierarchy_subspace_toggle_shown"
-        />
+        >
+          <svg
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M12 14.95q-.2 0-.375-.062a.9.9 0 0 1-.325-.213l-4.6-4.6a.95.95 0 0 1-.275-.7q0-.425.275-.7a.95.95 0 0 1 .7-.275q.425 0 .7.275l3.9 3.9 3.9-3.9a.95.95 0 0 1 .7-.275q.425 0 .7.275a.95.95 0 0 1 .275.7.95.95 0 0 1-.275.7l-4.6 4.6q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
+            />
+          </svg>
+        </div>
       </div>
       <div
         class="mx_SpaceHierarchy_subspace_children"
@@ -917,7 +929,19 @@ exports[`SpaceHierarchy <SpaceHierarchy /> should not render cycles 1`] = `
         </div>
         <div
           class="mx_SpaceHierarchy_subspace_toggle mx_SpaceHierarchy_subspace_toggle_shown"
-        />
+        >
+          <svg
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M12 14.95q-.2 0-.375-.062a.9.9 0 0 1-.325-.213l-4.6-4.6a.95.95 0 0 1-.275-.7q0-.425.275-.7a.95.95 0 0 1 .7-.275q.425 0 .7.275l3.9 3.9 3.9-3.9a.95.95 0 0 1 .7-.275q.425 0 .7.275a.95.95 0 0 1 .275.7.95.95 0 0 1-.275.7l-4.6 4.6q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
+            />
+          </svg>
+        </div>
       </div>
       <div
         class="mx_SpaceHierarchy_subspace_children"
diff --git a/test/unit-tests/components/views/dialogs/__snapshots__/CreateRoomDialog-test.tsx.snap b/test/unit-tests/components/views/dialogs/__snapshots__/CreateRoomDialog-test.tsx.snap
index 9d81bf0174..cef768dc34 100644
--- a/test/unit-tests/components/views/dialogs/__snapshots__/CreateRoomDialog-test.tsx.snap
+++ b/test/unit-tests/components/views/dialogs/__snapshots__/CreateRoomDialog-test.tsx.snap
@@ -83,9 +83,18 @@ exports[`<CreateRoomDialog /> for a private room should create a private room 1`
                 Private room (invite only)
               </div>
             </div>
-            <span
+            <svg
               class="mx_Dropdown_arrow"
-            />
+              fill="currentColor"
+              height="1em"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M12 14.95q-.2 0-.375-.062a.9.9 0 0 1-.325-.213l-4.6-4.6a.95.95 0 0 1-.275-.7q0-.425.275-.7a.95.95 0 0 1 .7-.275q.425 0 .7.275l3.9 3.9 3.9-3.9a.95.95 0 0 1 .7-.275q.425 0 .7.275a.95.95 0 0 1 .275.7.95.95 0 0 1-.275.7l-4.6 4.6q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
+              />
+            </svg>
           </div>
         </div>
         <p>
@@ -277,9 +286,18 @@ exports[`<CreateRoomDialog /> for a private room should render not the advanced
                 Private room (invite only)
               </div>
             </div>
-            <span
+            <svg
               class="mx_Dropdown_arrow"
-            />
+              fill="currentColor"
+              height="1em"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M12 14.95q-.2 0-.375-.062a.9.9 0 0 1-.325-.213l-4.6-4.6a.95.95 0 0 1-.275-.7q0-.425.275-.7a.95.95 0 0 1 .7-.275q.425 0 .7.275l3.9 3.9 3.9-3.9a.95.95 0 0 1 .7-.275q.425 0 .7.275a.95.95 0 0 1 .275.7.95.95 0 0 1-.275.7l-4.6 4.6q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
+              />
+            </svg>
           </div>
         </div>
         <p>
diff --git a/test/unit-tests/components/views/elements/__snapshots__/Dropdown-test.tsx.snap b/test/unit-tests/components/views/elements/__snapshots__/Dropdown-test.tsx.snap
index f5f364dd1c..5f399616c0 100644
--- a/test/unit-tests/components/views/elements/__snapshots__/Dropdown-test.tsx.snap
+++ b/test/unit-tests/components/views/elements/__snapshots__/Dropdown-test.tsx.snap
@@ -21,9 +21,18 @@ exports[`<Dropdown /> renders with placeholder 1`] = `
       >
         Select an option
       </div>
-      <span
+      <svg
         class="mx_Dropdown_arrow"
-      />
+        fill="currentColor"
+        height="1em"
+        viewBox="0 0 24 24"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M12 14.95q-.2 0-.375-.062a.9.9 0 0 1-.325-.213l-4.6-4.6a.95.95 0 0 1-.275-.7q0-.425.275-.7a.95.95 0 0 1 .7-.275q.425 0 .7.275l3.9 3.9 3.9-3.9a.95.95 0 0 1 .7-.275q.425 0 .7.275a.95.95 0 0 1 .275.7.95.95 0 0 1-.275.7l-4.6 4.6q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
+        />
+      </svg>
     </div>
   </div>
 </DocumentFragment>
diff --git a/test/unit-tests/components/views/elements/__snapshots__/FilterDropdown-test.tsx.snap b/test/unit-tests/components/views/elements/__snapshots__/FilterDropdown-test.tsx.snap
index 607d2ae7c2..5d76e95d24 100644
--- a/test/unit-tests/components/views/elements/__snapshots__/FilterDropdown-test.tsx.snap
+++ b/test/unit-tests/components/views/elements/__snapshots__/FilterDropdown-test.tsx.snap
@@ -83,9 +83,18 @@ exports[`<FilterDropdown /> renders selected option 1`] = `
       >
         Option one
       </div>
-      <span
+      <svg
         class="mx_Dropdown_arrow"
-      />
+        fill="currentColor"
+        height="1em"
+        viewBox="0 0 24 24"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M12 14.95q-.2 0-.375-.062a.9.9 0 0 1-.325-.213l-4.6-4.6a.95.95 0 0 1-.275-.7q0-.425.275-.7a.95.95 0 0 1 .7-.275q.425 0 .7.275l3.9 3.9 3.9-3.9a.95.95 0 0 1 .7-.275q.425 0 .7.275a.95.95 0 0 1 .275.7.95.95 0 0 1-.275.7l-4.6 4.6q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
+        />
+      </svg>
     </div>
   </div>
 </div>
@@ -112,9 +121,18 @@ exports[`<FilterDropdown /> renders selected option with selectedLabel 1`] = `
       >
         Show: Option one
       </div>
-      <span
+      <svg
         class="mx_Dropdown_arrow"
-      />
+        fill="currentColor"
+        height="1em"
+        viewBox="0 0 24 24"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M12 14.95q-.2 0-.375-.062a.9.9 0 0 1-.325-.213l-4.6-4.6a.95.95 0 0 1-.275-.7q0-.425.275-.7a.95.95 0 0 1 .7-.275q.425 0 .7.275l3.9 3.9 3.9-3.9a.95.95 0 0 1 .7-.275q.425 0 .7.275a.95.95 0 0 1 .275.7.95.95 0 0 1-.275.7l-4.6 4.6q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
+        />
+      </svg>
     </div>
   </div>
 </div>
@@ -139,9 +157,18 @@ exports[`<FilterDropdown /> renders when selected option is not in options 1`] =
         class="mx_Dropdown_option"
         id="test_value"
       />
-      <span
+      <svg
         class="mx_Dropdown_arrow"
-      />
+        fill="currentColor"
+        height="1em"
+        viewBox="0 0 24 24"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M12 14.95q-.2 0-.375-.062a.9.9 0 0 1-.325-.213l-4.6-4.6a.95.95 0 0 1-.275-.7q0-.425.275-.7a.95.95 0 0 1 .7-.275q.425 0 .7.275l3.9 3.9 3.9-3.9a.95.95 0 0 1 .7-.275q.425 0 .7.275a.95.95 0 0 1 .275.7.95.95 0 0 1-.275.7l-4.6 4.6q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
+        />
+      </svg>
     </div>
   </div>
 </div>
diff --git a/test/unit-tests/components/views/elements/__snapshots__/SettingsDropdown-test.tsx.snap b/test/unit-tests/components/views/elements/__snapshots__/SettingsDropdown-test.tsx.snap
index 8d98da68e5..2ecb0a7038 100644
--- a/test/unit-tests/components/views/elements/__snapshots__/SettingsDropdown-test.tsx.snap
+++ b/test/unit-tests/components/views/elements/__snapshots__/SettingsDropdown-test.tsx.snap
@@ -38,9 +38,18 @@ exports[`<SettingsDropdown /> should render a disabled setting 1`] = `
             No
           </div>
         </div>
-        <span
+        <svg
           class="mx_Dropdown_arrow"
-        />
+          fill="currentColor"
+          height="1em"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M12 14.95q-.2 0-.375-.062a.9.9 0 0 1-.325-.213l-4.6-4.6a.95.95 0 0 1-.275-.7q0-.425.275-.7a.95.95 0 0 1 .7-.275q.425 0 .7.275l3.9 3.9 3.9-3.9a.95.95 0 0 1 .7-.275q.425 0 .7.275a.95.95 0 0 1 .275.7.95.95 0 0 1-.275.7l-4.6 4.6q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
+          />
+        </svg>
       </div>
     </div>
   </div>
diff --git a/test/unit-tests/components/views/elements/__snapshots__/SpellCheckLanguagesDropdown-test.tsx.snap b/test/unit-tests/components/views/elements/__snapshots__/SpellCheckLanguagesDropdown-test.tsx.snap
index 749cf07733..d558bf3192 100644
--- a/test/unit-tests/components/views/elements/__snapshots__/SpellCheckLanguagesDropdown-test.tsx.snap
+++ b/test/unit-tests/components/views/elements/__snapshots__/SpellCheckLanguagesDropdown-test.tsx.snap
@@ -23,9 +23,18 @@ exports[`<SpellCheckLanguagesDropdown /> renders as expected 1`] = `
           English
         </div>
       </div>
-      <span
+      <svg
         class="mx_Dropdown_arrow"
-      />
+        fill="currentColor"
+        height="1em"
+        viewBox="0 0 24 24"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M12 14.95q-.2 0-.375-.062a.9.9 0 0 1-.325-.213l-4.6-4.6a.95.95 0 0 1-.275-.7q0-.425.275-.7a.95.95 0 0 1 .7-.275q.425 0 .7.275l3.9 3.9 3.9-3.9a.95.95 0 0 1 .7-.275q.425 0 .7.275a.95.95 0 0 1 .275.7.95.95 0 0 1-.275.7l-4.6 4.6q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
+        />
+      </svg>
     </div>
   </div>
 </DocumentFragment>
diff --git a/test/unit-tests/components/views/settings/__snapshots__/AddRemoveThreepids-test.tsx.snap b/test/unit-tests/components/views/settings/__snapshots__/AddRemoveThreepids-test.tsx.snap
index 6a5635cdb6..c77a16ed7f 100644
--- a/test/unit-tests/components/views/settings/__snapshots__/AddRemoveThreepids-test.tsx.snap
+++ b/test/unit-tests/components/views/settings/__snapshots__/AddRemoveThreepids-test.tsx.snap
@@ -140,9 +140,18 @@ exports[`AddRemoveThreepids should render phone numbers 1`] = `
                 +1
               </span>
             </div>
-            <span
+            <svg
               class="mx_Dropdown_arrow"
-            />
+              fill="currentColor"
+              height="1em"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M12 14.95q-.2 0-.375-.062a.9.9 0 0 1-.325-.213l-4.6-4.6a.95.95 0 0 1-.275-.7q0-.425.275-.7a.95.95 0 0 1 .7-.275q.425 0 .7.275l3.9 3.9 3.9-3.9a.95.95 0 0 1 .7-.275q.425 0 .7.275a.95.95 0 0 1 .275.7.95.95 0 0 1-.275.7l-4.6 4.6q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
+              />
+            </svg>
           </div>
         </div>
       </span>
diff --git a/test/unit-tests/components/views/settings/tabs/user/__snapshots__/AccountUserSettingsTab-test.tsx.snap b/test/unit-tests/components/views/settings/tabs/user/__snapshots__/AccountUserSettingsTab-test.tsx.snap
index e5af42d8f8..c6a31f0b12 100644
--- a/test/unit-tests/components/views/settings/tabs/user/__snapshots__/AccountUserSettingsTab-test.tsx.snap
+++ b/test/unit-tests/components/views/settings/tabs/user/__snapshots__/AccountUserSettingsTab-test.tsx.snap
@@ -137,9 +137,18 @@ exports[`<AccountUserSettingsTab /> 3pids should display 3pid email addresses an
                   +1
                 </span>
               </div>
-              <span
+              <svg
                 class="mx_Dropdown_arrow"
-              />
+                fill="currentColor"
+                height="1em"
+                viewBox="0 0 24 24"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M12 14.95q-.2 0-.375-.062a.9.9 0 0 1-.325-.213l-4.6-4.6a.95.95 0 0 1-.275-.7q0-.425.275-.7a.95.95 0 0 1 .7-.275q.425 0 .7.275l3.9 3.9 3.9-3.9a.95.95 0 0 1 .7-.275q.425 0 .7.275a.95.95 0 0 1 .275.7.95.95 0 0 1-.275.7l-4.6 4.6q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
+                />
+              </svg>
             </div>
           </div>
         </span>
diff --git a/test/unit-tests/components/views/settings/tabs/user/__snapshots__/PreferencesUserSettingsTab-test.tsx.snap b/test/unit-tests/components/views/settings/tabs/user/__snapshots__/PreferencesUserSettingsTab-test.tsx.snap
index 65b8049fc1..6fb3eec888 100644
--- a/test/unit-tests/components/views/settings/tabs/user/__snapshots__/PreferencesUserSettingsTab-test.tsx.snap
+++ b/test/unit-tests/components/views/settings/tabs/user/__snapshots__/PreferencesUserSettingsTab-test.tsx.snap
@@ -247,9 +247,18 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                     >
                       Browser default (UTC)
                     </div>
-                    <span
+                    <svg
                       class="mx_Dropdown_arrow"
-                    />
+                      fill="currentColor"
+                      height="1em"
+                      viewBox="0 0 24 24"
+                      width="1em"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M12 14.95q-.2 0-.375-.062a.9.9 0 0 1-.325-.213l-4.6-4.6a.95.95 0 0 1-.275-.7q0-.425.275-.7a.95.95 0 0 1 .7-.275q.425 0 .7.275l3.9 3.9 3.9-3.9a.95.95 0 0 1 .7-.275q.425 0 .7.275a.95.95 0 0 1 .275.7.95.95 0 0 1-.275.7l-4.6 4.6q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
+                      />
+                    </svg>
                   </div>
                 </div>
               </div>
diff --git a/test/unit-tests/components/views/settings/tabs/user/__snapshots__/SessionManagerTab-test.tsx.snap b/test/unit-tests/components/views/settings/tabs/user/__snapshots__/SessionManagerTab-test.tsx.snap
index 34ca53a684..a0d4a13c70 100644
--- a/test/unit-tests/components/views/settings/tabs/user/__snapshots__/SessionManagerTab-test.tsx.snap
+++ b/test/unit-tests/components/views/settings/tabs/user/__snapshots__/SessionManagerTab-test.tsx.snap
@@ -451,9 +451,18 @@ exports[`<SessionManagerTab /> goes to filtered list from security recommendatio
       >
         Show: Unverified
       </div>
-      <span
+      <svg
         class="mx_Dropdown_arrow"
-      />
+        fill="currentColor"
+        height="1em"
+        viewBox="0 0 24 24"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M12 14.95q-.2 0-.375-.062a.9.9 0 0 1-.325-.213l-4.6-4.6a.95.95 0 0 1-.275-.7q0-.425.275-.7a.95.95 0 0 1 .7-.275q.425 0 .7.275l3.9 3.9 3.9-3.9a.95.95 0 0 1 .7-.275q.425 0 .7.275a.95.95 0 0 1 .275.7.95.95 0 0 1-.275.7l-4.6 4.6q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
+        />
+      </svg>
     </div>
   </div>
 </div>
diff --git a/test/unit-tests/components/views/spaces/QuickSettingsButton-test.tsx b/test/unit-tests/components/views/spaces/QuickSettingsButton-test.tsx
index af3fe770ff..7ca3d573bb 100644
--- a/test/unit-tests/components/views/spaces/QuickSettingsButton-test.tsx
+++ b/test/unit-tests/components/views/spaces/QuickSettingsButton-test.tsx
@@ -28,7 +28,7 @@ describe("QuickSettingsButton", () => {
 
     const openQuickSettings = async () => {
         await userEvent.click(getQuickSettingsButton());
-        await screen.findByText("Quick settings");
+        await screen.findByRole("heading", { name: "Quick settings" });
     };
 
     it("should render the quick settings button", () => {
diff --git a/test/unit-tests/components/views/spaces/__snapshots__/QuickSettingsButton-test.tsx.snap b/test/unit-tests/components/views/spaces/__snapshots__/QuickSettingsButton-test.tsx.snap
index 66f686449c..c1e8027d2b 100644
--- a/test/unit-tests/components/views/spaces/__snapshots__/QuickSettingsButton-test.tsx.snap
+++ b/test/unit-tests/components/views/spaces/__snapshots__/QuickSettingsButton-test.tsx.snap
@@ -2,15 +2,38 @@
 
 exports[`QuickSettingsButton should render the quick settings button in expanded mode 1`] = `
 <DocumentFragment>
-  <div
+  <button
     aria-expanded="true"
     aria-haspopup="dialog"
     aria-label="Quick settings"
-    class="mx_AccessibleButton mx_QuickSettingsButton expanded"
+    class="_icon-button_1pz9o_8 mx_QuickSettingsButton expanded"
+    data-kind="primary"
     role="button"
+    style="--cpd-icon-button-size: 32px;"
     tabindex="0"
   >
-    Settings
-  </div>
+    <div
+      class="_indicator-icon_zr2a0_17"
+      style="--cpd-icon-button-size: 100%;"
+    >
+      <svg
+        fill="currentColor"
+        height="1em"
+        viewBox="0 0 24 24"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M12.731 2C13.432 2 14 2.568 14 3.269c0 .578.396 1.074.935 1.286q.128.052.253.106c.531.23 1.162.16 1.572-.25a1.27 1.27 0 0 1 1.794 0l1.034 1.035a1.27 1.27 0 0 1 0 1.794c-.41.41-.48 1.04-.248 1.572l.105.253c.212.539.708.935 1.286.935.701 0 1.269.568 1.269 1.269v1.462c0 .701-.568 1.269-1.269 1.269-.578 0-1.074.396-1.287.935q-.05.128-.104.253c-.232.531-.161 1.162.248 1.572a1.27 1.27 0 0 1 0 1.794l-1.034 1.034a1.27 1.27 0 0 1-1.794 0c-.41-.41-1.04-.48-1.572-.248a8 8 0 0 1-.253.105c-.539.212-.935.708-.935 1.286 0 .701-.568 1.269-1.269 1.269H11.27c-.702 0-1.27-.568-1.27-1.269 0-.578-.396-1.074-.935-1.287a8 8 0 0 1-.253-.104c-.531-.232-1.162-.161-1.572.248a1.27 1.27 0 0 1-1.794 0l-1.034-1.034a1.27 1.27 0 0 1 0-1.794c.41-.41.48-1.04.249-1.572a8 8 0 0 1-.106-.253C4.343 14.396 3.847 14 3.27 14 2.568 14 2 13.432 2 12.731V11.27c0-.702.568-1.27 1.269-1.27.578 0 1.074-.396 1.286-.935q.052-.128.106-.253c.23-.531.16-1.162-.25-1.572a1.27 1.27 0 0 1 0-1.794l1.035-1.034a1.27 1.27 0 0 1 1.794 0c.41.41 1.04.48 1.572.249a8 8 0 0 1 .253-.106c.539-.212.935-.708.935-1.286C10 2.568 10.568 2 11.269 2zM12 16a4 4 0 1 0 0-8 4 4 0 0 0 0 8"
+        />
+      </svg>
+      <span
+        class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 mx_QuickSettingsButton_label"
+        title="Settings"
+      >
+        Settings
+      </span>
+    </div>
+  </button>
 </DocumentFragment>
 `;
diff --git a/test/unit-tests/components/views/spaces/__snapshots__/SpacePanel-test.tsx.snap b/test/unit-tests/components/views/spaces/__snapshots__/SpacePanel-test.tsx.snap
index 56859965d2..1b15e90960 100644
--- a/test/unit-tests/components/views/spaces/__snapshots__/SpacePanel-test.tsx.snap
+++ b/test/unit-tests/components/views/spaces/__snapshots__/SpacePanel-test.tsx.snap
@@ -266,14 +266,34 @@ exports[`<SpacePanel /> should show all activated MetaSpaces in the correct orde
         </div>
       </button>
     </div>
-    <div
+    <button
       aria-expanded="false"
-      aria-haspopup="dialog"
       aria-label="Quick settings"
-      class="mx_AccessibleButton mx_QuickSettingsButton"
+      aria-labelledby="_r_1f_"
+      class="_icon-button_1pz9o_8 mx_QuickSettingsButton"
+      data-kind="primary"
       role="button"
+      style="--cpd-icon-button-size: 32px;"
       tabindex="0"
-    />
+      title="Quick settings"
+    >
+      <div
+        class="_indicator-icon_zr2a0_17"
+        style="--cpd-icon-button-size: 100%;"
+      >
+        <svg
+          fill="currentColor"
+          height="1em"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M12.731 2C13.432 2 14 2.568 14 3.269c0 .578.396 1.074.935 1.286q.128.052.253.106c.531.23 1.162.16 1.572-.25a1.27 1.27 0 0 1 1.794 0l1.034 1.035a1.27 1.27 0 0 1 0 1.794c-.41.41-.48 1.04-.248 1.572l.105.253c.212.539.708.935 1.286.935.701 0 1.269.568 1.269 1.269v1.462c0 .701-.568 1.269-1.269 1.269-.578 0-1.074.396-1.287.935q-.05.128-.104.253c-.232.531-.161 1.162.248 1.572a1.27 1.27 0 0 1 0 1.794l-1.034 1.034a1.27 1.27 0 0 1-1.794 0c-.41-.41-1.04-.48-1.572-.248a8 8 0 0 1-.253.105c-.539.212-.935.708-.935 1.286 0 .701-.568 1.269-1.269 1.269H11.27c-.702 0-1.27-.568-1.27-1.269 0-.578-.396-1.074-.935-1.287a8 8 0 0 1-.253-.104c-.531-.232-1.162-.161-1.572.248a1.27 1.27 0 0 1-1.794 0l-1.034-1.034a1.27 1.27 0 0 1 0-1.794c.41-.41.48-1.04.249-1.572a8 8 0 0 1-.106-.253C4.343 14.396 3.847 14 3.27 14 2.568 14 2 13.432 2 12.731V11.27c0-.702.568-1.27 1.269-1.27.578 0 1.074-.396 1.286-.935q.052-.128.106-.253c.23-.531.16-1.162-.25-1.572a1.27 1.27 0 0 1 0-1.794l1.035-1.034a1.27 1.27 0 0 1 1.794 0c.41.41 1.04.48 1.572.249a8 8 0 0 1 .253-.106c.539-.212.935-.708.935-1.286C10 2.568 10.568 2 11.269 2zM12 16a4 4 0 1 0 0-8 4 4 0 0 0 0 8"
+          />
+        </svg>
+      </div>
+    </button>
   </nav>
   <span
     aria-hidden="true"
@@ -289,7 +309,7 @@ exports[`<SpacePanel /> should show all activated MetaSpaces in the correct orde
     tabindex="0"
   />
   <span
-    aria-owns="_r_1j_"
+    aria-owns="_r_1k_"
     data-floating-ui-inert=""
     style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; white-space: nowrap; width: 1px; top: 0px; left: 0px;"
   />