Deduplicate more icons using Compound Design Tokens (#132)

* Deduplicate more icons using Compound Design Tokens Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --------- Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> (cherry picked from commit 7448bd52e2ff354917d6e5f769ca052961c13aa0)
2024-11-25 01:48:43 +08:00 · 2024-10-15 11:19:06 +01:00 · 2024-10-15 11:19:06 +01:00 · 146968da2c
commit 146968da2c
parent a22e9e8f13
68 changed files with 358 additions and 210 deletions
--- a/playwright/snapshots/invite/invite-dialog.spec.ts/invite-dialog-dm-with-user-pill-linux.png
+++ b/playwright/snapshots/invite/invite-dialog.spec.ts/invite-dialog-dm-with-user-pill-linux.png
--- a/playwright/snapshots/invite/invite-dialog.spec.ts/invite-dialog-dm-without-user-linux.png
+++ b/playwright/snapshots/invite/invite-dialog.spec.ts/invite-dialog-dm-without-user-linux.png
--- a/playwright/snapshots/permalinks/permalinks.spec.ts/permalink-rendering-linux.png
+++ b/playwright/snapshots/permalinks/permalinks.spec.ts/permalink-rendering-linux.png
--- a/playwright/snapshots/room-directory/room-directory.spec.ts/filtered-no-results-linux.png
+++ b/playwright/snapshots/room-directory/room-directory.spec.ts/filtered-no-results-linux.png
--- a/playwright/snapshots/room-directory/room-directory.spec.ts/filtered-one-result-linux.png
+++ b/playwright/snapshots/room-directory/room-directory.spec.ts/filtered-one-result-linux.png
--- a/playwright/snapshots/settings/account-user-settings-tab.spec.ts/account-linux.png
+++ b/playwright/snapshots/settings/account-user-settings-tab.spec.ts/account-linux.png
--- a/playwright/snapshots/settings/account-user-settings-tab.spec.ts/account-smallscreen-linux.png
+++ b/playwright/snapshots/settings/account-user-settings-tab.spec.ts/account-smallscreen-linux.png
--- a/playwright/snapshots/spaces/spaces.spec.ts/space-panel-expanded-linux.png
+++ b/playwright/snapshots/spaces/spaces.spec.ts/space-panel-expanded-linux.png
--- a/playwright/snapshots/timeline/timeline.spec.ts/url-preview-linux.png
+++ b/playwright/snapshots/timeline/timeline.spec.ts/url-preview-linux.png
--- a/res/css/components/views/context_menus/_KebabContextMenu.pcss
+++ b/res/css/components/views/context_menus/_KebabContextMenu.pcss
@ -8,5 +8,6 @@ Please see LICENSE files in the repository root for full details.

 .mx_KebabContextMenu_icon {
    width: 24px;
+    height: 24px;
    color: $icon-button-color;
 }
--- a/res/css/components/views/dialogs/polls/_PollDetailHeader.pcss
+++ b/res/css/components/views/dialogs/polls/_PollDetailHeader.pcss
@ -12,8 +12,8 @@ Please see LICENSE files in the repository root for full details.
 }

 .mx_PollDetailHeader_icon {
-    height: 15px;
-    width: 15px;
+    height: 16px;
+    width: 16px;
    margin-right: $spacing-8;
    vertical-align: middle;
 }
--- a/res/css/components/views/location/_ShareDialogButtons.pcss
+++ b/res/css/components/views/location/_ShareDialogButtons.pcss
@ -40,6 +40,7 @@ Please see LICENSE files in the repository root for full details.
 }

 .mx_ShareDialogButtons_button-icon {
-    height: 10px;
-    margin-top: 3px;
+    width: 20px;
+    height: 20px;
+    margin: 2px;
 }
--- a/res/css/components/views/polls/_PollOption.pcss
+++ b/res/css/components/views/polls/_PollOption.pcss
@ -64,7 +64,7 @@ Please see LICENSE files in the repository root for full details.
            border-width: 2px;
            border-color: var(--cpd-color-icon-accent-tertiary);
            background-color: var(--cpd-color-icon-accent-tertiary);
-            background-image: url("$(res)/img/element-icons/check-white.svg");
+            background-image: url("@vector-im/compound-design-tokens/icons/check.svg");
            background-size: 12px;
            background-repeat: no-repeat;
            background-position: center;
--- a/res/css/structures/_SpaceHierarchy.pcss
+++ b/res/css/structures/_SpaceHierarchy.pcss
@ -211,7 +211,7 @@ Please see LICENSE files in the repository root for full details.
                                mask-size: contain;
                                mask-repeat: no-repeat;
                                background-color: $accent;
-                                mask-image: url("$(res)/img/element-icons/roomlist/checkmark.svg");
+                                mask-image: url("@vector-im/compound-design-tokens/icons/check.svg");
                            }
                        }
                    }
--- a/res/css/structures/_SpacePanel.pcss
+++ b/res/css/structures/_SpacePanel.pcss
@ -258,7 +258,7 @@ Please see LICENSE files in the repository root for full details.
                mask-position: center;
                mask-size: contain;
                mask-repeat: no-repeat;
-                mask-image: url("$(res)/img/element-icons/context-menu.svg");
+                mask-image: url("@vector-im/compound-design-tokens/icons/overflow-horizontal.svg");
                background: $primary-content;
            }
        }
--- a/res/css/views/context_menus/_IconizedContextMenu.pcss
+++ b/res/css/views/context_menus/_IconizedContextMenu.pcss
@ -160,7 +160,7 @@ Please see LICENSE files in the repository root for full details.
    }

    .mx_IconizedContextMenu_checked::before {
-        mask-image: url("$(res)/img/element-icons/roomlist/checkmark.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/check.svg");
    }

    .mx_IconizedContextMenu_unchecked::before {
--- a/res/css/views/context_menus/_MessageContextMenu.pcss
+++ b/res/css/views/context_menus/_MessageContextMenu.pcss
@ -49,7 +49,7 @@ Please see LICENSE files in the repository root for full details.
    }

    .mx_MessageContextMenu_iconEndPoll::before {
-        mask-image: url("$(res)/img/element-icons/check-white.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/check.svg");
    }

    .mx_MessageContextMenu_iconForward::before {
@ -81,12 +81,10 @@ Please see LICENSE files in the repository root for full details.
    }

    .mx_MessageContextMenu_iconCopy::before {
-        height: 12px;
-        left: 2px;
+        height: 16px;
        mask-image: url($copy-button-url);
        position: relative;
-        width: 12px;
-        top: 3px;
+        width: 16px;
    }

    .mx_MessageContextMenu_iconEdit::before {
--- a/res/css/views/dialogs/_AddExistingToSpaceDialog.pcss
+++ b/res/css/views/dialogs/_AddExistingToSpaceDialog.pcss
@ -197,7 +197,7 @@ Please see LICENSE files in the repository root for full details.
                    mask-size: contain;
                    mask-repeat: no-repeat;
                    background-color: $accent;
-                    mask-image: url("$(res)/img/element-icons/roomlist/checkmark.svg");
+                    mask-image: url("@vector-im/compound-design-tokens/icons/check.svg");
                }
            }
        }
--- a/res/css/views/dialogs/_SpotlightDialog.pcss
+++ b/res/css/views/dialogs/_SpotlightDialog.pcss
@ -121,14 +121,12 @@ Please see LICENSE files in the repository root for full details.
                    content: "";
                    mask-repeat: no-repeat;
                    mask-position: center;
-                    mask-size: contain;
-                    width: 8px;
-                    height: 8px;
+                    mask-size: 14px;
+                    width: inherit;
+                    height: inherit;
                    position: absolute;
-                    left: 50%;
-                    top: 50%;
-                    transform: translate(-50%, -50%);
-                    mask-image: url("$(res)/img/cancel-small.svg");
+                    left: 0;
+                    mask-image: url("@vector-im/compound-design-tokens/icons/close.svg");
                }
            }
        }
@ -358,7 +356,7 @@ Please see LICENSE files in the repository root for full details.
                }

                .mx_SpotlightDialog_option--menu::before {
-                    mask-image: url("$(res)/img/element-icons/context-menu.svg");
+                    mask-image: url("@vector-im/compound-design-tokens/icons/overflow-horizontal.svg");
                }

                &:hover,
--- a/res/css/views/directory/_NetworkDropdown.pcss
+++ b/res/css/views/directory/_NetworkDropdown.pcss
@ -64,14 +64,14 @@ Please see LICENSE files in the repository root for full details.
        content: "";
        mask-repeat: no-repeat;
        mask-position: center;
-        mask-size: contain;
-        width: 8px;
-        height: 8px;
+        mask-size: 14px;
+        width: inherit;
+        height: inherit;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
-        mask-image: url("$(res)/img/cancel-small.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/close.svg");
    }
 }

--- a/res/css/views/elements/_FacePile.pcss
+++ b/res/css/views/elements/_FacePile.pcss
@ -28,7 +28,7 @@ Please see LICENSE files in the repository root for full details.
        mask-position: center;
        mask-size: 20px;
        mask-repeat: no-repeat;
-        mask-image: url("$(res)/img/element-icons/room/ellipsis.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/overflow-horizontal.svg");
    }
 }

--- a/res/css/views/elements/_TagComposer.pcss
+++ b/res/css/views/elements/_TagComposer.pcss
@ -68,8 +68,8 @@ Please see LICENSE files in the repository root for full details.
        position: relative;

        svg {
-            width: 0.5em;
-            vertical-align: middle;
+            width: 16px;
+            height: 16px;
        }
    }
 }
--- a/res/css/views/elements/_UseCaseSelectionButton.pcss
+++ b/res/css/views/elements/_UseCaseSelectionButton.pcss
@ -80,7 +80,7 @@ Please see LICENSE files in the repository root for full details.
            width: 12px;
            height: 12px;

-            mask-image: url("$(res)/img/element-icons/check-white.svg");
+            mask-image: url("@vector-im/compound-design-tokens/icons/check.svg");
        }
    }

--- a/res/css/views/right_panel/_ExtensionsCard.pcss
+++ b/res/css/views/right_panel/_ExtensionsCard.pcss
@ -97,7 +97,7 @@ Please see LICENSE files in the repository root for full details.
        .mx_ExtensionsCard_app_options {
            right: 32px; /* 24 + 8 */
            &::before {
-                mask-image: url("$(res)/img/element-icons/room/ellipsis.svg");
+                mask-image: url("@vector-im/compound-design-tokens/icons/overflow-horizontal.svg");
            }
        }

--- a/res/css/views/rooms/_LegacyRoomHeader.pcss
+++ b/res/css/views/rooms/_LegacyRoomHeader.pcss
@ -240,7 +240,7 @@ Please see LICENSE files in the repository root for full details.

 .mx_LegacyRoomHeader_closeButton {
    &::before {
-        mask-image: url("$(res)/img/cancel.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/close.svg");
        mask-size: 20px;
        mask-position: center;
    }
--- a/res/css/views/rooms/_LinkPreviewGroup.pcss
+++ b/res/css/views/rooms/_LinkPreviewGroup.pcss
@ -12,14 +12,14 @@ Please see LICENSE files in the repository root for full details.
        width: 18px;
        height: 18px;

-        img {
+        svg {
            flex: 0 0 40px;
            visibility: hidden;
        }
    }

    &:hover .mx_LinkPreviewGroup_hide img,
-    .mx_LinkPreviewGroup_hide:focus-visible:focus img {
+    .mx_LinkPreviewGroup_hide:focus-visible:focus svg {
        visibility: visible;
    }

--- a/res/css/views/rooms/_ReplyPreview.pcss
+++ b/res/css/views/rooms/_ReplyPreview.pcss
@ -31,14 +31,14 @@ Please see LICENSE files in the repository root for full details.

            .mx_ReplyPreview_header_cancel {
                background-color: $primary-content;
-                mask: url("$(res)/img/cancel.svg");
+                mask-image: url("@vector-im/compound-design-tokens/icons/close.svg");
                mask-repeat: no-repeat;
                mask-position: center;
-                mask-size: 18px;
-                width: 18px;
-                height: 18px;
-                min-width: 18px;
-                min-height: 18px;
+                mask-size: contain;
+                width: 20px;
+                height: 20px;
+                min-width: 20px;
+                min-height: 20px;
            }
        }
    }
--- a/res/css/views/rooms/_RoomSublist.pcss
+++ b/res/css/views/rooms/_RoomSublist.pcss
@ -131,7 +131,7 @@ Please see LICENSE files in the repository root for full details.
        }

        .mx_RoomSublist_menuButton::before {
-            mask-image: url("$(res)/img/element-icons/context-menu.svg");
+            mask-image: url("@vector-im/compound-design-tokens/icons/overflow-horizontal.svg");
        }

        .mx_RoomSublist_headerText {
--- a/res/css/views/rooms/_RoomTile.pcss
+++ b/res/css/views/rooms/_RoomTile.pcss
@ -133,7 +133,7 @@ Please see LICENSE files in the repository root for full details.
    }

    .mx_RoomTile_menuButton::before {
-        mask-image: url("$(res)/img/element-icons/context-menu.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/overflow-horizontal.svg");
    }

    &:not(.mx_RoomTile_minimized, .mx_RoomTile_sticky) {
--- a/res/css/views/rooms/_TopUnreadMessagesBar.pcss
+++ b/res/css/views/rooms/_TopUnreadMessagesBar.pcss
@ -63,9 +63,9 @@ Please see LICENSE files in the repository root for full details.
    position: absolute;
    width: 18px;
    height: 18px;
-    mask-image: url("$(res)/img/cancel.svg");
+    mask-image: url("@vector-im/compound-design-tokens/icons/close.svg");
    mask-repeat: no-repeat;
-    mask-size: 10px;
-    mask-position: 4px 4px;
+    mask-size: 16px;
+    mask-position: center;
    background: var(--cpd-color-icon-tertiary);
 }
--- a/res/css/views/toasts/_IncomingCallToast.pcss
+++ b/res/css/views/toasts/_IncomingCallToast.pcss
@ -89,7 +89,7 @@ Please see LICENSE files in the repository root for full details.
        &::before {
            content: "";

-            mask-image: url("$(res)/img/cancel.svg");
+            mask-image: url("@vector-im/compound-design-tokens/icons/close.svg");

            height: inherit;
            width: inherit;
--- a/res/css/views/user-onboarding/_UserOnboardingButton.pcss
+++ b/res/css/views/user-onboarding/_UserOnboardingButton.pcss
@ -52,14 +52,13 @@ Please see LICENSE files in the repository root for full details.
                content: "";
                mask-repeat: no-repeat;
                mask-position: center;
-                mask-size: contain;
-                width: 7px;
-                height: 7px;
+                mask-size: 12px;
+                width: inherit;
+                height: inherit;
                position: absolute;
-                left: 50%;
-                top: 50%;
-                transform: translate(-50%, -50%);
-                mask-image: url("$(res)/img/element-icons/cancel-rounded.svg");
+                left: -1px;
+                top: -1px;
+                mask-image: url("@vector-im/compound-design-tokens/icons/close.svg");
            }
        }
    }
--- a/res/css/views/user-onboarding/_UserOnboardingTask.pcss
+++ b/res/css/views/user-onboarding/_UserOnboardingTask.pcss
@ -75,13 +75,13 @@ Please see LICENSE files in the repository root for full details.
                content: "";
                mask-repeat: no-repeat;
                mask-position: center;
-                mask-size: contain;
-                width: 16px;
-                height: 16px;
+                mask-size: 24px;
+                width: inherit;
+                height: inherit;
                position: absolute;
-                left: calc(50% - 8px);
-                top: calc(50% - 8px);
-                mask-image: url("$(res)/img/element-icons/check-white.svg");
+                left: 0;
+                top: 0;
+                mask-image: url("@vector-im/compound-design-tokens/icons/check.svg");

                animation-duration: 300ms;
                animation-fill-mode: both;
--- a/res/img/cancel-small.svg
+++ b/res/img/cancel-small.svg
@ -1,13 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg width="14px" height="14px" viewBox="-1 -1 13 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
-    <!-- Generator: Sketch 3.4.4 (17249) - http://www.bohemiancoding.com/sketch -->
-    <title>Line + Line</title>
-    <desc>Created with Sketch.</desc>
-    <defs></defs>
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
-        <g id="Line-+-Line" sketch:type="MSLayerGroup" transform="translate(2.000000, 2.000000)" stroke="#4A4A4A" stroke-width="2.82" stroke-linecap="square">
-            <path d="M8,0 L0,8" id="Line" sketch:type="MSShapeGroup"></path>
-            <path d="M0,0 L8,8" id="Line" sketch:type="MSShapeGroup"></path>
-        </g>
-    </g>
-</svg>
--- a/res/img/cancel.svg
+++ b/res/img/cancel.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="M21.2756 4.69628C21.8922 4.07969 21.8922 3.08 21.2756 2.46342C20.659 1.84683 19.6593 1.84683 19.0427 2.46342L11.8917 9.61447L4.74063 2.46342C4.12404 1.84683 3.12436 1.84683 2.50777 2.46342C1.89118 3.08 1.89118 4.07969 2.50777 4.69628L9.65882 11.8473L2.20145 19.3047C1.58487 19.9213 1.58487 20.921 2.20145 21.5376C2.81804 22.1541 3.81773 22.1541 4.43431 21.5376L11.8917 14.0802L19.349 21.5375C19.9656 22.1541 20.9653 22.1541 21.5819 21.5375C22.1985 20.921 22.1985 19.9213 21.5819 19.3047L14.1245 11.8473L21.2756 4.69628Z" fill="#737D8C"/>
-</svg>
--- a/res/img/element-icons/back.svg
+++ b/res/img/element-icons/back.svg
@ -1,3 +0,0 @@
-<svg width="18" height="14" viewBox="0 0 18 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M17 7H1M1 7L7 13M1 7L7 1" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
--- a/res/img/element-icons/cancel-rounded.svg
+++ b/res/img/element-icons/cancel-rounded.svg
@ -1,4 +0,0 @@
-<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M1 1L9 9" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
-<path d="M9.00098 1L1.00098 9" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
-</svg>
--- a/res/img/element-icons/caret-left.svg
+++ b/res/img/element-icons/caret-left.svg
@ -1,3 +0,0 @@
-<svg width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M7.63679 0.707107C8.02732 1.09763 8.02834 1.73182 7.63909 2.1236L2.70538 7.08934L7.65512 12.0391C8.04565 12.4296 8.04667 13.0638 7.65742 13.4556C7.26816 13.8474 6.63602 13.8484 6.24549 13.4579L0.588639 7.80101C0.198115 7.41049 0.197089 6.7763 0.586348 6.38452L6.22487 0.709391C6.61413 0.317605 7.24627 0.316582 7.63679 0.707107Z" fill="currentColor"/>
-</svg>
--- a/res/img/element-icons/check-white.svg
+++ b/res/img/element-icons/check-white.svg
@ -1,3 +0,0 @@
-<svg width="14" height="11" viewBox="0 0 14 11" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M1.54541 5.8884L4.80299 9.24274L12.4545 1.36395" stroke="white" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
--- a/res/img/element-icons/check.svg
+++ b/res/img/element-icons/check.svg
@ -1,20 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
-   width="18.86364"
-   height="14.318086"
-   viewBox="0 0 18.86364 14.318086"
-   fill="none"
-   version="1.1"
-   id="svg4"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:svg="http://www.w3.org/2000/svg">
-  <defs
-     id="defs8" />
-  <path
-     d="M 1.25,8.03668 6.13636,13.06814 17.61364,1.25"
-     stroke="currentColor"
-     stroke-width="2.5"
-     stroke-linecap="round"
-     stroke-linejoin="round"
-     id="path2" />
-</svg>
--- a/res/img/element-icons/context-menu.svg
+++ b/res/img/element-icons/context-menu.svg
@ -1,5 +0,0 @@
-<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-<circle cx="4.25" cy="9" r="1.25" fill="currentColor"/>
-<circle cx="9" cy="9" r="1.25" fill="currentColor"/>
-<circle cx="13.75" cy="9" r="1.25" fill="currentColor"/>
-</svg>
--- a/res/img/element-icons/copy.svg
+++ b/res/img/element-icons/copy.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="M3 0C1.34315 0 0 1.34315 0 3V10C0 11.6569 1.34315 13 3 13H5V15C5 16.6569 6.34315 18 8 18H15C16.6569 18 18 16.6569 18 15V8C18 6.34315 16.6569 5 15 5H13V3C13 1.34315 11.6569 0 10 0H3ZM11 5V3C11 2.44772 10.5523 2 10 2H3C2.44772 2 2 2.44772 2 3V10C2 10.5523 2.44772 11 3 11H5V8C5 6.34315 6.34315 5 8 5H11ZM7 8C7 7.44772 7.44772 7 8 7H15C15.5523 7 16 7.44772 16 8V15C16 15.5523 15.5523 16 15 16H8C7.44772 16 7 15.5523 7 15V8Z" fill="#737D8C"/>
-</svg>
--- a/res/img/element-icons/room/ellipsis.svg
+++ b/res/img/element-icons/room/ellipsis.svg
@ -1,5 +0,0 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <circle cx="15.5" cy="10" r="1.5" transform="rotate(180 15.5 10)" fill="currentColor"/>
-    <circle cx="10" cy="10" r="1.5" transform="rotate(180 10 10)" fill="currentColor"/>
-    <circle cx="4.5" cy="10" r="1.5" transform="rotate(180 4.5 10)" fill="currentColor"/>
-</svg>
--- a/res/img/element-icons/roomlist/checkmark.svg
+++ b/res/img/element-icons/roomlist/checkmark.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="M4 8.81818L7.125 12L14 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
--- a/res/img/ellipsis.svg
+++ b/res/img/ellipsis.svg
@ -1,25 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
-    <!-- Generator: Sketch 3.4.4 (17249) - http://www.bohemiancoding.com/sketch -->
-    <title>icons_archive</title>
-    <desc>Created with Sketch.</desc>
-    <defs></defs>
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
-        <g id="ellipsis" sketch:type="MSLayerGroup">
-            <g id="03-Input" sketch:type="MSShapeGroup">
-                <g id="03_3-Input-filled">
-                    <g id="right_default">
-                        <g id="right_middle">
-                            <g id="Left-panel">
-                                <g id="icons_archive">
-                                    <rect id="Rectangle-1" fill="#ECECEC" x="0" y="0" width="24" height="24"></rect>
-                                    <path d="M7.338,13.154 C7.842,13.154 8.164,12.776 8.164,12.272 C8.164,11.754 7.842,11.39 7.338,11.39 C6.848,11.39 6.512,11.754 6.512,12.272 C6.498,12.776 6.848,13.154 7.338,13.154 L7.338,13.154 L7.338,13.154 Z M12,13.154 C12.504,13.154 12.84,12.776 12.84,12.272 C12.826,11.754 12.504,11.39 12.014,11.39 C11.524,11.39 11.174,11.754 11.174,12.272 C11.16,12.776 11.51,13.154 12,13.154 L12,13.154 L12,13.154 Z M16.662,13.154 C17.18,13.154 17.502,12.776 17.502,12.272 C17.502,11.754 17.166,11.39 16.676,11.39 C16.186,11.39 15.836,11.754 15.836,12.272 C15.836,12.776 16.172,13.154 16.662,13.154 L16.662,13.154 L16.662,13.154 Z" id="Matrix-HQ-Copy-15" fill="#454545"></path>
-                                </g>
-                            </g>
-                        </g>
-                    </g>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>
--- a/res/themes/legacy-light/css/_legacy-light.pcss
+++ b/res/themes/legacy-light/css/_legacy-light.pcss
@ -239,7 +239,7 @@ $event-highlight-bg-color: $yellow-background;
 /* event timestamp */
 $event-timestamp-color: #acacac;

-$copy-button-url: "$(res)/img/element-icons/copy.svg";
+$copy-button-url: "@vector-im/compound-design-tokens/icons/copy.svg";

 /* e2e */
 $e2e-verified-color: #0dbd8b;
--- a/res/themes/light/css/_light.pcss
+++ b/res/themes/light/css/_light.pcss
@ -345,7 +345,7 @@ $focus-brightness: 105%;

 /* Icon URLs */
 /* ******************** */
-$copy-button-url: "$(res)/img/element-icons/copy.svg";
+$copy-button-url: "@vector-im/compound-design-tokens/icons/copy.svg";
 /* ******************** */

 /* Location sharing */
--- a/src/async-components/views/dialogs/security/CreateSecretStorageDialog.tsx
+++ b/src/async-components/views/dialogs/security/CreateSecretStorageDialog.tsx
@ -14,6 +14,7 @@ import { AuthDict, CrossSigningKeys, MatrixError, UIAFlow, UIAResponse } from "m
 import { CryptoEvent } from "matrix-js-sdk/src/crypto";
 import classNames from "classnames";
 import { BackupTrustInfo, GeneratedSecretStorageKey, KeyBackupInfo } from "matrix-js-sdk/src/crypto-api";
+import CheckmarkIcon from "@vector-im/compound-design-tokens/assets/web/icons/check";

 import { MatrixClientPeg } from "../../../../MatrixClientPeg";
 import { _t, _td } from "../../../../languageHandler";
@ -37,7 +38,6 @@ import BaseDialog from "../../../../components/views/dialogs/BaseDialog";
 import Spinner from "../../../../components/views/elements/Spinner";
 import InteractiveAuthDialog from "../../../../components/views/dialogs/InteractiveAuthDialog";
 import { IValidationResult } from "../../../../components/views/elements/Validation";
-import { Icon as CheckmarkIcon } from "../../../../../res/img/element-icons/check.svg";
 import PassphraseConfirmField from "../../../../components/views/auth/PassphraseConfirmField";
 import { initialiseDehydration } from "../../../../utils/device/dehydration";

--- a/src/components/views/context_menus/KebabContextMenu.tsx
+++ b/src/components/views/context_menus/KebabContextMenu.tsx
@ -7,8 +7,8 @@ Please see LICENSE files in the repository root for full details.
 */

 import React from "react";
+import ContextMenuIcon from "@vector-im/compound-design-tokens/assets/web/icons/overflow-horizontal";

-import { Icon as ContextMenuIcon } from "../../../../res/img/element-icons/context-menu.svg";
 import { ChevronFace, ContextMenuButton, MenuProps, useContextMenu } from "../../structures/ContextMenu";
 import { ButtonProps } from "../elements/AccessibleButton";
 import IconizedContextMenu, { IconizedContextMenuOptionList } from "./IconizedContextMenu";
--- a/src/components/views/dialogs/ForwardDialog.tsx
+++ b/src/components/views/dialogs/ForwardDialog.tsx
@ -279,7 +279,11 @@ const ForwardDialog: React.FC<IProps> = ({ matrixClient: cli, event, permalinkCr
            <EntityTile
                className="mx_EntityTile_ellipsis"
                avatarJsx={
-                    <BaseAvatar url={require("../../../../res/img/ellipsis.svg").default} name="..." size="36px" />
+                    <BaseAvatar
+                        url={require("@vector-im/compound-design-tokens/icons/overflow-horizontal.svg").default}
+                        name="..."
+                        size="36px"
+                    />
                }
                name={text}
                showPresence={false}
--- a/src/components/views/elements/AppTile.tsx
+++ b/src/components/views/elements/AppTile.tsx
@ -16,6 +16,7 @@ import { Room, RoomEvent } from "matrix-js-sdk/src/matrix";
 import { KnownMembership } from "matrix-js-sdk/src/types";
 import { logger } from "matrix-js-sdk/src/logger";
 import { ApprovalOpts, WidgetLifecycle } from "@matrix-org/react-sdk-module-api/lib/lifecycles/WidgetLifecycle";
+import EllipsisIcon from "@vector-im/compound-design-tokens/assets/web/icons/overflow-horizontal";

 import AccessibleButton from "./AccessibleButton";
 import { _t } from "../../../languageHandler";
@ -37,7 +38,6 @@ import { Icon as CollapseIcon } from "../../../../res/img/element-icons/minimise
 import { Icon as MaximiseIcon } from "../../../../res/img/element-icons/maximise-expand.svg";
 import { Icon as MinimiseIcon } from "../../../../res/img/element-icons/minus-button.svg";
 import { Icon as PopoutIcon } from "../../../../res/img/feather-customised/widget/external-link.svg";
-import { Icon as MenuIcon } from "../../../../res/img/element-icons/room/ellipsis.svg";
 import { Container, WidgetLayoutStore } from "../../../stores/widgets/WidgetLayoutStore";
 import { OwnProfileStore } from "../../../stores/OwnProfileStore";
 import { UPDATE_EVENT } from "../../../stores/AsyncStore";
@ -806,7 +806,7 @@ export default class AppTile extends React.Component<IProps, IState> {
                                        ref={this.contextMenuButton}
                                        onClick={this.onContextMenuClick}
                                    >
-                                        <MenuIcon className="mx_Icon mx_Icon_12" />
+                                        <EllipsisIcon className="mx_Icon mx_Icon_12" />
                                    </ContextMenuButton>
                                )}
                            </span>
--- a/src/components/views/elements/FilterDropdown.tsx
+++ b/src/components/views/elements/FilterDropdown.tsx
@ -8,8 +8,8 @@ Please see LICENSE files in the repository root for full details.

 import React, { ReactElement } from "react";
 import classNames from "classnames";
+import CheckmarkIcon from "@vector-im/compound-design-tokens/assets/web/icons/check";

-import { Icon as CheckmarkIcon } from "../../../../res/img/element-icons/roomlist/checkmark.svg";
 import Dropdown, { DropdownProps } from "./Dropdown";
 import { NonEmptyArray } from "../../../@types/common";

--- a/src/components/views/elements/Tag.tsx
+++ b/src/components/views/elements/Tag.tsx
@ -7,9 +7,9 @@ Please see LICENSE files in the repository root for full details.
 */

 import React, { DetailedHTMLProps, HTMLAttributes } from "react";
+import CloseIcon from "@vector-im/compound-design-tokens/assets/web/icons/close";

 import AccessibleButton from "./AccessibleButton";
-import { Icon as CancelRounded } from "../../../../res/img/element-icons/cancel-rounded.svg";

 interface IProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
    icon?: () => JSX.Element;
@ -30,7 +30,7 @@ export const Tag: React.FC<IProps> = ({ icon, label, onDeleteClick, disabled = f
                    onClick={onDeleteClick}
                    disabled={disabled}
                >
-                    <CancelRounded />
+                    <CloseIcon />
                </AccessibleButton>
            )}
        </div>
--- a/src/components/views/location/ShareDialogButtons.tsx
+++ b/src/components/views/location/ShareDialogButtons.tsx
@ -7,10 +7,10 @@ Please see LICENSE files in the repository root for full details.
 */

 import React from "react";
+import CloseIcon from "@vector-im/compound-design-tokens/assets/web/icons/close";
+import BackIcon from "@vector-im/compound-design-tokens/assets/web/icons/chevron-left";

 import AccessibleButton from "../elements/AccessibleButton";
-import { Icon as BackIcon } from "../../../../res/img/element-icons/caret-left.svg";
-import { Icon as CloseIcon } from "../../../../res/img/element-icons/cancel-rounded.svg";
 import { _t } from "../../../languageHandler";

 interface Props {
--- a/src/components/views/messages/MessageActionBar.tsx
+++ b/src/components/views/messages/MessageActionBar.tsx
@ -23,8 +23,8 @@ import {
 import classNames from "classnames";
 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 ContextMenuIcon from "@vector-im/compound-design-tokens/assets/web/icons/overflow-horizontal";

-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";
 import { Icon as EmojiIcon } from "../../../../res/img/element-icons/room/message-bar/emoji.svg";
 import { Icon as ResendIcon } from "../../../../res/img/element-icons/retry.svg";
--- a/src/components/views/pips/WidgetPip.tsx
+++ b/src/components/views/pips/WidgetPip.tsx
@ -8,6 +8,7 @@ Please see LICENSE files in the repository root for full details.

 import React, { FC, MutableRefObject, useCallback, useMemo } from "react";
 import { Room, RoomEvent } from "matrix-js-sdk/src/matrix";
+import BackIcon from "@vector-im/compound-design-tokens/assets/web/icons/arrow-left";

 import PersistentApp from "../elements/PersistentApp";
 import defaultDispatcher from "../../../dispatcher/dispatcher";
@ -19,7 +20,6 @@ import { Container, WidgetLayoutStore } from "../../../stores/widgets/WidgetLayo
 import { useTypedEventEmitterState } from "../../../hooks/useEventEmitter";
 import Toolbar from "../../../accessibility/Toolbar";
 import { RovingAccessibleButton } from "../../../accessibility/RovingTabIndex";
-import { Icon as BackIcon } from "../../../../res/img/element-icons/back.svg";
 import { Icon as HangupIcon } from "../../../../res/img/element-icons/call/hangup.svg";
 import { _t } from "../../../languageHandler";
 import { WidgetType } from "../../../widgets/WidgetType";
--- a/src/components/views/polls/pollHistory/PollDetailHeader.tsx
+++ b/src/components/views/polls/pollHistory/PollDetailHeader.tsx
@ -7,8 +7,8 @@ Please see LICENSE files in the repository root for full details.
 */

 import React from "react";
+import LeftCaretIcon from "@vector-im/compound-design-tokens/assets/web/icons/chevron-left";

-import { Icon as LeftCaretIcon } from "../../../../../res/img/element-icons/caret-left.svg";
 import { _t } from "../../../../languageHandler";
 import AccessibleButton from "../../elements/AccessibleButton";
 import { PollHistoryFilter } from "./types";
--- a/src/components/views/rooms/LinkPreviewGroup.tsx
+++ b/src/components/views/rooms/LinkPreviewGroup.tsx
@ -9,6 +9,7 @@ Please see LICENSE files in the repository root for full details.
 import React, { useContext, useEffect } from "react";
 import { MatrixEvent, MatrixError, IPreviewUrlResponse, MatrixClient } from "matrix-js-sdk/src/matrix";
 import { logger } from "matrix-js-sdk/src/logger";
+import CloseIcon from "@vector-im/compound-design-tokens/assets/web/icons/close";

 import { useStateToggle } from "../../../hooks/useStateToggle";
 import LinkPreviewWidget from "./LinkPreviewWidget";
@ -66,15 +67,7 @@ const LinkPreviewGroup: React.FC<IProps> = ({ links, mxEvent, onCancelClick, onH
                            onClick={onCancelClick}
                            aria-label={_t("timeline|url_preview|close")}
                        >
-                            <img
-                                className="mx_filterFlipColor"
-                                alt=""
-                                role="presentation"
-                                src={require("../../../../res/img/cancel.svg").default}
-                                width="18"
-                                height="18"
-                                draggable="false"
-                            />
+                            <CloseIcon width="20px" height="20px" />
                        </AccessibleButton>
                    ) : undefined}
                </LinkPreviewWidget>
--- a/src/components/views/rooms/MemberList.tsx
+++ b/src/components/views/rooms/MemberList.tsx
@ -238,7 +238,11 @@ export default class MemberList extends React.Component<IProps, IState> {
            <EntityTile
                className="mx_EntityTile_ellipsis"
                avatarJsx={
-                    <BaseAvatar url={require("../../../../res/img/ellipsis.svg").default} name="..." size="36px" />
+                    <BaseAvatar
+                        url={require("@vector-im/compound-design-tokens/icons/overflow-horizontal.svg").default}
+                        name="..."
+                        size="36px"
+                    />
                }
                name={text}
                showPresence={false}
--- a/src/components/views/spaces/QuickSettingsButton.tsx
+++ b/src/components/views/spaces/QuickSettingsButton.tsx
@ -8,6 +8,7 @@ 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 { _t } from "../../../languageHandler";
 import ContextMenu, { alwaysAboveRightOf, ChevronFace, useContextMenu } from "../../structures/ContextMenu";
@ -21,7 +22,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 EllipsisIcon } from "../../../../res/img/element-icons/room/ellipsis.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";
--- a/test/unit-tests/components/views/elements/snapshots/AppTile-test.tsx.snap
+++ b/test/unit-tests/components/views/elements/snapshots/AppTile-test.tsx.snap
@ -175,9 +175,18 @@ exports[`AppTile for a pinned widget should render 1`] = `
          role="button"
          tabindex="0"
        >
-          <div
+          <svg
            class="mx_Icon mx_Icon_12"
+            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>
      </span>
    </div>
@ -260,9 +269,18 @@ exports[`AppTile for a pinned widget should render permission request 1`] = `
          role="button"
          tabindex="0"
        >
-          <div
+          <svg
            class="mx_Icon mx_Icon_12"
+            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>
      </span>
    </div>
@ -424,9 +442,18 @@ exports[`AppTile preserves non-persisted widget on container move 1`] = `
                role="button"
                tabindex="0"
              >
-                <div
+                <svg
                  class="mx_Icon mx_Icon_12"
+                  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>
            </span>
          </div>
--- a/test/unit-tests/components/views/elements/snapshots/FilterDropdown-test.tsx.snap
+++ b/test/unit-tests/components/views/elements/snapshots/FilterDropdown-test.tsx.snap
@ -16,9 +16,18 @@ exports[`<FilterDropdown /> renders dropdown options in menu 1`] = `
      class="mx_FilterDropdown_option"
      data-testid="filter-option-one"
    >
-      <div
+      <svg
        class="mx_FilterDropdown_optionSelectedIcon"
+        fill="currentColor"
+        height="1em"
+        viewBox="0 0 24 24"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M9.55 17.575c-.133 0-.258-.02-.375-.063a.876.876 0 0 1-.325-.212L4.55 13c-.183-.183-.27-.42-.263-.713.009-.291.105-.529.288-.712a.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275L9.55 15.15l8.475-8.475c.183-.183.42-.275.713-.275.291 0 .529.092.712.275.183.183.275.42.275.713 0 .291-.092.529-.275.712l-9.2 9.2c-.1.1-.208.17-.325.212a1.106 1.106 0 0 1-.375.063Z"
        />
+      </svg>
      <span
        class="mx_FilterDropdown_optionLabel"
      >
--- a/test/unit-tests/components/views/polls/pollHistory/snapshots/PollHistory-test.tsx.snap
+++ b/test/unit-tests/components/views/polls/pollHistory/snapshots/PollHistory-test.tsx.snap
@ -22,9 +22,18 @@ exports[`<PollHistory /> Poll detail navigates back to poll list from detail vie
  role="button"
  tabindex="0"
 >
-  <div
+  <svg
    class="mx_PollDetailHeader_icon"
+    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>
  Active polls
 </div>
 `;
--- a/test/unit-tests/components/views/settings/snapshots/LayoutSwitcher-test.tsx.snap
+++ b/test/unit-tests/components/views/settings/snapshots/LayoutSwitcher-test.tsx.snap
@ -130,7 +130,17 @@ exports[`<LayoutSwitcher /> should render 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="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>
                  </div>
                </div>
@ -246,7 +256,17 @@ exports[`<LayoutSwitcher /> should render 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="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>
                  </div>
                </div>
@ -362,7 +382,17 @@ exports[`<LayoutSwitcher /> should render 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="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>
                  </div>
                </div>
--- a/test/unit-tests/components/views/settings/devices/snapshots/CurrentDeviceSection-test.tsx.snap
+++ b/test/unit-tests/components/views/settings/devices/snapshots/CurrentDeviceSection-test.tsx.snap
@ -146,9 +146,18 @@ exports[`<CurrentDeviceSection /> handles when device is falsy 1`] = `
        role="button"
        tabindex="0"
      >
-        <div
+        <svg
          class="mx_KebabContextMenu_icon"
+          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>
    </div>
    <div
@ -181,9 +190,18 @@ exports[`<CurrentDeviceSection /> renders device and correct security card when
        role="button"
        tabindex="0"
      >
-        <div
+        <svg
          class="mx_KebabContextMenu_icon"
+          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>
    </div>
    <div
@ -325,9 +343,18 @@ exports[`<CurrentDeviceSection /> renders device and correct security card when
        role="button"
        tabindex="0"
      >
-        <div
+        <svg
          class="mx_KebabContextMenu_icon"
+          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>
    </div>
    <div
--- a/test/unit-tests/components/views/settings/notifications/snapshots/Notifications2-test.tsx.snap
+++ b/test/unit-tests/components/views/settings/notifications/snapshots/Notifications2-test.tsx.snap
@ -1399,7 +1399,17 @@ exports[`<Notifications /> matches the snapshot 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="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414Z"
+                      />
+                    </svg>
                  </div>
                </div>
                <div
@ -1413,7 +1423,17 @@ exports[`<Notifications /> matches the snapshot 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="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414Z"
+                      />
+                    </svg>
                  </div>
                </div>
                <div
@ -1427,7 +1447,17 @@ exports[`<Notifications /> matches the snapshot 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="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414Z"
+                      />
+                    </svg>
                  </div>
                </div>
                <div
@ -1441,7 +1471,17 @@ exports[`<Notifications /> matches the snapshot 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="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414Z"
+                      />
+                    </svg>
                  </div>
                </div>
                <div
@ -1455,7 +1495,17 @@ exports[`<Notifications /> matches the snapshot 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="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414Z"
+                      />
+                    </svg>
                  </div>
                </div>
                <div
@ -1469,7 +1519,17 @@ exports[`<Notifications /> matches the snapshot 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="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414Z"
+                      />
+                    </svg>
                  </div>
                </div>
                <div
@ -1483,7 +1543,17 @@ exports[`<Notifications /> matches the snapshot 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="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414Z"
+                      />
+                    </svg>
                  </div>
                </div>
                <div
@ -1497,7 +1567,17 @@ exports[`<Notifications /> matches the snapshot 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="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414Z"
+                      />
+                    </svg>
                  </div>
                </div>
                <div
@ -1511,7 +1591,17 @@ exports[`<Notifications /> matches the snapshot 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="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414Z"
+                      />
+                    </svg>
                  </div>
                </div>
              </div>
--- a/test/unit-tests/components/views/settings/tabs/user/snapshots/AppearanceUserSettingsTab-test.tsx.snap
+++ b/test/unit-tests/components/views/settings/tabs/user/snapshots/AppearanceUserSettingsTab-test.tsx.snap
@ -273,7 +273,17 @@ exports[`AppearanceUserSettingsTab should render 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="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>
                          </div>
                        </div>
@ -389,7 +399,17 @@ exports[`AppearanceUserSettingsTab should render 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="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>
                          </div>
                        </div>
@ -505,7 +525,17 @@ exports[`AppearanceUserSettingsTab should render 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="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>
                          </div>
                        </div>
--- a/test/unit-tests/components/views/settings/tabs/user/snapshots/SessionManagerTab-test.tsx.snap
+++ b/test/unit-tests/components/views/settings/tabs/user/snapshots/SessionManagerTab-test.tsx.snap
@ -90,9 +90,18 @@ exports[`<SessionManagerTab /> current session section renders current session s
      role="button"
      tabindex="0"
    >
-      <div
+      <svg
        class="mx_KebabContextMenu_icon"
+        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>
  </div>
  <div
@ -220,9 +229,18 @@ exports[`<SessionManagerTab /> current session section renders current session s
      role="button"
      tabindex="0"
    >
-      <div
+      <svg
        class="mx_KebabContextMenu_icon"
+        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>
  </div>
  <div