diff --git a/playwright/snapshots/voip/element-call.spec.ts/incoming-call-group-video-toast-checked-linux.png b/playwright/snapshots/voip/element-call.spec.ts/incoming-call-group-video-toast-checked-linux.png
index d25b9467d08..f3abb3442d3 100644
Binary files a/playwright/snapshots/voip/element-call.spec.ts/incoming-call-group-video-toast-checked-linux.png and b/playwright/snapshots/voip/element-call.spec.ts/incoming-call-group-video-toast-checked-linux.png differ
diff --git a/playwright/snapshots/voip/element-call.spec.ts/incoming-call-group-video-toast-unchecked-linux.png b/playwright/snapshots/voip/element-call.spec.ts/incoming-call-group-video-toast-unchecked-linux.png
index 78a31d1662b..069ef66fe18 100644
Binary files a/playwright/snapshots/voip/element-call.spec.ts/incoming-call-group-video-toast-unchecked-linux.png and b/playwright/snapshots/voip/element-call.spec.ts/incoming-call-group-video-toast-unchecked-linux.png differ
diff --git a/playwright/snapshots/voip/element-call.spec.ts/incoming-call-group-voice-toast-linux.png b/playwright/snapshots/voip/element-call.spec.ts/incoming-call-group-voice-toast-linux.png
index 29cf843d7be..6703827c6d5 100644
Binary files a/playwright/snapshots/voip/element-call.spec.ts/incoming-call-group-voice-toast-linux.png and b/playwright/snapshots/voip/element-call.spec.ts/incoming-call-group-voice-toast-linux.png differ
diff --git a/res/css/views/dialogs/security/_CreateSecretStorageDialog.pcss b/res/css/views/dialogs/security/_CreateSecretStorageDialog.pcss
index 727558d274e..b056e959b86 100644
--- a/res/css/views/dialogs/security/_CreateSecretStorageDialog.pcss
+++ b/res/css/views/dialogs/security/_CreateSecretStorageDialog.pcss
@@ -48,18 +48,6 @@ Please see LICENSE files in the repository root for full details.
     margin-bottom: 1em;
 }
 
-.mx_CreateSecretStorageDialog_titleWithIcon::before {
-    content: "";
-    display: inline-block;
-    width: 24px;
-    height: 24px;
-    margin-right: 8px;
-    position: relative;
-    top: 5px;
-    background-color: $primary-content;
-    mask-image: url("@vector-im/compound-design-tokens/icons/key-solid.svg");
-}
-
 .mx_CreateSecretStorageDialog_centeredTitle,
 .mx_CreateSecretStorageDialog_centeredBody {
     text-align: center;
diff --git a/res/css/views/elements/_ImageView.pcss b/res/css/views/elements/_ImageView.pcss
index 9e82446ae1d..c0254561576 100644
--- a/res/css/views/elements/_ImageView.pcss
+++ b/res/css/views/elements/_ImageView.pcss
@@ -7,8 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 $button-size: 32px;
-$icon-size: 24px;
-$button-gap: 24px;
+$button-gap: var(--cpd-space-3x);
 
 :root {
     --image-view-panel-height: 68px;
@@ -82,6 +81,8 @@ $button-gap: 24px;
 }
 
 .mx_ImageView_toolbar {
+    --icon-size: 24px;
+
     padding-right: 16px;
     pointer-events: initial;
     display: flex;
@@ -89,60 +90,30 @@ $button-gap: 24px;
     flex-grow: 1;
     flex-basis: 0;
     justify-content: flex-end;
-    gap: calc($button-gap - ($button-size - $icon-size));
+    gap: $button-gap;
 }
 
 .mx_ImageView_button {
-    padding: calc(($button-size - $icon-size) / 2);
+    padding: calc(($button-size - var(--icon-size)) / 2);
+    width: var(--icon-size);
+    height: var(--icon-size);
     display: block;
 
-    &::before {
-        content: "";
-        height: $icon-size;
-        width: $icon-size;
-        mask-repeat: no-repeat;
-        mask-size: contain;
-        mask-position: center;
+    svg {
+        height: inherit;
+        width: inherit;
         display: block;
-        background-color: $icon-button-color;
+        color: $icon-button-color;
     }
 }
 
-.mx_ImageView_button_rotateCW::before {
-    mask-image: url("@vector-im/compound-design-tokens/icons/rotate-right.svg");
-}
-
-.mx_ImageView_button_rotateCCW::before {
-    mask-image: url("@vector-im/compound-design-tokens/icons/rotate-left.svg");
-}
-
-.mx_ImageView_button_zoomOut::before {
-    mask-image: url("@vector-im/compound-design-tokens/icons/zoom-out.svg");
-}
-
-.mx_ImageView_button_zoomIn::before {
-    mask-image: url("@vector-im/compound-design-tokens/icons/zoom-in.svg");
-}
-
-.mx_ImageView_button_download::before {
-    mask-image: url("@vector-im/compound-design-tokens/icons/download.svg");
-}
-
-.mx_ImageView_button_more::before {
-    mask-image: url("@vector-im/compound-design-tokens/icons/overflow-horizontal.svg");
-    mask-size: 28px;
+.mx_ImageView_button_more {
+    --icon-size: 28px;
 }
 
 .mx_ImageView_button_close {
-    padding: calc($button-size - $button-size);
     border-radius: 100%;
     background: #21262c; /* same on all themes */
-    &::before {
-        width: $button-size;
-        height: $button-size;
-        mask-image: url("@vector-im/compound-design-tokens/icons/close.svg");
-        mask-size: 24px;
-    }
 }
 
 @media (prefers-reduced-motion) {
diff --git a/res/css/views/messages/_CallEvent.pcss b/res/css/views/messages/_CallEvent.pcss
index dd260189d8b..1733fd86389 100644
--- a/res/css/views/messages/_CallEvent.pcss
+++ b/res/css/views/messages/_CallEvent.pcss
@@ -46,13 +46,10 @@ Please see LICENSE files in the repository root for full details.
     line-height: 24px; /* in px to match the avatar */
 }
 
-.mx_CallEvent_inactive .mx_CallEvent_title::before {
+.mx_CallEvent_inactive .mx_CallEvent_title svg {
     display: inline-block;
     vertical-align: middle;
-    content: "";
-    background-color: $secondary-content;
-    mask-image: url("@vector-im/compound-design-tokens/icons/video-call-solid.svg");
-    mask-size: 16px;
+    color: $secondary-content;
     width: 16px;
     height: 16px;
     margin-right: $spacing-8;
diff --git a/res/css/views/rooms/_LegacyRoomListHeader.pcss b/res/css/views/rooms/_LegacyRoomListHeader.pcss
index fd6d7b3b290..ec93c4e746d 100644
--- a/res/css/views/rooms/_LegacyRoomListHeader.pcss
+++ b/res/css/views/rooms/_LegacyRoomListHeader.pcss
@@ -31,26 +31,17 @@ Please see LICENSE files in the repository root for full details.
             background-color: $quinary-content;
         }
 
-        &::before {
-            content: "";
+        svg {
             width: 20px;
             height: 20px;
             top: 3px;
             right: 0;
             position: absolute;
-            mask-position: center;
-            mask-size: contain;
-            mask-repeat: no-repeat;
-            background-color: $tertiary-content;
-            mask-image: url("@vector-im/compound-design-tokens/icons/chevron-down.svg");
+            color: $tertiary-content;
         }
 
         &[aria-expanded="true"] {
             background-color: $quinary-content;
-
-            &::before {
-                transform: rotate(180deg);
-            }
         }
     }
 
@@ -66,23 +57,18 @@ Please see LICENSE files in the repository root for full details.
         box-sizing: border-box;
         flex-shrink: 0;
 
-        &::before {
-            content: "";
+        svg {
             width: 16px;
             height: 16px;
             position: absolute;
-            mask-position: center;
-            mask-size: contain;
-            mask-repeat: no-repeat;
-            background-color: $secondary-content;
-            mask-image: url("@vector-im/compound-design-tokens/icons/plus.svg");
+            color: $secondary-content;
         }
 
         &:hover {
             background-color: $tertiary-content;
 
-            &::before {
-                background-color: $background;
+            svg {
+                color: $background;
             }
         }
     }
diff --git a/res/css/views/rooms/_LiveContentSummary.pcss b/res/css/views/rooms/_LiveContentSummary.pcss
index 04704c6a1a9..be0c9d14fe5 100644
--- a/res/css/views/rooms/_LiveContentSummary.pcss
+++ b/res/css/views/rooms/_LiveContentSummary.pcss
@@ -10,41 +10,28 @@ Please see LICENSE files in the repository root for full details.
     color: $secondary-content;
 
     .mx_LiveContentSummary_text {
-        &::before {
+        svg {
             display: inline-block;
             vertical-align: text-bottom;
-            content: "";
-            background-color: $secondary-content;
-            mask-size: 16px;
+            color: $secondary-content;
             width: 16px;
             height: 16px;
             margin-right: 4px;
         }
 
-        &.mx_LiveContentSummary_text_video::before {
-            mask-image: url("@vector-im/compound-design-tokens/icons/video-call-solid.svg");
-        }
-
-        &.mx_LiveContentSummary_text_voice::before {
-            mask-image: url("@vector-im/compound-design-tokens/icons/voice-call-solid.svg");
-        }
-
         &.mx_LiveContentSummary_text_active {
             color: $accent;
 
-            &::before {
-                background-color: $accent;
+            svg {
+                color: $accent;
             }
         }
     }
 
-    .mx_LiveContentSummary_participants::before {
+    .mx_LiveContentSummary_participants svg {
         display: inline-block;
-        vertical-align: text-bottom;
-        content: "";
-        background-color: $secondary-content;
-        mask-image: url("@vector-im/compound-design-tokens/icons/group.svg");
-        mask-size: 16px;
+        vertical-align: middle;
+        color: $secondary-content;
         width: 16px;
         height: 16px;
         margin-right: 2px;
diff --git a/res/css/views/rooms/_RoomCallBanner.pcss b/res/css/views/rooms/_RoomCallBanner.pcss
index f4fd14c2fa4..8e49f6c1269 100644
--- a/res/css/views/rooms/_RoomCallBanner.pcss
+++ b/res/css/views/rooms/_RoomCallBanner.pcss
@@ -31,16 +31,12 @@ Please see LICENSE files in the repository root for full details.
     font-weight: var(--cpd-font-weight-semibold);
     padding-right: $spacing-8;
 
-    &::before {
+    svg {
         display: inline-block;
         vertical-align: middle;
-        content: "";
-        background-color: $secondary-content;
-        mask-size: 16px;
-        mask-position: center;
+        color: $secondary-content;
         width: 16px;
-        height: 1.2em; /* to match line height */
+        height: 16px;
         margin-right: 8px;
-        mask-image: url("@vector-im/compound-design-tokens/icons/video-call-solid.svg");
     }
 }
diff --git a/res/css/views/rooms/_RoomSublist.pcss b/res/css/views/rooms/_RoomSublist.pcss
index 3361bce4bbf..b6aa7e8ecd3 100644
--- a/res/css/views/rooms/_RoomSublist.pcss
+++ b/res/css/views/rooms/_RoomSublist.pcss
@@ -100,23 +100,19 @@ Please see LICENSE files in the repository root for full details.
             height: 24px;
             border-radius: 8px;
 
-            &::before {
-                content: "";
+            svg {
                 width: 16px;
                 height: 16px;
                 position: absolute;
                 top: 4px;
                 left: 4px;
-                mask-position: center;
-                mask-size: contain;
-                mask-repeat: no-repeat;
-                background: var(--cpd-color-icon-secondary);
+                color: var(--cpd-color-icon-secondary);
             }
         }
 
-        .mx_RoomSublist_auxButton:hover,
-        .mx_RoomSublist_menuButton:hover {
-            background: $panel-actions;
+        .mx_RoomSublist_auxButton:hover svg,
+        .mx_RoomSublist_menuButton:hover svg {
+            color: $panel-actions;
         }
 
         /* Hide the menu button by default */
@@ -126,14 +122,6 @@ Please see LICENSE files in the repository root for full details.
             margin: 0;
         }
 
-        .mx_RoomSublist_auxButton::before {
-            mask-image: url("@vector-im/compound-design-tokens/icons/plus.svg");
-        }
-
-        .mx_RoomSublist_menuButton::before {
-            mask-image: url("@vector-im/compound-design-tokens/icons/overflow-horizontal.svg");
-        }
-
         .mx_RoomSublist_headerText {
             flex: 1;
             max-width: calc(100% - 16px); /* 16px is the badge width */
@@ -151,20 +139,11 @@ Please see LICENSE files in the repository root for full details.
                 height: 14px;
                 margin-right: 6px;
 
-                &::before {
-                    content: "";
+                svg {
                     width: 18px;
                     height: 18px;
                     position: absolute;
-                    mask-position: center;
-                    mask-size: contain;
-                    mask-repeat: no-repeat;
-                    background-color: var(--cpd-color-icon-secondary);
-                    mask-image: url("@vector-im/compound-design-tokens/icons/chevron-down.svg");
-                }
-
-                &.mx_RoomSublist_collapseBtn_collapsed::before {
-                    transform: rotate(-90deg);
+                    color: var(--cpd-color-icon-secondary);
                 }
             }
         }
@@ -320,7 +299,7 @@ Please see LICENSE files in the repository root for full details.
                 background-color: $panel-actions;
                 margin-top: 8px;
 
-                &::before {
+                svg {
                     top: 8px;
                     left: 8px;
                 }
@@ -359,7 +338,7 @@ Please see LICENSE files in the repository root for full details.
                 /* to occlude the sublist title */
                 background-color: $roomlist-bg-color;
 
-                &::before {
+                svg {
                     top: 0;
                     left: 0;
                 }
diff --git a/res/css/views/settings/_ImageSizePanel.pcss b/res/css/views/settings/_ImageSizePanel.pcss
index 174f5a262ad..9112c5cdfe6 100644
--- a/res/css/views/settings/_ImageSizePanel.pcss
+++ b/res/css/views/settings/_ImageSizePanel.pcss
@@ -17,20 +17,10 @@ Please see LICENSE files in the repository root for full details.
     }
 
     .mx_ImageSizePanel_size {
-        background-color: $quinary-content;
-        mask-repeat: no-repeat;
-        mask-size: 221px;
-        mask-position: center;
+        display: block;
+        color: $quinary-content;
         width: 221px;
         height: 148px;
         margin-bottom: 14px; /* move radio button away from bottom edge a bit */
-
-        &.mx_ImageSizePanel_sizeDefault {
-            mask: url("$(res)/img/element-icons/settings/img-size-normal.svg");
-        }
-
-        &.mx_ImageSizePanel_sizeLarge {
-            mask: url("$(res)/img/element-icons/settings/img-size-large.svg");
-        }
     }
 }
diff --git a/res/css/views/toasts/_IncomingCallToast.pcss b/res/css/views/toasts/_IncomingCallToast.pcss
index d13a4eb61af..95359a5fade 100644
--- a/res/css/views/toasts/_IncomingCallToast.pcss
+++ b/res/css/views/toasts/_IncomingCallToast.pcss
@@ -29,11 +29,6 @@ Please see LICENSE files in the repository root for full details.
             font-weight: var(--cpd-font-weight-semibold);
         }
 
-        .mx_LiveContentSummary_participants::before {
-            width: 15px;
-            height: 15px;
-        }
-
         .mx_IncomingCallToast_buttons {
             display: flex;
             gap: var(--cpd-space-2x);
diff --git a/res/css/views/toasts/_NonUrgentEchoFailureToast.pcss b/res/css/views/toasts/_NonUrgentEchoFailureToast.pcss
index 9a4afb98abf..af4637750a6 100644
--- a/res/css/views/toasts/_NonUrgentEchoFailureToast.pcss
+++ b/res/css/views/toasts/_NonUrgentEchoFailureToast.pcss
@@ -7,15 +7,11 @@ Please see LICENSE files in the repository root for full details.
 */
 
 .mx_NonUrgentEchoFailureToast {
-    .mx_NonUrgentEchoFailureToast_icon {
+    svg {
         display: inline-block;
         width: $font-18px;
         height: $font-18px;
-        mask-position: center;
-        mask-size: contain;
-        mask-repeat: no-repeat;
-        background-color: #fff; /* we know that non-urgent toasts are always styled the same */
-        mask-image: url("@vector-im/compound-design-tokens/icons/offline.svg");
+        color: #fff; /* we know that non-urgent toasts are always styled the same */
         margin-right: 8px;
     }
 
diff --git a/res/css/views/voip/_LegacyCallViewHeader.pcss b/res/css/views/voip/_LegacyCallViewHeader.pcss
index 234ecba41fa..e9d81ce0f3e 100644
--- a/res/css/views/voip/_LegacyCallViewHeader.pcss
+++ b/res/css/views/voip/_LegacyCallViewHeader.pcss
@@ -46,34 +46,12 @@ Please see LICENSE files in the repository root for full details.
     vertical-align: middle;
     cursor: pointer;
 
-    &::before {
-        content: "";
+    svg {
         display: inline-block;
         height: 20px;
         width: 20px;
         vertical-align: middle;
-        background-color: $secondary-content;
-        mask-repeat: no-repeat;
-        mask-size: contain;
-        mask-position: center;
-    }
-
-    &.mx_LegacyCallViewHeader_button_fullscreen {
-        &::before {
-            mask-image: url("@vector-im/compound-design-tokens/icons/expand.svg");
-        }
-    }
-
-    &.mx_LegacyCallViewHeader_button_pin {
-        &::before {
-            mask-image: url("@vector-im/compound-design-tokens/icons/pin-solid.svg");
-        }
-    }
-
-    &.mx_LegacyCallViewHeader_button_expand {
-        &::before {
-            mask-image: url("@vector-im/compound-design-tokens/icons/pop-out.svg");
-        }
+        color: $secondary-content;
     }
 }
 
@@ -105,17 +83,12 @@ Please see LICENSE files in the repository root for full details.
     width: 16px;
     vertical-align: middle;
 
-    &::before {
-        content: "";
+    svg {
         display: inline-block;
         vertical-align: top;
 
         height: 16px;
         width: 16px;
-        background-color: $secondary-content;
-        mask-repeat: no-repeat;
-        mask-size: contain;
-        mask-position: center;
-        mask-image: url("@vector-im/compound-design-tokens/icons/voice-call-solid.svg");
+        color: $secondary-content;
     }
 }
diff --git a/res/img/element-icons/settings/img-size-large.svg b/res/img/element-icons/settings/img-size-large.svg
index 749a5c7ecbf..64046e515a2 100644
--- a/res/img/element-icons/settings/img-size-large.svg
+++ b/res/img/element-icons/settings/img-size-large.svg
@@ -7,9 +7,9 @@
             <circle cx="161.936" cy="61.1488" r="11.6596" fill="black"/>
         </mask>
     </defs>
-    <rect x="0.5" y="0.5" width="220" height="147" rx="7.5" stroke="#E3E8F0"/>
-    <rect x="57" y="14" width="10" height="10" rx="1.5" fill="#E3E8F0"/>
-    <rect x="70" y="14" width="60" height="10" rx="1.5" fill="#E3E8F0"/>
-    <path d="M0 8C0 3.58173 3.58172 0 8 0H45C45.5523 0 46 0.447715 46 1V147C46 147.552 45.5523 148 45 148H8C3.58172 148 0 144.418 0 140V8Z" fill="#E3E8F0"/>
-    <rect x="57" y="32" width="137" height="102.021" rx="5.82979" fill="#E3E8F0" mask="url(#mountains)"/>
+    <rect x="0.5" y="0.5" width="220" height="147" rx="7.5" stroke="currentColor"/>
+    <rect x="57" y="14" width="10" height="10" rx="1.5" fill="currentColor"/>
+    <rect x="70" y="14" width="60" height="10" rx="1.5" fill="currentColor"/>
+    <path d="M0 8C0 3.58173 3.58172 0 8 0H45C45.5523 0 46 0.447715 46 1V147C46 147.552 45.5523 148 45 148H8C3.58172 148 0 144.418 0 140V8Z" fill="currentColor"/>
+    <rect x="57" y="32" width="137" height="102.021" rx="5.82979" fill="currentColor" mask="url(#mountains)"/>
 </svg>
diff --git a/res/img/element-icons/settings/img-size-normal.svg b/res/img/element-icons/settings/img-size-normal.svg
index 96d8fd3fb4f..3c741169206 100644
--- a/res/img/element-icons/settings/img-size-normal.svg
+++ b/res/img/element-icons/settings/img-size-normal.svg
@@ -7,14 +7,14 @@
             <circle cx="93" cy="92" r="4" fill="black"/>
         </mask>
     </defs>
-    <rect x="0.5" y="0.5" width="220" height="147" rx="7.5" stroke="#E3E8F0"/>
-    <rect x="57" y="14" width="10" height="10" rx="1.5" fill="#E3E8F0"/>
-    <rect x="57" y="64" width="10" height="10" rx="1.5" fill="#E3E8F0"/>
-    <rect x="57" y="125" width="10" height="10" rx="1.5" fill="#E3E8F0"/>
-    <rect x="70" y="14" width="60" height="10" rx="1.5" fill="#E3E8F0"/>
-    <rect x="70" y="64" width="60" height="10" rx="1.5" fill="#E3E8F0"/>
-    <rect x="70" y="125" width="60" height="10" rx="1.5" fill="#E3E8F0"/>
-    <path d="M57 32.5C57 31.6716 57.6716 31 58.5 31H208.5C209.328 31 210 31.6716 210 32.5V54.5C210 55.3284 209.328 56 208.5 56H58.5C57.6716 56 57 55.3284 57 54.5V32.5Z" fill="#E3E8F0"/>
-    <path d="M0 8C0 3.58173 3.58172 0 8 0H45C45.5523 0 46 0.447715 46 1V147C46 147.552 45.5523 148 45 148H8C3.58172 148 0 144.418 0 140V8Z" fill="#E3E8F0"/>
-    <rect x="57" y="82" width="47" height="35" rx="2" fill="#E3E8F0" mask="url(#mountains)" />
+    <rect x="0.5" y="0.5" width="220" height="147" rx="7.5" stroke="currentColor"/>
+    <rect x="57" y="14" width="10" height="10" rx="1.5" fill="currentColor"/>
+    <rect x="57" y="64" width="10" height="10" rx="1.5" fill="currentColor"/>
+    <rect x="57" y="125" width="10" height="10" rx="1.5" fill="currentColor"/>
+    <rect x="70" y="14" width="60" height="10" rx="1.5" fill="currentColor"/>
+    <rect x="70" y="64" width="60" height="10" rx="1.5" fill="currentColor"/>
+    <rect x="70" y="125" width="60" height="10" rx="1.5" fill="currentColor"/>
+    <path d="M57 32.5C57 31.6716 57.6716 31 58.5 31H208.5C209.328 31 210 31.6716 210 32.5V54.5C210 55.3284 209.328 56 208.5 56H58.5C57.6716 56 57 55.3284 57 54.5V32.5Z" fill="currentColor"/>
+    <path d="M0 8C0 3.58173 3.58172 0 8 0H45C45.5523 0 46 0.447715 46 1V147C46 147.552 45.5523 148 45 148H8C3.58172 148 0 144.418 0 140V8Z" fill="currentColor"/>
+    <rect x="57" y="82" width="47" height="35" rx="2" fill="currentColor" mask="url(#mountains)" />
 </svg>
diff --git a/src/async-components/views/dialogs/security/CreateSecretStorageDialog.tsx b/src/async-components/views/dialogs/security/CreateSecretStorageDialog.tsx
index 9abb4d147dd..dc7d77dbe65 100644
--- a/src/async-components/views/dialogs/security/CreateSecretStorageDialog.tsx
+++ b/src/async-components/views/dialogs/security/CreateSecretStorageDialog.tsx
@@ -692,13 +692,6 @@ export default class CreateSecretStorageDialog extends React.PureComponent<IProp
 
         let titleClass: string | string[] | undefined;
         switch (this.state.phase) {
-            case Phase.Passphrase:
-            case Phase.PassphraseConfirm:
-                titleClass = ["mx_CreateSecretStorageDialog_titleWithIcon"];
-                break;
-            case Phase.ShowKey:
-                titleClass = ["mx_CreateSecretStorageDialog_titleWithIcon"];
-                break;
             case Phase.ChooseKeyPassphrase:
                 titleClass = "mx_CreateSecretStorageDialog_centeredTitle";
                 break;
diff --git a/src/components/views/beacon/RoomCallBanner.tsx b/src/components/views/beacon/RoomCallBanner.tsx
index 25109a0a5a6..e8b6895720d 100644
--- a/src/components/views/beacon/RoomCallBanner.tsx
+++ b/src/components/views/beacon/RoomCallBanner.tsx
@@ -9,6 +9,7 @@ Please see LICENSE files in the repository root for full details.
 import React, { useCallback } from "react";
 import { type Room } from "matrix-js-sdk/src/matrix";
 import { logger } from "matrix-js-sdk/src/logger";
+import { VideoCallSolidIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 
 import { _t } from "../../../languageHandler";
 import AccessibleButton, { type ButtonEvent } from "../elements/AccessibleButton";
@@ -66,7 +67,10 @@ const RoomCallBannerInner: React.FC<RoomCallBannerProps> = ({ roomId, call }) =>
     return (
         <div className="mx_RoomCallBanner" onClick={onClick}>
             <div className="mx_RoomCallBanner_text">
-                <span className="mx_RoomCallBanner_label">{_t("voip|video_call")}</span>
+                <span className="mx_RoomCallBanner_label">
+                    <VideoCallSolidIcon />
+                    {_t("voip|video_call")}
+                </span>
                 <SessionDuration session={call.session} />
             </div>
 
diff --git a/src/components/views/elements/ImageView.tsx b/src/components/views/elements/ImageView.tsx
index e88a1c066ea..ac13f04bc3c 100644
--- a/src/components/views/elements/ImageView.tsx
+++ b/src/components/views/elements/ImageView.tsx
@@ -11,6 +11,15 @@ Please see LICENSE files in the repository root for full details.
 import React, { type JSX, createRef, type CSSProperties, useEffect } from "react";
 import FocusLock from "react-focus-lock";
 import { type MatrixEvent } from "matrix-js-sdk/src/matrix";
+import {
+    CloseIcon,
+    DownloadIcon,
+    OverflowHorizontalIcon,
+    RotateLeftIcon,
+    RotateRightIcon,
+    ZoomInIcon,
+    ZoomOutIcon,
+} from "@vector-im/compound-design-tokens/assets/web/icons";
 
 import { _t } from "../../../languageHandler";
 import MemberAvatar from "../avatars/MemberAvatar";
@@ -501,25 +510,12 @@ export default class ImageView extends React.Component<IProps, IState> {
                     onClick={this.onOpenContextMenu}
                     ref={this.contextMenuButton}
                     isExpanded={this.state.contextMenuDisplayed}
-                />
+                >
+                    <OverflowHorizontalIcon />
+                </ContextMenuTooltipButton>
             );
         }
 
-        const zoomOutButton = (
-            <AccessibleButton
-                className="mx_ImageView_button mx_ImageView_button_zoomOut"
-                title={_t("action|zoom_out")}
-                onClick={this.onZoomOutClick}
-            />
-        );
-        const zoomInButton = (
-            <AccessibleButton
-                className="mx_ImageView_button mx_ImageView_button_zoomIn"
-                title={_t("action|zoom_in")}
-                onClick={this.onZoomInClick}
-            />
-        );
-
         let title: JSX.Element | undefined;
         if (this.props.mxEvent?.getContent()) {
             title = (
@@ -544,18 +540,34 @@ export default class ImageView extends React.Component<IProps, IState> {
                     {info}
                     {title}
                     <div className="mx_ImageView_toolbar">
-                        {zoomOutButton}
-                        {zoomInButton}
                         <AccessibleButton
-                            className="mx_ImageView_button mx_ImageView_button_rotateCCW"
+                            className="mx_ImageView_button"
+                            title={_t("action|zoom_out")}
+                            onClick={this.onZoomOutClick}
+                        >
+                            <ZoomOutIcon />
+                        </AccessibleButton>
+                        <AccessibleButton
+                            className="mx_ImageView_button"
+                            title={_t("action|zoom_in")}
+                            onClick={this.onZoomInClick}
+                        >
+                            <ZoomInIcon />
+                        </AccessibleButton>
+                        <AccessibleButton
+                            className="mx_ImageView_button"
                             title={_t("lightbox|rotate_left")}
                             onClick={this.onRotateCounterClockwiseClick}
-                        />
+                        >
+                            <RotateLeftIcon />
+                        </AccessibleButton>
                         <AccessibleButton
-                            className="mx_ImageView_button mx_ImageView_button_rotateCW"
+                            className="mx_ImageView_button"
                             title={_t("lightbox|rotate_right")}
                             onClick={this.onRotateClockwiseClick}
-                        />
+                        >
+                            <RotateRightIcon />
+                        </AccessibleButton>
                         <DownloadButton
                             url={this.props.src}
                             fileName={this.props.name}
@@ -567,7 +579,9 @@ export default class ImageView extends React.Component<IProps, IState> {
                             className="mx_ImageView_button mx_ImageView_button_close"
                             title={_t("action|close")}
                             onClick={this.props.onFinished}
-                        />
+                        >
+                            <CloseIcon />
+                        </AccessibleButton>
                         {this.renderContextMenu()}
                     </div>
                 </div>
@@ -612,10 +626,12 @@ export const DownloadButton: React.FC<DownloadButtonProps> = ({ url, fileName, m
 
     return (
         <AccessibleButton
-            className="mx_ImageView_button mx_ImageView_button_download"
+            className="mx_ImageView_button"
             title={loading ? _t("timeline|download_action_downloading") : _t("action|download")}
             onClick={download}
             disabled={loading}
-        />
+        >
+            <DownloadIcon />
+        </AccessibleButton>
     );
 };
diff --git a/src/components/views/messages/CallEvent.tsx b/src/components/views/messages/CallEvent.tsx
index 2bdd0a82452..b7eb0be699f 100644
--- a/src/components/views/messages/CallEvent.tsx
+++ b/src/components/views/messages/CallEvent.tsx
@@ -7,6 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React, { type Ref, useCallback, useContext, useMemo, type JSX } from "react";
+import { VideoCallSolidIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 
 import type { MatrixEvent, RoomMember } from "matrix-js-sdk/src/matrix";
 import { ConnectionState, type ElementCall } from "../../../models/Call";
@@ -166,7 +167,10 @@ export const CallEvent = ({ mxEvent, ref }: CallEventProps): JSX.Element => {
             <div className="mx_CallEvent_wrapper" ref={ref}>
                 <div className="mx_CallEvent mx_CallEvent_inactive">
                     <div className="mx_CallEvent_columns">
-                        <span className="mx_CallEvent_title">{_t("timeline|m.call|video_call_ended")}</span>
+                        <span className="mx_CallEvent_title">
+                            <VideoCallSolidIcon />
+                            {_t("timeline|m.call|video_call_ended")}
+                        </span>
                         <CallDuration delta={latestEvent.getTs() - mxEvent.getTs()} />
                     </div>
                 </div>
diff --git a/src/components/views/rooms/LegacyRoomList.tsx b/src/components/views/rooms/LegacyRoomList.tsx
index aa5b1b2398b..0876d6ae990 100644
--- a/src/components/views/rooms/LegacyRoomList.tsx
+++ b/src/components/views/rooms/LegacyRoomList.tsx
@@ -192,7 +192,9 @@ const DmAuxButton: React.FC<IAuxButtonProps> = ({ tabIndex, dispatcher = default
                     title={_t("action|add_people")}
                     isExpanded={menuDisplayed}
                     ref={handle}
-                />
+                >
+                    <PlusIcon />
+                </ContextMenuTooltipButton>
 
                 {contextMenu}
             </>
@@ -208,7 +210,9 @@ const DmAuxButton: React.FC<IAuxButtonProps> = ({ tabIndex, dispatcher = default
                 className="mx_RoomSublist_auxButton"
                 aria-label={_t("action|start_chat")}
                 title={_t("action|start_chat")}
-            />
+            >
+                <PlusIcon />
+            </AccessibleButton>
         );
     }
 
@@ -375,7 +379,9 @@ const UntaggedAuxButton: React.FC<IAuxButtonProps> = ({ tabIndex }) => {
                     title={_t("room_list|add_room_label")}
                     isExpanded={menuDisplayed}
                     ref={handle}
-                />
+                >
+                    <PlusIcon />
+                </ContextMenuTooltipButton>
 
                 {contextMenu}
             </>
diff --git a/src/components/views/rooms/LegacyRoomListHeader.tsx b/src/components/views/rooms/LegacyRoomListHeader.tsx
index 57093144b19..bf389c4b0c0 100644
--- a/src/components/views/rooms/LegacyRoomListHeader.tsx
+++ b/src/components/views/rooms/LegacyRoomListHeader.tsx
@@ -15,6 +15,8 @@ import {
     SearchIcon,
     UserAddIcon,
     VideoCallSolidIcon,
+    ChevronDownIcon,
+    ChevronUpIcon,
 } from "@vector-im/compound-design-tokens/assets/web/icons";
 
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
@@ -131,7 +133,7 @@ const LegacyRoomListHeader: React.FC<IProps> = ({ onVisibilityChange }) => {
     const elementCallVideoRoomsEnabled = useFeatureEnabled("feature_element_call_video_rooms");
     const pendingActions = usePendingActions();
 
-    const canShowMainMenu = activeSpace || spaceKey === MetaSpace.Home;
+    const canShowMainMenu = !!activeSpace || spaceKey === MetaSpace.Home;
 
     useEffect(() => {
         if (mainMenuDisplayed && !canShowMainMenu) {
@@ -392,7 +394,11 @@ const LegacyRoomListHeader: React.FC<IProps> = ({ onVisibilityChange }) => {
             onClick: openMainMenu,
             isExpanded: mainMenuDisplayed,
             className: "mx_LegacyRoomListHeader_contextMenuButton",
-            children: title,
+            children: (
+                <>
+                    {title} {mainMenuDisplayed ? <ChevronUpIcon /> : <ChevronDownIcon />}
+                </>
+            ),
         };
 
         if (!!activeSpace) {
@@ -422,7 +428,9 @@ const LegacyRoomListHeader: React.FC<IProps> = ({ onVisibilityChange }) => {
                     isExpanded={plusMenuDisplayed}
                     className="mx_LegacyRoomListHeader_plusButton"
                     title={_t("action|add")}
-                />
+                >
+                    <PlusIcon />
+                </ContextMenuTooltipButton>
             )}
 
             {contextMenu}
diff --git a/src/components/views/rooms/LiveContentSummary.tsx b/src/components/views/rooms/LiveContentSummary.tsx
index ada3209f076..1e283d9cd32 100644
--- a/src/components/views/rooms/LiveContentSummary.tsx
+++ b/src/components/views/rooms/LiveContentSummary.tsx
@@ -8,6 +8,7 @@ Please see LICENSE files in the repository root for full details.
 
 import React, { type FC } from "react";
 import classNames from "classnames";
+import { GroupIcon, VideoCallSolidIcon, VoiceCallSolidIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 
 import { _t } from "../../../languageHandler";
 
@@ -30,11 +31,10 @@ export const LiveContentSummary: FC<Props> = ({ type, text, active, participantC
     <span className="mx_LiveContentSummary">
         <span
             className={classNames("mx_LiveContentSummary_text", {
-                mx_LiveContentSummary_text_video: type === LiveContentType.Video,
-                mx_LiveContentSummary_text_voice: type === LiveContentType.Voice,
                 mx_LiveContentSummary_text_active: active,
             })}
         >
+            {type === LiveContentType.Video ? <VideoCallSolidIcon /> : <VoiceCallSolidIcon />}
             {text}
         </span>
         {participantCount > 0 && (
@@ -44,6 +44,7 @@ export const LiveContentSummary: FC<Props> = ({ type, text, active, participantC
                     className="mx_LiveContentSummary_participants"
                     aria-label={_t("voip|n_people_joined", { count: participantCount })}
                 >
+                    <GroupIcon />
                     {participantCount}
                 </span>
             </>
diff --git a/src/components/views/rooms/RoomSublist.tsx b/src/components/views/rooms/RoomSublist.tsx
index e5fd061b190..53c2f6782d9 100644
--- a/src/components/views/rooms/RoomSublist.tsx
+++ b/src/components/views/rooms/RoomSublist.tsx
@@ -13,6 +13,11 @@ import classNames from "classnames";
 import { type Enable, Resizable } from "re-resizable";
 import { type Direction } from "re-resizable/lib/resizer";
 import React, { type JSX, type ComponentType, createRef, type ReactComponentElement, type ReactNode } from "react";
+import {
+    ChevronDownIcon,
+    ChevronRightIcon,
+    OverflowHorizontalIcon,
+} from "@vector-im/compound-design-tokens/assets/web/icons";
 
 import { polyfillTouchEvent } from "../../../@types/polyfill";
 import { KeyBindingAction } from "../../../accessibility/KeyboardShortcuts";
@@ -608,7 +613,9 @@ export default class RoomSublist extends React.Component<IProps, IState> {
                     onClick={this.onOpenMenuClick}
                     title={_t("room_list|sublist_options")}
                     isExpanded={!!this.state.contextMenuPosition}
-                />
+                >
+                    <OverflowHorizontalIcon />
+                </ContextMenuTooltipButton>
                 {contextMenu}
             </React.Fragment>
         );
@@ -642,11 +649,7 @@ export default class RoomSublist extends React.Component<IProps, IState> {
                         addRoomButton = <AuxButtonComponent tabIndex={tabIndex} />;
                     }
 
-                    const collapseClasses = classNames({
-                        mx_RoomSublist_collapseBtn: true,
-                        mx_RoomSublist_collapseBtn_collapsed: !this.state.isExpanded && !this.props.forceExpanded,
-                    });
-
+                    const collapsed = !this.state.isExpanded && !this.props.forceExpanded;
                     const classes = classNames({
                         mx_RoomSublist_headerContainer: true,
                         mx_RoomSublist_headerContainer_withAux: !!addRoomButton,
@@ -682,7 +685,9 @@ export default class RoomSublist extends React.Component<IProps, IState> {
                                         onContextMenu={this.onContextMenu}
                                         title={this.props.isMinimized ? this.props.label : undefined}
                                     >
-                                        <span className={collapseClasses} />
+                                        <span className="mx_RoomSublist_collapseBtn">
+                                            {collapsed ? <ChevronRightIcon /> : <ChevronDownIcon />}
+                                        </span>
                                         <span id={getLabelId(this.props.tagId)}>{this.props.label}</span>
                                     </AccessibleButton>
                                     {this.renderMenu()}
diff --git a/src/components/views/settings/ImageSizePanel.tsx b/src/components/views/settings/ImageSizePanel.tsx
index fea7ec362e1..1b4e5e711fc 100644
--- a/src/components/views/settings/ImageSizePanel.tsx
+++ b/src/components/views/settings/ImageSizePanel.tsx
@@ -15,6 +15,8 @@ import { _t } from "../../../languageHandler";
 import { SettingLevel } from "../../../settings/SettingLevel";
 import { ImageSize } from "../../../settings/enums/ImageSize";
 import { SettingsSubsection } from "./shared/SettingsSubsection";
+import { Icon as ImgSizeNormalIcon } from "../../../../res/img/element-icons/settings/img-size-normal.svg";
+import { Icon as ImgSizeLargeIcon } from "../../../../res/img/element-icons/settings/img-size-large.svg";
 
 interface IState {
     size: ImageSize;
@@ -42,7 +44,7 @@ export default class ImageSizePanel extends React.Component<EmptyObject, IState>
             <SettingsSubsection heading={_t("settings|appearance|timeline_image_size")}>
                 <div className="mx_ImageSizePanel_radios">
                     <label>
-                        <div className="mx_ImageSizePanel_size mx_ImageSizePanel_sizeDefault" />
+                        <ImgSizeNormalIcon className="mx_ImageSizePanel_size" />
                         <StyledRadioButton
                             name="image_size"
                             value={ImageSize.Normal}
@@ -53,7 +55,7 @@ export default class ImageSizePanel extends React.Component<EmptyObject, IState>
                         </StyledRadioButton>
                     </label>
                     <label>
-                        <div className="mx_ImageSizePanel_size mx_ImageSizePanel_sizeLarge" />
+                        <ImgSizeLargeIcon className="mx_ImageSizePanel_size" />
                         <StyledRadioButton
                             name="image_size"
                             value={ImageSize.Large}
diff --git a/src/components/views/toasts/NonUrgentEchoFailureToast.tsx b/src/components/views/toasts/NonUrgentEchoFailureToast.tsx
index 490b251adec..c18afe61c4a 100644
--- a/src/components/views/toasts/NonUrgentEchoFailureToast.tsx
+++ b/src/components/views/toasts/NonUrgentEchoFailureToast.tsx
@@ -7,6 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React from "react";
+import { OfflineIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 
 import { _t } from "../../../languageHandler";
 import AccessibleButton from "../elements/AccessibleButton";
@@ -21,7 +22,7 @@ export default class NonUrgentEchoFailureToast extends React.PureComponent {
     public render(): React.ReactNode {
         return (
             <div className="mx_NonUrgentEchoFailureToast">
-                <span className="mx_NonUrgentEchoFailureToast_icon" />
+                <OfflineIcon />
                 {_t(
                     "error|non_urgent_echo_failure_toast",
                     {},
diff --git a/src/components/views/voip/LegacyCallView/LegacyCallViewHeader.tsx b/src/components/views/voip/LegacyCallView/LegacyCallViewHeader.tsx
index 0c56bd267c9..6659a9bee80 100644
--- a/src/components/views/voip/LegacyCallView/LegacyCallViewHeader.tsx
+++ b/src/components/views/voip/LegacyCallView/LegacyCallViewHeader.tsx
@@ -7,6 +7,12 @@ Please see LICENSE files in the repository root for full details.
 
 import { type Room } from "matrix-js-sdk/src/matrix";
 import React from "react";
+import {
+    PopOutIcon,
+    ExpandIcon,
+    PinSolidIcon,
+    VoiceCallSolidIcon,
+} from "@vector-im/compound-design-tokens/assets/web/icons";
 
 import { _t } from "../../../../languageHandler";
 import RoomAvatar from "../../avatars/RoomAvatar";
@@ -23,24 +29,26 @@ const LegacyCallViewHeaderControls: React.FC<LegacyCallControlsProps> = ({ onExp
         <div className="mx_LegacyCallViewHeader_controls">
             {onMaximize && (
                 <AccessibleButton
-                    className="mx_LegacyCallViewHeader_button mx_LegacyCallViewHeader_button_fullscreen"
+                    className="mx_LegacyCallViewHeader_button"
                     onClick={onMaximize}
                     title={_t("voip|maximise")}
-                />
+                >
+                    <ExpandIcon />
+                </AccessibleButton>
             )}
             {onPin && (
-                <AccessibleButton
-                    className="mx_LegacyCallViewHeader_button mx_LegacyCallViewHeader_button_pin"
-                    onClick={onPin}
-                    title={_t("action|pin")}
-                />
+                <AccessibleButton className="mx_LegacyCallViewHeader_button" onClick={onPin} title={_t("action|pin")}>
+                    <PinSolidIcon />
+                </AccessibleButton>
             )}
             {onExpand && (
                 <AccessibleButton
-                    className="mx_LegacyCallViewHeader_button mx_LegacyCallViewHeader_button_expand"
+                    className="mx_LegacyCallViewHeader_button"
                     onClick={onExpand}
                     title={_t("voip|expand")}
-                />
+                >
+                    <PopOutIcon />
+                </AccessibleButton>
             )}
         </div>
     );
@@ -84,7 +92,9 @@ const LegacyCallViewHeader: React.FC<LegacyCallViewHeaderProps> = ({
     if (!pipMode) {
         return (
             <div className="mx_LegacyCallViewHeader">
-                <div className="mx_LegacyCallViewHeader_icon" />
+                <div className="mx_LegacyCallViewHeader_icon">
+                    <VoiceCallSolidIcon />
+                </div>
                 <span className="mx_LegacyCallViewHeader_text">{_t("action|call")}</span>
                 <LegacyCallViewHeaderControls onMaximize={onMaximize} />
             </div>
diff --git a/test/unit-tests/components/views/dialogs/security/__snapshots__/CreateSecretStorageDialog-test.tsx.snap b/test/unit-tests/components/views/dialogs/security/__snapshots__/CreateSecretStorageDialog-test.tsx.snap
index 5f0d265a2ab..82c0f1a8691 100644
--- a/test/unit-tests/components/views/dialogs/security/__snapshots__/CreateSecretStorageDialog-test.tsx.snap
+++ b/test/unit-tests/components/views/dialogs/security/__snapshots__/CreateSecretStorageDialog-test.tsx.snap
@@ -141,7 +141,7 @@ exports[`CreateSecretStorageDialog handles the happy path 2`] = `
       class="mx_Dialog_header"
     >
       <h1
-        class="mx_Heading_h3 mx_Dialog_title mx_CreateSecretStorageDialog_titleWithIcon"
+        class="mx_Heading_h3 mx_Dialog_title"
         id="mx_BaseDialog_title"
       >
         Save your Recovery Key
diff --git a/test/unit-tests/components/views/elements/__snapshots__/ImageView-test.tsx.snap b/test/unit-tests/components/views/elements/__snapshots__/ImageView-test.tsx.snap
index 40af301ccf7..34df12f2c00 100644
--- a/test/unit-tests/components/views/elements/__snapshots__/ImageView-test.tsx.snap
+++ b/test/unit-tests/components/views/elements/__snapshots__/ImageView-test.tsx.snap
@@ -23,40 +23,154 @@ exports[`<ImageView /> renders correctly 1`] = `
         <div
           aria-describedby="_r_2_"
           aria-label="Zoom out"
-          class="mx_AccessibleButton mx_ImageView_button mx_ImageView_button_zoomOut"
+          class="mx_AccessibleButton mx_ImageView_button"
           role="button"
           tabindex="0"
-        />
+        >
+          <svg
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M13.5 9.5q.425 0 .713.287.288.288.287.713a.97.97 0 0 1-.287.713.97.97 0 0 1-.713.287h-6a.97.97 0 0 1-.713-.287.97.97 0 0 1-.287-.713q0-.425.287-.713A.97.97 0 0 1 7.5 9.5z"
+            />
+            <path
+              clip-rule="evenodd"
+              d="M10.5 3a7.5 7.5 0 0 1 5.963 12.049l3.244 3.244a1 1 0 1 1-1.414 1.414l-3.244-3.244A7.5 7.5 0 1 1 10.5 3m0 2a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11"
+              fill-rule="evenodd"
+            />
+          </svg>
+        </div>
         <div
           aria-label="Zoom in"
-          class="mx_AccessibleButton mx_ImageView_button mx_ImageView_button_zoomIn"
+          class="mx_AccessibleButton mx_ImageView_button"
           role="button"
           tabindex="0"
-        />
+        >
+          <svg
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <g
+              clip-path="url(#a)"
+            >
+              <path
+                d="M10.5 6.5q.425 0 .713.287.288.288.287.713v2h2q.425 0 .713.287.288.288.287.713a.97.97 0 0 1-.287.713.97.97 0 0 1-.713.287h-2v2a.97.97 0 0 1-.287.713.97.97 0 0 1-.713.287.97.97 0 0 1-.713-.287.97.97 0 0 1-.287-.713v-2h-2a.97.97 0 0 1-.713-.287.97.97 0 0 1-.287-.713q0-.425.287-.713A.97.97 0 0 1 7.5 9.5h2v-2q0-.425.287-.713A.97.97 0 0 1 10.5 6.5"
+              />
+              <path
+                clip-rule="evenodd"
+                d="M10.5 3a7.5 7.5 0 0 1 5.963 12.049l3.244 3.244a1 1 0 1 1-1.414 1.414l-3.244-3.244A7.5 7.5 0 1 1 10.5 3m0 2a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11"
+                fill-rule="evenodd"
+              />
+              <path
+                d="M15.05 16.463a7.5 7.5 0 1 1 1.414-1.414l3.243 3.244a1 1 0 0 1-1.414 1.414zM16 10.5a5.5 5.5 0 1 0-11 0 5.5 5.5 0 0 0 11 0"
+              />
+              <path
+                d="M7.875 11.375h1.75v1.75q0 .372.252.623A.85.85 0 0 0 10.5 14a.85.85 0 0 0 .623-.252.85.85 0 0 0 .252-.623v-1.75h1.75a.85.85 0 0 0 .623-.252A.85.85 0 0 0 14 10.5a.85.85 0 0 0-.252-.623.85.85 0 0 0-.623-.252h-1.75v-1.75a.85.85 0 0 0-.252-.623A.85.85 0 0 0 10.5 7a.85.85 0 0 0-.623.252.85.85 0 0 0-.252.623v1.75h-1.75a.85.85 0 0 0-.623.252A.85.85 0 0 0 7 10.5q0 .372.252.623a.85.85 0 0 0 .623.252"
+              />
+            </g>
+            <defs>
+              <clippath
+                id="a"
+              >
+                <path
+                  d="M0 0h24v24H0z"
+                />
+              </clippath>
+            </defs>
+          </svg>
+        </div>
         <div
           aria-label="Rotate Left"
-          class="mx_AccessibleButton mx_ImageView_button mx_ImageView_button_rotateCCW"
+          class="mx_AccessibleButton mx_ImageView_button"
           role="button"
           tabindex="0"
-        />
+        >
+          <svg
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M6.56 7.98C6.1 7.52 5.31 7.6 5 8.17c-.28.51-.5 1.03-.67 1.58-.19.63.31 1.25.96 1.25h.01c.43 0 .82-.28.94-.7q.18-.6.48-1.17c.22-.37.15-.84-.16-1.15M5.31 13h-.02c-.65 0-1.15.62-.96 1.25.16.54.38 1.07.66 1.58.31.57 1.11.66 1.57.2.3-.31.38-.77.17-1.15-.2-.37-.36-.76-.48-1.16a.97.97 0 0 0-.94-.72m2.85 6.02q.765.42 1.59.66c.62.18 1.24-.32 1.24-.96v-.03c0-.43-.28-.82-.7-.94-.4-.12-.78-.28-1.15-.48a.97.97 0 0 0-1.16.17l-.03.03c-.45.45-.36 1.24.21 1.55M13 4.07v-.66c0-.89-1.08-1.34-1.71-.71L9.17 4.83c-.4.4-.4 1.04 0 1.43l2.13 2.08c.63.62 1.7.17 1.7-.72V6.09c2.84.48 5 2.94 5 5.91 0 2.73-1.82 5.02-4.32 5.75a.97.97 0 0 0-.68.94v.02c0 .65.61 1.14 1.23.96A7.976 7.976 0 0 0 20 12c0-4.08-3.05-7.44-7-7.93"
+            />
+          </svg>
+        </div>
         <div
           aria-label="Rotate Right"
-          class="mx_AccessibleButton mx_ImageView_button mx_ImageView_button_rotateCW"
+          class="mx_AccessibleButton mx_ImageView_button"
           role="button"
           tabindex="0"
-        />
+        >
+          <svg
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <g
+              clip-path="url(#a)"
+            >
+              <path
+                d="M14.83 4.83 12.7 2.7c-.62-.62-1.7-.18-1.7.71v.66C7.06 4.56 4 7.92 4 12c0 3.64 2.43 6.71 5.77 7.68.62.18 1.23-.32 1.23-.96v-.03a.97.97 0 0 0-.68-.94A5.98 5.98 0 0 1 6 12c0-2.97 2.16-5.43 5-5.91v1.53c0 .89 1.07 1.33 1.7.71l2.13-2.08a.99.99 0 0 0 0-1.42m4.84 4.93q-.24-.825-.66-1.59c-.31-.57-1.1-.66-1.56-.2l-.01.01c-.31.31-.38.78-.17 1.16.2.37.36.76.48 1.16.12.42.51.7.94.7h.02c.65 0 1.15-.62.96-1.24M13 18.68v.02c0 .65.62 1.14 1.24.96q.825-.24 1.59-.66c.57-.31.66-1.1.2-1.56l-.02-.02a.97.97 0 0 0-1.16-.17c-.37.21-.76.37-1.16.49-.41.12-.69.51-.69.94m4.44-2.65c.46.46 1.25.37 1.56-.2.28-.51.5-1.04.67-1.59.18-.62-.31-1.24-.96-1.24h-.02c-.44 0-.82.28-.94.7q-.18.6-.48 1.17c-.21.38-.13.86.17 1.16"
+              />
+            </g>
+            <defs>
+              <clippath
+                id="a"
+              >
+                <path
+                  d="M0 0h24v24H0z"
+                />
+              </clippath>
+            </defs>
+          </svg>
+        </div>
         <div
           aria-label="Download"
-          class="mx_AccessibleButton mx_ImageView_button mx_ImageView_button_download"
+          class="mx_AccessibleButton mx_ImageView_button"
           role="button"
           tabindex="0"
-        />
+        >
+          <svg
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M12 15.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213l-3.6-3.6a.95.95 0 0 1-.275-.7q0-.425.275-.7.274-.275.712-.288t.713.263L11 12.15V5q0-.424.287-.713A.97.97 0 0 1 12 4q.424 0 .713.287Q13 4.576 13 5v7.15l1.875-1.875q.274-.274.713-.263.437.014.712.288a.95.95 0 0 1 .275.7.95.95 0 0 1-.275.7l-3.6 3.6q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063M6 20q-.824 0-1.412-.587A1.93 1.93 0 0 1 4 18v-2q0-.424.287-.713A.97.97 0 0 1 5 15q.424 0 .713.287Q6 15.576 6 16v2h12v-2q0-.424.288-.713A.97.97 0 0 1 19 15q.424 0 .712.287.288.288.288.713v2q0 .824-.587 1.413A1.93 1.93 0 0 1 18 20z"
+            />
+          </svg>
+        </div>
         <div
           aria-label="Close"
           class="mx_AccessibleButton mx_ImageView_button mx_ImageView_button_close"
           role="button"
           tabindex="0"
-        />
+        >
+          <svg
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414"
+            />
+          </svg>
+        </div>
       </div>
     </div>
     <div
diff --git a/test/unit-tests/components/views/messages/__snapshots__/MImageBody-test.tsx.snap b/test/unit-tests/components/views/messages/__snapshots__/MImageBody-test.tsx.snap
index c22901a747d..5b2befbd613 100644
--- a/test/unit-tests/components/views/messages/__snapshots__/MImageBody-test.tsx.snap
+++ b/test/unit-tests/components/views/messages/__snapshots__/MImageBody-test.tsx.snap
@@ -110,34 +110,136 @@ exports[`<MImageBody/> should open ImageView using thumbnail for encrypted svg 1
     >
       <div
         aria-label="Zoom out"
-        class="mx_AccessibleButton mx_ImageView_button mx_ImageView_button_zoomOut"
+        class="mx_AccessibleButton mx_ImageView_button"
         role="button"
         tabindex="0"
-      />
+      >
+        <svg
+          fill="currentColor"
+          height="1em"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M13.5 9.5q.425 0 .713.287.288.288.287.713a.97.97 0 0 1-.287.713.97.97 0 0 1-.713.287h-6a.97.97 0 0 1-.713-.287.97.97 0 0 1-.287-.713q0-.425.287-.713A.97.97 0 0 1 7.5 9.5z"
+          />
+          <path
+            clip-rule="evenodd"
+            d="M10.5 3a7.5 7.5 0 0 1 5.963 12.049l3.244 3.244a1 1 0 1 1-1.414 1.414l-3.244-3.244A7.5 7.5 0 1 1 10.5 3m0 2a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11"
+            fill-rule="evenodd"
+          />
+        </svg>
+      </div>
       <div
         aria-label="Zoom in"
-        class="mx_AccessibleButton mx_ImageView_button mx_ImageView_button_zoomIn"
+        class="mx_AccessibleButton mx_ImageView_button"
         role="button"
         tabindex="0"
-      />
+      >
+        <svg
+          fill="currentColor"
+          height="1em"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <g
+            clip-path="url(#a)"
+          >
+            <path
+              d="M10.5 6.5q.425 0 .713.287.288.288.287.713v2h2q.425 0 .713.287.288.288.287.713a.97.97 0 0 1-.287.713.97.97 0 0 1-.713.287h-2v2a.97.97 0 0 1-.287.713.97.97 0 0 1-.713.287.97.97 0 0 1-.713-.287.97.97 0 0 1-.287-.713v-2h-2a.97.97 0 0 1-.713-.287.97.97 0 0 1-.287-.713q0-.425.287-.713A.97.97 0 0 1 7.5 9.5h2v-2q0-.425.287-.713A.97.97 0 0 1 10.5 6.5"
+            />
+            <path
+              clip-rule="evenodd"
+              d="M10.5 3a7.5 7.5 0 0 1 5.963 12.049l3.244 3.244a1 1 0 1 1-1.414 1.414l-3.244-3.244A7.5 7.5 0 1 1 10.5 3m0 2a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11"
+              fill-rule="evenodd"
+            />
+            <path
+              d="M15.05 16.463a7.5 7.5 0 1 1 1.414-1.414l3.243 3.244a1 1 0 0 1-1.414 1.414zM16 10.5a5.5 5.5 0 1 0-11 0 5.5 5.5 0 0 0 11 0"
+            />
+            <path
+              d="M7.875 11.375h1.75v1.75q0 .372.252.623A.85.85 0 0 0 10.5 14a.85.85 0 0 0 .623-.252.85.85 0 0 0 .252-.623v-1.75h1.75a.85.85 0 0 0 .623-.252A.85.85 0 0 0 14 10.5a.85.85 0 0 0-.252-.623.85.85 0 0 0-.623-.252h-1.75v-1.75a.85.85 0 0 0-.252-.623A.85.85 0 0 0 10.5 7a.85.85 0 0 0-.623.252.85.85 0 0 0-.252.623v1.75h-1.75a.85.85 0 0 0-.623.252A.85.85 0 0 0 7 10.5q0 .372.252.623a.85.85 0 0 0 .623.252"
+            />
+          </g>
+          <defs>
+            <clippath
+              id="a"
+            >
+              <path
+                d="M0 0h24v24H0z"
+              />
+            </clippath>
+          </defs>
+        </svg>
+      </div>
       <div
         aria-label="Rotate Left"
-        class="mx_AccessibleButton mx_ImageView_button mx_ImageView_button_rotateCCW"
+        class="mx_AccessibleButton mx_ImageView_button"
         role="button"
         tabindex="0"
-      />
+      >
+        <svg
+          fill="currentColor"
+          height="1em"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M6.56 7.98C6.1 7.52 5.31 7.6 5 8.17c-.28.51-.5 1.03-.67 1.58-.19.63.31 1.25.96 1.25h.01c.43 0 .82-.28.94-.7q.18-.6.48-1.17c.22-.37.15-.84-.16-1.15M5.31 13h-.02c-.65 0-1.15.62-.96 1.25.16.54.38 1.07.66 1.58.31.57 1.11.66 1.57.2.3-.31.38-.77.17-1.15-.2-.37-.36-.76-.48-1.16a.97.97 0 0 0-.94-.72m2.85 6.02q.765.42 1.59.66c.62.18 1.24-.32 1.24-.96v-.03c0-.43-.28-.82-.7-.94-.4-.12-.78-.28-1.15-.48a.97.97 0 0 0-1.16.17l-.03.03c-.45.45-.36 1.24.21 1.55M13 4.07v-.66c0-.89-1.08-1.34-1.71-.71L9.17 4.83c-.4.4-.4 1.04 0 1.43l2.13 2.08c.63.62 1.7.17 1.7-.72V6.09c2.84.48 5 2.94 5 5.91 0 2.73-1.82 5.02-4.32 5.75a.97.97 0 0 0-.68.94v.02c0 .65.61 1.14 1.23.96A7.976 7.976 0 0 0 20 12c0-4.08-3.05-7.44-7-7.93"
+          />
+        </svg>
+      </div>
       <div
         aria-label="Rotate Right"
-        class="mx_AccessibleButton mx_ImageView_button mx_ImageView_button_rotateCW"
+        class="mx_AccessibleButton mx_ImageView_button"
         role="button"
         tabindex="0"
-      />
+      >
+        <svg
+          fill="currentColor"
+          height="1em"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <g
+            clip-path="url(#a)"
+          >
+            <path
+              d="M14.83 4.83 12.7 2.7c-.62-.62-1.7-.18-1.7.71v.66C7.06 4.56 4 7.92 4 12c0 3.64 2.43 6.71 5.77 7.68.62.18 1.23-.32 1.23-.96v-.03a.97.97 0 0 0-.68-.94A5.98 5.98 0 0 1 6 12c0-2.97 2.16-5.43 5-5.91v1.53c0 .89 1.07 1.33 1.7.71l2.13-2.08a.99.99 0 0 0 0-1.42m4.84 4.93q-.24-.825-.66-1.59c-.31-.57-1.1-.66-1.56-.2l-.01.01c-.31.31-.38.78-.17 1.16.2.37.36.76.48 1.16.12.42.51.7.94.7h.02c.65 0 1.15-.62.96-1.24M13 18.68v.02c0 .65.62 1.14 1.24.96q.825-.24 1.59-.66c.57-.31.66-1.1.2-1.56l-.02-.02a.97.97 0 0 0-1.16-.17c-.37.21-.76.37-1.16.49-.41.12-.69.51-.69.94m4.44-2.65c.46.46 1.25.37 1.56-.2.28-.51.5-1.04.67-1.59.18-.62-.31-1.24-.96-1.24h-.02c-.44 0-.82.28-.94.7q-.18.6-.48 1.17c-.21.38-.13.86.17 1.16"
+            />
+          </g>
+          <defs>
+            <clippath
+              id="a"
+            >
+              <path
+                d="M0 0h24v24H0z"
+              />
+            </clippath>
+          </defs>
+        </svg>
+      </div>
       <div
         aria-label="Download"
-        class="mx_AccessibleButton mx_ImageView_button mx_ImageView_button_download"
+        class="mx_AccessibleButton mx_ImageView_button"
         role="button"
         tabindex="0"
-      />
+      >
+        <svg
+          fill="currentColor"
+          height="1em"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M12 15.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213l-3.6-3.6a.95.95 0 0 1-.275-.7q0-.425.275-.7.274-.275.712-.288t.713.263L11 12.15V5q0-.424.287-.713A.97.97 0 0 1 12 4q.424 0 .713.287Q13 4.576 13 5v7.15l1.875-1.875q.274-.274.713-.263.437.014.712.288a.95.95 0 0 1 .275.7.95.95 0 0 1-.275.7l-3.6 3.6q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063M6 20q-.824 0-1.412-.587A1.93 1.93 0 0 1 4 18v-2q0-.424.287-.713A.97.97 0 0 1 5 15q.424 0 .713.287Q6 15.576 6 16v2h12v-2q0-.424.288-.713A.97.97 0 0 1 19 15q.424 0 .712.287.288.288.288.713v2q0 .824-.587 1.413A1.93 1.93 0 0 1 18 20z"
+          />
+        </svg>
+      </div>
       <div
         aria-expanded="false"
         aria-haspopup="true"
@@ -145,13 +247,37 @@ exports[`<MImageBody/> should open ImageView using thumbnail for encrypted svg 1
         class="mx_AccessibleButton mx_ImageView_button mx_ImageView_button_more"
         role="button"
         tabindex="0"
-      />
+      >
+        <svg
+          fill="currentColor"
+          height="1em"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+          />
+        </svg>
+      </div>
       <div
         aria-label="Close"
         class="mx_AccessibleButton mx_ImageView_button mx_ImageView_button_close"
         role="button"
         tabindex="0"
-      />
+      >
+        <svg
+          fill="currentColor"
+          height="1em"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414"
+          />
+        </svg>
+      </div>
     </div>
   </div>
   <div
diff --git a/test/unit-tests/components/views/rooms/RoomListHeader-test.tsx b/test/unit-tests/components/views/rooms/RoomListHeader-test.tsx
index ab1cac83a7a..b5fd449f50e 100644
--- a/test/unit-tests/components/views/rooms/RoomListHeader-test.tsx
+++ b/test/unit-tests/components/views/rooms/RoomListHeader-test.tsx
@@ -48,10 +48,8 @@ const setupMainMenu = async (client: MatrixClient, testSpace: Room): Promise<Ren
 
     const wrapper = render(<RoomListHeader />);
 
-    expect(wrapper.container.textContent).toBe("Test Space");
-    act(() => {
-        wrapper.container.querySelector<HTMLElement>('[aria-label="Test Space menu"]')?.click();
-    });
+    expect(wrapper.getByText("Test Space")).toBeInTheDocument();
+    wrapper.getByLabelText("Test Space menu").click();
 
     return wrapper;
 };
@@ -64,9 +62,9 @@ const setupPlusMenu = async (client: MatrixClient, testSpace: Room): Promise<Ren
 
     const wrapper = render(<RoomListHeader />);
 
-    expect(wrapper.container.textContent).toBe("Test Space");
+    expect(wrapper.getByText("Test Space")).toBeInTheDocument();
     act(() => {
-        wrapper.container.querySelector<HTMLElement>('[aria-label="Add"]')?.click();
+        wrapper.getByLabelText("Add")?.click();
     });
 
     return wrapper;
@@ -81,7 +79,7 @@ const checkMenuLabels = (items: NodeListOf<Element>, labelArray: Array<string>)
     expect(items).toHaveLength(labelArray.length);
 
     const checkLabel = (item: Element, label: string) => {
-        expect(item.querySelector(".mx_IconizedContextMenu_label")?.textContent).toBe(label);
+        expect(item.querySelector(".mx_IconizedContextMenu_label")).toHaveTextContent(label);
     };
 
     labelArray.forEach((label, index) => {
@@ -116,13 +114,13 @@ describe("RoomListHeader", () => {
 
         const { container } = render(<RoomListHeader />);
 
-        expect(container.textContent).toBe("Home");
+        expect(container).toHaveTextContent("Home");
         fireEvent.click(screen.getByLabelText("Home options"));
 
         const menu = screen.getByRole("menu");
         const items = menu.querySelectorAll(".mx_IconizedContextMenu_item");
         expect(items).toHaveLength(1);
-        expect(items[0].textContent).toBe("Show all rooms");
+        expect(items[0]).toHaveTextContent("Show all rooms");
     });
 
     it("renders a main menu for spaces", async () => {
diff --git a/test/unit-tests/components/views/settings/tabs/user/__snapshots__/AppearanceUserSettingsTab-test.tsx.snap b/test/unit-tests/components/views/settings/tabs/user/__snapshots__/AppearanceUserSettingsTab-test.tsx.snap
index 9df918d95d2..ebfe73ef7e4 100644
--- a/test/unit-tests/components/views/settings/tabs/user/__snapshots__/AppearanceUserSettingsTab-test.tsx.snap
+++ b/test/unit-tests/components/views/settings/tabs/user/__snapshots__/AppearanceUserSettingsTab-test.tsx.snap
@@ -829,7 +829,7 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
               >
                 <label>
                   <div
-                    class="mx_ImageSizePanel_size mx_ImageSizePanel_sizeDefault"
+                    class="mx_ImageSizePanel_size"
                   />
                   <label
                     class="mx_StyledRadioButton mx_StyledRadioButton_enabled mx_StyledRadioButton_checked"
@@ -855,7 +855,7 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
                 </label>
                 <label>
                   <div
-                    class="mx_ImageSizePanel_size mx_ImageSizePanel_sizeLarge"
+                    class="mx_ImageSizePanel_size"
                   />
                   <label
                     class="mx_StyledRadioButton mx_StyledRadioButton_enabled"