Standardise icons using Compound Design Tokens (#28217)

* De-duplicate icons using Compound Design Tokens

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* delint

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Deduplicate more icons using Compound Design Tokens

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update icon

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Discard changes to res/css/structures/_RoomSearch.pcss

* Update snapshots

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Discard changes to res/fonts/Open_Sans/LICENSE.txt

* Discard changes to res/css/views/elements/_CopyableText.pcss

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

res/css/structures/_RightPanel.pcss

@@ -27,7 +27,7 @@ Please see LICENSE files in the repository root for full details.
 /** Fixme - factor this out with the main header **/
 
 .mx_RightPanel_threadsButton::before {
-    mask-image: url("$(res)/img/element-icons/room/thread.svg");
+    mask-image: url("@vector-im/compound-design-tokens/icons/threads-solid.svg");
 }
 
 .mx_RightPanel_notifsButton::before {
@@ -36,7 +36,7 @@ Please see LICENSE files in the repository root for full details.
 }
 
 .mx_RightPanel_roomSummaryButton::before {
-    mask-image: url("$(res)/img/element-icons/room/room-summary.svg");
+    mask-image: url("@vector-im/compound-design-tokens/icons/info-solid.svg");
     mask-position: center;
 }
 

res/css/structures/_SpacePanel.pcss

@@ -211,11 +211,11 @@ Please see LICENSE files in the repository root for full details.
         }
 
         &.mx_SpaceButton_favourites .mx_SpaceButton_icon::before {
-            mask-image: url("$(res)/img/element-icons/roomlist/favorite.svg");
+            mask-image: url("@vector-im/compound-design-tokens/icons/favourite-solid.svg");
         }
 
         &.mx_SpaceButton_people .mx_SpaceButton_icon::before {
-            mask-image: url("$(res)/img/element-icons/room/members.svg");
+            mask-image: url("@vector-im/compound-design-tokens/icons/user-profile-solid.svg");
         }
 
         &.mx_SpaceButton_orphans .mx_SpaceButton_icon::before {
@@ -426,11 +426,11 @@ Please see LICENSE files in the repository root for full details.
     }
 
     .mx_SpacePanel_iconLeave::before {
-        mask-image: url("$(res)/img/element-icons/leave.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/leave.svg");
     }
 
     .mx_SpacePanel_iconMembers::before {
-        mask-image: url("$(res)/img/element-icons/room/members.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/user-profile-solid.svg");
     }
 
     .mx_SpacePanel_iconPlus::before {

res/css/structures/_SpaceRoomView.pcss

@@ -248,7 +248,7 @@ Please see LICENSE files in the repository root for full details.
         }
 
         .mx_SpaceRoomView_privateScope_justMeButton::before {
-            mask-image: url("$(res)/img/element-icons/room/members.svg");
+            mask-image: url("@vector-im/compound-design-tokens/icons/user-profile-solid.svg");
         }
 
         .mx_SpaceRoomView_privateScope_meAndMyTeammatesButton::before {

res/css/structures/_UserMenu.pcss

@@ -197,7 +197,7 @@ Please see LICENSE files in the repository root for full details.
     }
 
     .mx_UserMenu_iconSignOut::before {
-        mask-image: url("$(res)/img/element-icons/leave.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/leave.svg");
     }
 
     .mx_UserMenu_iconQr::before {

res/css/views/context_menus/_MessageContextMenu.pcss

@@ -33,7 +33,7 @@ Please see LICENSE files in the repository root for full details.
     }
 
     .mx_MessageContextMenu_iconLink::before {
-        mask-image: url("$(res)/img/element-icons/link.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/link.svg");
     }
 
     .mx_MessageContextMenu_iconPermalink::before {
@@ -53,7 +53,7 @@ Please see LICENSE files in the repository root for full details.
     }
 
     .mx_MessageContextMenu_iconForward::before {
-        mask-image: url("$(res)/img/element-icons/message/fwd.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/forward.svg");
     }
 
     .mx_MessageContextMenu_iconRedact::before {
@@ -96,7 +96,7 @@ Please see LICENSE files in the repository root for full details.
     }
 
     .mx_MessageContextMenu_iconReplyInThread::before {
-        mask-image: url("$(res)/img/element-icons/message/thread.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/threads.svg");
     }
 
     .mx_MessageContextMenu_iconReact::before {

res/css/views/context_menus/_RoomGeneralContextMenu.pcss

@@ -1,5 +1,5 @@
 .mx_RoomGeneralContextMenu_iconStar::before {
-    mask-image: url("$(res)/img/element-icons/roomlist/favorite.svg");
+    mask-image: url("@vector-im/compound-design-tokens/icons/favourite-solid.svg");
 }
 
 .mx_RoomGeneralContextMenu_iconArrowDown::before {
@@ -31,7 +31,7 @@
 }
 
 .mx_RoomGeneralContextMenu_iconPeople::before {
-    mask-image: url("$(res)/img/element-icons/room/members.svg");
+    mask-image: url("@vector-im/compound-design-tokens/icons/user-profile-solid.svg");
 }
 
 .mx_RoomGeneralContextMenu_iconFiles::before {
@@ -43,7 +43,7 @@
 }
 
 .mx_RoomGeneralContextMenu_iconWidgets::before {
-    mask-image: url("$(res)/img/element-icons/room/apps.svg");
+    mask-image: url("@vector-im/compound-design-tokens/icons/extensions-solid.svg");
 }
 
 .mx_RoomGeneralContextMenu_iconSettings::before {
@@ -51,7 +51,7 @@
 }
 
 .mx_RoomGeneralContextMenu_iconExport::before {
-    mask-image: url("$(res)/img/element-icons/export.svg");
+    mask-image: url("@vector-im/compound-design-tokens/icons/export-archive.svg");
 }
 
 .mx_RoomGeneralContextMenu_iconDeveloperTools::before {
@@ -59,7 +59,7 @@
 }
 
 .mx_RoomGeneralContextMenu_iconCopyLink::before {
-    mask-image: url("$(res)/img/element-icons/link.svg");
+    mask-image: url("@vector-im/compound-design-tokens/icons/link.svg");
 }
 
 .mx_RoomGeneralContextMenu_iconInvite::before {
@@ -67,5 +67,5 @@
 }
 
 .mx_RoomGeneralContextMenu_iconSignOut::before {
-    mask-image: url("$(res)/img/element-icons/leave.svg");
+    mask-image: url("@vector-im/compound-design-tokens/icons/leave.svg");
 }

res/css/views/dialogs/_ConfirmSpaceUserActionDialog.pcss

@@ -51,7 +51,7 @@ Please see LICENSE files in the repository root for full details.
             background-color: $secondary-content;
             mask-repeat: no-repeat;
             mask-size: contain;
-            mask-image: url("$(res)/img/element-icons/room/room-summary.svg");
+            mask-image: url("@vector-im/compound-design-tokens/icons/info-solid.svg");
             mask-position: center;
         }
     }

res/css/views/dialogs/_LeaveSpaceDialog.pcss

@@ -45,7 +45,7 @@ Please see LICENSE files in the repository root for full details.
                         background-color: $secondary-content;
                         mask-repeat: no-repeat;
                         mask-size: contain;
-                        mask-image: url("$(res)/img/element-icons/room/room-summary.svg");
+                        mask-image: url("@vector-im/compound-design-tokens/icons/info-solid.svg");
                         mask-position: center;
                     }
                 }

res/css/views/dialogs/_ManageRestrictedJoinRuleDialog.pcss

@@ -108,7 +108,7 @@ Please see LICENSE files in the repository root for full details.
             background-color: $secondary-content;
             mask-repeat: no-repeat;
             mask-size: contain;
-            mask-image: url("$(res)/img/element-icons/room/room-summary.svg");
+            mask-image: url("@vector-im/compound-design-tokens/icons/info-solid.svg");
             mask-position: center;
         }
     }

res/css/views/dialogs/_SpotlightDialog.pcss

@@ -93,7 +93,7 @@ Please see LICENSE files in the repository root for full details.
             }
 
             &.mx_SpotlightDialog_filterPeople::before {
-                mask-image: url("$(res)/img/element-icons/room/members.svg");
+                mask-image: url("@vector-im/compound-design-tokens/icons/user-profile-solid.svg");
             }
 
             &.mx_SpotlightDialog_filterPublicRooms::before {
@@ -400,7 +400,7 @@ Please see LICENSE files in the repository root for full details.
         }
 
         .mx_SpotlightDialog_inviteLink .mx_AccessibleButton::before {
-            mask-image: url("$(res)/img/element-icons/link.svg");
+            mask-image: url("@vector-im/compound-design-tokens/icons/link.svg");
         }
 
         .mx_SpotlightDialog_createRoom .mx_AccessibleButton::before {
@@ -432,7 +432,7 @@ Please see LICENSE files in the repository root for full details.
             }
 
             .mx_SpotlightDialog_startChat::before {
-                mask-image: url("$(res)/img/element-icons/room/members.svg");
+                mask-image: url("@vector-im/compound-design-tokens/icons/user-profile-solid.svg");
             }
 
             .mx_SpotlightDialog_joinRoomAlias::before {
@@ -512,11 +512,11 @@ Please see LICENSE files in the repository root for full details.
             }
 
             &.mx_SpotlightDialog_metaspaceResult_favourites-space {
-                mask-image: url("$(res)/img/element-icons/roomlist/favorite.svg");
+                mask-image: url("@vector-im/compound-design-tokens/icons/favourite-solid.svg");
             }
 
             &.mx_SpotlightDialog_metaspaceResult_people-space {
-                mask-image: url("$(res)/img/element-icons/room/members.svg");
+                mask-image: url("@vector-im/compound-design-tokens/icons/user-profile-solid.svg");
             }
 
             &.mx_SpotlightDialog_metaspaceResult_orphans-space {

res/css/views/elements/_InfoTooltip.pcss

@@ -25,7 +25,7 @@ Please see LICENSE files in the repository root for full details.
 }
 
 .mx_InfoTooltip_icon_info::before {
-    mask-image: url("$(res)/img/element-icons/info.svg");
+    mask-image: url("@vector-im/compound-design-tokens/icons/info.svg");
 }
 
 .mx_InfoTooltip_icon_warning::before {

res/css/views/messages/_MessageActionBar.pcss

@@ -108,6 +108,10 @@ Please see LICENSE files in the repository root for full details.
             color: var(--cpd-color-icon-primary);
         }
 
+        &.mx_MessageActionBar_threadButton {
+            --MessageActionBar-icon-size: 20px;
+        }
+
         &.mx_MessageActionBar_retryButton {
             --MessageActionBar-icon-size: 16px;
         }

res/css/views/right_panel/_ThreadPanel.pcss

@@ -165,7 +165,7 @@ Please see LICENSE files in the repository root for full details.
 }
 
 .mx_ThreadPanel_copyLinkToThread::before {
-    mask-image: url("$(res)/img/element-icons/link.svg");
+    mask-image: url("@vector-im/compound-design-tokens/icons/link.svg");
 }
 
 .mx_ContextualMenu_wrapper {

res/css/views/rooms/_RoomList.pcss

@@ -29,7 +29,7 @@ Please see LICENSE files in the repository root for full details.
     mask-image: url("$(res)/img/element-icons/roomlist/dialpad.svg");
 }
 .mx_RoomList_iconStartChat::before {
-    mask-image: url("$(res)/img/element-icons/roomlist/member-plus.svg");
+    mask-image: url("@vector-im/compound-design-tokens/icons/user-add-solid.svg");
 }
 .mx_RoomList_iconInvite::before {
     mask-image: url("$(res)/img/element-icons/room/share.svg");

res/css/views/rooms/_RoomListHeader.pcss

@@ -92,7 +92,7 @@ Please see LICENSE files in the repository root for full details.
     mask-image: url("$(res)/img/element-icons/room/invite.svg");
 }
 .mx_RoomListHeader_iconStartChat::before {
-    mask-image: url("$(res)/img/element-icons/roomlist/member-plus.svg");
+    mask-image: url("@vector-im/compound-design-tokens/icons/user-add-solid.svg");
 }
 .mx_RoomListHeader_iconNewRoom::before {
     mask-image: url("$(res)/img/element-icons/roomlist/hash-plus.svg");

res/css/views/rooms/_RoomPreviewCard.pcss

@@ -34,7 +34,7 @@ Please see LICENSE files in the repository root for full details.
             mask-repeat: no-repeat;
             mask-position: center;
             mask-size: contain;
-            mask-image: url("$(res)/img/element-icons/room/room-summary.svg");
+            mask-image: url("@vector-im/compound-design-tokens/icons/info-solid.svg");
             background-color: $secondary-content;
         }
     }

res/css/views/rooms/_RoomTile.pcss

@@ -182,7 +182,7 @@ Please see LICENSE files in the repository root for full details.
 
 .mx_RoomTile_contextMenu {
     .mx_RoomTile_iconStar::before {
-        mask-image: url("$(res)/img/element-icons/roomlist/favorite.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/favourite-solid.svg");
     }
 
     .mx_RoomTile_iconArrowDown::before {
@@ -206,7 +206,7 @@ Please see LICENSE files in the repository root for full details.
     }
 
     .mx_RoomTile_iconPeople::before {
-        mask-image: url("$(res)/img/element-icons/room/members.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/user-profile-solid.svg");
     }
 
     .mx_RoomTile_iconFiles::before {
@@ -218,7 +218,7 @@ Please see LICENSE files in the repository root for full details.
     }
 
     .mx_RoomTile_iconWidgets::before {
-        mask-image: url("$(res)/img/element-icons/room/apps.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/extensions-solid.svg");
     }
 
     .mx_RoomTile_iconSettings::before {
@@ -226,11 +226,11 @@ Please see LICENSE files in the repository root for full details.
     }
 
     .mx_RoomTile_iconExport::before {
-        mask-image: url("$(res)/img/element-icons/export.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/export-archive.svg");
     }
 
     .mx_RoomTile_iconCopyLink::before {
-        mask-image: url("$(res)/img/element-icons/link.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/link.svg");
     }
 
     .mx_RoomTile_iconInvite::before {
@@ -238,6 +238,6 @@ Please see LICENSE files in the repository root for full details.
     }
 
     .mx_RoomTile_iconSignOut::before {
-        mask-image: url("$(res)/img/element-icons/leave.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/leave.svg");
     }
 }

res/css/views/spaces/_SpacePublicShare.pcss

@@ -11,7 +11,7 @@ Please see LICENSE files in the repository root for full details.
         @mixin SpacePillButton;
 
         &.mx_SpacePublicShare_shareButton::before {
-            mask-image: url("$(res)/img/element-icons/link.svg");
+            mask-image: url("@vector-im/compound-design-tokens/icons/link.svg");
         }
 
         &.mx_SpacePublicShare_inviteButton::before {

res/img/element-icons/export.svg

@@ -1,8 +0,0 @@
-<svg width="18" height="16" viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <mask id="hole">
-        <rect width="100%" height="100%" fill="white"/>
-        <circle cx="13" cy="11" r="5" fill="black"/>
-    </mask>
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M8.20757 14.9221C12.1427 14.9221 15.3327 11.7309 15.3327 7.79434C15.3327 3.85781 12.1427 0.666626 8.20757 0.666626C4.27246 0.666626 1.08243 3.85781 1.08243 7.79434C1.08243 8.89706 1.33275 9.9413 1.77965 10.8733L0.90483 13.7175C0.644577 14.5636 1.43951 15.3549 2.28444 15.0908L5.10044 14.2104C6.03948 14.6664 7.09367 14.9221 8.20757 14.9221Z" fill="#737D8C" mask="url(#hole)"/>
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M13.6 8.19998C13.6 7.8686 13.3314 7.59998 13 7.59998C12.6686 7.59998 12.4 7.8686 12.4 8.19998L12.4 12.3514L10.8243 10.7757C10.59 10.5414 10.2101 10.5414 9.97574 10.7757C9.74142 11.01 9.74142 11.3899 9.97574 11.6242L12.5757 14.2242C12.8101 14.4585 13.19 14.4585 13.4243 14.2242L16.0243 11.6242C16.2586 11.3899 16.2586 11.01 16.0243 10.7757C15.79 10.5414 15.4101 10.5414 15.1757 10.7757L13.6 12.3514L13.6 8.19998Z" fill="#7C7C7C"/>
-</svg>

res/img/element-icons/info.svg

@@ -1,4 +0,0 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<circle cx="10" cy="10" r="9.5" stroke="#787878"/>
-<path d="M9.79248 14H11.2065V8H9.79248V14ZM10.5034 7.14844C10.9526 7.14844 11.3198 6.80469 11.3198 6.38281C11.3198 5.95703 10.9526 5.61328 10.5034 5.61328C10.0503 5.61328 9.68311 5.95703 9.68311 6.38281C9.68311 6.80469 10.0503 7.14844 10.5034 7.14844Z" fill="#787878"/>
-</svg>

res/img/element-icons/leave.svg

@@ -1,7 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M12 4L18.2139 2.44654C19.1211 2.21972 20 2.90592 20 3.84112V20.1589C20 21.0941 19.1211 21.7803 18.2139 21.5535L12 20V4Z" fill="black"/>
-<mask id="path-2-inside-1" fill="white">
-<rect x="4" y="4" width="10" height="16" rx="1.4375"/>
-</mask>
-<rect x="4" y="4" width="10" height="16" rx="1.4375" stroke="black" stroke-width="4" mask="url(#path-2-inside-1)"/>
-</svg>

res/img/element-icons/link.svg

@@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M12.5285 6.54089L13.0273 6.04207C14.4052 4.66426 16.6259 4.65104 17.9874 6.01253C19.349 7.37402 19.3357 9.59466 17.9579 10.9725L15.5878 13.3425C14.21 14.7203 11.9893 14.7335 10.6277 13.372M11.4717 17.4589L10.9727 17.9579C9.59481 19.3357 7.37409 19.349 6.01256 17.9875C4.65102 16.626 4.66426 14.4053 6.04211 13.0275L8.41203 10.6577C9.78988 9.27988 12.0106 9.26665 13.3721 10.6281" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
-</svg>

res/img/element-icons/location.svg

@@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M12 1.99999C8.13 1.99999 5 5.2152 5 9.19054C5 13.4741 9.42 19.3806 11.24 21.6302C11.64 22.1233 12.37 22.1233 12.77 21.6302C14.58 19.3806 19 13.4741 19 9.19054C19 5.2152 15.87 1.99999 12 1.99999ZM12 11.7586C10.62 11.7586 9.5 10.6081 9.5 9.19054C9.5 7.77298 10.62 6.62249 12 6.62249C13.38 6.62249 14.5 7.77298 14.5 9.19054C14.5 10.6081 13.38 11.7586 12 11.7586Z" fill="currentColor"/>
-</svg>

res/img/element-icons/message/fwd.svg

@@ -1,3 +0,0 @@
-<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M10.9454 4.27941C10.653 3.98601 10.6539 3.51114 10.9472 3.21875C11.2406 2.92637 11.7155 2.92719 12.0079 3.22059L15.5312 6.75612C15.8229 7.0488 15.8229 7.52226 15.5312 7.81494L12.0079 11.3505C11.7155 11.6439 11.2407 11.6447 10.9473 11.3523C10.6539 11.06 10.653 10.5851 10.9454 10.2917L13.2292 8H6.36588C4.95064 8 3.75282 9.20272 3.75282 10.75C3.75282 12.2973 4.95064 13.5 6.36588 13.5H7.93524C8.34945 13.5 8.68524 13.8358 8.68524 14.25C8.68524 14.6642 8.34945 15 7.93524 15H6.36588C4.06634 15 2.25282 13.0687 2.25282 10.75C2.25282 8.43128 4.06634 6.5 6.36588 6.5H13.1583L10.9454 4.27941Z" fill="black"/>
-</svg>

res/img/element-icons/message/thread.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" viewBox="0 0 18 18"><path fill="currentColor" d="M5 5.25a.75.75 0 0 0 0 1.5h8a.75.75 0 0 0 0-1.5H5ZM5 8.25a.75.75 0 0 0 0 1.5h4a.75.75 0 1 0 0-1.5H5Z"/><path fill="currentColor" fill-rule="evenodd" d="M3 .25A2.75 2.75 0 0 0 .25 3v14a.75.75 0 0 0 1.2.6L4.916 15c.217-.162.48-.25.75-.25H15A2.75 2.75 0 0 0 17.75 12V3A2.75 2.75 0 0 0 15 .25H3ZM1.75 3c0-.69.56-1.25 1.25-1.25h12c.69 0 1.25.56 1.25 1.25v9c0 .69-.56 1.25-1.25 1.25H5.666a2.75 2.75 0 0 0-1.65.55L1.75 15.5V3Z" clip-rule="evenodd"/></svg>

res/img/element-icons/room/apps.svg

@@ -1,6 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="14" y="2" width="8" height="8" rx="2" fill="#0DBD8B"/>
-<rect x="14" y="14" width="8" height="8" rx="2" fill="#0DBD8B"/>
-<rect x="2" y="14" width="8" height="8" rx="2" fill="#0DBD8B"/>
-<rect x="2" y="2" width="8" height="8" rx="2" fill="#0DBD8B"/>
-</svg>

res/img/element-icons/room/members.svg

@@ -1,7 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<mask id="path-1-inside-1" fill="white">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M17.5911 20.2922C15.9951 21.3704 14.0711 22 12 22C9.74879 22 7.67132 21.2561 6 20.0007C3.5711 18.1763 2 15.2716 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 15.4518 20.2511 18.4951 17.5911 20.2922ZM12 12.5C13.6569 12.5 15 11.0449 15 9.25C15 7.45507 13.6569 6 12 6C10.3431 6 9 7.45507 9 9.25C9 11.0449 10.3431 12.5 12 12.5ZM12 20C14.162 20 16.1236 19.1424 17.5634 17.7488C16.673 15.5506 14.5176 14 12 14C9.48242 14 7.32699 15.5506 6.43662 17.7488C7.87635 19.1424 9.83802 20 12 20Z"/>
-</mask>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M17.5911 20.2922C15.9951 21.3704 14.0711 22 12 22C9.74879 22 7.67132 21.2561 6 20.0007C3.5711 18.1763 2 15.2716 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 15.4518 20.2511 18.4951 17.5911 20.2922ZM12 12.5C13.6569 12.5 15 11.0449 15 9.25C15 7.45507 13.6569 6 12 6C10.3431 6 9 7.45507 9 9.25C9 11.0449 10.3431 12.5 12 12.5ZM12 20C14.162 20 16.1236 19.1424 17.5634 17.7488C16.673 15.5506 14.5176 14 12 14C9.48242 14 7.32699 15.5506 6.43662 17.7488C7.87635 19.1424 9.83802 20 12 20Z" fill="currentColor"/>
-<path d="M17.5911 20.2922L16.4715 18.6349L17.5911 20.2922ZM6 20.0007L4.79885 21.5999L4.79885 21.5999L6 20.0007ZM17.5634 17.7488L18.9544 19.1859L19.9234 18.2479L19.4171 16.998L17.5634 17.7488ZM6.43662 17.7488L4.5829 16.998L4.07662 18.2479L5.04563 19.1859L6.43662 17.7488ZM12 24C14.4825 24 16.7945 23.244 18.7107 21.9494L16.4715 18.6349C15.1957 19.4968 13.6596 20 12 20V24ZM4.79885 21.5999C6.80462 23.1065 9.30085 24 12 24V20C10.1967 20 8.53802 19.4058 7.20115 18.4016L4.79885 21.5999ZM0 12C0 15.9273 1.88868 19.414 4.79885 21.5999L7.20115 18.4016C5.25353 16.9387 4 14.616 4 12H0ZM12 0C5.37258 0 0 5.37258 0 12H4C4 7.58172 7.58172 4 12 4V0ZM24 12C24 5.37258 18.6274 0 12 0V4C16.4183 4 20 7.58172 20 12H24ZM18.7107 21.9494C21.8977 19.7963 24 16.144 24 12H20C20 14.7596 18.6045 17.1939 16.4715 18.6349L18.7107 21.9494ZM13 9.25C13 10.0941 12.4046 10.5 12 10.5V14.5C14.9091 14.5 17 11.9958 17 9.25H13ZM12 8C12.4046 8 13 8.4059 13 9.25H17C17 6.50425 14.9091 4 12 4V8ZM11 9.25C11 8.4059 11.5954 8 12 8V4C9.09086 4 7 6.50425 7 9.25H11ZM12 10.5C11.5954 10.5 11 10.0941 11 9.25H7C7 11.9958 9.09086 14.5 12 14.5V10.5ZM16.1724 16.3118C15.0906 17.3588 13.6223 18 12 18V22C14.7017 22 17.1567 20.926 18.9544 19.1859L16.1724 16.3118ZM12 16C13.6752 16 15.1146 17.0305 15.7097 18.4996L19.4171 16.998C18.2314 14.0707 15.3599 12 12 12V16ZM8.29033 18.4996C8.88541 17.0305 10.3248 16 12 16V12C8.64008 12 5.76858 14.0707 4.5829 16.998L8.29033 18.4996ZM12 18C10.3777 18 8.90936 17.3588 7.82761 16.3118L5.04563 19.1859C6.84334 20.926 9.2983 22 12 22V18Z" fill="currentColor" mask="url(#path-1-inside-1)"/>
-</svg>

res/img/element-icons/room/message-bar/reply.svg

@@ -1,4 +0,0 @@
-<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M10.0663 14.25H11.636C13.4938 14.25 14.9998 12.683 14.9998 10.75C14.9998 8.817 13.4938 7.25 11.636 7.25H4.53369" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
-<path d="M6.52417 3.75L3.00006 7.28553L6.52417 10.8211" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>

res/img/element-icons/room/room-summary.svg

@@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12ZM10 12C10 12.5523 10.4477 13 11 13V16.5C11 17.0523 11.4477 17.5 12 17.5H13.5C14.0523 17.5 14.5 17.0523 14.5 16.5C14.5 15.9477 14.0523 15.5 13.5 15.5H13V12C13 11.4477 12.5523 11 12 11H11C10.4477 11 10 11.4477 10 12ZM12 10C12.8284 10 13.5 9.32843 13.5 8.5C13.5 7.67157 12.8284 7 12 7C11.1716 7 10.5 7.67157 10.5 8.5C10.5 9.32843 11.1716 10 12 10Z" fill="black"/>
-</svg>

res/img/element-icons/room/thread.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="#17191C" fill-rule="evenodd" d="M2 5a3 3 0 0 1 3-3h14a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3H7.667a1 1 0 0 0-.6.2L3.6 22.8A1 1 0 0 1 2 22V5Zm3 4a1 1 0 0 1 1-1h12a1 1 0 1 1 0 2H6a1 1 0 0 1-1-1Zm1 3a1 1 0 1 0 0 2h6a1 1 0 1 0 0-2H6Z" clip-rule="evenodd"/></svg>

res/img/element-icons/roomlist/favorite.svg

@@ -1,3 +0,0 @@
-<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M8.41411 1.43218C8.59217 0.855939 9.40783 0.855941 9.58589 1.43218L11.1715 6.56319H16.3856C16.9721 6.56319 17.224 7.30764 16.7578 7.66373L12.5135 10.9061L14.1185 16.1001C14.2948 16.6705 13.6348 17.1309 13.1604 16.7684L9 13.5902L4.83965 16.7684C4.3652 17.1309 3.70521 16.6705 3.88148 16.1001L5.4865 10.9061L1.24216 7.66373C0.776033 7.30764 1.02785 6.56319 1.61443 6.56319H6.82854L8.41411 1.43218Z" fill="currentColor"/>
-</svg>

res/img/element-icons/roomlist/member-plus.svg

@@ -1,3 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M11.3831 1C11.7973 1 12.1331 1.33579 12.1331 1.75V3.30005L13.5833 3.30005C13.9975 3.30005 14.3333 3.63584 14.3333 4.05005C14.3333 4.46426 13.9975 4.80005 13.5833 4.80005L12.1331 4.80005V6.25C12.1331 6.66421 11.7973 7 11.3831 7C10.9689 7 10.6331 6.66421 10.6331 6.25V4.80005L9.08331 4.80005C8.6691 4.80005 8.33331 4.46426 8.33331 4.05005C8.33331 3.63583 8.6691 3.30005 9.08331 3.30005L10.6331 3.30005V1.75C10.6331 1.33579 10.9689 1 11.3831 1ZM5.74076 9.00014C6.88624 9.00014 7.81483 8.07155 7.81483 6.92607C7.81483 5.78059 6.88624 4.85199 5.74076 4.85199C4.59528 4.85199 3.66669 5.78059 3.66669 6.92607C3.66669 8.07155 4.59528 9.00014 5.74076 9.00014ZM5.88889 10.7778C3.00889 10.7778 1 12.2415 1 14.3333V14.926H10.7778V14.3333C10.7778 12.2356 8.76889 10.7778 5.88889 10.7778Z" fill="#737D8C"/>
-</svg>

src/components/views/location/MapFallback.tsx

@@ -8,8 +8,8 @@ Please see LICENSE files in the repository root for full details.
 
 import React from "react";
 import classNames from "classnames";
+import LocationMarkerIcon from "@vector-im/compound-design-tokens/assets/web/icons/location-pin-solid";
 
-import { Icon as LocationMarkerIcon } from "../../../../res/img/element-icons/location.svg";
 import { Icon as MapFallbackImage } from "../../../../res/img/location/map.svg";
 import Spinner from "../elements/Spinner";
 

src/components/views/location/Marker.tsx

@@ -9,8 +9,8 @@ Please see LICENSE files in the repository root for full details.
 import React, { ReactNode, useState } from "react";
 import classNames from "classnames";
 import { RoomMember } from "matrix-js-sdk/src/matrix";
+import LocationIcon from "@vector-im/compound-design-tokens/assets/web/icons/location-pin-solid";
 
-import { Icon as LocationIcon } from "../../../../res/img/element-icons/location.svg";
 import { getUserNameColorClass } from "../../../utils/FormattingUtils";
 import MemberAvatar from "../avatars/MemberAvatar";
 

src/components/views/location/ShareType.tsx

@@ -7,6 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React, { HTMLAttributes, useContext } from "react";
+import LocationIcon from "@vector-im/compound-design-tokens/assets/web/icons/location-pin-solid";
 
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import { _t } from "../../../languageHandler";
@@ -14,7 +15,6 @@ import { OwnProfileStore } from "../../../stores/OwnProfileStore";
 import BaseAvatar from "../avatars/BaseAvatar";
 import AccessibleButton, { ButtonEvent } from "../elements/AccessibleButton";
 import Heading from "../typography/Heading";
-import { Icon as LocationIcon } from "../../../../res/img/element-icons/location.svg";
 import { LocationShareType } from "./shareLocation";
 import StyledLiveBeaconIcon from "../beacon/StyledLiveBeaconIcon";
 

src/components/views/messages/MessageActionBar.tsx

@@ -28,11 +28,11 @@ import {
     ReplyIcon,
     DeleteIcon,
     RestartIcon,
+    ThreadsIcon,
 } from "@vector-im/compound-design-tokens/assets/web/icons";
 
 import { Icon as EditIcon } from "../../../../res/img/element-icons/room/message-bar/edit.svg";
 import { Icon as EmojiIcon } from "../../../../res/img/element-icons/room/message-bar/emoji.svg";
-import { Icon as ThreadIcon } from "../../../../res/img/element-icons/message/thread.svg";
 import { Icon as ExpandMessageIcon } from "../../../../res/img/element-icons/expand-message.svg";
 import { Icon as CollapseMessageIcon } from "../../../../res/img/element-icons/collapse-message.svg";
 import type { Relations } from "matrix-js-sdk/src/matrix";
@@ -243,7 +243,7 @@ const ReplyInThreadButton: React.FC<IReplyInThreadButton> = ({ mxEvent }) => {
             onContextMenu={onClick}
             placement="left"
         >
-            <ThreadIcon />
+            <ThreadsIcon />
         </RovingAccessibleButton>
     );
 };

src/components/views/rooms/EventTile/EventTileThreadToolbar.tsx

@@ -7,11 +7,11 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React from "react";
+import LinkIcon from "@vector-im/compound-design-tokens/assets/web/icons/link";
 
 import { RovingAccessibleButton } from "../../../../accessibility/RovingTabIndex";
 import Toolbar from "../../../../accessibility/Toolbar";
 import { _t } from "../../../../languageHandler";
-import { Icon as LinkIcon } from "../../../../../res/img/element-icons/link.svg";
 import { Icon as ViewInRoomIcon } from "../../../../../res/img/element-icons/view-in-room.svg";
 import { ButtonEvent } from "../../elements/AccessibleButton";
 

src/components/views/settings/tabs/user/SidebarUserSettingsTab.tsx

@@ -7,10 +7,13 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React, { ChangeEvent, useMemo } from "react";
-import { VideoCallSolidIcon, HomeSolidIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
+import {
+    VideoCallSolidIcon,
+    HomeSolidIcon,
+    UserProfileSolidIcon,
+    FavouriteSolidIcon,
+} from "@vector-im/compound-design-tokens/assets/web/icons";
 
-import { Icon as FavoriteIcon } from "../../../../../../res/img/element-icons/roomlist/favorite.svg";
-import { Icon as MembersIcon } from "../../../../../../res/img/element-icons/room/members.svg";
 import { Icon as HashCircleIcon } from "../../../../../../res/img/element-icons/roomlist/hash-circle.svg";
 import { _t } from "../../../../../languageHandler";
 import SettingsStore from "../../../../../settings/SettingsStore";
@@ -112,7 +115,7 @@ const SidebarUserSettingsTab: React.FC = () => {
                         className="mx_SidebarUserSettingsTab_checkbox"
                     >
                         <SettingsSubsectionText>
-                            <FavoriteIcon />
+                            <FavouriteSolidIcon />
                             {_t("common|favourites")}
                         </SettingsSubsectionText>
                         <SettingsSubsectionText>
@@ -126,7 +129,7 @@ const SidebarUserSettingsTab: React.FC = () => {
                         className="mx_SidebarUserSettingsTab_checkbox"
                     >
                         <SettingsSubsectionText>
-                            <MembersIcon />
+                            <UserProfileSolidIcon />
                             {_t("common|people")}
                         </SettingsSubsectionText>
                         <SettingsSubsectionText>

src/components/views/spaces/QuickSettingsButton.tsx

@@ -8,7 +8,11 @@ Please see LICENSE files in the repository root for full details.
 
 import React from "react";
 import classNames from "classnames";
-import EllipsisIcon from "@vector-im/compound-design-tokens/assets/web/icons/overflow-horizontal";
+import {
+    OverflowHorizontalIcon,
+    UserProfileSolidIcon,
+    FavouriteSolidIcon,
+} from "@vector-im/compound-design-tokens/assets/web/icons";
 
 import { _t } from "../../../languageHandler";
 import ContextMenu, { alwaysAboveRightOf, ChevronFace, useContextMenu } from "../../structures/ContextMenu";
@@ -22,8 +26,6 @@ import { Action } from "../../../dispatcher/actions";
 import { UserTab } from "../dialogs/UserTab";
 import QuickThemeSwitcher from "./QuickThemeSwitcher";
 import { Icon as PinUprightIcon } from "../../../../res/img/element-icons/room/pin-upright.svg";
-import { Icon as MembersIcon } from "../../../../res/img/element-icons/room/members.svg";
-import { Icon as FavoriteIcon } from "../../../../res/img/element-icons/roomlist/favorite.svg";
 import Modal from "../../../Modal";
 import DevtoolsDialog from "../dialogs/DevtoolsDialog";
 import { SdkContextClass } from "../../../contexts/SDKContext";
@@ -89,7 +91,7 @@ const QuickSettingsButton: React.FC<{
                     checked={!!favouritesEnabled}
                     onChange={onMetaSpaceChangeFactory(MetaSpace.Favourites, "WebQuickSettingsPinToSidebarCheckbox")}
                 >
-                    <FavoriteIcon className="mx_QuickSettingsButton_icon" />
+                    <FavouriteSolidIcon className="mx_QuickSettingsButton_icon" />
                     {_t("common|favourites")}
                 </StyledCheckbox>
                 <StyledCheckbox
@@ -97,7 +99,7 @@ const QuickSettingsButton: React.FC<{
                     checked={!!peopleEnabled}
                     onChange={onMetaSpaceChangeFactory(MetaSpace.People, "WebQuickSettingsPinToSidebarCheckbox")}
                 >
-                    <MembersIcon className="mx_QuickSettingsButton_icon" />
+                    <UserProfileSolidIcon className="mx_QuickSettingsButton_icon" />
                     {_t("common|people")}
                 </StyledCheckbox>
                 <AccessibleButton
@@ -110,7 +112,7 @@ const QuickSettingsButton: React.FC<{
                         });
                     }}
                 >
-                    <EllipsisIcon className="mx_QuickSettingsButton_icon" />
+                    <OverflowHorizontalIcon className="mx_QuickSettingsButton_icon" />
                     {_t("quick_settings|sidebar_settings")}
                 </AccessibleButton>
 

test/unit-tests/components/views/beacon/__snapshots__/BeaconViewDialog-test.tsx.snap

@@ -8,9 +8,18 @@ exports[`<BeaconViewDialog /> renders a fallback when there are no locations 1`]
   <div
     class="mx_MapFallback_bg"
   />
-  <div
+  <svg
     class="mx_MapFallback_icon"
+    fill="currentColor"
+    height="1em"
+    viewBox="0 0 24 24"
+    width="1em"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M12 21.325a2.07 2.07 0 0 1-.7-.125 1.84 1.84 0 0 1-.625-.375A39.112 39.112 0 0 1 7.8 17.9c-.833-.95-1.53-1.87-2.087-2.762-.559-.892-.984-1.75-1.276-2.575C4.146 11.738 4 10.95 4 10.2c0-2.5.804-4.492 2.412-5.975C8.021 2.742 9.883 2 12 2s3.98.742 5.587 2.225C19.197 5.708 20 7.7 20 10.2c0 .75-.146 1.538-.438 2.363-.291.824-.716 1.683-1.274 2.574A21.678 21.678 0 0 1 16.2 17.9a39.112 39.112 0 0 1-2.875 2.925 1.84 1.84 0 0 1-.625.375 2.07 2.07 0 0 1-.7.125ZM12 12c.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 0 12 8c-.55 0-1.02.196-1.412.588A1.926 1.926 0 0 0 10 10c0 .55.196 1.02.588 1.412.391.392.862.588 1.412.588Z"
     />
+  </svg>
   <span
     class="mx_BeaconViewDialog_mapFallbackMessage"
   >

test/unit-tests/components/views/location/__snapshots__/LocationViewDialog-test.tsx.snap

@@ -13,9 +13,18 @@ exports[`<LocationViewDialog /> renders map correctly 1`] = `
       <div
         class="mx_Marker_border"
       >
-        <div
+        <svg
           class="mx_Marker_icon"
+          fill="currentColor"
+          height="1em"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M12 21.325a2.07 2.07 0 0 1-.7-.125 1.84 1.84 0 0 1-.625-.375A39.112 39.112 0 0 1 7.8 17.9c-.833-.95-1.53-1.87-2.087-2.762-.559-.892-.984-1.75-1.276-2.575C4.146 11.738 4 10.95 4 10.2c0-2.5.804-4.492 2.412-5.975C8.021 2.742 9.883 2 12 2s3.98.742 5.587 2.225C19.197 5.708 20 7.7 20 10.2c0 .75-.146 1.538-.438 2.363-.291.824-.716 1.683-1.274 2.574A21.678 21.678 0 0 1 16.2 17.9a39.112 39.112 0 0 1-2.875 2.925 1.84 1.84 0 0 1-.625.375 2.07 2.07 0 0 1-.7.125ZM12 12c.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 0 12 8c-.55 0-1.02.196-1.412.588A1.926 1.926 0 0 0 10 10c0 .55.196 1.02.588 1.412.391.392.862.588 1.412.588Z"
           />
+        </svg>
       </div>
     </div>
   </span>

test/unit-tests/components/views/location/__snapshots__/Marker-test.tsx.snap

@@ -9,9 +9,18 @@ exports[`<Marker /> renders with location icon when no room member 1`] = `
     <div
       class="mx_Marker_border"
     >
-      <div
+      <svg
         class="mx_Marker_icon"
+        fill="currentColor"
+        height="1em"
+        viewBox="0 0 24 24"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M12 21.325a2.07 2.07 0 0 1-.7-.125 1.84 1.84 0 0 1-.625-.375A39.112 39.112 0 0 1 7.8 17.9c-.833-.95-1.53-1.87-2.087-2.762-.559-.892-.984-1.75-1.276-2.575C4.146 11.738 4 10.95 4 10.2c0-2.5.804-4.492 2.412-5.975C8.021 2.742 9.883 2 12 2s3.98.742 5.587 2.225C19.197 5.708 20 7.7 20 10.2c0 .75-.146 1.538-.438 2.363-.291.824-.716 1.683-1.274 2.574A21.678 21.678 0 0 1 16.2 17.9a39.112 39.112 0 0 1-2.875 2.925 1.84 1.84 0 0 1-.625.375 2.07 2.07 0 0 1-.7.125ZM12 12c.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 0 12 8c-.55 0-1.02.196-1.412.588A1.926 1.926 0 0 0 10 10c0 .55.196 1.02.588 1.412.391.392.862.588 1.412.588Z"
         />
+      </svg>
     </div>
   </div>
 </DocumentFragment>

test/unit-tests/components/views/location/__snapshots__/SmartMarker-test.tsx.snap

@@ -9,9 +9,18 @@ exports[`<SmartMarker /> creates a marker on mount 1`] = `
       <div
         class="mx_Marker_border"
       >
-        <div
+        <svg
           class="mx_Marker_icon"
+          fill="currentColor"
+          height="1em"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M12 21.325a2.07 2.07 0 0 1-.7-.125 1.84 1.84 0 0 1-.625-.375A39.112 39.112 0 0 1 7.8 17.9c-.833-.95-1.53-1.87-2.087-2.762-.559-.892-.984-1.75-1.276-2.575C4.146 11.738 4 10.95 4 10.2c0-2.5.804-4.492 2.412-5.975C8.021 2.742 9.883 2 12 2s3.98.742 5.587 2.225C19.197 5.708 20 7.7 20 10.2c0 .75-.146 1.538-.438 2.363-.291.824-.716 1.683-1.274 2.574A21.678 21.678 0 0 1 16.2 17.9a39.112 39.112 0 0 1-2.875 2.925 1.84 1.84 0 0 1-.625.375 2.07 2.07 0 0 1-.7.125ZM12 12c.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 0 12 8c-.55 0-1.02.196-1.412.588A1.926 1.926 0 0 0 10 10c0 .55.196 1.02.588 1.412.391.392.862.588 1.412.588Z"
           />
+        </svg>
       </div>
     </div>
   </span>
@@ -27,9 +36,18 @@ exports[`<SmartMarker /> removes marker on unmount 1`] = `
       <div
         class="mx_Marker_border"
       >
-        <div
+        <svg
           class="mx_Marker_icon"
+          fill="currentColor"
+          height="1em"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M12 21.325a2.07 2.07 0 0 1-.7-.125 1.84 1.84 0 0 1-.625-.375A39.112 39.112 0 0 1 7.8 17.9c-.833-.95-1.53-1.87-2.087-2.762-.559-.892-.984-1.75-1.276-2.575C4.146 11.738 4 10.95 4 10.2c0-2.5.804-4.492 2.412-5.975C8.021 2.742 9.883 2 12 2s3.98.742 5.587 2.225C19.197 5.708 20 7.7 20 10.2c0 .75-.146 1.538-.438 2.363-.291.824-.716 1.683-1.274 2.574A21.678 21.678 0 0 1 16.2 17.9a39.112 39.112 0 0 1-2.875 2.925 1.84 1.84 0 0 1-.625.375 2.07 2.07 0 0 1-.7.125ZM12 12c.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 0 12 8c-.55 0-1.02.196-1.412.588A1.926 1.926 0 0 0 10 10c0 .55.196 1.02.588 1.412.391.392.862.588 1.412.588Z"
           />
+        </svg>
       </div>
     </div>
   </span>

test/unit-tests/components/views/messages/__snapshots__/MLocationBody-test.tsx.snap

@@ -49,9 +49,18 @@ exports[`MLocationBody <MLocationBody> without error renders map correctly 1`] =
             <div
               class="mx_Marker_border"
             >
-              <div
+              <svg
                 class="mx_Marker_icon"
+                fill="currentColor"
+                height="1em"
+                viewBox="0 0 24 24"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M12 21.325a2.07 2.07 0 0 1-.7-.125 1.84 1.84 0 0 1-.625-.375A39.112 39.112 0 0 1 7.8 17.9c-.833-.95-1.53-1.87-2.087-2.762-.559-.892-.984-1.75-1.276-2.575C4.146 11.738 4 10.95 4 10.2c0-2.5.804-4.492 2.412-5.975C8.021 2.742 9.883 2 12 2s3.98.742 5.587 2.225C19.197 5.708 20 7.7 20 10.2c0 .75-.146 1.538-.438 2.363-.291.824-.716 1.683-1.274 2.574A21.678 21.678 0 0 1 16.2 17.9a39.112 39.112 0 0 1-2.875 2.925 1.84 1.84 0 0 1-.625.375 2.07 2.07 0 0 1-.7.125ZM12 12c.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 0 12 8c-.55 0-1.02.196-1.412.588A1.926 1.926 0 0 0 10 10c0 .55.196 1.02.588 1.412.391.392.862.588 1.412.588Z"
                 />
+              </svg>
             </div>
           </div>
         </span>

test/unit-tests/components/views/rooms/EventTile/__snapshots__/EventTileThreadToolbar-test.tsx.snap

@@ -22,7 +22,17 @@ exports[`EventTileThreadToolbar renders 1`] = `
       role="button"
       tabindex="-1"
     >
-      <div />
+      <svg
+        fill="currentColor"
+        height="1em"
+        viewBox="0 0 24 24"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M12 19.071c-.978.978-2.157 1.467-3.536 1.467-1.378 0-2.557-.489-3.535-1.467-.978-.978-1.467-2.157-1.467-3.536 0-1.378.489-2.557 1.467-3.535L7.05 9.879c.2-.2.436-.3.707-.3.271 0 .507.1.707.3.2.2.301.436.301.707 0 .27-.1.506-.3.707l-2.122 2.121a2.893 2.893 0 0 0-.884 2.122c0 .824.295 1.532.884 2.12.59.59 1.296.885 2.121.885s1.533-.295 2.122-.884l2.121-2.121c.2-.2.436-.301.707-.301.271 0 .507.1.707.3.2.2.3.437.3.708 0 .27-.1.506-.3.707L12 19.07Zm-1.414-4.243c-.2.2-.436.3-.707.3a.967.967 0 0 1-.707-.3.969.969 0 0 1-.301-.707c0-.27.1-.507.3-.707l4.243-4.242c.2-.2.436-.301.707-.301.271 0 .507.1.707.3.2.2.3.437.3.708 0 .27-.1.506-.3.707l-4.242 4.242Zm6.364-.707c-.2.2-.436.3-.707.3a.968.968 0 0 1-.707-.3.969.969 0 0 1-.301-.707c0-.27.1-.507.3-.707l2.122-2.121c.59-.59.884-1.297.884-2.122s-.295-1.532-.884-2.12a2.893 2.893 0 0 0-2.121-.885c-.825 0-1.532.295-2.122.884l-2.121 2.121c-.2.2-.436.301-.707.301a.968.968 0 0 1-.707-.3.97.97 0 0 1-.3-.708c0-.27.1-.506.3-.707L12 4.93c.978-.978 2.157-1.467 3.536-1.467 1.378 0 2.557.489 3.535 1.467.978.978 1.467 2.157 1.467 3.535 0 1.38-.489 2.558-1.467 3.536l-2.121 2.121Z"
+        />
+      </svg>
     </div>
   </div>
 </DocumentFragment>

test/unit-tests/components/views/settings/tabs/user/__snapshots__/SidebarUserSettingsTab-test.tsx.snap

@@ -135,7 +135,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="m12.897 2.817 2.336 4.733 5.223.76a1 1 0 0 1 .555 1.705L17.23 13.7l.892 5.202a1 1 0 0 1-1.45 1.054L12 17.5l-4.672 2.456a1 1 0 0 1-1.451-1.054l.892-5.202-3.78-3.685a1 1 0 0 1 .555-1.706l5.223-.759 2.336-4.733a1 1 0 0 1 1.794 0Z"
+                        />
+                      </svg>
                       Favourites
                     </div>
                     <div
@@ -167,7 +177,20 @@ 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="M12 15c-1.1 0-2.042-.392-2.825-1.175C8.392 13.042 8 12.1 8 11s.392-2.042 1.175-2.825C9.958 7.392 10.9 7 12 7s2.042.392 2.825 1.175C15.608 8.958 16 9.9 16 11s-.392 2.042-1.175 2.825C14.042 14.608 13.1 15 12 15Z"
+                        />
+                        <path
+                          d="M19.528 18.583A9.962 9.962 0 0 0 22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 2.52.933 4.824 2.472 6.583A9.976 9.976 0 0 0 12 22a9.976 9.976 0 0 0 7.528-3.417ZM8.75 16.388c-.915.221-1.818.538-2.709.95a8 8 0 1 1 11.918 0 14.679 14.679 0 0 0-2.709-.95A13.76 13.76 0 0 0 12 16c-1.1 0-2.183.13-3.25.387Z"
+                        />
+                      </svg>
                       People
                     </div>
                     <div
@@ -396,7 +419,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="m12.897 2.817 2.336 4.733 5.223.76a1 1 0 0 1 .555 1.705L17.23 13.7l.892 5.202a1 1 0 0 1-1.45 1.054L12 17.5l-4.672 2.456a1 1 0 0 1-1.451-1.054l.892-5.202-3.78-3.685a1 1 0 0 1 .555-1.706l5.223-.759 2.336-4.733a1 1 0 0 1 1.794 0Z"
+                        />
+                      </svg>
                       Favourites
                     </div>
                     <div
@@ -428,7 +461,20 @@ 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="M12 15c-1.1 0-2.042-.392-2.825-1.175C8.392 13.042 8 12.1 8 11s.392-2.042 1.175-2.825C9.958 7.392 10.9 7 12 7s2.042.392 2.825 1.175C15.608 8.958 16 9.9 16 11s-.392 2.042-1.175 2.825C14.042 14.608 13.1 15 12 15Z"
+                        />
+                        <path
+                          d="M19.528 18.583A9.962 9.962 0 0 0 22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 2.52.933 4.824 2.472 6.583A9.976 9.976 0 0 0 12 22a9.976 9.976 0 0 0 7.528-3.417ZM8.75 16.388c-.915.221-1.818.538-2.709.95a8 8 0 1 1 11.918 0 14.679 14.679 0 0 0-2.709-.95A13.76 13.76 0 0 0 12 16c-1.1 0-2.183.13-3.25.387Z"
+                        />
+                      </svg>
                       People
                     </div>
                     <div