diff --git a/.eslintrc.js b/.eslintrc.js
index a1fe472db2..10e8238a77 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -46,6 +46,7 @@ module.exports = {
 
         "import/no-duplicates": ["error"],
         // Ban matrix-js-sdk/src imports in favour of matrix-js-sdk/src/matrix imports to prevent unleashing hell.
+        // Ban compound-design-tokens raw svg imports in favour of their React component counterparts
         "no-restricted-imports": [
             "error",
             {
@@ -150,6 +151,10 @@ module.exports = {
                         message:
                             "This regex doesn't actually test for emoji. See the docs at https://emojibase.dev/docs/regex/ and prefer our own EMOJI_REGEX from HtmlUtils.",
                     },
+                    {
+                        group: ["@vector-im/compound-design-tokens/icons/*"],
+                        message: "Please use @vector-im/compound-design-tokens/assets/web/icons/* instead",
+                    },
                 ],
             },
         ],
diff --git a/src/components/structures/RoomStatusBar.tsx b/src/components/structures/RoomStatusBar.tsx
index cb47fd97d7..a3f8ac5165 100644
--- a/src/components/structures/RoomStatusBar.tsx
+++ b/src/components/structures/RoomStatusBar.tsx
@@ -269,7 +269,7 @@ export default class RoomStatusBar extends React.PureComponent<IProps, IState> {
                 <div className="mx_RoomStatusBar">
                     <div role="alert">
                         <div className="mx_RoomStatusBar_connectionLostBar">
-                            <WarningIcon width="24" height="24" />
+                            <WarningIcon width="24px" height="24px" />
                             <div>
                                 <div className="mx_RoomStatusBar_connectionLostBar_title">
                                     {_t("room|status_bar|server_connectivity_lost_title")}
diff --git a/src/components/views/auth/LoginWithQRFlow.tsx b/src/components/views/auth/LoginWithQRFlow.tsx
index 92a397d239..72511f2ccb 100644
--- a/src/components/views/auth/LoginWithQRFlow.tsx
+++ b/src/components/views/auth/LoginWithQRFlow.tsx
@@ -12,8 +12,8 @@ import {
     LegacyRendezvousFailureReason,
     MSC4108FailureReason,
 } from "matrix-js-sdk/src/rendezvous";
-import { Icon as ChevronLeftIcon } from "@vector-im/compound-design-tokens/icons/chevron-left.svg";
-import { Icon as CheckCircleSolidIcon } from "@vector-im/compound-design-tokens/icons/check-circle-solid.svg";
+import ChevronLeftIcon from "@vector-im/compound-design-tokens/assets/web/icons/chevron-left";
+import CheckCircleSolidIcon from "@vector-im/compound-design-tokens/assets/web/icons/check-circle-solid";
 import ErrorIcon from "@vector-im/compound-design-tokens/assets/web/icons/error";
 import { Heading, MFAInput, Text } from "@vector-im/compound-web";
 import classNames from "classnames";
diff --git a/src/components/views/messages/MessageActionBar.tsx b/src/components/views/messages/MessageActionBar.tsx
index ee7ce93243..8bddee8352 100644
--- a/src/components/views/messages/MessageActionBar.tsx
+++ b/src/components/views/messages/MessageActionBar.tsx
@@ -21,8 +21,8 @@ import {
     EventType,
 } from "matrix-js-sdk/src/matrix";
 import classNames from "classnames";
-import { Icon as PinIcon } from "@vector-im/compound-design-tokens/icons/pin.svg";
-import { Icon as UnpinIcon } from "@vector-im/compound-design-tokens/icons/unpin.svg";
+import PinIcon from "@vector-im/compound-design-tokens/assets/web/icons/pin";
+import UnpinIcon from "@vector-im/compound-design-tokens/assets/web/icons/unpin";
 
 import { Icon as ContextMenuIcon } from "../../../../res/img/element-icons/context-menu.svg";
 import { Icon as EditIcon } from "../../../../res/img/element-icons/room/message-bar/edit.svg";
diff --git a/src/components/views/messages/PinnedMessageBadge.tsx b/src/components/views/messages/PinnedMessageBadge.tsx
index bfe1919597..e1d9411a9e 100644
--- a/src/components/views/messages/PinnedMessageBadge.tsx
+++ b/src/components/views/messages/PinnedMessageBadge.tsx
@@ -7,7 +7,7 @@
  */
 
 import React, { JSX } from "react";
-import { Icon as PinIcon } from "@vector-im/compound-design-tokens/icons/pin-solid.svg";
+import PinIcon from "@vector-im/compound-design-tokens/assets/web/icons/pin-solid";
 
 import { _t } from "../../../languageHandler.tsx";
 
@@ -17,7 +17,7 @@ import { _t } from "../../../languageHandler.tsx";
 export function PinnedMessageBadge(): JSX.Element {
     return (
         <div className="mx_PinnedMessageBadge">
-            <PinIcon width="16" />
+            <PinIcon width="16px" height="16px" />
             {_t("room|pinned_message_badge")}
         </div>
     );
diff --git a/src/components/views/right_panel/BaseCard.tsx b/src/components/views/right_panel/BaseCard.tsx
index 99cf5cdbf3..30ec02a247 100644
--- a/src/components/views/right_panel/BaseCard.tsx
+++ b/src/components/views/right_panel/BaseCard.tsx
@@ -10,7 +10,7 @@ import React, { forwardRef, ReactNode, KeyboardEvent, Ref, MouseEvent } from "re
 import classNames from "classnames";
 import { IconButton, Text } from "@vector-im/compound-web";
 import CloseIcon from "@vector-im/compound-design-tokens/assets/web/icons/close";
-import { Icon as ChevronLeftIcon } from "@vector-im/compound-design-tokens/icons/chevron-left.svg";
+import ChevronLeftIcon from "@vector-im/compound-design-tokens/assets/web/icons/chevron-left";
 
 import AutoHideScrollbar from "../../structures/AutoHideScrollbar";
 import { _t } from "../../../languageHandler";
diff --git a/src/components/views/right_panel/ExtensionsCard.tsx b/src/components/views/right_panel/ExtensionsCard.tsx
index 83c44b0c2d..0c6b3ecde0 100644
--- a/src/components/views/right_panel/ExtensionsCard.tsx
+++ b/src/components/views/right_panel/ExtensionsCard.tsx
@@ -10,8 +10,8 @@ import React, { useEffect, useMemo, useState } from "react";
 import { Room } from "matrix-js-sdk/src/matrix";
 import classNames from "classnames";
 import { Button, Link, Separator, Text } from "@vector-im/compound-web";
-import { Icon as PlusIcon } from "@vector-im/compound-design-tokens/icons/plus.svg";
-import { Icon as ExtensionsIcon } from "@vector-im/compound-design-tokens/icons/extensions.svg";
+import PlusIcon from "@vector-im/compound-design-tokens/assets/web/icons/plus";
+import ExtensionsIcon from "@vector-im/compound-design-tokens/assets/web/icons/extensions";
 
 import BaseCard from "./BaseCard";
 import WidgetUtils, { useWidgets } from "../../../utils/WidgetUtils";
diff --git a/src/components/views/right_panel/RoomSummaryCard.tsx b/src/components/views/right_panel/RoomSummaryCard.tsx
index d1c3d2df72..fc879c3254 100644
--- a/src/components/views/right_panel/RoomSummaryCard.tsx
+++ b/src/components/views/right_panel/RoomSummaryCard.tsx
@@ -21,10 +21,10 @@ import {
     Form,
 } from "@vector-im/compound-web";
 import FavouriteIcon from "@vector-im/compound-design-tokens/assets/web/icons/favourite";
-import { Icon as UserAddIcon } from "@vector-im/compound-design-tokens/icons/user-add.svg";
+import UserAddIcon from "@vector-im/compound-design-tokens/assets/web/icons/user-add";
 import LinkIcon from "@vector-im/compound-design-tokens/assets/web/icons/link";
 import SettingsIcon from "@vector-im/compound-design-tokens/assets/web/icons/settings";
-import { Icon as ExportArchiveIcon } from "@vector-im/compound-design-tokens/icons/export-archive.svg";
+import ExportArchiveIcon from "@vector-im/compound-design-tokens/assets/web/icons/export-archive";
 import LeaveIcon from "@vector-im/compound-design-tokens/assets/web/icons/leave";
 import FilesIcon from "@vector-im/compound-design-tokens/assets/web/icons/files";
 import ExtensionsIcon from "@vector-im/compound-design-tokens/assets/web/icons/extensions";
@@ -32,11 +32,11 @@ import UserProfileIcon from "@vector-im/compound-design-tokens/assets/web/icons/
 import ThreadsIcon from "@vector-im/compound-design-tokens/assets/web/icons/threads";
 import PollsIcon from "@vector-im/compound-design-tokens/assets/web/icons/polls";
 import PinIcon from "@vector-im/compound-design-tokens/assets/web/icons/pin";
-import { Icon as LockIcon } from "@vector-im/compound-design-tokens/icons/lock-solid.svg";
-import { Icon as LockOffIcon } from "@vector-im/compound-design-tokens/icons/lock-off.svg";
+import LockIcon from "@vector-im/compound-design-tokens/assets/web/icons/lock-solid";
+import LockOffIcon from "@vector-im/compound-design-tokens/assets/web/icons/lock-off";
 import PublicIcon from "@vector-im/compound-design-tokens/assets/web/icons/public";
 import ErrorIcon from "@vector-im/compound-design-tokens/assets/web/icons/error";
-import { Icon as ChevronDownIcon } from "@vector-im/compound-design-tokens/icons/chevron-down.svg";
+import ChevronDownIcon from "@vector-im/compound-design-tokens/assets/web/icons/chevron-down";
 import { EventType, JoinRule, Room, RoomStateEvent } from "matrix-js-sdk/src/matrix";
 
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
diff --git a/src/components/views/right_panel/UserInfo.tsx b/src/components/views/right_panel/UserInfo.tsx
index e2d928b1d7..dd4752b783 100644
--- a/src/components/views/right_panel/UserInfo.tsx
+++ b/src/components/views/right_panel/UserInfo.tsx
@@ -31,12 +31,12 @@ import ChatIcon from "@vector-im/compound-design-tokens/assets/web/icons/chat";
 import CheckIcon from "@vector-im/compound-design-tokens/assets/web/icons/check";
 import ShareIcon from "@vector-im/compound-design-tokens/assets/web/icons/share";
 import MentionIcon from "@vector-im/compound-design-tokens/assets/web/icons/mention";
-import { Icon as InviteIcon } from "@vector-im/compound-design-tokens/icons/user-add.svg";
+import InviteIcon from "@vector-im/compound-design-tokens/assets/web/icons/user-add";
 import BlockIcon from "@vector-im/compound-design-tokens/assets/web/icons/block";
 import DeleteIcon from "@vector-im/compound-design-tokens/assets/web/icons/delete";
 import CloseIcon from "@vector-im/compound-design-tokens/assets/web/icons/close";
-import { Icon as ChatProblemIcon } from "@vector-im/compound-design-tokens/icons/chat-problem.svg";
-import { Icon as VisibilityOffIcon } from "@vector-im/compound-design-tokens/icons/visibility-off.svg";
+import ChatProblemIcon from "@vector-im/compound-design-tokens/assets/web/icons/chat-problem";
+import VisibilityOffIcon from "@vector-im/compound-design-tokens/assets/web/icons/visibility-off";
 import LeaveIcon from "@vector-im/compound-design-tokens/assets/web/icons/leave";
 
 import dis from "../../../dispatcher/dispatcher";
diff --git a/src/components/views/rooms/MemberList.tsx b/src/components/views/rooms/MemberList.tsx
index 64028ee77c..cfce672b40 100644
--- a/src/components/views/rooms/MemberList.tsx
+++ b/src/components/views/rooms/MemberList.tsx
@@ -26,7 +26,7 @@ import {
 import { KnownMembership } from "matrix-js-sdk/src/types";
 import { throttle } from "lodash";
 import { Button, Tooltip } from "@vector-im/compound-web";
-import { Icon as UserAddIcon } from "@vector-im/compound-design-tokens/icons/user-add-solid.svg";
+import UserAddIcon from "@vector-im/compound-design-tokens/assets/web/icons/user-add-solid";
 
 import { _t } from "../../../languageHandler";
 import dis from "../../../dispatcher/dispatcher";
diff --git a/src/components/views/rooms/PinnedEventTile.tsx b/src/components/views/rooms/PinnedEventTile.tsx
index 491199b67a..217571df95 100644
--- a/src/components/views/rooms/PinnedEventTile.tsx
+++ b/src/components/views/rooms/PinnedEventTile.tsx
@@ -10,12 +10,12 @@ Please see LICENSE files in the repository root for full details.
 import React, { JSX, useCallback, useState } from "react";
 import { EventTimeline, EventType, MatrixEvent, Room } from "matrix-js-sdk/src/matrix";
 import { IconButton, Menu, MenuItem, Separator, Tooltip } from "@vector-im/compound-web";
-import { Icon as ViewIcon } from "@vector-im/compound-design-tokens/icons/visibility-on.svg";
-import { Icon as UnpinIcon } from "@vector-im/compound-design-tokens/icons/unpin.svg";
-import { Icon as ForwardIcon } from "@vector-im/compound-design-tokens/icons/forward.svg";
-import { Icon as TriggerIcon } from "@vector-im/compound-design-tokens/icons/overflow-horizontal.svg";
-import { Icon as DeleteIcon } from "@vector-im/compound-design-tokens/icons/delete.svg";
-import { Icon as ThreadIcon } from "@vector-im/compound-design-tokens/icons/threads.svg";
+import ViewIcon from "@vector-im/compound-design-tokens/assets/web/icons/visibility-on";
+import UnpinIcon from "@vector-im/compound-design-tokens/assets/web/icons/unpin";
+import ForwardIcon from "@vector-im/compound-design-tokens/assets/web/icons/forward";
+import TriggerIcon from "@vector-im/compound-design-tokens/assets/web/icons/overflow-horizontal";
+import DeleteIcon from "@vector-im/compound-design-tokens/assets/web/icons/delete";
+import ThreadIcon from "@vector-im/compound-design-tokens/assets/web/icons/threads";
 import classNames from "classnames";
 
 import dis from "../../../dispatcher/dispatcher";
diff --git a/src/components/views/rooms/PinnedMessageBanner.tsx b/src/components/views/rooms/PinnedMessageBanner.tsx
index 4679912c44..6360870dbf 100644
--- a/src/components/views/rooms/PinnedMessageBanner.tsx
+++ b/src/components/views/rooms/PinnedMessageBanner.tsx
@@ -7,7 +7,7 @@
  */
 
 import React, { JSX, useEffect, useMemo, useState } from "react";
-import { Icon as PinIcon } from "@vector-im/compound-design-tokens/icons/pin-solid.svg";
+import PinIcon from "@vector-im/compound-design-tokens/assets/web/icons/pin-solid";
 import { Button } from "@vector-im/compound-web";
 import { M_POLL_START, MatrixEvent, MsgType, Room } from "matrix-js-sdk/src/matrix";
 import classNames from "classnames";
@@ -92,7 +92,7 @@ export function PinnedMessageBanner({ room, permalinkCreator }: PinnedMessageBan
             >
                 <div className="mx_PinnedMessageBanner_content">
                     <Indicators count={eventCount} currentIndex={currentEventIndex} />
-                    <PinIcon width="20" className="mx_PinnedMessageBanner_PinIcon" />
+                    <PinIcon width="20px" height="20px" className="mx_PinnedMessageBanner_PinIcon" />
                     {!isSinglePinnedEvent && (
                         <div className="mx_PinnedMessageBanner_title" data-testid="banner-counter">
                             {_t(
diff --git a/src/components/views/rooms/RoomHeader.tsx b/src/components/views/rooms/RoomHeader.tsx
index b09d4c70e2..a2af9bdd19 100644
--- a/src/components/views/rooms/RoomHeader.tsx
+++ b/src/components/views/rooms/RoomHeader.tsx
@@ -8,12 +8,12 @@ Please see LICENSE files in the repository root for full details.
 
 import React, { useCallback, useContext, useMemo, useState } from "react";
 import { Body as BodyText, Button, IconButton, Menu, MenuItem, Tooltip } from "@vector-im/compound-web";
-import { Icon as VideoCallIcon } from "@vector-im/compound-design-tokens/icons/video-call-solid.svg";
-import { Icon as VoiceCallIcon } from "@vector-im/compound-design-tokens/icons/voice-call.svg";
+import VideoCallIcon from "@vector-im/compound-design-tokens/assets/web/icons/video-call-solid";
+import VoiceCallIcon from "@vector-im/compound-design-tokens/assets/web/icons/voice-call";
 import CloseCallIcon from "@vector-im/compound-design-tokens/assets/web/icons/close";
-import { Icon as ThreadsIcon } from "@vector-im/compound-design-tokens/icons/threads-solid.svg";
-import { Icon as RoomInfoIcon } from "@vector-im/compound-design-tokens/icons/info-solid.svg";
-import { Icon as NotificationsIcon } from "@vector-im/compound-design-tokens/icons/notifications-solid.svg";
+import ThreadsIcon from "@vector-im/compound-design-tokens/assets/web/icons/threads-solid";
+import RoomInfoIcon from "@vector-im/compound-design-tokens/assets/web/icons/info-solid";
+import NotificationsIcon from "@vector-im/compound-design-tokens/assets/web/icons/notifications-solid";
 import VerifiedIcon from "@vector-im/compound-design-tokens/assets/web/icons/verified";
 import ErrorIcon from "@vector-im/compound-design-tokens/assets/web/icons/error";
 import PublicIcon from "@vector-im/compound-design-tokens/assets/web/icons/public";
diff --git a/src/components/views/rooms/RoomHeader/VideoRoomChatButton.tsx b/src/components/views/rooms/RoomHeader/VideoRoomChatButton.tsx
index 8f79ef8ba8..af664f6841 100644
--- a/src/components/views/rooms/RoomHeader/VideoRoomChatButton.tsx
+++ b/src/components/views/rooms/RoomHeader/VideoRoomChatButton.tsx
@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React, { useContext } from "react";
-import { Icon as ChatIcon } from "@vector-im/compound-design-tokens/icons/chat-solid.svg";
+import ChatIcon from "@vector-im/compound-design-tokens/assets/web/icons/chat-solid";
 import { Room } from "matrix-js-sdk/src/matrix";
 import { IconButton, Tooltip } from "@vector-im/compound-web";
 
diff --git a/src/components/views/rooms/ThreadSummary.tsx b/src/components/views/rooms/ThreadSummary.tsx
index 34f9bd801a..ea76dd0d36 100644
--- a/src/components/views/rooms/ThreadSummary.tsx
+++ b/src/components/views/rooms/ThreadSummary.tsx
@@ -9,7 +9,7 @@ Please see LICENSE files in the repository root for full details.
 import React, { useContext, useState } from "react";
 import { Thread, ThreadEvent, IContent, MatrixEvent, MatrixEventEvent } from "matrix-js-sdk/src/matrix";
 import { IndicatorIcon } from "@vector-im/compound-web";
-import { Icon as ThreadIconSolid } from "@vector-im/compound-design-tokens/icons/threads-solid.svg";
+import ThreadIconSolid from "@vector-im/compound-design-tokens/assets/web/icons/threads-solid";
 
 import { _t } from "../../../languageHandler";
 import { CardContext } from "../right_panel/context";
diff --git a/src/components/views/settings/UserProfileSettings.tsx b/src/components/views/settings/UserProfileSettings.tsx
index 59eb2f9351..18cd0870e0 100644
--- a/src/components/views/settings/UserProfileSettings.tsx
+++ b/src/components/views/settings/UserProfileSettings.tsx
@@ -9,8 +9,8 @@ Please see LICENSE files in the repository root for full details.
 import React, { ChangeEvent, ReactNode, useCallback, useEffect, useMemo, useState } from "react";
 import { logger } from "matrix-js-sdk/src/logger";
 import { EditInPlace, Alert, ErrorMessage } from "@vector-im/compound-web";
-import { Icon as PopOutIcon } from "@vector-im/compound-design-tokens/icons/pop-out.svg";
-import { Icon as SignOutIcon } from "@vector-im/compound-design-tokens/icons/sign-out.svg";
+import PopOutIcon from "@vector-im/compound-design-tokens/assets/web/icons/pop-out";
+import SignOutIcon from "@vector-im/compound-design-tokens/assets/web/icons/sign-out";
 
 import { _t } from "../../../languageHandler";
 import { OwnProfileStore } from "../../../stores/OwnProfileStore";
diff --git a/src/components/views/settings/devices/LoginWithQRSection.tsx b/src/components/views/settings/devices/LoginWithQRSection.tsx
index 41510a8e22..f776d69765 100644
--- a/src/components/views/settings/devices/LoginWithQRSection.tsx
+++ b/src/components/views/settings/devices/LoginWithQRSection.tsx
@@ -17,7 +17,7 @@ import {
     MatrixClient,
     DEVICE_CODE_SCOPE,
 } from "matrix-js-sdk/src/matrix";
-import { Icon as QrCodeIcon } from "@vector-im/compound-design-tokens/icons/qr-code.svg";
+import QrCodeIcon from "@vector-im/compound-design-tokens/assets/web/icons/qr-code";
 
 import { _t } from "../../../../languageHandler";
 import AccessibleButton from "../../elements/AccessibleButton";
diff --git a/src/components/views/settings/tabs/user/SidebarUserSettingsTab.tsx b/src/components/views/settings/tabs/user/SidebarUserSettingsTab.tsx
index bf18451083..b6a85d08bd 100644
--- a/src/components/views/settings/tabs/user/SidebarUserSettingsTab.tsx
+++ b/src/components/views/settings/tabs/user/SidebarUserSettingsTab.tsx
@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React, { ChangeEvent, useMemo } from "react";
-import { Icon as CameraCircle } from "@vector-im/compound-design-tokens/icons/video-call-solid.svg";
+import CameraCircle from "@vector-im/compound-design-tokens/assets/web/icons/video-call-solid";
 
 import { Icon as HomeIcon } from "../../../../../../res/img/element-icons/home.svg";
 import { Icon as FavoriteIcon } from "../../../../../../res/img/element-icons/roomlist/favorite.svg";
diff --git a/src/components/views/spaces/threads-activity-centre/ThreadsActivityCentreButton.tsx b/src/components/views/spaces/threads-activity-centre/ThreadsActivityCentreButton.tsx
index e130498b52..801a6050c3 100644
--- a/src/components/views/spaces/threads-activity-centre/ThreadsActivityCentreButton.tsx
+++ b/src/components/views/spaces/threads-activity-centre/ThreadsActivityCentreButton.tsx
@@ -7,7 +7,7 @@
  */
 
 import React, { ComponentProps, forwardRef } from "react";
-import { Icon } from "@vector-im/compound-design-tokens/icons/threads-solid.svg";
+import ThreadsSolidIcon from "@vector-im/compound-design-tokens/assets/web/icons/threads-solid";
 import classNames from "classnames";
 import { IconButton, Text, Tooltip } from "@vector-im/compound-web";
 
@@ -51,7 +51,7 @@ export const ThreadsActivityCentreButton = forwardRef<HTMLButtonElement, Threads
                     ref={ref}
                 >
                     <>
-                        <Icon className="mx_ThreadsActivityCentreButton_Icon" />
+                        <ThreadsSolidIcon className="mx_ThreadsActivityCentreButton_Icon" />
                         {/* This is dirty, but we need to add the label to the indicator icon */}
                         {displayLabel && (
                             <Text
diff --git a/src/toasts/IncomingCallToast.tsx b/src/toasts/IncomingCallToast.tsx
index 03b8f0c222..5ecde7eb08 100644
--- a/src/toasts/IncomingCallToast.tsx
+++ b/src/toasts/IncomingCallToast.tsx
@@ -9,7 +9,7 @@ Please see LICENSE files in the repository root for full details.
 import React, { useCallback, useEffect, useState } from "react";
 import { MatrixEvent, RoomMember } from "matrix-js-sdk/src/matrix";
 import { Button, Tooltip } from "@vector-im/compound-web";
-import { Icon as VideoCallIcon } from "@vector-im/compound-design-tokens/icons/video-call-solid.svg";
+import VideoCallIcon from "@vector-im/compound-design-tokens/assets/web/icons/video-call-solid";
 
 import { _t } from "../languageHandler";
 import RoomAvatar from "../components/views/avatars/RoomAvatar";
diff --git a/test/components/structures/__snapshots__/RoomView-test.tsx.snap b/test/components/structures/__snapshots__/RoomView-test.tsx.snap
index f6a79b6cd7..14036bb9b9 100644
--- a/test/components/structures/__snapshots__/RoomView-test.tsx.snap
+++ b/test/components/structures/__snapshots__/RoomView-test.tsx.snap
@@ -61,7 +61,17 @@ exports[`RoomView for a local room in state CREATING should match the snapshot 1
             class="_indicator-icon_133tf_26"
             style="--cpd-icon-button-size: 100%;"
           >
-            <div />
+            <svg
+              fill="currentColor"
+              height="1em"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M6 4h10a2 2 0 0 1 2 2v4.286l3.35-2.871a1 1 0 0 1 1.65.76v7.65a1 1 0 0 1-1.65.76L18 13.715V18a2 2 0 0 1-2 2H6a4 4 0 0 1-4-4V8a4 4 0 0 1 4-4Z"
+              />
+            </svg>
           </div>
         </button>
         <button
@@ -76,7 +86,17 @@ exports[`RoomView for a local room in state CREATING should match the snapshot 1
             class="_indicator-icon_133tf_26"
             style="--cpd-icon-button-size: 100%;"
           >
-            <div />
+            <svg
+              fill="currentColor"
+              height="1em"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="m20.958 16.374.039 3.527c0 .285-.11.537-.33.756-.22.22-.472.33-.756.33a15.97 15.97 0 0 1-6.57-1.105 16.223 16.223 0 0 1-5.563-3.663 16.084 16.084 0 0 1-3.653-5.573 16.313 16.313 0 0 1-1.115-6.56c0-.285.11-.537.33-.757.22-.22.471-.329.755-.329l3.528.039a1.069 1.069 0 0 1 1.085.93l.543 3.954c.026.181.013.349-.039.504a1.088 1.088 0 0 1-.271.426l-1.64 1.64c.337.672.721 1.308 1.154 1.909.433.6 1.444 1.696 1.444 1.696s1.095 1.01 1.696 1.444c.6.433 1.237.817 1.909 1.153l1.64-1.64a1.08 1.08 0 0 1 .426-.27c.155-.052.323-.065.504-.04l3.954.543a1.069 1.069 0 0 1 .93 1.085Z"
+              />
+            </svg>
           </div>
         </button>
         <button
@@ -90,7 +110,17 @@ exports[`RoomView for a local room in state CREATING should match the snapshot 1
             class="_indicator-icon_133tf_26"
             style="--cpd-icon-button-size: 100%;"
           >
-            <div />
+            <svg
+              fill="currentColor"
+              height="1em"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M12 17a.97.97 0 0 0 .713-.288A.968.968 0 0 0 13 16v-4a.968.968 0 0 0-.287-.713A.968.968 0 0 0 12 11a.968.968 0 0 0-.713.287A.968.968 0 0 0 11 12v4c0 .283.096.52.287.712.192.192.43.288.713.288Zm0-8c.283 0 .52-.096.713-.287A.967.967 0 0 0 13 8a.967.967 0 0 0-.287-.713A.968.968 0 0 0 12 7a.968.968 0 0 0-.713.287A.967.967 0 0 0 11 8c0 .283.096.52.287.713.192.191.43.287.713.287Zm0 13a9.738 9.738 0 0 1-3.9-.788 10.099 10.099 0 0 1-3.175-2.137c-.9-.9-1.612-1.958-2.137-3.175A9.738 9.738 0 0 1 2 12a9.74 9.74 0 0 1 .788-3.9 10.099 10.099 0 0 1 2.137-3.175c.9-.9 1.958-1.612 3.175-2.137A9.738 9.738 0 0 1 12 2a9.74 9.74 0 0 1 3.9.788 10.098 10.098 0 0 1 3.175 2.137c.9.9 1.613 1.958 2.137 3.175A9.738 9.738 0 0 1 22 12a9.738 9.738 0 0 1-.788 3.9 10.098 10.098 0 0 1-2.137 3.175c-.9.9-1.958 1.613-3.175 2.137A9.738 9.738 0 0 1 12 22Z"
+              />
+            </svg>
           </div>
         </button>
         <button
@@ -104,7 +134,17 @@ exports[`RoomView for a local room in state CREATING should match the snapshot 1
             class="_indicator-icon_133tf_26"
             style="--cpd-icon-button-size: 100%;"
           >
-            <div />
+            <svg
+              fill="currentColor"
+              height="1em"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M4 3h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6l-2.293 2.293c-.63.63-1.707.184-1.707-.707V5a2 2 0 0 1 2-2Zm3 7h10a.97.97 0 0 0 .712-.287A.967.967 0 0 0 18 9a.967.967 0 0 0-.288-.713A.968.968 0 0 0 17 8H7a.968.968 0 0 0-.713.287A.968.968 0 0 0 6 9c0 .283.096.52.287.713.192.191.43.287.713.287Zm0 4h6c.283 0 .52-.096.713-.287A.968.968 0 0 0 14 13a.968.968 0 0 0-.287-.713A.968.968 0 0 0 13 12H7a.967.967 0 0 0-.713.287A.968.968 0 0 0 6 13c0 .283.096.52.287.713.192.191.43.287.713.287Z"
+              />
+            </svg>
           </div>
         </button>
       </div>
@@ -234,7 +274,17 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
             class="_indicator-icon_133tf_26"
             style="--cpd-icon-button-size: 100%;"
           >
-            <div />
+            <svg
+              fill="currentColor"
+              height="1em"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M6 4h10a2 2 0 0 1 2 2v4.286l3.35-2.871a1 1 0 0 1 1.65.76v7.65a1 1 0 0 1-1.65.76L18 13.715V18a2 2 0 0 1-2 2H6a4 4 0 0 1-4-4V8a4 4 0 0 1 4-4Z"
+              />
+            </svg>
           </div>
         </button>
         <button
@@ -249,7 +299,17 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
             class="_indicator-icon_133tf_26"
             style="--cpd-icon-button-size: 100%;"
           >
-            <div />
+            <svg
+              fill="currentColor"
+              height="1em"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="m20.958 16.374.039 3.527c0 .285-.11.537-.33.756-.22.22-.472.33-.756.33a15.97 15.97 0 0 1-6.57-1.105 16.223 16.223 0 0 1-5.563-3.663 16.084 16.084 0 0 1-3.653-5.573 16.313 16.313 0 0 1-1.115-6.56c0-.285.11-.537.33-.757.22-.22.471-.329.755-.329l3.528.039a1.069 1.069 0 0 1 1.085.93l.543 3.954c.026.181.013.349-.039.504a1.088 1.088 0 0 1-.271.426l-1.64 1.64c.337.672.721 1.308 1.154 1.909.433.6 1.444 1.696 1.444 1.696s1.095 1.01 1.696 1.444c.6.433 1.237.817 1.909 1.153l1.64-1.64a1.08 1.08 0 0 1 .426-.27c.155-.052.323-.065.504-.04l3.954.543a1.069 1.069 0 0 1 .93 1.085Z"
+              />
+            </svg>
           </div>
         </button>
         <button
@@ -263,7 +323,17 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
             class="_indicator-icon_133tf_26"
             style="--cpd-icon-button-size: 100%;"
           >
-            <div />
+            <svg
+              fill="currentColor"
+              height="1em"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M12 17a.97.97 0 0 0 .713-.288A.968.968 0 0 0 13 16v-4a.968.968 0 0 0-.287-.713A.968.968 0 0 0 12 11a.968.968 0 0 0-.713.287A.968.968 0 0 0 11 12v4c0 .283.096.52.287.712.192.192.43.288.713.288Zm0-8c.283 0 .52-.096.713-.287A.967.967 0 0 0 13 8a.967.967 0 0 0-.287-.713A.968.968 0 0 0 12 7a.968.968 0 0 0-.713.287A.967.967 0 0 0 11 8c0 .283.096.52.287.713.192.191.43.287.713.287Zm0 13a9.738 9.738 0 0 1-3.9-.788 10.099 10.099 0 0 1-3.175-2.137c-.9-.9-1.612-1.958-2.137-3.175A9.738 9.738 0 0 1 2 12a9.74 9.74 0 0 1 .788-3.9 10.099 10.099 0 0 1 2.137-3.175c.9-.9 1.958-1.612 3.175-2.137A9.738 9.738 0 0 1 12 2a9.74 9.74 0 0 1 3.9.788 10.098 10.098 0 0 1 3.175 2.137c.9.9 1.613 1.958 2.137 3.175A9.738 9.738 0 0 1 22 12a9.738 9.738 0 0 1-.788 3.9 10.098 10.098 0 0 1-2.137 3.175c-.9.9-1.958 1.613-3.175 2.137A9.738 9.738 0 0 1 12 22Z"
+              />
+            </svg>
           </div>
         </button>
         <button
@@ -277,7 +347,17 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
             class="_indicator-icon_133tf_26"
             style="--cpd-icon-button-size: 100%;"
           >
-            <div />
+            <svg
+              fill="currentColor"
+              height="1em"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M4 3h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6l-2.293 2.293c-.63.63-1.707.184-1.707-.707V5a2 2 0 0 1 2-2Zm3 7h10a.97.97 0 0 0 .712-.287A.967.967 0 0 0 18 9a.967.967 0 0 0-.288-.713A.968.968 0 0 0 17 8H7a.968.968 0 0 0-.713.287A.968.968 0 0 0 6 9c0 .283.096.52.287.713.192.191.43.287.713.287Zm0 4h6c.283 0 .52-.096.713-.287A.968.968 0 0 0 14 13a.968.968 0 0 0-.287-.713A.968.968 0 0 0 13 12H7a.967.967 0 0 0-.713.287A.968.968 0 0 0 6 13c0 .283.096.52.287.713.192.191.43.287.713.287Z"
+              />
+            </svg>
           </div>
         </button>
       </div>
@@ -492,7 +572,17 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
             class="_indicator-icon_133tf_26"
             style="--cpd-icon-button-size: 100%;"
           >
-            <div />
+            <svg
+              fill="currentColor"
+              height="1em"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M6 4h10a2 2 0 0 1 2 2v4.286l3.35-2.871a1 1 0 0 1 1.65.76v7.65a1 1 0 0 1-1.65.76L18 13.715V18a2 2 0 0 1-2 2H6a4 4 0 0 1-4-4V8a4 4 0 0 1 4-4Z"
+              />
+            </svg>
           </div>
         </button>
         <button
@@ -507,7 +597,17 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
             class="_indicator-icon_133tf_26"
             style="--cpd-icon-button-size: 100%;"
           >
-            <div />
+            <svg
+              fill="currentColor"
+              height="1em"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="m20.958 16.374.039 3.527c0 .285-.11.537-.33.756-.22.22-.472.33-.756.33a15.97 15.97 0 0 1-6.57-1.105 16.223 16.223 0 0 1-5.563-3.663 16.084 16.084 0 0 1-3.653-5.573 16.313 16.313 0 0 1-1.115-6.56c0-.285.11-.537.33-.757.22-.22.471-.329.755-.329l3.528.039a1.069 1.069 0 0 1 1.085.93l.543 3.954c.026.181.013.349-.039.504a1.088 1.088 0 0 1-.271.426l-1.64 1.64c.337.672.721 1.308 1.154 1.909.433.6 1.444 1.696 1.444 1.696s1.095 1.01 1.696 1.444c.6.433 1.237.817 1.909 1.153l1.64-1.64a1.08 1.08 0 0 1 .426-.27c.155-.052.323-.065.504-.04l3.954.543a1.069 1.069 0 0 1 .93 1.085Z"
+              />
+            </svg>
           </div>
         </button>
         <button
@@ -521,7 +621,17 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
             class="_indicator-icon_133tf_26"
             style="--cpd-icon-button-size: 100%;"
           >
-            <div />
+            <svg
+              fill="currentColor"
+              height="1em"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M12 17a.97.97 0 0 0 .713-.288A.968.968 0 0 0 13 16v-4a.968.968 0 0 0-.287-.713A.968.968 0 0 0 12 11a.968.968 0 0 0-.713.287A.968.968 0 0 0 11 12v4c0 .283.096.52.287.712.192.192.43.288.713.288Zm0-8c.283 0 .52-.096.713-.287A.967.967 0 0 0 13 8a.967.967 0 0 0-.287-.713A.968.968 0 0 0 12 7a.968.968 0 0 0-.713.287A.967.967 0 0 0 11 8c0 .283.096.52.287.713.192.191.43.287.713.287Zm0 13a9.738 9.738 0 0 1-3.9-.788 10.099 10.099 0 0 1-3.175-2.137c-.9-.9-1.612-1.958-2.137-3.175A9.738 9.738 0 0 1 2 12a9.74 9.74 0 0 1 .788-3.9 10.099 10.099 0 0 1 2.137-3.175c.9-.9 1.958-1.612 3.175-2.137A9.738 9.738 0 0 1 12 2a9.74 9.74 0 0 1 3.9.788 10.098 10.098 0 0 1 3.175 2.137c.9.9 1.613 1.958 2.137 3.175A9.738 9.738 0 0 1 22 12a9.738 9.738 0 0 1-.788 3.9 10.098 10.098 0 0 1-2.137 3.175c-.9.9-1.958 1.613-3.175 2.137A9.738 9.738 0 0 1 12 22Z"
+              />
+            </svg>
           </div>
         </button>
         <button
@@ -535,7 +645,17 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
             class="_indicator-icon_133tf_26"
             style="--cpd-icon-button-size: 100%;"
           >
-            <div />
+            <svg
+              fill="currentColor"
+              height="1em"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M4 3h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6l-2.293 2.293c-.63.63-1.707.184-1.707-.707V5a2 2 0 0 1 2-2Zm3 7h10a.97.97 0 0 0 .712-.287A.967.967 0 0 0 18 9a.967.967 0 0 0-.288-.713A.968.968 0 0 0 17 8H7a.968.968 0 0 0-.713.287A.968.968 0 0 0 6 9c0 .283.096.52.287.713.192.191.43.287.713.287Zm0 4h6c.283 0 .52-.096.713-.287A.968.968 0 0 0 14 13a.968.968 0 0 0-.287-.713A.968.968 0 0 0 13 12H7a.967.967 0 0 0-.713.287A.968.968 0 0 0 6 13c0 .283.096.52.287.713.192.191.43.287.713.287Z"
+              />
+            </svg>
           </div>
         </button>
       </div>
@@ -827,7 +947,17 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
             class="_indicator-icon_133tf_26"
             style="--cpd-icon-button-size: 100%;"
           >
-            <div />
+            <svg
+              fill="currentColor"
+              height="1em"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M6 4h10a2 2 0 0 1 2 2v4.286l3.35-2.871a1 1 0 0 1 1.65.76v7.65a1 1 0 0 1-1.65.76L18 13.715V18a2 2 0 0 1-2 2H6a4 4 0 0 1-4-4V8a4 4 0 0 1 4-4Z"
+              />
+            </svg>
           </div>
         </button>
         <button
@@ -842,7 +972,17 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
             class="_indicator-icon_133tf_26"
             style="--cpd-icon-button-size: 100%;"
           >
-            <div />
+            <svg
+              fill="currentColor"
+              height="1em"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="m20.958 16.374.039 3.527c0 .285-.11.537-.33.756-.22.22-.472.33-.756.33a15.97 15.97 0 0 1-6.57-1.105 16.223 16.223 0 0 1-5.563-3.663 16.084 16.084 0 0 1-3.653-5.573 16.313 16.313 0 0 1-1.115-6.56c0-.285.11-.537.33-.757.22-.22.471-.329.755-.329l3.528.039a1.069 1.069 0 0 1 1.085.93l.543 3.954c.026.181.013.349-.039.504a1.088 1.088 0 0 1-.271.426l-1.64 1.64c.337.672.721 1.308 1.154 1.909.433.6 1.444 1.696 1.444 1.696s1.095 1.01 1.696 1.444c.6.433 1.237.817 1.909 1.153l1.64-1.64a1.08 1.08 0 0 1 .426-.27c.155-.052.323-.065.504-.04l3.954.543a1.069 1.069 0 0 1 .93 1.085Z"
+              />
+            </svg>
           </div>
         </button>
         <button
@@ -856,7 +996,17 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
             class="_indicator-icon_133tf_26"
             style="--cpd-icon-button-size: 100%;"
           >
-            <div />
+            <svg
+              fill="currentColor"
+              height="1em"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M12 17a.97.97 0 0 0 .713-.288A.968.968 0 0 0 13 16v-4a.968.968 0 0 0-.287-.713A.968.968 0 0 0 12 11a.968.968 0 0 0-.713.287A.968.968 0 0 0 11 12v4c0 .283.096.52.287.712.192.192.43.288.713.288Zm0-8c.283 0 .52-.096.713-.287A.967.967 0 0 0 13 8a.967.967 0 0 0-.287-.713A.968.968 0 0 0 12 7a.968.968 0 0 0-.713.287A.967.967 0 0 0 11 8c0 .283.096.52.287.713.192.191.43.287.713.287Zm0 13a9.738 9.738 0 0 1-3.9-.788 10.099 10.099 0 0 1-3.175-2.137c-.9-.9-1.612-1.958-2.137-3.175A9.738 9.738 0 0 1 2 12a9.74 9.74 0 0 1 .788-3.9 10.099 10.099 0 0 1 2.137-3.175c.9-.9 1.958-1.612 3.175-2.137A9.738 9.738 0 0 1 12 2a9.74 9.74 0 0 1 3.9.788 10.098 10.098 0 0 1 3.175 2.137c.9.9 1.613 1.958 2.137 3.175A9.738 9.738 0 0 1 22 12a9.738 9.738 0 0 1-.788 3.9 10.098 10.098 0 0 1-2.137 3.175c-.9.9-1.958 1.613-3.175 2.137A9.738 9.738 0 0 1 12 22Z"
+              />
+            </svg>
           </div>
         </button>
         <button
@@ -870,7 +1020,17 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
             class="_indicator-icon_133tf_26"
             style="--cpd-icon-button-size: 100%;"
           >
-            <div />
+            <svg
+              fill="currentColor"
+              height="1em"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M4 3h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6l-2.293 2.293c-.63.63-1.707.184-1.707-.707V5a2 2 0 0 1 2-2Zm3 7h10a.97.97 0 0 0 .712-.287A.967.967 0 0 0 18 9a.967.967 0 0 0-.288-.713A.968.968 0 0 0 17 8H7a.968.968 0 0 0-.713.287A.968.968 0 0 0 6 9c0 .283.096.52.287.713.192.191.43.287.713.287Zm0 4h6c.283 0 .52-.096.713-.287A.968.968 0 0 0 14 13a.968.968 0 0 0-.287-.713A.968.968 0 0 0 13 12H7a.967.967 0 0 0-.713.287A.968.968 0 0 0 6 13c0 .283.096.52.287.713.192.191.43.287.713.287Z"
+              />
+            </svg>
           </div>
         </button>
       </div>
@@ -1199,7 +1359,17 @@ exports[`RoomView video rooms should render joined video room view 1`] = `
                 class="_indicator-icon_133tf_26"
                 style="--cpd-icon-button-size: 100%;"
               >
-                <div />
+                <svg
+                  fill="currentColor"
+                  height="1em"
+                  viewBox="0 0 24 24"
+                  width="1em"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M12 17a.97.97 0 0 0 .713-.288A.968.968 0 0 0 13 16v-4a.968.968 0 0 0-.287-.713A.968.968 0 0 0 12 11a.968.968 0 0 0-.713.287A.968.968 0 0 0 11 12v4c0 .283.096.52.287.712.192.192.43.288.713.288Zm0-8c.283 0 .52-.096.713-.287A.967.967 0 0 0 13 8a.967.967 0 0 0-.287-.713A.968.968 0 0 0 12 7a.968.968 0 0 0-.713.287A.967.967 0 0 0 11 8c0 .283.096.52.287.713.192.191.43.287.713.287Zm0 13a9.738 9.738 0 0 1-3.9-.788 10.099 10.099 0 0 1-3.175-2.137c-.9-.9-1.612-1.958-2.137-3.175A9.738 9.738 0 0 1 2 12a9.74 9.74 0 0 1 .788-3.9 10.099 10.099 0 0 1 2.137-3.175c.9-.9 1.958-1.612 3.175-2.137A9.738 9.738 0 0 1 12 2a9.74 9.74 0 0 1 3.9.788 10.098 10.098 0 0 1 3.175 2.137c.9.9 1.613 1.958 2.137 3.175A9.738 9.738 0 0 1 22 12a9.738 9.738 0 0 1-.788 3.9 10.098 10.098 0 0 1-2.137 3.175c-.9.9-1.958 1.613-3.175 2.137A9.738 9.738 0 0 1 12 22Z"
+                  />
+                </svg>
               </div>
             </button>
             <button
@@ -1213,7 +1383,17 @@ exports[`RoomView video rooms should render joined video room view 1`] = `
                 class="_indicator-icon_133tf_26"
                 style="--cpd-icon-button-size: 100%;"
               >
-                <div />
+                <svg
+                  fill="currentColor"
+                  height="1em"
+                  viewBox="0 0 24 24"
+                  width="1em"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M2.95 16.3 1.5 21.25a.936.936 0 0 0 .25 1 .936.936 0 0 0 1 .25l4.95-1.45a10.23 10.23 0 0 0 2.1.712c.717.159 1.45.238 2.2.238a9.737 9.737 0 0 0 3.9-.788 10.098 10.098 0 0 0 3.175-2.137c.9-.9 1.613-1.958 2.137-3.175A9.738 9.738 0 0 0 22 12a9.738 9.738 0 0 0-.788-3.9 10.099 10.099 0 0 0-2.137-3.175c-.9-.9-1.958-1.612-3.175-2.137A9.737 9.737 0 0 0 12 2a9.737 9.737 0 0 0-3.9.788 10.099 10.099 0 0 0-3.175 2.137c-.9.9-1.612 1.958-2.137 3.175A9.738 9.738 0 0 0 2 12a10.179 10.179 0 0 0 .95 4.3Z"
+                  />
+                </svg>
               </div>
             </button>
             <button
@@ -1227,7 +1407,17 @@ exports[`RoomView video rooms should render joined video room view 1`] = `
                 class="_indicator-icon_133tf_26"
                 style="--cpd-icon-button-size: 100%;"
               >
-                <div />
+                <svg
+                  fill="currentColor"
+                  height="1em"
+                  viewBox="0 0 24 24"
+                  width="1em"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M4 3h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6l-2.293 2.293c-.63.63-1.707.184-1.707-.707V5a2 2 0 0 1 2-2Zm3 7h10a.97.97 0 0 0 .712-.287A.967.967 0 0 0 18 9a.967.967 0 0 0-.288-.713A.968.968 0 0 0 17 8H7a.968.968 0 0 0-.713.287A.968.968 0 0 0 6 9c0 .283.096.52.287.713.192.191.43.287.713.287Zm0 4h6c.283 0 .52-.096.713-.287A.968.968 0 0 0 14 13a.968.968 0 0 0-.287-.713A.968.968 0 0 0 13 12H7a.967.967 0 0 0-.713.287A.968.968 0 0 0 6 13c0 .283.096.52.287.713.192.191.43.287.713.287Z"
+                  />
+                </svg>
               </div>
             </button>
           </div>
diff --git a/test/components/views/messages/__snapshots__/PinnedMessageBadge-test.tsx.snap b/test/components/views/messages/__snapshots__/PinnedMessageBadge-test.tsx.snap
index 6a2beb4864..31e192628a 100644
--- a/test/components/views/messages/__snapshots__/PinnedMessageBadge-test.tsx.snap
+++ b/test/components/views/messages/__snapshots__/PinnedMessageBadge-test.tsx.snap
@@ -5,9 +5,17 @@ exports[`PinnedMessageBadge should render 1`] = `
   <div
     class="mx_PinnedMessageBadge"
   >
-    <div
-      width="16"
-    />
+    <svg
+      fill="currentColor"
+      height="16px"
+      viewBox="0 0 24 24"
+      width="16px"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M5.769 2.857A.5.5 0 0 1 6.119 2h11.762a.5.5 0 0 1 .35.857L16.15 4.9a.5.5 0 0 0-.15.357v4.487a.5.5 0 0 0 .15.356l3.7 3.644a.5.5 0 0 1 .15.356v1.4a.5.5 0 0 1-.5.5H13v6a1 1 0 1 1-2 0v-6H4.5a.5.5 0 0 1-.5-.5v-1.4a.5.5 0 0 1 .15-.356l3.7-3.644A.5.5 0 0 0 8 9.744V5.257a.5.5 0 0 0-.15-.357L5.77 2.857Z"
+      />
+    </svg>
     Pinned message
   </div>
 </DocumentFragment>
diff --git a/test/components/views/right_panel/__snapshots__/ExtensionsCard-test.tsx.snap b/test/components/views/right_panel/__snapshots__/ExtensionsCard-test.tsx.snap
index 0cbda3ab64..f6d9479027 100644
--- a/test/components/views/right_panel/__snapshots__/ExtensionsCard-test.tsx.snap
+++ b/test/components/views/right_panel/__snapshots__/ExtensionsCard-test.tsx.snap
@@ -54,21 +54,35 @@ exports[`<ExtensionsCard /> should render empty state 1`] = `
         role="button"
         tabindex="0"
       >
-        <div
+        <svg
           aria-hidden="true"
+          fill="currentColor"
           height="20"
+          viewBox="0 0 24 24"
           width="20"
-        />
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M11 13H6a.967.967 0 0 1-.713-.287A.968.968 0 0 1 5 12c0-.283.096-.52.287-.713A.967.967 0 0 1 6 11h5V6c0-.283.096-.52.287-.713A.968.968 0 0 1 12 5c.283 0 .52.096.713.287.191.192.287.43.287.713v5h5a.97.97 0 0 1 .712.287c.192.192.288.43.288.713s-.096.52-.288.713A.968.968 0 0 1 18 13h-5v5a.97.97 0 0 1-.287.712A.968.968 0 0 1 12 19a.968.968 0 0 1-.713-.288A.968.968 0 0 1 11 18v-5Z"
+          />
+        </svg>
         Add extensions
       </button>
       <div
         class="mx_Flex mx_EmptyState"
         style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-4x);"
       >
-        <div
+        <svg
+          fill="currentColor"
           height="32px"
+          viewBox="0 0 24 24"
           width="32px"
-        />
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M17.25 11.672a.907.907 0 0 1-.663-.282L12.61 7.413a.907.907 0 0 1-.282-.663c0-.254.094-.475.282-.663l3.977-3.977a.907.907 0 0 1 .663-.282c.254 0 .475.094.663.282l3.977 3.977a.907.907 0 0 1 .282.663.907.907 0 0 1-.282.663l-3.977 3.977a.907.907 0 0 1-.663.282Zm2.475-4.922L17.25 4.275 14.775 6.75l2.475 2.475 2.475-2.475ZM4 11a.967.967 0 0 1-.712-.287A.968.968 0 0 1 3 10V4c0-.283.096-.52.288-.712A.968.968 0 0 1 4 3h6a.97.97 0 0 1 .713.288A.968.968 0 0 1 11 4v6c0 .283-.096.52-.287.713A.968.968 0 0 1 10 11H4Zm5-2V5H5v4h4Zm5 12a.968.968 0 0 1-.713-.288A.968.968 0 0 1 13 20v-6c0-.283.096-.52.287-.713A.968.968 0 0 1 14 13h6a.97.97 0 0 1 .712.287c.192.192.288.43.288.713v6c0 .283-.096.52-.288.712A.968.968 0 0 1 20 21h-6Zm5-2v-4h-4v4h4ZM4 21a.967.967 0 0 1-.712-.288A.968.968 0 0 1 3 20v-6a.97.97 0 0 1 .288-.713A.967.967 0 0 1 4 13h6c.283 0 .52.096.713.287.191.192.287.43.287.713v6a.97.97 0 0 1-.287.712A.968.968 0 0 1 10 21H4Zm5-2v-4H5v4h4Z"
+          />
+        </svg>
         <p
           class="_typography_yh5dq_162 _font-body-lg-semibold_yh5dq_83"
         >
@@ -139,11 +153,18 @@ exports[`<ExtensionsCard /> should render widgets 1`] = `
         role="button"
         tabindex="0"
       >
-        <div
+        <svg
           aria-hidden="true"
+          fill="currentColor"
           height="20"
+          viewBox="0 0 24 24"
           width="20"
-        />
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M11 13H6a.967.967 0 0 1-.713-.287A.968.968 0 0 1 5 12c0-.283.096-.52.287-.713A.967.967 0 0 1 6 11h5V6c0-.283.096-.52.287-.713A.968.968 0 0 1 12 5c.283 0 .52.096.713.287.191.192.287.43.287.713v5h5a.97.97 0 0 1 .712.287c.192.192.288.43.288.713s-.096.52-.288.713A.968.968 0 0 1 18 13h-5v5a.97.97 0 0 1-.287.712A.968.968 0 0 1 12 19a.968.968 0 0 1-.713-.288A.968.968 0 0 1 11 18v-5Z"
+          />
+        </svg>
         Add extensions
       </button>
       <div
diff --git a/test/components/views/right_panel/__snapshots__/PinnedMessagesCard-test.tsx.snap b/test/components/views/right_panel/__snapshots__/PinnedMessagesCard-test.tsx.snap
index 0c7814d442..1eba676afe 100644
--- a/test/components/views/right_panel/__snapshots__/PinnedMessagesCard-test.tsx.snap
+++ b/test/components/views/right_panel/__snapshots__/PinnedMessagesCard-test.tsx.snap
@@ -175,7 +175,17 @@ exports[`<PinnedMessagesCard /> should show two pinned messages 1`] = `
                   class="_indicator-icon_133tf_26"
                   style="--cpd-icon-button-size: 100%;"
                 >
-                  <div />
+                  <svg
+                    fill="currentColor"
+                    height="1em"
+                    viewBox="0 0 24 24"
+                    width="1em"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M6 14c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 4 12c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 6 10c.55 0 1.02.196 1.412.588.392.391.588.862.588 1.412 0 .55-.196 1.02-.588 1.412A1.926 1.926 0 0 1 6 14Zm6 0c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 10 12c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 12 10c.55 0 1.02.196 1.412.588.392.391.588.862.588 1.412 0 .55-.196 1.02-.588 1.412A1.926 1.926 0 0 1 12 14Zm6 0c-.55 0-1.02-.196-1.413-.588A1.926 1.926 0 0 1 16 12c0-.55.196-1.02.587-1.412A1.926 1.926 0 0 1 18 10c.55 0 1.02.196 1.413.588.391.391.587.862.587 1.412 0 .55-.196 1.02-.587 1.412A1.926 1.926 0 0 1 18 14Z"
+                    />
+                  </svg>
                 </div>
               </button>
             </div>
@@ -241,7 +251,17 @@ exports[`<PinnedMessagesCard /> should show two pinned messages 1`] = `
                   class="_indicator-icon_133tf_26"
                   style="--cpd-icon-button-size: 100%;"
                 >
-                  <div />
+                  <svg
+                    fill="currentColor"
+                    height="1em"
+                    viewBox="0 0 24 24"
+                    width="1em"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M6 14c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 4 12c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 6 10c.55 0 1.02.196 1.412.588.392.391.588.862.588 1.412 0 .55-.196 1.02-.588 1.412A1.926 1.926 0 0 1 6 14Zm6 0c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 10 12c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 12 10c.55 0 1.02.196 1.412.588.392.391.588.862.588 1.412 0 .55-.196 1.02-.588 1.412A1.926 1.926 0 0 1 12 14Zm6 0c-.55 0-1.02-.196-1.413-.588A1.926 1.926 0 0 1 16 12c0-.55.196-1.02.587-1.412A1.926 1.926 0 0 1 18 10c.55 0 1.02.196 1.413.588.391.391.587.862.587 1.412 0 .55-.196 1.02-.587 1.412A1.926 1.926 0 0 1 18 14Z"
+                    />
+                  </svg>
                 </div>
               </button>
             </div>
@@ -371,7 +391,17 @@ exports[`<PinnedMessagesCard /> unpin all should not allow to unpinall 1`] = `
                   class="_indicator-icon_133tf_26"
                   style="--cpd-icon-button-size: 100%;"
                 >
-                  <div />
+                  <svg
+                    fill="currentColor"
+                    height="1em"
+                    viewBox="0 0 24 24"
+                    width="1em"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M6 14c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 4 12c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 6 10c.55 0 1.02.196 1.412.588.392.391.588.862.588 1.412 0 .55-.196 1.02-.588 1.412A1.926 1.926 0 0 1 6 14Zm6 0c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 10 12c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 12 10c.55 0 1.02.196 1.412.588.392.391.588.862.588 1.412 0 .55-.196 1.02-.588 1.412A1.926 1.926 0 0 1 12 14Zm6 0c-.55 0-1.02-.196-1.413-.588A1.926 1.926 0 0 1 16 12c0-.55.196-1.02.587-1.412A1.926 1.926 0 0 1 18 10c.55 0 1.02.196 1.413.588.391.391.587.862.587 1.412 0 .55-.196 1.02-.587 1.412A1.926 1.926 0 0 1 18 14Z"
+                    />
+                  </svg>
                 </div>
               </button>
             </div>
@@ -437,7 +467,17 @@ exports[`<PinnedMessagesCard /> unpin all should not allow to unpinall 1`] = `
                   class="_indicator-icon_133tf_26"
                   style="--cpd-icon-button-size: 100%;"
                 >
-                  <div />
+                  <svg
+                    fill="currentColor"
+                    height="1em"
+                    viewBox="0 0 24 24"
+                    width="1em"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M6 14c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 4 12c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 6 10c.55 0 1.02.196 1.412.588.392.391.588.862.588 1.412 0 .55-.196 1.02-.588 1.412A1.926 1.926 0 0 1 6 14Zm6 0c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 10 12c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 12 10c.55 0 1.02.196 1.412.588.392.391.588.862.588 1.412 0 .55-.196 1.02-.588 1.412A1.926 1.926 0 0 1 12 14Zm6 0c-.55 0-1.02-.196-1.413-.588A1.926 1.926 0 0 1 16 12c0-.55.196-1.02.587-1.412A1.926 1.926 0 0 1 18 10c.55 0 1.02.196 1.413.588.391.391.587.862.587 1.412 0 .55-.196 1.02-.587 1.412A1.926 1.926 0 0 1 18 14Z"
+                    />
+                  </svg>
                 </div>
               </button>
             </div>
diff --git a/test/components/views/right_panel/__snapshots__/RoomSummaryCard-test.tsx.snap b/test/components/views/right_panel/__snapshots__/RoomSummaryCard-test.tsx.snap
index 7c9a73fe15..31b5c1bbbd 100644
--- a/test/components/views/right_panel/__snapshots__/RoomSummaryCard-test.tsx.snap
+++ b/test/components/views/right_panel/__snapshots__/RoomSummaryCard-test.tsx.snap
@@ -74,9 +74,17 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
             class="_typography_yh5dq_162 _font-body-sm-medium_yh5dq_50 _badge_qipht_17"
             data-kind="default"
           >
-            <div
+            <svg
+              fill="currentColor"
+              height="1em"
+              viewBox="0 0 24 24"
               width="1em"
-            />
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M6 22c-.55 0-1.02-.196-1.413-.587A1.926 1.926 0 0 1 4 20V10c0-.55.196-1.02.587-1.412.212-.212.446-.366.703-.463L1.333 4.167a1 1 0 0 1 1.414-1.414L7 7.006v-.012l13 13v.012l1.247 1.247a1 1 0 0 1-1.414 1.414l-.896-.896A1.935 1.935 0 0 1 18 22H6Zm14-4.834V10c0-.55-.196-1.02-.587-1.412A1.926 1.926 0 0 0 18 8h-1V6c0-1.383-.488-2.563-1.463-3.538C14.563 1.487 13.383 1 12 1s-2.563.488-3.538 1.462A4.876 4.876 0 0 0 7.243 4.41L9 6.166V6c0-.833.292-1.542.875-2.125A2.893 2.893 0 0 1 12 3c.833 0 1.542.292 2.125.875S15 5.167 15 6v2h-4.166L20 17.166Z"
+              />
+            </svg>
             Not encrypted
           </span>
         </section>
@@ -107,7 +115,17 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
                 class="_indicator-icon_133tf_26"
                 style="--cpd-icon-button-size: 100%;"
               >
-                <div />
+                <svg
+                  fill="currentColor"
+                  height="1em"
+                  viewBox="0 0 24 24"
+                  width="1em"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M12 14.95c-.133 0-.258-.02-.375-.063a.876.876 0 0 1-.325-.212l-4.6-4.6a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275l3.9 3.9 3.9-3.9a.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275.948.948 0 0 1 .275.7.948.948 0 0 1-.275.7l-4.6 4.6c-.1.1-.208.17-.325.212a1.106 1.106 0 0 1-.375.063Z"
+                  />
+                </svg>
               </div>
             </button>
           </div>
@@ -182,12 +200,19 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
           data-kind="primary"
           role="menuitem"
         >
-          <div
+          <svg
             aria-hidden="true"
             class="_icon_1gwvj_44"
+            fill="currentColor"
             height="24"
+            viewBox="0 0 24 24"
             width="24"
-          />
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M10 12c-1.1 0-2.042-.392-2.825-1.175C6.392 10.042 6 9.1 6 8s.392-2.042 1.175-2.825C7.958 4.392 8.9 4 10 4s2.042.392 2.825 1.175C13.608 5.958 14 6.9 14 8s-.392 2.042-1.175 2.825C12.042 11.608 11.1 12 10 12Zm-8 6v-.8c0-.567.146-1.087.438-1.563A2.911 2.911 0 0 1 3.6 14.55a14.843 14.843 0 0 1 3.15-1.163A13.76 13.76 0 0 1 10 13c1.1 0 2.183.13 3.25.387 1.067.259 2.117.646 3.15 1.163.483.25.87.612 1.163 1.087.291.476.437.996.437 1.563v.8c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 16 20H4c-.55 0-1.02-.196-1.413-.587A1.926 1.926 0 0 1 2 18Zm2 0h12v-.8a.973.973 0 0 0-.5-.85c-.9-.45-1.808-.787-2.725-1.012a11.6 11.6 0 0 0-5.55 0c-.917.225-1.825.562-2.725 1.012a.973.973 0 0 0-.5.85v.8Zm6-8c.55 0 1.02-.196 1.412-.588C11.804 9.021 12 8.55 12 8c0-.55-.196-1.02-.588-1.412A1.926 1.926 0 0 0 10 6c-.55 0-1.02.196-1.412.588A1.926 1.926 0 0 0 8 8c0 .55.196 1.02.588 1.412.391.392.862.588 1.412.588Zm7 1h2v2c0 .283.096.52.288.713.191.191.429.287.712.287s.52-.096.712-.287A.968.968 0 0 0 21 13v-2h2a.97.97 0 0 0 .712-.287A.968.968 0 0 0 24 10a.967.967 0 0 0-.288-.713A.968.968 0 0 0 23 9h-2V7a.967.967 0 0 0-.288-.713A.968.968 0 0 0 20 6a.968.968 0 0 0-.712.287A.967.967 0 0 0 19 7v2h-2a.968.968 0 0 0-.712.287A.967.967 0 0 0 16 10c0 .283.096.52.288.713A.968.968 0 0 0 17 11Z"
+            />
+          </svg>
           <span
             class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
           >
@@ -504,12 +529,19 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
           data-kind="primary"
           role="menuitem"
         >
-          <div
+          <svg
             aria-hidden="true"
             class="_icon_1gwvj_44"
+            fill="currentColor"
             height="24"
+            viewBox="0 0 24 24"
             width="24"
-          />
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M5 21c-.55 0-1.02-.196-1.413-.587A1.926 1.926 0 0 1 3 19V6.5c0-.25.042-.475.125-.675.083-.2.192-.392.325-.575l1.4-1.7c.133-.183.3-.32.5-.412C5.55 3.046 5.767 3 6 3h12c.233 0 .45.046.65.138.2.091.367.229.5.412l1.4 1.7c.133.183.242.375.325.575.083.2.125.425.125.675V19c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 19 21H5Zm.4-15h13.2l-.85-1H6.25L5.4 6ZM5 19h14V8H5v11Zm7-1.425c.133 0 .258-.02.375-.063a.877.877 0 0 0 .325-.212l2.6-2.6a.948.948 0 0 0 .275-.7.948.948 0 0 0-.275-.7.948.948 0 0 0-.7-.275.948.948 0 0 0-.7.275l-.9.9V11a.968.968 0 0 0-.287-.713A.968.968 0 0 0 12 10a.968.968 0 0 0-.713.287A.968.968 0 0 0 11 11v3.2l-.9-.9a.948.948 0 0 0-.7-.275.948.948 0 0 0-.7.275.948.948 0 0 0-.275.7.95.95 0 0 0 .275.7l2.6 2.6c.1.1.208.17.325.212.117.042.242.063.375.063Z"
+            />
+          </svg>
           <span
             class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
           >
@@ -695,9 +727,17 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
             class="_typography_yh5dq_162 _font-body-sm-medium_yh5dq_50 _badge_qipht_17"
             data-kind="default"
           >
-            <div
+            <svg
+              fill="currentColor"
+              height="1em"
+              viewBox="0 0 24 24"
               width="1em"
-            />
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M6 22c-.55 0-1.02-.196-1.413-.587A1.926 1.926 0 0 1 4 20V10c0-.55.196-1.02.587-1.412.212-.212.446-.366.703-.463L1.333 4.167a1 1 0 0 1 1.414-1.414L7 7.006v-.012l13 13v.012l1.247 1.247a1 1 0 0 1-1.414 1.414l-.896-.896A1.935 1.935 0 0 1 18 22H6Zm14-4.834V10c0-.55-.196-1.02-.587-1.412A1.926 1.926 0 0 0 18 8h-1V6c0-1.383-.488-2.563-1.463-3.538C14.563 1.487 13.383 1 12 1s-2.563.488-3.538 1.462A4.876 4.876 0 0 0 7.243 4.41L9 6.166V6c0-.833.292-1.542.875-2.125A2.893 2.893 0 0 1 12 3c.833 0 1.542.292 2.125.875S15 5.167 15 6v2h-4.166L20 17.166Z"
+              />
+            </svg>
             Not encrypted
           </span>
         </section>
@@ -776,12 +816,19 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
           data-kind="primary"
           role="menuitem"
         >
-          <div
+          <svg
             aria-hidden="true"
             class="_icon_1gwvj_44"
+            fill="currentColor"
             height="24"
+            viewBox="0 0 24 24"
             width="24"
-          />
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M10 12c-1.1 0-2.042-.392-2.825-1.175C6.392 10.042 6 9.1 6 8s.392-2.042 1.175-2.825C7.958 4.392 8.9 4 10 4s2.042.392 2.825 1.175C13.608 5.958 14 6.9 14 8s-.392 2.042-1.175 2.825C12.042 11.608 11.1 12 10 12Zm-8 6v-.8c0-.567.146-1.087.438-1.563A2.911 2.911 0 0 1 3.6 14.55a14.843 14.843 0 0 1 3.15-1.163A13.76 13.76 0 0 1 10 13c1.1 0 2.183.13 3.25.387 1.067.259 2.117.646 3.15 1.163.483.25.87.612 1.163 1.087.291.476.437.996.437 1.563v.8c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 16 20H4c-.55 0-1.02-.196-1.413-.587A1.926 1.926 0 0 1 2 18Zm2 0h12v-.8a.973.973 0 0 0-.5-.85c-.9-.45-1.808-.787-2.725-1.012a11.6 11.6 0 0 0-5.55 0c-.917.225-1.825.562-2.725 1.012a.973.973 0 0 0-.5.85v.8Zm6-8c.55 0 1.02-.196 1.412-.588C11.804 9.021 12 8.55 12 8c0-.55-.196-1.02-.588-1.412A1.926 1.926 0 0 0 10 6c-.55 0-1.02.196-1.412.588A1.926 1.926 0 0 0 8 8c0 .55.196 1.02.588 1.412.391.392.862.588 1.412.588Zm7 1h2v2c0 .283.096.52.288.713.191.191.429.287.712.287s.52-.096.712-.287A.968.968 0 0 0 21 13v-2h2a.97.97 0 0 0 .712-.287A.968.968 0 0 0 24 10a.967.967 0 0 0-.288-.713A.968.968 0 0 0 23 9h-2V7a.967.967 0 0 0-.288-.713A.968.968 0 0 0 20 6a.968.968 0 0 0-.712.287A.967.967 0 0 0 19 7v2h-2a.968.968 0 0 0-.712.287A.967.967 0 0 0 16 10c0 .283.096.52.288.713A.968.968 0 0 0 17 11Z"
+            />
+          </svg>
           <span
             class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
           >
@@ -1098,12 +1145,19 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
           data-kind="primary"
           role="menuitem"
         >
-          <div
+          <svg
             aria-hidden="true"
             class="_icon_1gwvj_44"
+            fill="currentColor"
             height="24"
+            viewBox="0 0 24 24"
             width="24"
-          />
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M5 21c-.55 0-1.02-.196-1.413-.587A1.926 1.926 0 0 1 3 19V6.5c0-.25.042-.475.125-.675.083-.2.192-.392.325-.575l1.4-1.7c.133-.183.3-.32.5-.412C5.55 3.046 5.767 3 6 3h12c.233 0 .45.046.65.138.2.091.367.229.5.412l1.4 1.7c.133.183.242.375.325.575.083.2.125.425.125.675V19c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 19 21H5Zm.4-15h13.2l-.85-1H6.25L5.4 6ZM5 19h14V8H5v11Zm7-1.425c.133 0 .258-.02.375-.063a.877.877 0 0 0 .325-.212l2.6-2.6a.948.948 0 0 0 .275-.7.948.948 0 0 0-.275-.7.948.948 0 0 0-.7-.275.948.948 0 0 0-.7.275l-.9.9V11a.968.968 0 0 0-.287-.713A.968.968 0 0 0 12 10a.968.968 0 0 0-.713.287A.968.968 0 0 0 11 11v3.2l-.9-.9a.948.948 0 0 0-.7-.275.948.948 0 0 0-.7.275.948.948 0 0 0-.275.7.95.95 0 0 0 .275.7l2.6 2.6c.1.1.208.17.325.212.117.042.242.063.375.063Z"
+            />
+          </svg>
           <span
             class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
           >
@@ -1289,9 +1343,17 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
             class="_typography_yh5dq_162 _font-body-sm-medium_yh5dq_50 _badge_qipht_17"
             data-kind="default"
           >
-            <div
+            <svg
+              fill="currentColor"
+              height="1em"
+              viewBox="0 0 24 24"
               width="1em"
-            />
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M6 22c-.55 0-1.02-.196-1.413-.587A1.926 1.926 0 0 1 4 20V10c0-.55.196-1.02.587-1.412.212-.212.446-.366.703-.463L1.333 4.167a1 1 0 0 1 1.414-1.414L7 7.006v-.012l13 13v.012l1.247 1.247a1 1 0 0 1-1.414 1.414l-.896-.896A1.935 1.935 0 0 1 18 22H6Zm14-4.834V10c0-.55-.196-1.02-.587-1.412A1.926 1.926 0 0 0 18 8h-1V6c0-1.383-.488-2.563-1.463-3.538C14.563 1.487 13.383 1 12 1s-2.563.488-3.538 1.462A4.876 4.876 0 0 0 7.243 4.41L9 6.166V6c0-.833.292-1.542.875-2.125A2.893 2.893 0 0 1 12 3c.833 0 1.542.292 2.125.875S15 5.167 15 6v2h-4.166L20 17.166Z"
+              />
+            </svg>
             Not encrypted
           </span>
         </section>
@@ -1322,7 +1384,17 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
                 class="_indicator-icon_133tf_26"
                 style="--cpd-icon-button-size: 100%;"
               >
-                <div />
+                <svg
+                  fill="currentColor"
+                  height="1em"
+                  viewBox="0 0 24 24"
+                  width="1em"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M12 14.95c-.133 0-.258-.02-.375-.063a.876.876 0 0 1-.325-.212l-4.6-4.6a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275l3.9 3.9 3.9-3.9a.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275.948.948 0 0 1 .275.7.948.948 0 0 1-.275.7l-4.6 4.6c-.1.1-.208.17-.325.212a1.106 1.106 0 0 1-.375.063Z"
+                  />
+                </svg>
               </div>
             </button>
           </div>
@@ -1397,12 +1469,19 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
           data-kind="primary"
           role="menuitem"
         >
-          <div
+          <svg
             aria-hidden="true"
             class="_icon_1gwvj_44"
+            fill="currentColor"
             height="24"
+            viewBox="0 0 24 24"
             width="24"
-          />
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M10 12c-1.1 0-2.042-.392-2.825-1.175C6.392 10.042 6 9.1 6 8s.392-2.042 1.175-2.825C7.958 4.392 8.9 4 10 4s2.042.392 2.825 1.175C13.608 5.958 14 6.9 14 8s-.392 2.042-1.175 2.825C12.042 11.608 11.1 12 10 12Zm-8 6v-.8c0-.567.146-1.087.438-1.563A2.911 2.911 0 0 1 3.6 14.55a14.843 14.843 0 0 1 3.15-1.163A13.76 13.76 0 0 1 10 13c1.1 0 2.183.13 3.25.387 1.067.259 2.117.646 3.15 1.163.483.25.87.612 1.163 1.087.291.476.437.996.437 1.563v.8c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 16 20H4c-.55 0-1.02-.196-1.413-.587A1.926 1.926 0 0 1 2 18Zm2 0h12v-.8a.973.973 0 0 0-.5-.85c-.9-.45-1.808-.787-2.725-1.012a11.6 11.6 0 0 0-5.55 0c-.917.225-1.825.562-2.725 1.012a.973.973 0 0 0-.5.85v.8Zm6-8c.55 0 1.02-.196 1.412-.588C11.804 9.021 12 8.55 12 8c0-.55-.196-1.02-.588-1.412A1.926 1.926 0 0 0 10 6c-.55 0-1.02.196-1.412.588A1.926 1.926 0 0 0 8 8c0 .55.196 1.02.588 1.412.391.392.862.588 1.412.588Zm7 1h2v2c0 .283.096.52.288.713.191.191.429.287.712.287s.52-.096.712-.287A.968.968 0 0 0 21 13v-2h2a.97.97 0 0 0 .712-.287A.968.968 0 0 0 24 10a.967.967 0 0 0-.288-.713A.968.968 0 0 0 23 9h-2V7a.967.967 0 0 0-.288-.713A.968.968 0 0 0 20 6a.968.968 0 0 0-.712.287A.967.967 0 0 0 19 7v2h-2a.968.968 0 0 0-.712.287A.967.967 0 0 0 16 10c0 .283.096.52.288.713A.968.968 0 0 0 17 11Z"
+            />
+          </svg>
           <span
             class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
           >
@@ -1719,12 +1798,19 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
           data-kind="primary"
           role="menuitem"
         >
-          <div
+          <svg
             aria-hidden="true"
             class="_icon_1gwvj_44"
+            fill="currentColor"
             height="24"
+            viewBox="0 0 24 24"
             width="24"
-          />
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M5 21c-.55 0-1.02-.196-1.413-.587A1.926 1.926 0 0 1 3 19V6.5c0-.25.042-.475.125-.675.083-.2.192-.392.325-.575l1.4-1.7c.133-.183.3-.32.5-.412C5.55 3.046 5.767 3 6 3h12c.233 0 .45.046.65.138.2.091.367.229.5.412l1.4 1.7c.133.183.242.375.325.575.083.2.125.425.125.675V19c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 19 21H5Zm.4-15h13.2l-.85-1H6.25L5.4 6ZM5 19h14V8H5v11Zm7-1.425c.133 0 .258-.02.375-.063a.877.877 0 0 0 .325-.212l2.6-2.6a.948.948 0 0 0 .275-.7.948.948 0 0 0-.275-.7.948.948 0 0 0-.7-.275.948.948 0 0 0-.7.275l-.9.9V11a.968.968 0 0 0-.287-.713A.968.968 0 0 0 12 10a.968.968 0 0 0-.713.287A.968.968 0 0 0 11 11v3.2l-.9-.9a.948.948 0 0 0-.7-.275.948.948 0 0 0-.7.275.948.948 0 0 0-.275.7.95.95 0 0 0 .275.7l2.6 2.6c.1.1.208.17.325.212.117.042.242.063.375.063Z"
+            />
+          </svg>
           <span
             class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
           >
diff --git a/test/components/views/rooms/RoomHeader/__snapshots__/VideoRoomChatButton-test.tsx.snap b/test/components/views/rooms/RoomHeader/__snapshots__/VideoRoomChatButton-test.tsx.snap
index 0f0600a7b3..8853387952 100644
--- a/test/components/views/rooms/RoomHeader/__snapshots__/VideoRoomChatButton-test.tsx.snap
+++ b/test/components/views/rooms/RoomHeader/__snapshots__/VideoRoomChatButton-test.tsx.snap
@@ -14,7 +14,17 @@ exports[`<VideoRoomChatButton /> renders button with an unread marker when room
     data-indicator="default"
     style="--cpd-icon-button-size: 100%;"
   >
-    <div />
+    <svg
+      fill="currentColor"
+      height="1em"
+      viewBox="0 0 24 24"
+      width="1em"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M2.95 16.3 1.5 21.25a.936.936 0 0 0 .25 1 .936.936 0 0 0 1 .25l4.95-1.45a10.23 10.23 0 0 0 2.1.712c.717.159 1.45.238 2.2.238a9.737 9.737 0 0 0 3.9-.788 10.098 10.098 0 0 0 3.175-2.137c.9-.9 1.613-1.958 2.137-3.175A9.738 9.738 0 0 0 22 12a9.738 9.738 0 0 0-.788-3.9 10.099 10.099 0 0 0-2.137-3.175c-.9-.9-1.958-1.612-3.175-2.137A9.737 9.737 0 0 0 12 2a9.737 9.737 0 0 0-3.9.788 10.099 10.099 0 0 0-3.175 2.137c-.9.9-1.612 1.958-2.137 3.175A9.738 9.738 0 0 0 2 12a10.179 10.179 0 0 0 .95 4.3Z"
+      />
+    </svg>
   </div>
 </button>
 `;
diff --git a/test/components/views/rooms/__snapshots__/PinnedEventTile-test.tsx.snap b/test/components/views/rooms/__snapshots__/PinnedEventTile-test.tsx.snap
index 5c44de4c4d..0f11ebc5c6 100644
--- a/test/components/views/rooms/__snapshots__/PinnedEventTile-test.tsx.snap
+++ b/test/components/views/rooms/__snapshots__/PinnedEventTile-test.tsx.snap
@@ -46,7 +46,17 @@ exports[`<PinnedEventTile /> should render pinned event 1`] = `
             class="_indicator-icon_133tf_26"
             style="--cpd-icon-button-size: 100%;"
           >
-            <div />
+            <svg
+              fill="currentColor"
+              height="1em"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M6 14c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 4 12c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 6 10c.55 0 1.02.196 1.412.588.392.391.588.862.588 1.412 0 .55-.196 1.02-.588 1.412A1.926 1.926 0 0 1 6 14Zm6 0c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 10 12c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 12 10c.55 0 1.02.196 1.412.588.392.391.588.862.588 1.412 0 .55-.196 1.02-.588 1.412A1.926 1.926 0 0 1 12 14Zm6 0c-.55 0-1.02-.196-1.413-.588A1.926 1.926 0 0 1 16 12c0-.55.196-1.02.587-1.412A1.926 1.926 0 0 1 18 10c.55 0 1.02.196 1.413.588.391.391.587.862.587 1.412 0 .55-.196 1.02-.587 1.412A1.926 1.926 0 0 1 18 14Z"
+              />
+            </svg>
           </div>
         </button>
       </div>
@@ -111,7 +121,17 @@ exports[`<PinnedEventTile /> should render pinned event with thread info 1`] = `
             class="_indicator-icon_133tf_26"
             style="--cpd-icon-button-size: 100%;"
           >
-            <div />
+            <svg
+              fill="currentColor"
+              height="1em"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M6 14c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 4 12c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 6 10c.55 0 1.02.196 1.412.588.392.391.588.862.588 1.412 0 .55-.196 1.02-.588 1.412A1.926 1.926 0 0 1 6 14Zm6 0c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 10 12c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 12 10c.55 0 1.02.196 1.412.588.392.391.588.862.588 1.412 0 .55-.196 1.02-.588 1.412A1.926 1.926 0 0 1 12 14Zm6 0c-.55 0-1.02-.196-1.413-.588A1.926 1.926 0 0 1 16 12c0-.55.196-1.02.587-1.412A1.926 1.926 0 0 1 18 10c.55 0 1.02.196 1.413.588.391.391.587.862.587 1.412 0 .55-.196 1.02-.587 1.412A1.926 1.926 0 0 1 18 14Z"
+              />
+            </svg>
           </div>
         </button>
       </div>
@@ -128,7 +148,20 @@ exports[`<PinnedEventTile /> should render pinned event with thread info 1`] = `
       <div
         class="mx_PinnedEventTile_thread"
       >
-        <div />
+        <svg
+          fill="currentColor"
+          height="1em"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M7 10a.968.968 0 0 1-.713-.287A.968.968 0 0 1 6 9c0-.283.096-.52.287-.713A.968.968 0 0 1 7 8h10a.97.97 0 0 1 .712.287c.192.192.288.43.288.713s-.096.52-.288.713A.968.968 0 0 1 17 10H7Zm0 4a.967.967 0 0 1-.713-.287A.968.968 0 0 1 6 13c0-.283.096-.52.287-.713A.967.967 0 0 1 7 12h6c.283 0 .52.096.713.287.191.192.287.43.287.713s-.096.52-.287.713A.968.968 0 0 1 13 14H7Z"
+          />
+          <path
+            d="M3.707 21.293c-.63.63-1.707.184-1.707-.707V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6l-2.293 2.293ZM6 17h14V5H4v13.172l.586-.586A2 2 0 0 1 6 17Z"
+          />
+        </svg>
         <span>
           Reply to a 
           <button
@@ -168,12 +201,19 @@ exports[`<PinnedEventTile /> should render the menu with all the options 1`] = `
     role="menuitem"
     tabindex="-1"
   >
-    <div
+    <svg
       aria-hidden="true"
       class="_icon_1gwvj_44"
+      fill="currentColor"
       height="24"
+      viewBox="0 0 24 24"
       width="24"
-    />
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M12 16c1.25 0 2.313-.438 3.188-1.313.874-.874 1.312-1.937 1.312-3.187 0-1.25-.438-2.313-1.313-3.188C14.313 7.439 13.25 7 12 7c-1.25 0-2.312.438-3.187 1.313C7.938 9.187 7.5 10.25 7.5 11.5c0 1.25.438 2.313 1.313 3.188C9.688 15.562 10.75 16 12 16Zm0-1.8c-.75 0-1.387-.262-1.912-.787A2.604 2.604 0 0 1 9.3 11.5c0-.75.263-1.387.787-1.912A2.604 2.604 0 0 1 12 8.8c.75 0 1.387.262 1.912.787.525.526.788 1.163.788 1.913s-.262 1.387-.787 1.912A2.604 2.604 0 0 1 12 14.2Zm0 4.8c-2.317 0-4.433-.613-6.35-1.837-1.917-1.226-3.367-2.88-4.35-4.963a.812.812 0 0 1-.1-.313 2.93 2.93 0 0 1 0-.774.812.812 0 0 1 .1-.313c.983-2.083 2.433-3.738 4.35-4.963C7.567 4.614 9.683 4 12 4c2.317 0 4.433.612 6.35 1.838 1.917 1.224 3.367 2.879 4.35 4.962a.81.81 0 0 1 .1.313 2.925 2.925 0 0 1 0 .774.81.81 0 0 1-.1.313c-.983 2.083-2.433 3.738-4.35 4.963C16.433 18.387 14.317 19 12 19Zm0-2a9.544 9.544 0 0 0 5.188-1.488A9.773 9.773 0 0 0 20.8 11.5a9.773 9.773 0 0 0-3.613-4.013A9.544 9.544 0 0 0 12 6a9.545 9.545 0 0 0-5.187 1.487A9.773 9.773 0 0 0 3.2 11.5a9.773 9.773 0 0 0 3.613 4.012A9.544 9.544 0 0 0 12 17Z"
+      />
+    </svg>
     <span
       class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
     >
@@ -201,12 +241,24 @@ exports[`<PinnedEventTile /> should render the menu with all the options 1`] = `
     role="menuitem"
     tabindex="-1"
   >
-    <div
+    <svg
       aria-hidden="true"
       class="_icon_1gwvj_44"
+      fill="currentColor"
       height="24"
+      viewBox="0 0 24 24"
       width="24"
-    />
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        clip-rule="evenodd"
+        d="M5.457 2.083a1 1 0 0 0-1.414 1.414L8.04 7.494v2.25a.5.5 0 0 1-.15.356l-3.7 3.644a.5.5 0 0 0-.15.356v1.4a.5.5 0 0 0 .5.5h6.5v6a1 1 0 0 0 2 0v-6h3.506l4.497 4.497a1 1 0 0 0 1.414-1.414l-17-17ZM14.546 14 10.04 9.494v.25a2.5 2.5 0 0 1-.746 1.781L6.78 14h7.766Z"
+        fill-rule="evenodd"
+      />
+      <path
+        d="M14.04 4v3.85l2.015 2.015a.5.5 0 0 1-.015-.12V5.257a.5.5 0 0 1 .15-.357l2.081-2.043a.5.5 0 0 0-.35-.857h-9.73l2 2h3.849Z"
+      />
+    </svg>
     <span
       class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
     >
@@ -234,12 +286,19 @@ exports[`<PinnedEventTile /> should render the menu with all the options 1`] = `
     role="menuitem"
     tabindex="-1"
   >
-    <div
+    <svg
       aria-hidden="true"
       class="_icon_1gwvj_44"
+      fill="currentColor"
       height="24"
+      viewBox="0 0 24 24"
       width="24"
-    />
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M14.597 5.708a1.004 1.004 0 0 1 0-1.416.996.996 0 0 1 1.412 0l4.699 4.714c.39.39.39 1.025 0 1.416l-4.7 4.714a.996.996 0 0 1-1.411 0 1.004 1.004 0 0 1 0-1.416l3.043-3.054H8.487C6.599 10.666 5 12.27 5 14.333 5.002 16.396 6.6 18 8.488 18h2.093a1 1 0 1 1 0 2H8.487C5.42 20 3 17.425 3 14.333c0-3.092 2.42-5.666 5.486-5.666h9.059l-2.95-2.959Z"
+      />
+    </svg>
     <span
       class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
     >
@@ -273,12 +332,19 @@ exports[`<PinnedEventTile /> should render the menu with all the options 1`] = `
     role="menuitem"
     tabindex="-1"
   >
-    <div
+    <svg
       aria-hidden="true"
       class="_icon_1gwvj_44"
+      fill="currentColor"
       height="24"
+      viewBox="0 0 24 24"
       width="24"
-    />
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M7 21c-.55 0-1.02-.196-1.412-.587A1.926 1.926 0 0 1 5 19V6a.968.968 0 0 1-.713-.287A.968.968 0 0 1 4 5c0-.283.096-.52.287-.713A.968.968 0 0 1 5 4h4a.97.97 0 0 1 .287-.712A.968.968 0 0 1 10 3h4a.97.97 0 0 1 .713.288A.968.968 0 0 1 15 4h4a.97.97 0 0 1 .712.287c.192.192.288.43.288.713s-.096.52-.288.713A.968.968 0 0 1 19 6v13c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 17 21H7ZM7 6v13h10V6H7Zm2 10c0 .283.096.52.287.712.192.192.43.288.713.288s.52-.096.713-.288A.968.968 0 0 0 11 16V9a.967.967 0 0 0-.287-.713A.968.968 0 0 0 10 8a.968.968 0 0 0-.713.287A.968.968 0 0 0 9 9v7Zm4 0c0 .283.096.52.287.712.192.192.43.288.713.288s.52-.096.713-.288A.968.968 0 0 0 15 16V9a.967.967 0 0 0-.287-.713A.968.968 0 0 0 14 8a.968.968 0 0 0-.713.287A.967.967 0 0 0 13 9v7Z"
+      />
+    </svg>
     <span
       class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
     >
@@ -326,12 +392,19 @@ exports[`<PinnedEventTile /> should render the menu without unpin and delete 1`]
     role="menuitem"
     tabindex="-1"
   >
-    <div
+    <svg
       aria-hidden="true"
       class="_icon_1gwvj_44"
+      fill="currentColor"
       height="24"
+      viewBox="0 0 24 24"
       width="24"
-    />
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M12 16c1.25 0 2.313-.438 3.188-1.313.874-.874 1.312-1.937 1.312-3.187 0-1.25-.438-2.313-1.313-3.188C14.313 7.439 13.25 7 12 7c-1.25 0-2.312.438-3.187 1.313C7.938 9.187 7.5 10.25 7.5 11.5c0 1.25.438 2.313 1.313 3.188C9.688 15.562 10.75 16 12 16Zm0-1.8c-.75 0-1.387-.262-1.912-.787A2.604 2.604 0 0 1 9.3 11.5c0-.75.263-1.387.787-1.912A2.604 2.604 0 0 1 12 8.8c.75 0 1.387.262 1.912.787.525.526.788 1.163.788 1.913s-.262 1.387-.787 1.912A2.604 2.604 0 0 1 12 14.2Zm0 4.8c-2.317 0-4.433-.613-6.35-1.837-1.917-1.226-3.367-2.88-4.35-4.963a.812.812 0 0 1-.1-.313 2.93 2.93 0 0 1 0-.774.812.812 0 0 1 .1-.313c.983-2.083 2.433-3.738 4.35-4.963C7.567 4.614 9.683 4 12 4c2.317 0 4.433.612 6.35 1.838 1.917 1.224 3.367 2.879 4.35 4.962a.81.81 0 0 1 .1.313 2.925 2.925 0 0 1 0 .774.81.81 0 0 1-.1.313c-.983 2.083-2.433 3.738-4.35 4.963C16.433 18.387 14.317 19 12 19Zm0-2a9.544 9.544 0 0 0 5.188-1.488A9.773 9.773 0 0 0 20.8 11.5a9.773 9.773 0 0 0-3.613-4.013A9.544 9.544 0 0 0 12 6a9.545 9.545 0 0 0-5.187 1.487A9.773 9.773 0 0 0 3.2 11.5a9.773 9.773 0 0 0 3.613 4.012A9.544 9.544 0 0 0 12 17Z"
+      />
+    </svg>
     <span
       class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
     >
@@ -359,12 +432,19 @@ exports[`<PinnedEventTile /> should render the menu without unpin and delete 1`]
     role="menuitem"
     tabindex="-1"
   >
-    <div
+    <svg
       aria-hidden="true"
       class="_icon_1gwvj_44"
+      fill="currentColor"
       height="24"
+      viewBox="0 0 24 24"
       width="24"
-    />
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M14.597 5.708a1.004 1.004 0 0 1 0-1.416.996.996 0 0 1 1.412 0l4.699 4.714c.39.39.39 1.025 0 1.416l-4.7 4.714a.996.996 0 0 1-1.411 0 1.004 1.004 0 0 1 0-1.416l3.043-3.054H8.487C6.599 10.666 5 12.27 5 14.333 5.002 16.396 6.6 18 8.488 18h2.093a1 1 0 1 1 0 2H8.487C5.42 20 3 17.425 3 14.333c0-3.092 2.42-5.666 5.486-5.666h9.059l-2.95-2.959Z"
+      />
+    </svg>
     <span
       class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
     >
diff --git a/test/components/views/rooms/__snapshots__/PinnedMessageBanner-test.tsx.snap b/test/components/views/rooms/__snapshots__/PinnedMessageBanner-test.tsx.snap
index bc733146ba..39ded465b5 100644
--- a/test/components/views/rooms/__snapshots__/PinnedMessageBanner-test.tsx.snap
+++ b/test/components/views/rooms/__snapshots__/PinnedMessageBanner-test.tsx.snap
@@ -24,10 +24,18 @@ exports[`<PinnedMessageBanner /> should display display a poll event 1`] = `
             data-testid="banner-indicator"
           />
         </div>
-        <div
+        <svg
           class="mx_PinnedMessageBanner_PinIcon"
-          width="20"
-        />
+          fill="currentColor"
+          height="20px"
+          viewBox="0 0 24 24"
+          width="20px"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M5.769 2.857A.5.5 0 0 1 6.119 2h11.762a.5.5 0 0 1 .35.857L16.15 4.9a.5.5 0 0 0-.15.357v4.487a.5.5 0 0 0 .15.356l3.7 3.644a.5.5 0 0 1 .15.356v1.4a.5.5 0 0 1-.5.5H13v6a1 1 0 1 1-2 0v-6H4.5a.5.5 0 0 1-.5-.5v-1.4a.5.5 0 0 1 .15-.356l3.7-3.644A.5.5 0 0 0 8 9.744V5.257a.5.5 0 0 0-.15-.357L5.77 2.857Z"
+          />
+        </svg>
         <span
           class="mx_PinnedMessageBanner_message"
           data-testid="banner-message"
@@ -79,10 +87,18 @@ exports[`<PinnedMessageBanner /> should display the last message when the pinned
             data-testid="banner-indicator"
           />
         </div>
-        <div
+        <svg
           class="mx_PinnedMessageBanner_PinIcon"
-          width="20"
-        />
+          fill="currentColor"
+          height="20px"
+          viewBox="0 0 24 24"
+          width="20px"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M5.769 2.857A.5.5 0 0 1 6.119 2h11.762a.5.5 0 0 1 .35.857L16.15 4.9a.5.5 0 0 0-.15.357v4.487a.5.5 0 0 0 .15.356l3.7 3.644a.5.5 0 0 1 .15.356v1.4a.5.5 0 0 1-.5.5H13v6a1 1 0 1 1-2 0v-6H4.5a.5.5 0 0 1-.5-.5v-1.4a.5.5 0 0 1 .15-.356l3.7-3.644A.5.5 0 0 0 8 9.744V5.257a.5.5 0 0 0-.15-.357L5.77 2.857Z"
+          />
+        </svg>
         <div
           class="mx_PinnedMessageBanner_title"
           data-testid="banner-counter"
@@ -141,10 +157,18 @@ exports[`<PinnedMessageBanner /> should display the m.audio event type 1`] = `
             data-testid="banner-indicator"
           />
         </div>
-        <div
+        <svg
           class="mx_PinnedMessageBanner_PinIcon"
-          width="20"
-        />
+          fill="currentColor"
+          height="20px"
+          viewBox="0 0 24 24"
+          width="20px"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M5.769 2.857A.5.5 0 0 1 6.119 2h11.762a.5.5 0 0 1 .35.857L16.15 4.9a.5.5 0 0 0-.15.357v4.487a.5.5 0 0 0 .15.356l3.7 3.644a.5.5 0 0 1 .15.356v1.4a.5.5 0 0 1-.5.5H13v6a1 1 0 1 1-2 0v-6H4.5a.5.5 0 0 1-.5-.5v-1.4a.5.5 0 0 1 .15-.356l3.7-3.644A.5.5 0 0 0 8 9.744V5.257a.5.5 0 0 0-.15-.357L5.77 2.857Z"
+          />
+        </svg>
         <span
           class="mx_PinnedMessageBanner_message"
           data-testid="banner-message"
@@ -188,10 +212,18 @@ exports[`<PinnedMessageBanner /> should display the m.file event type 1`] = `
             data-testid="banner-indicator"
           />
         </div>
-        <div
+        <svg
           class="mx_PinnedMessageBanner_PinIcon"
-          width="20"
-        />
+          fill="currentColor"
+          height="20px"
+          viewBox="0 0 24 24"
+          width="20px"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M5.769 2.857A.5.5 0 0 1 6.119 2h11.762a.5.5 0 0 1 .35.857L16.15 4.9a.5.5 0 0 0-.15.357v4.487a.5.5 0 0 0 .15.356l3.7 3.644a.5.5 0 0 1 .15.356v1.4a.5.5 0 0 1-.5.5H13v6a1 1 0 1 1-2 0v-6H4.5a.5.5 0 0 1-.5-.5v-1.4a.5.5 0 0 1 .15-.356l3.7-3.644A.5.5 0 0 0 8 9.744V5.257a.5.5 0 0 0-.15-.357L5.77 2.857Z"
+          />
+        </svg>
         <span
           class="mx_PinnedMessageBanner_message"
           data-testid="banner-message"
@@ -235,10 +267,18 @@ exports[`<PinnedMessageBanner /> should display the m.image event type 1`] = `
             data-testid="banner-indicator"
           />
         </div>
-        <div
+        <svg
           class="mx_PinnedMessageBanner_PinIcon"
-          width="20"
-        />
+          fill="currentColor"
+          height="20px"
+          viewBox="0 0 24 24"
+          width="20px"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M5.769 2.857A.5.5 0 0 1 6.119 2h11.762a.5.5 0 0 1 .35.857L16.15 4.9a.5.5 0 0 0-.15.357v4.487a.5.5 0 0 0 .15.356l3.7 3.644a.5.5 0 0 1 .15.356v1.4a.5.5 0 0 1-.5.5H13v6a1 1 0 1 1-2 0v-6H4.5a.5.5 0 0 1-.5-.5v-1.4a.5.5 0 0 1 .15-.356l3.7-3.644A.5.5 0 0 0 8 9.744V5.257a.5.5 0 0 0-.15-.357L5.77 2.857Z"
+          />
+        </svg>
         <span
           class="mx_PinnedMessageBanner_message"
           data-testid="banner-message"
@@ -282,10 +322,18 @@ exports[`<PinnedMessageBanner /> should display the m.video event type 1`] = `
             data-testid="banner-indicator"
           />
         </div>
-        <div
+        <svg
           class="mx_PinnedMessageBanner_PinIcon"
-          width="20"
-        />
+          fill="currentColor"
+          height="20px"
+          viewBox="0 0 24 24"
+          width="20px"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M5.769 2.857A.5.5 0 0 1 6.119 2h11.762a.5.5 0 0 1 .35.857L16.15 4.9a.5.5 0 0 0-.15.357v4.487a.5.5 0 0 0 .15.356l3.7 3.644a.5.5 0 0 1 .15.356v1.4a.5.5 0 0 1-.5.5H13v6a1 1 0 1 1-2 0v-6H4.5a.5.5 0 0 1-.5-.5v-1.4a.5.5 0 0 1 .15-.356l3.7-3.644A.5.5 0 0 0 8 9.744V5.257a.5.5 0 0 0-.15-.357L5.77 2.857Z"
+          />
+        </svg>
         <span
           class="mx_PinnedMessageBanner_message"
           data-testid="banner-message"
@@ -333,10 +381,18 @@ exports[`<PinnedMessageBanner /> should render 2 pinned event 1`] = `
             data-testid="banner-indicator"
           />
         </div>
-        <div
+        <svg
           class="mx_PinnedMessageBanner_PinIcon"
-          width="20"
-        />
+          fill="currentColor"
+          height="20px"
+          viewBox="0 0 24 24"
+          width="20px"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M5.769 2.857A.5.5 0 0 1 6.119 2h11.762a.5.5 0 0 1 .35.857L16.15 4.9a.5.5 0 0 0-.15.357v4.487a.5.5 0 0 0 .15.356l3.7 3.644a.5.5 0 0 1 .15.356v1.4a.5.5 0 0 1-.5.5H13v6a1 1 0 1 1-2 0v-6H4.5a.5.5 0 0 1-.5-.5v-1.4a.5.5 0 0 1 .15-.356l3.7-3.644A.5.5 0 0 0 8 9.744V5.257a.5.5 0 0 0-.15-.357L5.77 2.857Z"
+          />
+        </svg>
         <div
           class="mx_PinnedMessageBanner_title"
           data-testid="banner-counter"
@@ -403,10 +459,18 @@ exports[`<PinnedMessageBanner /> should render 4 pinned event 1`] = `
             data-testid="banner-indicator"
           />
         </div>
-        <div
+        <svg
           class="mx_PinnedMessageBanner_PinIcon"
-          width="20"
-        />
+          fill="currentColor"
+          height="20px"
+          viewBox="0 0 24 24"
+          width="20px"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M5.769 2.857A.5.5 0 0 1 6.119 2h11.762a.5.5 0 0 1 .35.857L16.15 4.9a.5.5 0 0 0-.15.357v4.487a.5.5 0 0 0 .15.356l3.7 3.644a.5.5 0 0 1 .15.356v1.4a.5.5 0 0 1-.5.5H13v6a1 1 0 1 1-2 0v-6H4.5a.5.5 0 0 1-.5-.5v-1.4a.5.5 0 0 1 .15-.356l3.7-3.644A.5.5 0 0 0 8 9.744V5.257a.5.5 0 0 0-.15-.357L5.77 2.857Z"
+          />
+        </svg>
         <div
           class="mx_PinnedMessageBanner_title"
           data-testid="banner-counter"
@@ -465,10 +529,18 @@ exports[`<PinnedMessageBanner /> should render a single pinned event 1`] = `
             data-testid="banner-indicator"
           />
         </div>
-        <div
+        <svg
           class="mx_PinnedMessageBanner_PinIcon"
-          width="20"
-        />
+          fill="currentColor"
+          height="20px"
+          viewBox="0 0 24 24"
+          width="20px"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M5.769 2.857A.5.5 0 0 1 6.119 2h11.762a.5.5 0 0 1 .35.857L16.15 4.9a.5.5 0 0 0-.15.357v4.487a.5.5 0 0 0 .15.356l3.7 3.644a.5.5 0 0 1 .15.356v1.4a.5.5 0 0 1-.5.5H13v6a1 1 0 1 1-2 0v-6H4.5a.5.5 0 0 1-.5-.5v-1.4a.5.5 0 0 1 .15-.356l3.7-3.644A.5.5 0 0 0 8 9.744V5.257a.5.5 0 0 0-.15-.357L5.77 2.857Z"
+          />
+        </svg>
         <span
           class="mx_PinnedMessageBanner_message"
           data-testid="banner-message"
diff --git a/test/components/views/rooms/__snapshots__/RoomHeader-test.tsx.snap b/test/components/views/rooms/__snapshots__/RoomHeader-test.tsx.snap
index 002d168775..e84ca3a9b1 100644
--- a/test/components/views/rooms/__snapshots__/RoomHeader-test.tsx.snap
+++ b/test/components/views/rooms/__snapshots__/RoomHeader-test.tsx.snap
@@ -82,7 +82,17 @@ exports[`RoomHeader dm does not show the face pile for DMs 1`] = `
           class="_indicator-icon_133tf_26"
           style="--cpd-icon-button-size: 100%; --cpd-color-icon-tertiary: var(--cpd-color-icon-disabled);"
         >
-          <div />
+          <svg
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="m20.958 16.374.039 3.527c0 .285-.11.537-.33.756-.22.22-.472.33-.756.33a15.97 15.97 0 0 1-6.57-1.105 16.223 16.223 0 0 1-5.563-3.663 16.084 16.084 0 0 1-3.653-5.573 16.313 16.313 0 0 1-1.115-6.56c0-.285.11-.537.33-.757.22-.22.471-.329.755-.329l3.528.039a1.069 1.069 0 0 1 1.085.93l.543 3.954c.026.181.013.349-.039.504a1.088 1.088 0 0 1-.271.426l-1.64 1.64c.337.672.721 1.308 1.154 1.909.433.6 1.444 1.696 1.444 1.696s1.095 1.01 1.696 1.444c.6.433 1.237.817 1.909 1.153l1.64-1.64a1.08 1.08 0 0 1 .426-.27c.155-.052.323-.065.504-.04l3.954.543a1.069 1.069 0 0 1 .93 1.085Z"
+            />
+          </svg>
         </div>
       </button>
       <button
@@ -96,7 +106,17 @@ exports[`RoomHeader dm does not show the face pile for DMs 1`] = `
           class="_indicator-icon_133tf_26"
           style="--cpd-icon-button-size: 100%;"
         >
-          <div />
+          <svg
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M12 17a.97.97 0 0 0 .713-.288A.968.968 0 0 0 13 16v-4a.968.968 0 0 0-.287-.713A.968.968 0 0 0 12 11a.968.968 0 0 0-.713.287A.968.968 0 0 0 11 12v4c0 .283.096.52.287.712.192.192.43.288.713.288Zm0-8c.283 0 .52-.096.713-.287A.967.967 0 0 0 13 8a.967.967 0 0 0-.287-.713A.968.968 0 0 0 12 7a.968.968 0 0 0-.713.287A.967.967 0 0 0 11 8c0 .283.096.52.287.713.192.191.43.287.713.287Zm0 13a9.738 9.738 0 0 1-3.9-.788 10.099 10.099 0 0 1-3.175-2.137c-.9-.9-1.612-1.958-2.137-3.175A9.738 9.738 0 0 1 2 12a9.74 9.74 0 0 1 .788-3.9 10.099 10.099 0 0 1 2.137-3.175c.9-.9 1.958-1.612 3.175-2.137A9.738 9.738 0 0 1 12 2a9.74 9.74 0 0 1 3.9.788 10.098 10.098 0 0 1 3.175 2.137c.9.9 1.613 1.958 2.137 3.175A9.738 9.738 0 0 1 22 12a9.738 9.738 0 0 1-.788 3.9 10.098 10.098 0 0 1-2.137 3.175c-.9.9-1.958 1.613-3.175 2.137A9.738 9.738 0 0 1 12 22Z"
+            />
+          </svg>
         </div>
       </button>
       <button
@@ -110,7 +130,17 @@ exports[`RoomHeader dm does not show the face pile for DMs 1`] = `
           class="_indicator-icon_133tf_26"
           style="--cpd-icon-button-size: 100%;"
         >
-          <div />
+          <svg
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M4 3h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6l-2.293 2.293c-.63.63-1.707.184-1.707-.707V5a2 2 0 0 1 2-2Zm3 7h10a.97.97 0 0 0 .712-.287A.967.967 0 0 0 18 9a.967.967 0 0 0-.288-.713A.968.968 0 0 0 17 8H7a.968.968 0 0 0-.713.287A.968.968 0 0 0 6 9c0 .283.096.52.287.713.192.191.43.287.713.287Zm0 4h6c.283 0 .52-.096.713-.287A.968.968 0 0 0 14 13a.968.968 0 0 0-.287-.713A.968.968 0 0 0 13 12H7a.967.967 0 0 0-.713.287A.968.968 0 0 0 6 13c0 .283.096.52.287.713.192.191.43.287.713.287Z"
+            />
+          </svg>
         </div>
       </button>
     </div>
diff --git a/test/components/views/settings/devices/__snapshots__/LoginWithQRFlow-test.tsx.snap b/test/components/views/settings/devices/__snapshots__/LoginWithQRFlow-test.tsx.snap
index d9f6518f52..ec3bb4a690 100644
--- a/test/components/views/settings/devices/__snapshots__/LoginWithQRFlow-test.tsx.snap
+++ b/test/components/views/settings/devices/__snapshots__/LoginWithQRFlow-test.tsx.snap
@@ -487,9 +487,17 @@ exports[`<LoginWithQRFlow /> errors renders other_device_already_signed_in 1`] =
       <div
         class="mx_LoginWithQR_icon"
       >
-        <div
+        <svg
+          fill="currentColor"
+          height="1em"
+          viewBox="0 0 24 24"
           width="32px"
-        />
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="m10.6 13.8-2.15-2.15a.948.948 0 0 0-.7-.275.948.948 0 0 0-.7.275.948.948 0 0 0-.275.7.95.95 0 0 0 .275.7L9.9 15.9c.2.2.433.3.7.3.267 0 .5-.1.7-.3l5.65-5.65a.948.948 0 0 0 .275-.7.948.948 0 0 0-.275-.7.948.948 0 0 0-.7-.275.948.948 0 0 0-.7.275L10.6 13.8ZM12 22a9.738 9.738 0 0 1-3.9-.788 10.099 10.099 0 0 1-3.175-2.137c-.9-.9-1.612-1.958-2.137-3.175A9.738 9.738 0 0 1 2 12a9.74 9.74 0 0 1 .788-3.9 10.099 10.099 0 0 1 2.137-3.175c.9-.9 1.958-1.612 3.175-2.137A9.738 9.738 0 0 1 12 2a9.74 9.74 0 0 1 3.9.788 10.098 10.098 0 0 1 3.175 2.137c.9.9 1.613 1.958 2.137 3.175A9.738 9.738 0 0 1 22 12a9.738 9.738 0 0 1-.788 3.9 10.098 10.098 0 0 1-2.137 3.175c-.9.9-1.958 1.613-3.175 2.137A9.738 9.738 0 0 1 12 22Z"
+          />
+        </svg>
       </div>
       <h1
         class="_typography_yh5dq_162 _font-heading-sm-semibold_yh5dq_102"
@@ -1029,7 +1037,17 @@ exports[`<LoginWithQRFlow /> renders QR code 1`] = `
         role="button"
         tabindex="0"
       >
-        <div />
+        <svg
+          fill="currentColor"
+          height="1em"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="m13.3 17.3-4.6-4.6a.877.877 0 0 1-.213-.325A1.106 1.106 0 0 1 8.425 12c0-.133.02-.258.062-.375A.878.878 0 0 1 8.7 11.3l4.6-4.6a.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275.948.948 0 0 1 .275.7.948.948 0 0 1-.275.7L10.8 12l3.9 3.9a.949.949 0 0 1 .275.7.948.948 0 0 1-.275.7.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275Z"
+          />
+        </svg>
       </div>
       <div
         class="mx_LoginWithQR_breadcrumbs"
@@ -1230,7 +1248,17 @@ exports[`<LoginWithQRFlow /> renders spinner while loading 1`] = `
         role="button"
         tabindex="0"
       >
-        <div />
+        <svg
+          fill="currentColor"
+          height="1em"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="m13.3 17.3-4.6-4.6a.877.877 0 0 1-.213-.325A1.106 1.106 0 0 1 8.425 12c0-.133.02-.258.062-.375A.878.878 0 0 1 8.7 11.3l4.6-4.6a.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275.948.948 0 0 1 .275.7.948.948 0 0 1-.275.7L10.8 12l3.9 3.9a.949.949 0 0 1 .275.7.948.948 0 0 1-.275.7.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275Z"
+          />
+        </svg>
       </div>
       <div
         class="mx_LoginWithQR_breadcrumbs"
@@ -1284,7 +1312,17 @@ exports[`<LoginWithQRFlow /> renders spinner while signing in 1`] = `
         role="button"
         tabindex="0"
       >
-        <div />
+        <svg
+          fill="currentColor"
+          height="1em"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="m13.3 17.3-4.6-4.6a.877.877 0 0 1-.213-.325A1.106 1.106 0 0 1 8.425 12c0-.133.02-.258.062-.375A.878.878 0 0 1 8.7 11.3l4.6-4.6a.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275.948.948 0 0 1 .275.7.948.948 0 0 1-.275.7L10.8 12l3.9 3.9a.949.949 0 0 1 .275.7.948.948 0 0 1-.275.7.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275Z"
+          />
+        </svg>
       </div>
       <div
         class="mx_LoginWithQR_breadcrumbs"
@@ -1350,7 +1388,17 @@ exports[`<LoginWithQRFlow /> renders spinner while verifying 1`] = `
         role="button"
         tabindex="0"
       >
-        <div />
+        <svg
+          fill="currentColor"
+          height="1em"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="m13.3 17.3-4.6-4.6a.877.877 0 0 1-.213-.325A1.106 1.106 0 0 1 8.425 12c0-.133.02-.258.062-.375A.878.878 0 0 1 8.7 11.3l4.6-4.6a.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275.948.948 0 0 1 .275.7.948.948 0 0 1-.275.7L10.8 12l3.9 3.9a.949.949 0 0 1 .275.7.948.948 0 0 1-.275.7.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275Z"
+          />
+        </svg>
       </div>
       <div
         class="mx_LoginWithQR_breadcrumbs"
@@ -1407,7 +1455,17 @@ exports[`<LoginWithQRFlow /> renders spinner whilst QR generating 1`] = `
         role="button"
         tabindex="0"
       >
-        <div />
+        <svg
+          fill="currentColor"
+          height="1em"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="m13.3 17.3-4.6-4.6a.877.877 0 0 1-.213-.325A1.106 1.106 0 0 1 8.425 12c0-.133.02-.258.062-.375A.878.878 0 0 1 8.7 11.3l4.6-4.6a.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275.948.948 0 0 1 .275.7.948.948 0 0 1-.275.7L10.8 12l3.9 3.9a.949.949 0 0 1 .275.7.948.948 0 0 1-.275.7.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275Z"
+          />
+        </svg>
       </div>
       <div
         class="mx_LoginWithQR_breadcrumbs"
diff --git a/test/components/views/settings/devices/__snapshots__/LoginWithQRSection-test.tsx.snap b/test/components/views/settings/devices/__snapshots__/LoginWithQRSection-test.tsx.snap
index f1152f4cc2..d24d7d1550 100644
--- a/test/components/views/settings/devices/__snapshots__/LoginWithQRSection-test.tsx.snap
+++ b/test/components/views/settings/devices/__snapshots__/LoginWithQRSection-test.tsx.snap
@@ -36,10 +36,25 @@ exports[`<LoginWithQRSection /> MSC3906 should render panel get_login_token + .w
           role="button"
           tabindex="0"
         >
-          <div
+          <svg
+            fill="currentColor"
             height="20"
+            viewBox="0 0 24 24"
             width="20"
-          />
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              clip-rule="evenodd"
+              d="M3 4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4Zm2 5V5h4v4H5Zm-2 5a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-6Zm2 5v-4h4v4H5Zm9-16a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1h-6Zm1 2v4h4V5h-4Z"
+              fill-rule="evenodd"
+            />
+            <path
+              d="M15 16v-3h-2v3h2Z"
+            />
+            <path
+              d="M17 16h-2v2h-2v3h2v-3h2v2h4v-2h-2v-5h-2v3Z"
+            />
+          </svg>
           Show QR code
         </div>
       </div>
@@ -78,10 +93,25 @@ exports[`<LoginWithQRSection /> MSC3906 should render panel get_login_token + MS
           role="button"
           tabindex="0"
         >
-          <div
+          <svg
+            fill="currentColor"
             height="20"
+            viewBox="0 0 24 24"
             width="20"
-          />
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              clip-rule="evenodd"
+              d="M3 4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4Zm2 5V5h4v4H5Zm-2 5a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-6Zm2 5v-4h4v4H5Zm9-16a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1h-6Zm1 2v4h4V5h-4Z"
+              fill-rule="evenodd"
+            />
+            <path
+              d="M15 16v-3h-2v3h2Z"
+            />
+            <path
+              d="M17 16h-2v2h-2v3h2v-3h2v2h4v-2h-2v-5h-2v3Z"
+            />
+          </svg>
           Show QR code
         </div>
       </div>
diff --git a/test/components/views/settings/tabs/user/__snapshots__/SidebarUserSettingsTab-test.tsx.snap b/test/components/views/settings/tabs/user/__snapshots__/SidebarUserSettingsTab-test.tsx.snap
index f098d80e84..39034ec85f 100644
--- a/test/components/views/settings/tabs/user/__snapshots__/SidebarUserSettingsTab-test.tsx.snap
+++ b/test/components/views/settings/tabs/user/__snapshots__/SidebarUserSettingsTab-test.tsx.snap
@@ -221,7 +221,17 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings with guest spa url
                     <div
                       class="mx_SettingsSubsection_text"
                     >
-                      <div />
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M6 4h10a2 2 0 0 1 2 2v4.286l3.35-2.871a1 1 0 0 1 1.65.76v7.65a1 1 0 0 1-1.65.76L18 13.715V18a2 2 0 0 1-2 2H6a4 4 0 0 1-4-4V8a4 4 0 0 1 4-4Z"
+                        />
+                      </svg>
                       Video rooms and conferences
                     </div>
                     <div
@@ -462,7 +472,17 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings without guest spa u
                     <div
                       class="mx_SettingsSubsection_text"
                     >
-                      <div />
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M6 4h10a2 2 0 0 1 2 2v4.286l3.35-2.871a1 1 0 0 1 1.65.76v7.65a1 1 0 0 1-1.65.76L18 13.715V18a2 2 0 0 1-2 2H6a4 4 0 0 1-4-4V8a4 4 0 0 1 4-4Z"
+                        />
+                      </svg>
                       Video rooms and conferences
                     </div>
                     <div
diff --git a/test/components/views/spaces/__snapshots__/SpacePanel-test.tsx.snap b/test/components/views/spaces/__snapshots__/SpacePanel-test.tsx.snap
index 14133f22ab..2b1fed03ab 100644
--- a/test/components/views/spaces/__snapshots__/SpacePanel-test.tsx.snap
+++ b/test/components/views/spaces/__snapshots__/SpacePanel-test.tsx.snap
@@ -243,9 +243,18 @@ exports[`<SpacePanel /> should show all activated MetaSpaces in the correct orde
           class="_indicator-icon_133tf_26"
           style="--cpd-icon-button-size: 100%;"
         >
-          <div
+          <svg
             class="mx_ThreadsActivityCentreButton_Icon"
-          />
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M4 3h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6l-2.293 2.293c-.63.63-1.707.184-1.707-.707V5a2 2 0 0 1 2-2Zm3 7h10a.97.97 0 0 0 .712-.287A.967.967 0 0 0 18 9a.967.967 0 0 0-.288-.713A.968.968 0 0 0 17 8H7a.968.968 0 0 0-.713.287A.968.968 0 0 0 6 9c0 .283.096.52.287.713.192.191.43.287.713.287Zm0 4h6c.283 0 .52-.096.713-.287A.968.968 0 0 0 14 13a.968.968 0 0 0-.287-.713A.968.968 0 0 0 13 12H7a.967.967 0 0 0-.713.287A.968.968 0 0 0 6 13c0 .283.096.52.287.713.192.191.43.287.713.287Z"
+            />
+          </svg>
         </div>
       </button>
       <span
diff --git a/test/components/views/spaces/__snapshots__/ThreadsActivityCentre-test.tsx.snap b/test/components/views/spaces/__snapshots__/ThreadsActivityCentre-test.tsx.snap
index ceddf215f1..059c8ec962 100644
--- a/test/components/views/spaces/__snapshots__/ThreadsActivityCentre-test.tsx.snap
+++ b/test/components/views/spaces/__snapshots__/ThreadsActivityCentre-test.tsx.snap
@@ -162,9 +162,18 @@ exports[`ThreadsActivityCentre should close the release announcement when the TA
           class="_indicator-icon_133tf_26"
           style="--cpd-icon-button-size: 100%;"
         >
-          <div
+          <svg
             class="mx_ThreadsActivityCentreButton_Icon"
-          />
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M4 3h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6l-2.293 2.293c-.63.63-1.707.184-1.707-.707V5a2 2 0 0 1 2-2Zm3 7h10a.97.97 0 0 0 .712-.287A.967.967 0 0 0 18 9a.967.967 0 0 0-.288-.713A.968.968 0 0 0 17 8H7a.968.968 0 0 0-.713.287A.968.968 0 0 0 6 9c0 .283.096.52.287.713.192.191.43.287.713.287Zm0 4h6c.283 0 .52-.096.713-.287A.968.968 0 0 0 14 13a.968.968 0 0 0-.287-.713A.968.968 0 0 0 13 12H7a.967.967 0 0 0-.713.287A.968.968 0 0 0 6 13c0 .283.096.52.287.713.192.191.43.287.713.287Z"
+            />
+          </svg>
         </div>
       </button>
     </div>
@@ -446,9 +455,18 @@ exports[`ThreadsActivityCentre should render the release announcement 1`] = `
           class="_indicator-icon_133tf_26"
           style="--cpd-icon-button-size: 100%;"
         >
-          <div
+          <svg
             class="mx_ThreadsActivityCentreButton_Icon"
-          />
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M4 3h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6l-2.293 2.293c-.63.63-1.707.184-1.707-.707V5a2 2 0 0 1 2-2Zm3 7h10a.97.97 0 0 0 .712-.287A.967.967 0 0 0 18 9a.967.967 0 0 0-.288-.713A.968.968 0 0 0 17 8H7a.968.968 0 0 0-.713.287A.968.968 0 0 0 6 9c0 .283.096.52.287.713.192.191.43.287.713.287Zm0 4h6c.283 0 .52-.096.713-.287A.968.968 0 0 0 14 13a.968.968 0 0 0-.287-.713A.968.968 0 0 0 13 12H7a.967.967 0 0 0-.713.287A.968.968 0 0 0 6 13c0 .283.096.52.287.713.192.191.43.287.713.287Z"
+            />
+          </svg>
         </div>
       </button>
       <span