Deduplicate icons using Compound Design Tokens (#28219)

* Deduplicate icons using Compound Design Tokens 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> --------- Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2024-11-24 17:38:40 +08:00 · 2024-10-18 14:51:54 +01:00 · 2024-10-18 14:51:54 +01:00 · 90e8c13c0f
commit 90e8c13c0f
parent e5a436a00a
49 changed files with 72 additions and 110 deletions
--- 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/polls/polls.spec.ts/Polls-Timeline-tile-no-votes-linux.png
+++ b/playwright/snapshots/polls/polls.spec.ts/Polls-Timeline-tile-no-votes-linux.png
--- a/playwright/snapshots/settings/appearance-user-settings-tab/appearance-user-settings-tab.spec.ts/appearance-tab-linux.png
+++ b/playwright/snapshots/settings/appearance-user-settings-tab/appearance-user-settings-tab.spec.ts/appearance-tab-linux.png
--- a/playwright/snapshots/threads/threads.spec.ts/Reply-to-the-location-on-ThreadView-linux.png
+++ b/playwright/snapshots/threads/threads.spec.ts/Reply-to-the-location-on-ThreadView-linux.png
--- a/playwright/snapshots/timeline/timeline.spec.ts/event-line-inline-start-margin-irc-layout-linux.png
+++ b/playwright/snapshots/timeline/timeline.spec.ts/event-line-inline-start-margin-irc-layout-linux.png
--- a/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-and-messages-irc-layout-linux.png
+++ b/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-and-messages-irc-layout-linux.png
--- a/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-bubble-layout-linux.png
+++ b/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-bubble-layout-linux.png
--- a/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-emote-irc-layout-linux.png
+++ b/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-emote-irc-layout-linux.png
--- a/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-irc-layout-linux.png
+++ b/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-irc-layout-linux.png
--- a/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-modern-layout-linux.png
+++ b/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-modern-layout-linux.png
--- a/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-redaction-placeholder-linux.png
+++ b/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-redaction-placeholder-linux.png
--- a/res/css/structures/_GenericDropdownMenu.pcss
+++ b/res/css/structures/_GenericDropdownMenu.pcss
@ -99,11 +99,11 @@ Please see LICENSE files in the repository root for full details.

            &[aria-checked="true"]::before {
                content: "";
-                width: 12px;
-                height: 12px;
-                margin-left: -20px;
-                margin-right: 8px;
-                mask-image: url("$(res)/img/feather-customised/check.svg");
+                width: 16px;
+                height: 16px;
+                margin-left: -22px;
+                margin-right: 6px;
+                mask-image: url("@vector-im/compound-design-tokens/icons/check.svg");
                mask-size: 100%;
                mask-repeat: no-repeat;
                background-color: $primary-content;
--- a/res/css/structures/_RoomStatusBar.pcss
+++ b/res/css/structures/_RoomStatusBar.pcss
@ -118,7 +118,7 @@ Please see LICENSE files in the repository root for full details.
            }

            &.mx_RoomStatusBar_unsentCancelAllBtn::before {
-                mask-image: url("$(res)/img/element-icons/trashcan.svg");
+                mask-image: url("@vector-im/compound-design-tokens/icons/delete.svg");
            }

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

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

    .mx_MessageContextMenu_iconResend::before {
@ -92,7 +92,7 @@ Please see LICENSE files in the repository root for full details.
    }

    .mx_MessageContextMenu_iconReply::before {
-        mask-image: url("$(res)/img/element-icons/room/message-bar/reply.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/reply.svg");
    }

    .mx_MessageContextMenu_iconReplyInThread::before {
--- a/res/css/views/dialogs/_InviteDialog.pcss
+++ b/res/css/views/dialogs/_InviteDialog.pcss
@ -351,7 +351,7 @@ Please see LICENSE files in the repository root for full details.
                height: 24px;
                grid-column: 1;
                grid-row: 1;
-                mask-image: url("$(res)/img/feather-customised/check.svg");
+                mask-image: url("@vector-im/compound-design-tokens/icons/check.svg");
                mask-size: 100%;
                mask-repeat: no-repeat;
                position: absolute;
--- a/res/css/views/dialogs/security/_AccessSecretStorageDialog.pcss
+++ b/res/css/views/dialogs/security/_AccessSecretStorageDialog.pcss
@ -80,7 +80,7 @@ Please see LICENSE files in the repository root for full details.
                color: $accent;

                &::before {
-                    mask-image: url("$(res)/img/feather-customised/check.svg");
+                    mask-image: url("@vector-im/compound-design-tokens/icons/check.svg");
                    background-color: $accent;
                }
            }
--- a/res/css/views/elements/_AccessibleButton.pcss
+++ b/res/css/views/elements/_AccessibleButton.pcss
@ -64,7 +64,7 @@ Please see LICENSE files in the repository root for full details.
            background-color: var(--cpd-color-bg-action-primary-rest);

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

--- a/res/css/views/elements/_ImageView.pcss
+++ b/res/css/views/elements/_ImageView.pcss
@ -129,7 +129,8 @@ $button-gap: 24px;
 }

 .mx_ImageView_button_more::before {
-    mask-image: url("$(res)/img/image-view/more.svg");
+    mask-image: url("@vector-im/compound-design-tokens/icons/overflow-horizontal.svg");
+    mask-size: 28px;
 }

 .mx_ImageView_button_close {
--- a/res/css/views/elements/_StyledCheckbox.pcss
+++ b/res/css/views/elements/_StyledCheckbox.pcss
@ -43,7 +43,7 @@ Please see LICENSE files in the repository root for full details.

                height: 100%;
                width: 100%;
-                mask-image: url("$(res)/img/feather-customised/check.svg");
+                mask-image: url("@vector-im/compound-design-tokens/icons/check.svg");
                mask-position: center;
                mask-size: 100%;
                mask-repeat: no-repeat;
--- a/res/css/views/elements/_Validation.pcss
+++ b/res/css/views/elements/_Validation.pcss
@ -44,7 +44,7 @@ Please see LICENSE files in the repository root for full details.
        color: $accent;

        &::before {
-            mask-image: url("$(res)/img/feather-customised/check.svg");
+            mask-image: url("@vector-im/compound-design-tokens/icons/check.svg");
            background-color: $accent;
        }
    }
--- a/res/css/views/messages/_MessageActionBar.pcss
+++ b/res/css/views/messages/_MessageActionBar.pcss
@ -122,4 +122,8 @@ Please see LICENSE files in the repository root for full details.
            --MessageActionBar-icon-size: 12px;
        }
    }
+
+    .mx_MessageActionBar_optionsButton {
+        --MessageActionBar-icon-size: 22px;
+    }
 }
--- a/res/css/views/messages/_RedactedBody.pcss
+++ b/res/css/views/messages/_RedactedBody.pcss
@ -18,7 +18,7 @@ Please see LICENSE files in the repository root for full details.
        height: 14px;
        width: 14px;
        background-color: $icon-button-color;
-        mask-image: url("$(res)/img/feather-customised/trash.custom.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/delete.svg");
        mask-repeat: no-repeat;
        mask-position: center;
        mask-size: contain;
--- a/res/css/views/right_panel/_ThreadPanel.pcss
+++ b/res/css/views/right_panel/_ThreadPanel.pcss
@ -191,7 +191,7 @@ Please see LICENSE files in the repository root for full details.
                width: 12px;
                height: 12px;
                margin-right: 8px;
-                mask-image: url("$(res)/img/feather-customised/check.svg");
+                mask-image: url("@vector-im/compound-design-tokens/icons/check.svg");
                mask-size: 100%;
                mask-repeat: no-repeat;
                background-color: $primary-content;
--- a/res/css/views/rooms/_MessageComposer.pcss
+++ b/res/css/views/rooms/_MessageComposer.pcss
@ -277,7 +277,8 @@ Please see LICENSE files in the repository root for full details.
 }

 .mx_MessageComposer_buttonMenu::before {
-    mask-image: url("$(res)/img/image-view/more.svg");
+    mask-image: url("@vector-im/compound-design-tokens/icons/overflow-horizontal.svg");
+    mask-size: 24px;
 }

 .mx_MessageComposer_sendMessage {
--- a/res/css/views/rooms/_VoiceRecordComposerTile.pcss
+++ b/res/css/views/rooms/_VoiceRecordComposerTile.pcss
@ -35,7 +35,7 @@ Please see LICENSE files in the repository root for full details.
    background-color: $voice-record-icon-color;
    mask-repeat: no-repeat;
    mask-size: contain;
-    mask-image: url("$(res)/img/element-icons/trashcan.svg");
+    mask-image: url("@vector-im/compound-design-tokens/icons/delete.svg");
 }

 .mx_VoiceRecordComposerTile_uploadingState {
--- a/res/css/views/settings/tabs/user/_SecurityUserSettingsTab.pcss
+++ b/res/css/views/settings/tabs/user/_SecurityUserSettingsTab.pcss
@ -35,6 +35,6 @@ Please see LICENSE files in the repository root for full details.
        top: 0;
        left: 0;
        background-color: $alert;
-        mask-image: url("$(res)/img/feather-customised/alert-triangle.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/warning.svg");
    }
 }
--- a/res/css/views/voip/LegacyCallView/_LegacyCallViewButtons.pcss
+++ b/res/css/views/voip/LegacyCallView/_LegacyCallViewButtons.pcss
@ -161,7 +161,7 @@ Please see LICENSE files in the repository root for full details.
        }

        &.mx_LegacyCallViewButtons_button_more::before {
-            mask-image: url("$(res)/img/voip/call-view/more.svg");
+            mask-image: url("@vector-im/compound-design-tokens/icons/overflow-horizontal.svg");
        }
        /* Stateless buttons */

--- a/res/img/compound/thread-16px.svg
+++ b/res/img/compound/thread-16px.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="M2.88867 0.138672C1.36989 0.138672 0.138672 1.36989 0.138672 2.88867V15.1109C0.138672 15.395 0.299174 15.6547 0.553262 15.7817C0.80735 15.9088 1.11141 15.8813 1.33867 15.7109L4.36089 13.4442C4.57726 13.2819 4.84043 13.1942 5.11089 13.1942H13.1109C14.6297 13.1942 15.8609 11.963 15.8609 10.4442V2.88822C15.8609 1.36922 14.6295 0.138672 13.1109 0.138672H2.88867ZM3.69421 5.33301C3.69421 4.91879 4.03 4.58301 4.44421 4.58301H11.5553C11.9695 4.58301 12.3053 4.91879 12.3053 5.33301C12.3053 5.74722 11.9695 6.08301 11.5553 6.08301H4.44421C4.03 6.08301 3.69421 5.74722 3.69421 5.33301ZM4.44421 7.24976C4.03 7.24976 3.69421 7.58554 3.69421 7.99976C3.69421 8.41397 4.03 8.74976 4.44421 8.74976H7.99977C8.41398 8.74976 8.74977 8.41397 8.74977 7.99976C8.74977 7.58554 8.41398 7.24976 7.99977 7.24976H4.44421Z" fill="currentColor"/>
-</svg>
--- a/res/img/compound/user.svg
+++ b/res/img/compound/user.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_1123_14017" fill="white">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M18.7093 21.9506C16.7941 23.2445 14.4853 24 12 24C9.29855 24 6.80558 23.1073 4.8 21.6009C1.88532 19.4116 0 15.926 0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12C24 16.1421 21.9013 19.7941 18.7093 21.9506ZM12 12.6C13.9882 12.6 15.6 10.8539 15.6 8.7C15.6 6.54609 13.9882 4.8 12 4.8C10.0118 4.8 8.4 6.54609 8.4 8.7C8.4 10.8539 10.0118 12.6 12 12.6ZM12 21.6C14.5944 21.6 16.9484 20.5709 18.6761 18.8986C17.6076 16.2607 15.0211 14.4 12 14.4C8.9789 14.4 6.39239 16.2607 5.32394 18.8986C7.05162 20.5709 9.40563 21.6 12 21.6Z"/>
-</mask>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M18.7093 21.9506C16.7941 23.2445 14.4853 24 12 24C9.29855 24 6.80558 23.1073 4.8 21.6009C1.88532 19.4116 0 15.926 0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12C24 16.1421 21.9013 19.7941 18.7093 21.9506ZM12 12.6C13.9882 12.6 15.6 10.8539 15.6 8.7C15.6 6.54609 13.9882 4.8 12 4.8C10.0118 4.8 8.4 6.54609 8.4 8.7C8.4 10.8539 10.0118 12.6 12 12.6ZM12 21.6C14.5944 21.6 16.9484 20.5709 18.6761 18.8986C17.6076 16.2607 15.0211 14.4 12 14.4C8.9789 14.4 6.39239 16.2607 5.32394 18.8986C7.05162 20.5709 9.40563 21.6 12 21.6Z" fill="currentColor"/>
-<path d="M18.7093 21.9506L19.5643 23.2161L18.7093 21.9506ZM4.8 21.6009L3.88276 22.822H3.88276L4.8 21.6009ZM18.6761 18.8986L19.7383 19.996L20.4782 19.2797L20.0916 18.3252L18.6761 18.8986ZM5.32394 18.8986L3.90838 18.3252L3.52177 19.2797L4.26173 19.996L5.32394 18.8986ZM12 25.5273C14.7995 25.5273 17.4045 24.6752 19.5643 23.2161L17.8543 20.6851C16.1837 21.8137 14.1711 22.4727 12 22.4727V25.5273ZM3.88276 22.822C6.14374 24.5203 8.95648 25.5273 12 25.5273V22.4727C9.64061 22.4727 7.46743 21.6943 5.71724 20.3797L3.88276 22.822ZM-1.52727 12C-1.52727 16.4266 0.600567 20.3567 3.88276 22.822L5.71724 20.3797C3.17008 18.4665 1.52727 15.4253 1.52727 12H-1.52727ZM12 -1.52727C4.52909 -1.52727 -1.52727 4.52909 -1.52727 12H1.52727C1.52727 6.21607 6.21607 1.52727 12 1.52727V-1.52727ZM25.5273 12C25.5273 4.52909 19.4709 -1.52727 12 -1.52727V1.52727C17.7839 1.52727 22.4727 6.21607 22.4727 12H25.5273ZM19.5643 23.2161C23.1587 20.7878 25.5273 16.6707 25.5273 12H22.4727C22.4727 15.6135 20.6439 18.8004 17.8543 20.6851L19.5643 23.2161ZM14.0727 8.7C14.0727 10.1278 13.0319 11.0727 12 11.0727V14.1273C14.9445 14.1273 17.1273 11.58 17.1273 8.7H14.0727ZM12 6.32727C13.0319 6.32727 14.0727 7.27217 14.0727 8.7H17.1273C17.1273 5.82 14.9445 3.27273 12 3.27273V6.32727ZM9.92727 8.7C9.92727 7.27217 10.9681 6.32727 12 6.32727V3.27273C9.05549 3.27273 6.87273 5.82 6.87273 8.7H9.92727ZM12 11.0727C10.9681 11.0727 9.92727 10.1278 9.92727 8.7H6.87273C6.87273 11.58 9.05549 14.1273 12 14.1273V11.0727ZM17.6138 17.8012C16.1595 19.2089 14.1822 20.0727 12 20.0727V23.1273C15.0065 23.1273 17.7372 21.9329 19.7383 19.996L17.6138 17.8012ZM12 15.9273C14.3779 15.9273 16.4175 17.3908 17.2605 19.4719L20.0916 18.3252C18.7977 15.1306 15.6643 12.8727 12 12.8727V15.9273ZM6.7395 19.4719C7.58245 17.3908 9.62215 15.9273 12 15.9273V12.8727C8.33566 12.8727 5.20233 15.1306 3.90838 18.3252L6.7395 19.4719ZM12 20.0727C9.81778 20.0727 7.84046 19.2089 6.38615 17.8012L4.26173 19.996C6.26278 21.9329 8.99347 23.1273 12 23.1273V20.0727Z" fill="currentColor" mask="url(#path-1-inside-1_1123_14017)"/>
-</svg>
--- a/res/img/element-icons/trashcan.svg
+++ b/res/img/element-icons/trashcan.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="M6 19C6 20.1 6.9 21 8 21H16C17.1 21 18 20.1 18 19V9C18 7.9 17.1 7 16 7H8C6.9 7 6 7.9 6 9V19ZM18 4H15.5L14.79 3.29C14.61 3.11 14.35 3 14.09 3H9.91C9.65 3 9.39 3.11 9.21 3.29L8.5 4H6C5.45 4 5 4.45 5 5C5 5.55 5.45 6 6 6H18C18.55 6 19 5.55 19 5C19 4.45 18.55 4 18 4Z" fill="currentColor"/>
-</svg>
--- a/res/img/feather-customised/check.svg
+++ b/res/img/feather-customised/check.svg
@ -1,3 +0,0 @@
-<svg fill="none" height="24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
-    <path d="m20 6-11 11-5-5"/>
-</svg>
--- a/res/img/feather-customised/trash.custom.svg
+++ b/res/img/feather-customised/trash.custom.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="M2.25 5.5H5.16667H21.75" stroke="#2E2F32" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M16.5 5.5L15 1H9L7.5 5.5" stroke="#2E2F32" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M5.25 9.25V20.75C5.25 21.8546 6.14543 22.75 7.25 22.75H16.75C17.8546 22.75 18.75 21.8546 18.75 20.75V9.25" stroke="#2E2F32" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M9.75 9.25V18.25" stroke="#2E2F32" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M14.25 9.25V18.25" stroke="#2E2F32" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
--- a/res/img/feather-customised/warning-triangle.svg
+++ b/res/img/feather-customised/warning-triangle.svg
@ -1,13 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 23.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 14 12" style="enable-background:new 0 0 14 12;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;}
-</style>
-<g>
-	<path class="st0" d="M6,1.5L1.2,9.3c-0.2,0.3-0.2,0.8,0,1.1c0.2,0.3,0.6,0.6,1,0.6h9.7c0.4,0,0.8-0.2,1-0.6c0.2-0.3,0.2-0.8,0-1.1
-		L8,1.5C7.8,1.2,7.4,1,7,1C6.6,1,6.2,1.2,6,1.5z M7,4v3"/>
-	 <path class="st0" d="M7,9L7,9.001"/>
-</g>
-</svg>
--- a/res/img/format/bold.svg
+++ b/res/img/format/bold.svg
@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="10" height="13" viewBox="0 0 10 13">
-    <path fill="#212121" fill-rule="nonzero" d="M7.47 6.156c.732.204 1.299.57 1.701 1.098.402.528.603 1.188.603 1.98 0 1.092-.375 1.941-1.125 2.547-.75.606-1.797.909-3.141.909H.918c-.288 0-.513-.081-.675-.243C.081 12.285 0 12.066 0 11.79V.9C0 .624.081.405.243.243.405.081.63 0 .918 0H5.31c1.308 0 2.331.291 3.069.873.738.582 1.107 1.395 1.107 2.439 0 .672-.177 1.254-.531 1.746-.354.492-.849.858-1.485 1.098zM1.818 5.49h3.204c1.776 0 2.664-.672 2.664-2.016 0-.672-.219-1.17-.657-1.494-.438-.324-1.107-.486-2.007-.486H1.818V5.49zm3.492 5.706c.924 0 1.602-.168 2.034-.504.432-.336.648-.858.648-1.566 0-.72-.219-1.257-.657-1.611-.438-.354-1.113-.531-2.025-.531H1.818v4.212H5.31z"/>
-</svg>
--- a/res/img/format/code.svg
+++ b/res/img/format/code.svg
@ -1,7 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="19" height="12" viewBox="0 0 19 12">
-    <g fill="none" fill-rule="evenodd" stroke="#212121" stroke-linecap="round">
-        <path stroke-linejoin="round" d="M14.1 9.8L18 5.9 14.1 2"/>
-        <path d="M7.5 11.5l4-11"/>
-        <path stroke-linejoin="round" d="M4.9 2L1 5.9l3.9 3.9"/>
-    </g>
-</svg>
--- a/res/img/format/italics.svg
+++ b/res/img/format/italics.svg
@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="3" height="13" viewBox="0 0 3 13">
-    <path fill="#212121" fill-rule="nonzero" d="M.542 12.87a.539.539 0 0 1-.396-.162.506.506 0 0 1-.144-.414L1.92.522A.551.551 0 0 1 2.478 0c.168 0 .303.051.405.153.102.102.147.243.135.423L1.1 12.348a.544.544 0 0 1-.171.387.563.563 0 0 1-.387.135z"/>
-</svg>
--- a/res/img/format/quote.svg
+++ b/res/img/format/quote.svg
@ -1,5 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="13" height="11" viewBox="0 0 13 11">
-    <g fill="#212121" fill-rule="nonzero">
-        <path d="M1.05 2.375c.25.017.458.112.625.288.167.175.25.404.25.687 0 .3-.087.542-.262.725A.877.877 0 0 1 1 4.35c-.667 0-1-.492-1-1.475C0 1.858.317.975.95.225 1.1.075 1.25 0 1.4 0a.44.44 0 0 1 .325.125.44.44 0 0 1 .125.325c0 .15-.05.275-.15.375a2.26 2.26 0 0 0-.462.7 3.215 3.215 0 0 0-.188.85zm3.575 0c.25.017.458.112.625.288.167.175.25.404.25.687 0 .3-.087.542-.263.725a.877.877 0 0 1-.662.275c-.667 0-1-.492-1-1.475 0-1.017.317-1.9.95-2.65.15-.15.3-.225.45-.225A.44.44 0 0 1 5.3.125a.44.44 0 0 1 .125.325c0 .15-.05.275-.15.375a2.26 2.26 0 0 0-.463.7 3.215 3.215 0 0 0-.187.85zM11.95 7.975a.916.916 0 0 1-.625-.287c-.167-.176-.25-.405-.25-.688 0-.3.087-.542.262-.725A.877.877 0 0 1 12 6c.667 0 1 .492 1 1.475 0 1.017-.317 1.9-.95 2.65-.15.15-.3.225-.45.225a.44.44 0 0 1-.325-.125.44.44 0 0 1-.125-.325c0-.15.05-.275.15-.375a2.26 2.26 0 0 0 .462-.7c.092-.233.155-.517.188-.85zm-3.575 0a.916.916 0 0 1-.625-.287C7.583 7.512 7.5 7.283 7.5 7c0-.3.087-.542.262-.725A.877.877 0 0 1 8.425 6c.667 0 1 .492 1 1.475 0 1.017-.317 1.9-.95 2.65-.15.15-.3.225-.45.225a.44.44 0 0 1-.325-.125.44.44 0 0 1-.125-.325c0-.15.05-.275.15-.375a2.26 2.26 0 0 0 .462-.7c.092-.233.155-.517.188-.85z"/>
-    </g>
-</svg>
--- a/res/img/format/strikethrough.svg
+++ b/res/img/format/strikethrough.svg
@ -1,6 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="12" height="13" viewBox="0 0 12 13">
-    <g fill="none" fill-rule="evenodd">
-        <path fill="#212121" fill-rule="nonzero" d="M9.566 7.834l-.071-.085c.39.426.585.999.585 1.719 0 .684-.189 1.293-.567 1.827-.378.534-.912.948-1.602 1.242-.69.294-1.479.441-2.367.441a7.85 7.85 0 0 1-2.565-.423c-.822-.282-1.467-.663-1.935-1.143a.65.65 0 0 1-.234-.522c0-.132.039-.246.117-.342.078-.096.165-.144.261-.144.12 0 .258.06.414.18 1.128.936 2.442 1.404 3.942 1.404 1.092 0 1.935-.219 2.529-.657.594-.438.891-1.059.891-1.863 0-.468-.144-.846-.432-1.134a2.753 2.753 0 0 0-.696-.5h1.73zM5.616 0c.828 0 1.608.135 2.34.405.732.27 1.338.657 1.818 1.161.156.156.234.33.234.522a.526.526 0 0 1-.117.342c-.078.096-.165.144-.261.144-.12 0-.258-.06-.414-.18-.648-.528-1.233-.894-1.755-1.098C6.939 1.092 6.324.99 5.616.99c-1.068 0-1.902.228-2.502.684-.6.456-.9 1.092-.9 1.908 0 .492.132.891.396 1.197l.052.055H1.326c-.152-.354-.228-.765-.228-1.234 0-.708.189-1.335.567-1.881.378-.546.909-.969 1.593-1.269C3.942.15 4.728 0 5.616 0z"/>
-        <rect width="12" height="1" y="5.834" fill="#000" rx=".5"/>
-    </g>
-</svg>
--- a/res/img/image-view/more.svg
+++ b/res/img/image-view/more.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="M6.66699 12C6.66699 13.1046 5.77156 14 4.66699 14C3.56242 14 2.66699 13.1046 2.66699 12C2.66699 10.8954 3.56242 10 4.66699 10C5.77156 10 6.66699 10.8954 6.66699 12ZM14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12ZM19.333 14C20.4376 14 21.333 13.1046 21.333 12C21.333 10.8954 20.4376 10 19.333 10C18.2284 10 17.333 10.8954 17.333 12C17.333 13.1046 18.2284 14 19.333 14Z" fill="#8E99A4"/>
-</svg>
--- a/res/img/voip/call-view/more.svg
+++ b/res/img/voip/call-view/more.svg
@ -1,3 +0,0 @@
-<svg width="20" height="4" viewBox="0 0 20 4" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M4.66699 2C4.66699 3.10457 3.77156 4 2.66699 4C1.56242 4 0.666992 3.10457 0.666992 2C0.666992 0.895431 1.56242 0 2.66699 0C3.77156 0 4.66699 0.895431 4.66699 2ZM12 2C12 3.10457 11.1046 4 10 4C8.89543 4 8 3.10457 8 2C8 0.895431 8.89543 0 10 0C11.1046 0 12 0.895431 12 2ZM17.333 4C18.4376 4 19.333 3.10457 19.333 2C19.333 0.895431 18.4376 0 17.333 0C16.2284 0 15.333 0.895431 15.333 2C15.333 3.10457 16.2284 4 17.333 4Z" fill="#737D8C"/>
-</svg>
--- a/src/components/structures/RoomStatusBar.tsx
+++ b/src/components/structures/RoomStatusBar.tsx
@ -17,8 +17,8 @@ import {
    SyncState,
    SyncStateData,
 } from "matrix-js-sdk/src/matrix";
+import { WarningIcon } from "@vector-im/compound-design-tokens/assets/web/icons";

-import { Icon as WarningIcon } from "../../../res/img/feather-customised/warning-triangle.svg";
 import { _t, _td } from "../../languageHandler";
 import Resend from "../../Resend";
 import dis from "../../dispatcher/dispatcher";
--- a/src/components/views/elements/Pill.tsx
+++ b/src/components/views/elements/Pill.tsx
@ -10,7 +10,7 @@ import React, { ReactElement } from "react";
 import classNames from "classnames";
 import { Room, RoomMember } from "matrix-js-sdk/src/matrix";
 import { Tooltip } from "@vector-im/compound-web";
-import LinkIcon from "@vector-im/compound-design-tokens/assets/web/icons/link";
+import { LinkIcon, UserSolidIcon } from "@vector-im/compound-design-tokens/assets/web/icons";

 import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
@ -18,7 +18,6 @@ import { usePermalink } from "../../../hooks/usePermalink";
 import RoomAvatar from "../avatars/RoomAvatar";
 import MemberAvatar from "../avatars/MemberAvatar";
 import { _t } from "../../../languageHandler";
-import { Icon as UserIcon } from "../../../../res/img/compound/user.svg";

 export enum PillType {
    UserMention = "TYPE_USER_MENTION",
@ -63,7 +62,7 @@ const PillMemberAvatar: React.FC<{
    if (member) {
        return <MemberAvatar member={member} size="16px" aria-hidden="true" hideTitle />;
    }
-    return <UserIcon className="mx_Pill_UserIcon mx_BaseAvatar" />;
+    return <UserSolidIcon className="mx_Pill_UserIcon mx_BaseAvatar" />;
 };

 export interface PillProps {
--- a/src/components/views/messages/MessageActionBar.tsx
+++ b/src/components/views/messages/MessageActionBar.tsx
@ -21,16 +21,18 @@ import {
    EventType,
 } from "matrix-js-sdk/src/matrix";
 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 {
+    PinIcon,
+    UnpinIcon,
+    OverflowHorizontalIcon,
+    ReplyIcon,
+    DeleteIcon,
+} 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 ResendIcon } from "../../../../res/img/element-icons/retry.svg";
 import { Icon as ThreadIcon } from "../../../../res/img/element-icons/message/thread.svg";
-import { Icon as TrashcanIcon } from "../../../../res/img/element-icons/trashcan.svg";
-import { Icon as ReplyIcon } from "../../../../res/img/element-icons/room/message-bar/reply.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";
@ -130,7 +132,7 @@ const OptionsButton: React.FC<IOptionsButtonProps> = ({
                tabIndex={isActive ? 0 : -1}
                placement="left"
            >
-                <ContextMenuIcon />
+                <OverflowHorizontalIcon />
            </ContextMenuTooltipButton>
            {contextMenu}
        </React.Fragment>
@ -454,7 +456,7 @@ export default class MessageActionBar extends React.PureComponent<IMessageAction
                key="cancel"
                placement="left"
            >
-                <TrashcanIcon />
+                <DeleteIcon />
            </RovingAccessibleButton>
        );

--- a/src/components/views/rooms/RoomKnocksBar.tsx
+++ b/src/components/views/rooms/RoomKnocksBar.tsx
@ -9,9 +9,8 @@ Please see LICENSE files in the repository root for full details.
 import { EventTimeline, JoinRule, MatrixError, Room, RoomStateEvent } from "matrix-js-sdk/src/matrix";
 import { KnownMembership } from "matrix-js-sdk/src/types";
 import React, { ReactElement, ReactNode, useCallback, useState, VFC } from "react";
-import CloseIcon from "@vector-im/compound-design-tokens/assets/web/icons/close";
+import { CloseIcon, CheckIcon } from "@vector-im/compound-design-tokens/assets/web/icons";

-import { Icon as CheckIcon } from "../../../../res/img/feather-customised/check.svg";
 import dis from "../../../dispatcher/dispatcher";
 import { useTypedEventEmitterState } from "../../../hooks/useEventEmitter";
 import { _t } from "../../../languageHandler";
--- a/src/components/views/rooms/RoomTileSubtitle.tsx
+++ b/src/components/views/rooms/RoomTileSubtitle.tsx
@ -8,12 +8,12 @@ Please see LICENSE files in the repository root for full details.

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

 import { MessagePreview } from "../../../stores/room-list/MessagePreviewStore";
 import { Call } from "../../../models/Call";
 import { RoomTileCallSummary } from "./RoomTileCallSummary";
 import { VoiceBroadcastRoomSubtitle } from "../../../voice-broadcast";
-import { Icon as ThreadIcon } from "../../../../res/img/compound/thread-16px.svg";

 interface Props {
    call: Call | null;
@ -49,7 +49,7 @@ export const RoomTileSubtitle: React.FC<Props> = ({
            "mx_RoomTile_subtitle--thread-reply": messagePreview.isThreadReply,
        });

-        const icon = messagePreview.isThreadReply ? <ThreadIcon className="mx_Icon mx_Icon_12" /> : null;
+        const icon = messagePreview.isThreadReply ? <ThreadsIcon className="mx_Icon mx_Icon_12" /> : null;

        return (
            <div className={className} id={messagePreviewId(roomId)} title={messagePreview.text}>
--- a/src/components/views/settings/tabs/room/PeopleRoomSettingsTab.tsx
+++ b/src/components/views/settings/tabs/room/PeopleRoomSettingsTab.tsx
@ -9,9 +9,8 @@ Please see LICENSE files in the repository root for full details.
 import { EventTimeline, MatrixError, Room, RoomMember, RoomStateEvent } from "matrix-js-sdk/src/matrix";
 import { KnownMembership } from "matrix-js-sdk/src/types";
 import React, { useCallback, useState, VFC } from "react";
-import CloseIcon from "@vector-im/compound-design-tokens/assets/web/icons/close";
+import { CloseIcon, CheckIcon } from "@vector-im/compound-design-tokens/assets/web/icons";

-import { Icon as CheckIcon } from "../../../../../../res/img/feather-customised/check.svg";
 import { formatRelativeTime } from "../../../../../DateUtils";
 import { useTypedEventEmitterState } from "../../../../../hooks/useEventEmitter";
 import { _t } from "../../../../../languageHandler";
--- a/src/vector/index.html
+++ b/src/vector/index.html
@ -74,7 +74,7 @@
    <!-- Legacy supporting Prefetch images -->
    <img src="<%= require('../../res/img/warning.svg').default %>" aria-hidden alt="" width="24" height="23" style="visibility: hidden; position: absolute; top: 0px; left: 0px;"/>
    <img src="<%= require('../../res/img/e2e/warning.svg').default %>" aria-hidden alt="" width="24" height="23" style="visibility: hidden; position: absolute; top: 0px; left: 0px;"/>
-    <img src="<%= require('../../res/img/feather-customised/warning-triangle.svg').default %>" aria-hidden alt="" width="24" height="23" style="visibility: hidden; position: absolute; top: 0px; left: 0px;"/>
+    <img src="<%= require('@vector-im/compound-design-tokens/icons/warning.svg').default %>" aria-hidden alt="" width="24" height="23" style="visibility: hidden; position: absolute; top: 0px; left: 0px;"/>
    <img src="<%= require('@vector-im/compound-design-tokens/icons/bold.svg').default %>" aria-hidden alt="" width="25" height="22" style="visibility: hidden; position: absolute; top: 0px; left: 0px;"/>
    <img src="<%= require('@vector-im/compound-design-tokens/icons/inline-code.svg').default %>" aria-hidden alt="" width="25" height="22" style="visibility: hidden; position: absolute; top: 0px; left: 0px;"/>
    <img src="<%= require('@vector-im/compound-design-tokens/icons/italic.svg').default %>" aria-hidden alt="" width="25" height="22" style="visibility: hidden; position: absolute; top: 0px; left: 0px;"/>
--- a/test/unit-tests/components/views/elements/snapshots/Pill-test.tsx.snap
+++ b/test/unit-tests/components/views/elements/snapshots/Pill-test.tsx.snap
@ -219,9 +219,18 @@ exports[`<Pill> should render the expected pill for an uknown user not in the ro
        class="mx_Pill mx_UserPill"
        href="https://matrix.to/#/@user3:example.com"
      >
-        <div
+        <svg
          class="mx_Pill_UserIcon mx_BaseAvatar"
-        />
+          fill="currentColor"
+          height="1em"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M12 12c-1.1 0-2.042-.392-2.825-1.175C8.392 10.042 8 9.1 8 8s.392-2.042 1.175-2.825C9.958 4.392 10.9 4 12 4s2.042.392 2.825 1.175C15.608 5.958 16 6.9 16 8s-.392 2.042-1.175 2.825C14.042 11.608 13.1 12 12 12Zm-8 6v-.8c0-.567.146-1.087.438-1.563A2.911 2.911 0 0 1 5.6 14.55a14.843 14.843 0 0 1 3.15-1.163A13.76 13.76 0 0 1 12 13c1.1 0 2.183.13 3.25.387 1.067.259 2.117.646 3.15 1.163.483.25.87.612 1.163 1.087.291.476.437.996.437 1.563v.8c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 18 20H6c-.55 0-1.02-.196-1.412-.587A1.926 1.926 0 0 1 4 18Z"
+          />
+        </svg>
        <span
          class="mx_Pill_text"
        >
--- a/test/unit-tests/components/views/settings/tabs/room/snapshots/PeopleRoomSettingsTab-test.tsx.snap
+++ b/test/unit-tests/components/views/settings/tabs/room/snapshots/PeopleRoomSettingsTab-test.tsx.snap
@ -90,10 +90,17 @@ exports[`PeopleRoomSettingsTab with requests to join renders requests fully 1`]
        role="button"
        tabindex="0"
      >
-        <div
+        <svg
+          fill="currentColor"
          height="18"
+          viewBox="0 0 24 24"
          width="18"
-        />
+          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>
      </div>
    </div>
  </div>
@ -164,10 +171,17 @@ exports[`PeopleRoomSettingsTab with requests to join renders requests reduced 1`
        role="button"
        tabindex="0"
      >
-        <div
+        <svg
+          fill="currentColor"
          height="18"
+          viewBox="0 0 24 24"
          width="18"
-        />
+          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>
      </div>
    </div>
  </div>