diff --git a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-bubble-layout-linux.png b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-bubble-layout-linux.png
index b837798b3d..8f025b53ef 100644
Binary files a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-bubble-layout-linux.png and b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-bubble-layout-linux.png differ
diff --git a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-chain-bubble-layout-linux.png b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-chain-bubble-layout-linux.png
index 30a8f94cbd..2dffefd423 100644
Binary files a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-chain-bubble-layout-linux.png and b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-chain-bubble-layout-linux.png differ
diff --git a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-chain-group-layout-linux.png b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-chain-group-layout-linux.png
index 8540165f4c..a2147e80d5 100644
Binary files a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-chain-group-layout-linux.png and b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-chain-group-layout-linux.png differ
diff --git a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-chain-irc-layout-linux.png b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-chain-irc-layout-linux.png
index 681d54cd26..de6fe0cdbb 100644
Binary files a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-chain-irc-layout-linux.png and b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-chain-irc-layout-linux.png differ
diff --git a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-group-layout-linux.png b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-group-layout-linux.png
index c34d8925d7..b9bbd316fb 100644
Binary files a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-group-layout-linux.png and b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-group-layout-linux.png differ
diff --git a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-irc-layout-linux.png b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-irc-layout-linux.png
index 4d452abd29..d5e96b98f9 100644
Binary files a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-irc-layout-linux.png and b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-irc-layout-linux.png differ
diff --git a/playwright/snapshots/crypto/history-sharing.spec.ts/shared-history-invite-accepted-linux.png b/playwright/snapshots/crypto/history-sharing.spec.ts/shared-history-invite-accepted-linux.png
index 9f2d1e23e4..691e7cdb0a 100644
Binary files a/playwright/snapshots/crypto/history-sharing.spec.ts/shared-history-invite-accepted-linux.png and b/playwright/snapshots/crypto/history-sharing.spec.ts/shared-history-invite-accepted-linux.png differ
diff --git a/playwright/snapshots/invite/invite-dialog.spec.ts/send-your-first-message-view-linux.png b/playwright/snapshots/invite/invite-dialog.spec.ts/send-your-first-message-view-linux.png
index 36ba4b247d..42fd8cfca2 100644
Binary files a/playwright/snapshots/invite/invite-dialog.spec.ts/send-your-first-message-view-linux.png and b/playwright/snapshots/invite/invite-dialog.spec.ts/send-your-first-message-view-linux.png differ
diff --git a/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-open-notification-options-selection-linux.png b/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-open-notification-options-selection-linux.png
index 2b53b40113..498415e78b 100644
Binary files a/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-open-notification-options-selection-linux.png and b/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-open-notification-options-selection-linux.png differ
diff --git 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
index 2f799712b6..2730cea568 100644
Binary files a/playwright/snapshots/polls/polls.spec.ts/Polls-Timeline-tile-no-votes-linux.png and b/playwright/snapshots/polls/polls.spec.ts/Polls-Timeline-tile-no-votes-linux.png differ
diff --git a/playwright/snapshots/polls/polls.spec.ts/ThreadView-with-a-poll-on-bubble-layout-linux.png b/playwright/snapshots/polls/polls.spec.ts/ThreadView-with-a-poll-on-bubble-layout-linux.png
index 8280d305f9..91b345d971 100644
Binary files a/playwright/snapshots/polls/polls.spec.ts/ThreadView-with-a-poll-on-bubble-layout-linux.png and b/playwright/snapshots/polls/polls.spec.ts/ThreadView-with-a-poll-on-bubble-layout-linux.png differ
diff --git a/playwright/snapshots/polls/polls.spec.ts/ThreadView-with-a-poll-on-group-layout-linux.png b/playwright/snapshots/polls/polls.spec.ts/ThreadView-with-a-poll-on-group-layout-linux.png
index 8ffe05ad88..a7aaf36dc4 100644
Binary files a/playwright/snapshots/polls/polls.spec.ts/ThreadView-with-a-poll-on-group-layout-linux.png and b/playwright/snapshots/polls/polls.spec.ts/ThreadView-with-a-poll-on-group-layout-linux.png differ
diff --git a/playwright/snapshots/release-announcement/releaseAnnouncement.spec.ts/release-announcement-Chats-has-a-new-look--linux.png b/playwright/snapshots/release-announcement/releaseAnnouncement.spec.ts/release-announcement-Chats-has-a-new-look--linux.png
index 54deb9e4a6..469881620c 100644
Binary files a/playwright/snapshots/release-announcement/releaseAnnouncement.spec.ts/release-announcement-Chats-has-a-new-look--linux.png and b/playwright/snapshots/release-announcement/releaseAnnouncement.spec.ts/release-announcement-Chats-has-a-new-look--linux.png differ
diff --git a/playwright/snapshots/release-announcement/releaseAnnouncement.spec.ts/release-announcement-We’ve-refreshed-your-sounds-linux.png b/playwright/snapshots/release-announcement/releaseAnnouncement.spec.ts/release-announcement-We’ve-refreshed-your-sounds-linux.png
index 0f4c80ac9e..8f65d3659b 100644
Binary files a/playwright/snapshots/release-announcement/releaseAnnouncement.spec.ts/release-announcement-We’ve-refreshed-your-sounds-linux.png and b/playwright/snapshots/release-announcement/releaseAnnouncement.spec.ts/release-announcement-We’ve-refreshed-your-sounds-linux.png differ
diff --git a/playwright/snapshots/right-panel/file-panel.spec.ts/file-tiles-list-linux.png b/playwright/snapshots/right-panel/file-panel.spec.ts/file-tiles-list-linux.png
index 6c95b0d774..34a415dc21 100644
Binary files a/playwright/snapshots/right-panel/file-panel.spec.ts/file-tiles-list-linux.png and b/playwright/snapshots/right-panel/file-panel.spec.ts/file-tiles-list-linux.png differ
diff --git a/playwright/snapshots/settings/general-room-settings-tab.spec.ts/General-room-settings-tab-should-be-rendered-properly-1-linux.png b/playwright/snapshots/settings/general-room-settings-tab.spec.ts/General-room-settings-tab-should-be-rendered-properly-1-linux.png
index c326c3f8e4..cc0a85a9fe 100644
Binary files a/playwright/snapshots/settings/general-room-settings-tab.spec.ts/General-room-settings-tab-should-be-rendered-properly-1-linux.png and b/playwright/snapshots/settings/general-room-settings-tab.spec.ts/General-room-settings-tab-should-be-rendered-properly-1-linux.png differ
diff --git a/playwright/snapshots/settings/room-settings/room-security-tab.spec.ts/room-security-settings-linux.png b/playwright/snapshots/settings/room-settings/room-security-tab.spec.ts/room-security-settings-linux.png
index 7d03f4b6ef..9d9a192bc8 100644
Binary files a/playwright/snapshots/settings/room-settings/room-security-tab.spec.ts/room-security-settings-linux.png and b/playwright/snapshots/settings/room-settings/room-security-tab.spec.ts/room-security-settings-linux.png differ
diff --git a/playwright/snapshots/settings/room-settings/room-security-tab.spec.ts/room-security-settings-world-readable-linux.png b/playwright/snapshots/settings/room-settings/room-security-tab.spec.ts/room-security-settings-world-readable-linux.png
index ff18bcf702..4b8ab687e1 100644
Binary files a/playwright/snapshots/settings/room-settings/room-security-tab.spec.ts/room-security-settings-world-readable-linux.png and b/playwright/snapshots/settings/room-settings/room-security-tab.spec.ts/room-security-settings-world-readable-linux.png differ
diff --git a/playwright/snapshots/settings/room-settings/room-video-tab.spec.ts/room-video-settings-linux.png b/playwright/snapshots/settings/room-settings/room-video-tab.spec.ts/room-video-settings-linux.png
index 81807e1a0d..83fd549c0d 100644
Binary files a/playwright/snapshots/settings/room-settings/room-video-tab.spec.ts/room-video-settings-linux.png and b/playwright/snapshots/settings/room-settings/room-video-tab.spec.ts/room-video-settings-linux.png differ
diff --git a/playwright/snapshots/threads/threads.spec.ts/Initial-ThreadView-on-bubble-layout-linux.png b/playwright/snapshots/threads/threads.spec.ts/Initial-ThreadView-on-bubble-layout-linux.png
index 3d727db365..3e6449028f 100644
Binary files a/playwright/snapshots/threads/threads.spec.ts/Initial-ThreadView-on-bubble-layout-linux.png and b/playwright/snapshots/threads/threads.spec.ts/Initial-ThreadView-on-bubble-layout-linux.png differ
diff --git a/playwright/snapshots/threads/threads.spec.ts/Initial-ThreadView-on-group-layout-linux.png b/playwright/snapshots/threads/threads.spec.ts/Initial-ThreadView-on-group-layout-linux.png
index 246d67de9a..42cfab917a 100644
Binary files a/playwright/snapshots/threads/threads.spec.ts/Initial-ThreadView-on-group-layout-linux.png and b/playwright/snapshots/threads/threads.spec.ts/Initial-ThreadView-on-group-layout-linux.png differ
diff --git 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
index 92e8bb2d9d..e8fc6c378b 100644
Binary files a/playwright/snapshots/threads/threads.spec.ts/Reply-to-the-location-on-ThreadView-linux.png and b/playwright/snapshots/threads/threads.spec.ts/Reply-to-the-location-on-ThreadView-linux.png differ
diff --git a/playwright/snapshots/threads/threads.spec.ts/ThreadView-with-reaction-and-a-hidden-event-on-bubble-layout-linux.png b/playwright/snapshots/threads/threads.spec.ts/ThreadView-with-reaction-and-a-hidden-event-on-bubble-layout-linux.png
index 92a2f51296..48f4301950 100644
Binary files a/playwright/snapshots/threads/threads.spec.ts/ThreadView-with-reaction-and-a-hidden-event-on-bubble-layout-linux.png and b/playwright/snapshots/threads/threads.spec.ts/ThreadView-with-reaction-and-a-hidden-event-on-bubble-layout-linux.png differ
diff --git a/playwright/snapshots/threads/threads.spec.ts/ThreadView-with-reaction-and-a-hidden-event-on-group-layout-linux.png b/playwright/snapshots/threads/threads.spec.ts/ThreadView-with-reaction-and-a-hidden-event-on-group-layout-linux.png
index ee90846a5b..9eddaf7cb3 100644
Binary files a/playwright/snapshots/threads/threads.spec.ts/ThreadView-with-reaction-and-a-hidden-event-on-group-layout-linux.png and b/playwright/snapshots/threads/threads.spec.ts/ThreadView-with-reaction-and-a-hidden-event-on-group-layout-linux.png differ
diff --git a/playwright/snapshots/threads/threads.spec.ts/ThreadView-with-redacted-messages-on-bubble-layout-linux.png b/playwright/snapshots/threads/threads.spec.ts/ThreadView-with-redacted-messages-on-bubble-layout-linux.png
index 1ec709e872..2aca2ed614 100644
Binary files a/playwright/snapshots/threads/threads.spec.ts/ThreadView-with-redacted-messages-on-bubble-layout-linux.png and b/playwright/snapshots/threads/threads.spec.ts/ThreadView-with-redacted-messages-on-bubble-layout-linux.png differ
diff --git a/playwright/snapshots/threads/threads.spec.ts/ThreadView-with-redacted-messages-on-group-layout-linux.png b/playwright/snapshots/threads/threads.spec.ts/ThreadView-with-redacted-messages-on-group-layout-linux.png
index 07c1f19b63..d1e1a23b01 100644
Binary files a/playwright/snapshots/threads/threads.spec.ts/ThreadView-with-redacted-messages-on-group-layout-linux.png and b/playwright/snapshots/threads/threads.spec.ts/ThreadView-with-redacted-messages-on-group-layout-linux.png differ
diff --git a/playwright/snapshots/timeline/timeline.spec.ts/collapsed-gels-and-messages-irc-layout-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/collapsed-gels-and-messages-irc-layout-linux.png
index 226d0a4bbd..78499de3d0 100644
Binary files a/playwright/snapshots/timeline/timeline.spec.ts/collapsed-gels-and-messages-irc-layout-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/collapsed-gels-and-messages-irc-layout-linux.png differ
diff --git a/playwright/snapshots/timeline/timeline.spec.ts/collapsed-gels-bubble-layout-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/collapsed-gels-bubble-layout-linux.png
index 7540e34ebd..c66b893a78 100644
Binary files a/playwright/snapshots/timeline/timeline.spec.ts/collapsed-gels-bubble-layout-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/collapsed-gels-bubble-layout-linux.png differ
diff --git a/playwright/snapshots/timeline/timeline.spec.ts/configured-room-irc-layout-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/configured-room-irc-layout-linux.png
index 601985cafd..9a14e597a5 100644
Binary files a/playwright/snapshots/timeline/timeline.spec.ts/configured-room-irc-layout-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/configured-room-irc-layout-linux.png differ
diff --git 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
index 3ca41861b2..66dd771367 100644
Binary files a/playwright/snapshots/timeline/timeline.spec.ts/event-line-inline-start-margin-irc-layout-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/event-line-inline-start-margin-irc-layout-linux.png differ
diff --git a/playwright/snapshots/timeline/timeline.spec.ts/event-tiles-bubble-layout-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/event-tiles-bubble-layout-linux.png
index 0234856cb3..c16a1292cb 100644
Binary files a/playwright/snapshots/timeline/timeline.spec.ts/event-tiles-bubble-layout-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/event-tiles-bubble-layout-linux.png differ
diff --git a/playwright/snapshots/timeline/timeline.spec.ts/event-tiles-compact-modern-layout-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/event-tiles-compact-modern-layout-linux.png
index 831a045a25..94db3efe0b 100644
Binary files a/playwright/snapshots/timeline/timeline.spec.ts/event-tiles-compact-modern-layout-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/event-tiles-compact-modern-layout-linux.png differ
diff --git a/playwright/snapshots/timeline/timeline.spec.ts/event-tiles-irc-layout-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/event-tiles-irc-layout-linux.png
index 7da36fecc2..5080d3708d 100644
Binary files a/playwright/snapshots/timeline/timeline.spec.ts/event-tiles-irc-layout-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/event-tiles-irc-layout-linux.png differ
diff --git a/playwright/snapshots/timeline/timeline.spec.ts/event-tiles-modern-layout-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/event-tiles-modern-layout-linux.png
index c1b7ed9f12..2aada80e2e 100644
Binary files a/playwright/snapshots/timeline/timeline.spec.ts/event-tiles-modern-layout-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/event-tiles-modern-layout-linux.png differ
diff --git 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
index faa22eb94a..971fe45982 100644
Binary files a/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-and-messages-irc-layout-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-and-messages-irc-layout-linux.png differ
diff --git 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
index 05f189c924..3308816188 100644
Binary files a/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-bubble-layout-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-bubble-layout-linux.png differ
diff --git 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
index 2f828535bf..56e46968db 100644
Binary files a/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-emote-irc-layout-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-emote-irc-layout-linux.png differ
diff --git 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
index 3ca41861b2..66dd771367 100644
Binary files a/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-irc-layout-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-irc-layout-linux.png differ
diff --git 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
index 79f9eb810e..9e30806635 100644
Binary files a/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-modern-layout-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-modern-layout-linux.png differ
diff --git 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
index 228381ebee..38d314efc3 100644
Binary files a/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-redaction-placeholder-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-redaction-placeholder-linux.png differ
diff --git a/playwright/snapshots/timeline/timeline.spec.ts/hidden-event-line-padding-modern-layout-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/hidden-event-line-padding-modern-layout-linux.png
index 3528a86c9f..66112251e8 100644
Binary files a/playwright/snapshots/timeline/timeline.spec.ts/hidden-event-line-padding-modern-layout-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/hidden-event-line-padding-modern-layout-linux.png differ
diff --git a/playwright/snapshots/timeline/timeline.spec.ts/hidden-event-line-zero-padding-irc-layout-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/hidden-event-line-zero-padding-irc-layout-linux.png
index ce0a7c5b64..34504c0d14 100644
Binary files a/playwright/snapshots/timeline/timeline.spec.ts/hidden-event-line-zero-padding-irc-layout-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/hidden-event-line-zero-padding-irc-layout-linux.png differ
diff --git a/playwright/snapshots/timeline/timeline.spec.ts/spoiler-uncovered-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/spoiler-uncovered-linux.png
index 842476a93b..4847414c49 100644
Binary files a/playwright/snapshots/timeline/timeline.spec.ts/spoiler-uncovered-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/spoiler-uncovered-linux.png differ
diff --git a/res/css/structures/_SpacePanel.pcss b/res/css/structures/_SpacePanel.pcss
index 1aea3ae23b..d64a40bf28 100644
--- a/res/css/structures/_SpacePanel.pcss
+++ b/res/css/structures/_SpacePanel.pcss
@@ -457,7 +457,7 @@ Please see LICENSE files in the repository root for full details.
}
.mx_SpacePanel_iconPreferences::before {
- mask-image: url("$(res)/img/element-icons/settings/preference.svg");
+ mask-image: url("@vector-im/compound-design-tokens/icons/preferences.svg");
}
.mx_SpacePanel_noIcon {
diff --git a/res/css/structures/_UploadBar.pcss b/res/css/structures/_UploadBar.pcss
index 8bc341c057..689713954f 100644
--- a/res/css/structures/_UploadBar.pcss
+++ b/res/css/structures/_UploadBar.pcss
@@ -40,7 +40,7 @@ Please see LICENSE files in the repository root for full details.
mask-repeat: no-repeat;
mask-position: center;
background-color: $muted-fg-color;
- mask-image: url("$(res)/img/element-icons/upload.svg");
+ mask-image: url("@vector-im/compound-design-tokens/icons/share.svg");
}
}
diff --git a/res/css/views/context_menus/_IconizedContextMenu.pcss b/res/css/views/context_menus/_IconizedContextMenu.pcss
index 853d97c935..b49f3658d2 100644
--- a/res/css/views/context_menus/_IconizedContextMenu.pcss
+++ b/res/css/views/context_menus/_IconizedContextMenu.pcss
@@ -156,7 +156,7 @@ Please see LICENSE files in the repository root for full details.
}
.mx_IconizedContextMenu_developerTools::before {
- mask-image: url("$(res)/img/element-icons/settings/flask.svg");
+ mask-image: url("@vector-im/compound-design-tokens/icons/labs.svg");
}
.mx_IconizedContextMenu_checked::before {
diff --git a/res/css/views/context_menus/_MessageContextMenu.pcss b/res/css/views/context_menus/_MessageContextMenu.pcss
index 9fc454f328..c8eaf72e4b 100644
--- a/res/css/views/context_menus/_MessageContextMenu.pcss
+++ b/res/css/views/context_menus/_MessageContextMenu.pcss
@@ -41,7 +41,7 @@ Please see LICENSE files in the repository root for full details.
}
.mx_MessageContextMenu_iconUnhidePreview::before {
- mask-image: url("$(res)/img/element-icons/settings/appearance.svg");
+ mask-image: url("@vector-im/compound-design-tokens/icons/visibility-on.svg");
}
.mx_MessageContextMenu_iconOpenInMapSite::before {
@@ -88,7 +88,7 @@ Please see LICENSE files in the repository root for full details.
}
.mx_MessageContextMenu_iconEdit::before {
- mask-image: url("$(res)/img/element-icons/room/message-bar/edit.svg");
+ mask-image: url("@vector-im/compound-design-tokens/icons/edit.svg");
}
.mx_MessageContextMenu_iconReply::before {
@@ -100,7 +100,7 @@ Please see LICENSE files in the repository root for full details.
}
.mx_MessageContextMenu_iconReact::before {
- mask-image: url("$(res)/img/element-icons/room/message-bar/emoji.svg");
+ mask-image: url("@vector-im/compound-design-tokens/icons/reaction-add.svg");
}
.mx_MessageContextMenu_iconViewInRoom::before {
diff --git a/res/css/views/dialogs/_RoomSettingsDialog.pcss b/res/css/views/dialogs/_RoomSettingsDialog.pcss
index 7a37462955..ece76a126d 100644
--- a/res/css/views/dialogs/_RoomSettingsDialog.pcss
+++ b/res/css/views/dialogs/_RoomSettingsDialog.pcss
@@ -34,7 +34,7 @@ Please see LICENSE files in the repository root for full details.
}
.mx_RoomSettingsDialog_pollsIcon::before {
- mask-image: url("$(res)/img/element-icons/room/composer/poll.svg");
+ mask-image: url("@vector-im/compound-design-tokens/icons/polls.svg");
}
.mx_RoomSettingsDialog_warningIcon::before {
diff --git a/res/css/views/dialogs/_SpacePreferencesDialog.pcss b/res/css/views/dialogs/_SpacePreferencesDialog.pcss
index 709c926760..9c4f1aa8b4 100644
--- a/res/css/views/dialogs/_SpacePreferencesDialog.pcss
+++ b/res/css/views/dialogs/_SpacePreferencesDialog.pcss
@@ -28,5 +28,5 @@ Please see LICENSE files in the repository root for full details.
}
.mx_SpacePreferencesDialog_appearanceIcon::before {
- mask-image: url("$(res)/img/element-icons/settings/appearance.svg");
+ mask-image: url("@vector-im/compound-design-tokens/icons/visibility-on.svg");
}
diff --git a/res/css/views/messages/_MFileBody.pcss b/res/css/views/messages/_MFileBody.pcss
index c8361f1d29..51ba681140 100644
--- a/res/css/views/messages/_MFileBody.pcss
+++ b/res/css/views/messages/_MFileBody.pcss
@@ -45,10 +45,10 @@ Please see LICENSE files in the repository root for full details.
mask-repeat: no-repeat;
mask-position: center;
mask-size: cover;
- mask-image: url("$(res)/img/element-icons/room/composer/attach.svg");
+ mask-image: url("@vector-im/compound-design-tokens/icons/attachment.svg");
background-color: $secondary-content;
- width: 15px;
- height: 15px;
+ width: 16px;
+ height: 16px;
position: absolute;
top: 8px;
diff --git a/res/css/views/messages/_MPollBody.pcss b/res/css/views/messages/_MPollBody.pcss
index 09160c083a..1a7b8731fa 100644
--- a/res/css/views/messages/_MPollBody.pcss
+++ b/res/css/views/messages/_MPollBody.pcss
@@ -41,7 +41,7 @@ Please see LICENSE files in the repository root for full details.
mask-repeat: no-repeat;
mask-size: contain;
mask-position: center;
- mask-image: url("$(res)/img/element-icons/room/composer/poll.svg");
+ mask-image: url("@vector-im/compound-design-tokens/icons/polls.svg");
}
.mx_MPollBody_totalVotes {
diff --git a/res/css/views/messages/_ReactionsRow.pcss b/res/css/views/messages/_ReactionsRow.pcss
index e787e50517..833dee9a35 100644
--- a/res/css/views/messages/_ReactionsRow.pcss
+++ b/res/css/views/messages/_ReactionsRow.pcss
@@ -27,7 +27,7 @@ Please see LICENSE files in the repository root for full details.
mask-repeat: no-repeat;
mask-position: center;
background-color: $tertiary-content;
- mask-image: url("$(res)/img/element-icons/room/message-bar/emoji.svg");
+ mask-image: url("@vector-im/compound-design-tokens/icons/reaction-add.svg");
}
&.mx_ReactionsRow_addReactionButton_active {
diff --git a/res/css/views/rooms/_EmojiButton.pcss b/res/css/views/rooms/_EmojiButton.pcss
index 1628104646..3793d535e8 100644
--- a/res/css/views/rooms/_EmojiButton.pcss
+++ b/res/css/views/rooms/_EmojiButton.pcss
@@ -15,7 +15,7 @@ Please see LICENSE files in the repository root for full details.
}
.mx_EmojiButton_icon::before {
- mask-image: url("$(res)/img/element-icons/room/composer/emoji.svg");
+ mask-image: url("@vector-im/compound-design-tokens/icons/reaction.svg");
}
.mx_MessageComposer_wysiwyg {
diff --git a/res/css/views/rooms/_MessageComposer.pcss b/res/css/views/rooms/_MessageComposer.pcss
index 8b92b682ec..0b11025b1e 100644
--- a/res/css/views/rooms/_MessageComposer.pcss
+++ b/res/css/views/rooms/_MessageComposer.pcss
@@ -245,11 +245,11 @@ Please see LICENSE files in the repository root for full details.
}
.mx_MessageComposer_upload::before {
- mask-image: url("$(res)/img/element-icons/room/composer/attach.svg");
+ mask-image: url("@vector-im/compound-design-tokens/icons/attachment.svg");
}
.mx_MessageComposer_poll::before {
- mask-image: url("$(res)/img/element-icons/room/composer/poll.svg");
+ mask-image: url("@vector-im/compound-design-tokens/icons/polls.svg");
}
.mx_MessageComposer_voiceMessage::before {
@@ -257,7 +257,7 @@ Please see LICENSE files in the repository root for full details.
}
.mx_MessageComposer_plain_text::before {
- mask-image: url("$(res)/img/element-icons/room/composer/plain_text.svg");
+ mask-image: url("@vector-im/compound-design-tokens/icons/text-formatting.svg");
}
.mx_MessageComposer_rich_text::before {
@@ -274,7 +274,6 @@ Please see LICENSE files in the repository root for full details.
.mx_MessageComposer_buttonMenu::before {
mask-image: url("@vector-im/compound-design-tokens/icons/overflow-horizontal.svg");
- mask-size: 24px;
}
.mx_MessageComposer_sendMessage {
diff --git a/res/img/element-icons/room/composer/attach.svg b/res/img/element-icons/room/composer/attach.svg
deleted file mode 100644
index 0cac44d29f..0000000000
--- a/res/img/element-icons/room/composer/attach.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
diff --git a/res/img/element-icons/room/composer/emoji.svg b/res/img/element-icons/room/composer/emoji.svg
deleted file mode 100644
index b02cb69364..0000000000
--- a/res/img/element-icons/room/composer/emoji.svg
+++ /dev/null
@@ -1,7 +0,0 @@
-
diff --git a/res/img/element-icons/room/composer/plain_text.svg b/res/img/element-icons/room/composer/plain_text.svg
deleted file mode 100644
index 053d41649a..0000000000
--- a/res/img/element-icons/room/composer/plain_text.svg
+++ /dev/null
@@ -1,17 +0,0 @@
-
-
diff --git a/res/img/element-icons/room/composer/poll.svg b/res/img/element-icons/room/composer/poll.svg
deleted file mode 100644
index 75e74fd60a..0000000000
--- a/res/img/element-icons/room/composer/poll.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-
diff --git a/res/img/element-icons/room/message-bar/edit.svg b/res/img/element-icons/room/message-bar/edit.svg
deleted file mode 100644
index 3d823b165e..0000000000
--- a/res/img/element-icons/room/message-bar/edit.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-
diff --git a/res/img/element-icons/room/message-bar/emoji.svg b/res/img/element-icons/room/message-bar/emoji.svg
deleted file mode 100644
index d34a88ed50..0000000000
--- a/res/img/element-icons/room/message-bar/emoji.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
diff --git a/res/img/element-icons/room/message-bar/star.svg b/res/img/element-icons/room/message-bar/star.svg
deleted file mode 100644
index 73898d9a45..0000000000
--- a/res/img/element-icons/room/message-bar/star.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/res/img/element-icons/settings/appearance.svg b/res/img/element-icons/settings/appearance.svg
deleted file mode 100644
index 6f91759354..0000000000
--- a/res/img/element-icons/settings/appearance.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
diff --git a/res/img/element-icons/settings/flask.svg b/res/img/element-icons/settings/flask.svg
deleted file mode 100644
index 7b8f2fda62..0000000000
--- a/res/img/element-icons/settings/flask.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
diff --git a/res/img/element-icons/settings/preference.svg b/res/img/element-icons/settings/preference.svg
deleted file mode 100644
index d466662117..0000000000
--- a/res/img/element-icons/settings/preference.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
diff --git a/res/img/element-icons/upload.svg b/res/img/element-icons/upload.svg
deleted file mode 100644
index 71ad7ba1cf..0000000000
--- a/res/img/element-icons/upload.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-
diff --git a/src/components/views/messages/MPollEndBody.tsx b/src/components/views/messages/MPollEndBody.tsx
index 95f8a53f2a..622071be08 100644
--- a/src/components/views/messages/MPollEndBody.tsx
+++ b/src/components/views/messages/MPollEndBody.tsx
@@ -9,8 +9,8 @@ Please see LICENSE files in the repository root for full details.
import React, { useEffect, useState, useContext, type JSX } from "react";
import { MatrixEvent, M_TEXT } from "matrix-js-sdk/src/matrix";
import { logger } from "matrix-js-sdk/src/logger";
+import { PollsEndIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
-import { Icon as PollIcon } from "../../../../res/img/element-icons/room/composer/poll.svg";
import MatrixClientContext, { useMatrixClientContext } from "../../../contexts/MatrixClientContext";
import { _t } from "../../../languageHandler";
import { textForEvent } from "../../../TextForEvent";
@@ -93,7 +93,7 @@ export const MPollEndBody = ({ mxEvent, ref, ...props }: IBodyProps): JSX.Elemen
const pollEndFallbackMessage = M_TEXT.findIn(mxEvent.getContent()) || textForEvent(mxEvent, cli);
return (
<>
-
+
{!isLoadingPollStartEvent && pollEndFallbackMessage}
);
diff --git a/src/components/views/messages/MessageActionBar.tsx b/src/components/views/messages/MessageActionBar.tsx
index 528e7f1abf..22f29e963f 100644
--- a/src/components/views/messages/MessageActionBar.tsx
+++ b/src/components/views/messages/MessageActionBar.tsx
@@ -30,10 +30,10 @@ import {
DeleteIcon,
RestartIcon,
ThreadsIcon,
+ EditIcon,
+ ReactionAddIcon,
} 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 ExpandMessageIcon } from "../../../../res/img/element-icons/expand-message.svg";
import { Icon as CollapseMessageIcon } from "../../../../res/img/element-icons/collapse-message.svg";
import { _t } from "../../../languageHandler";
@@ -190,7 +190,7 @@ const ReactButton: React.FC = ({ mxEvent, reactions, onFocusC
tabIndex={isActive ? 0 : -1}
placement="left"
>
-
+
{contextMenu}
diff --git a/src/components/views/polls/pollHistory/PollListItem.tsx b/src/components/views/polls/pollHistory/PollListItem.tsx
index 1824bb38da..d0706c176a 100644
--- a/src/components/views/polls/pollHistory/PollListItem.tsx
+++ b/src/components/views/polls/pollHistory/PollListItem.tsx
@@ -10,8 +10,8 @@ import React from "react";
import { type PollStartEvent } from "matrix-js-sdk/src/extensible_events_v1/PollStartEvent";
import { type MatrixEvent } from "matrix-js-sdk/src/matrix";
import { Tooltip } from "@vector-im/compound-web";
+import { PollsIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
-import { Icon as PollIcon } from "../../../../../res/img/element-icons/room/composer/poll.svg";
import { formatLocalDateShort } from "../../../../DateUtils";
import { _t } from "../../../../languageHandler";
@@ -31,7 +31,7 @@ export const PollListItem: React.FC = ({ event, onClick }) => {
{formattedDate}
-
+ {pollEvent.question.text}
diff --git a/src/components/views/polls/pollHistory/PollListItemEnded.tsx b/src/components/views/polls/pollHistory/PollListItemEnded.tsx
index 8e2ed22127..4c5805562a 100644
--- a/src/components/views/polls/pollHistory/PollListItemEnded.tsx
+++ b/src/components/views/polls/pollHistory/PollListItemEnded.tsx
@@ -10,8 +10,8 @@ import React, { useEffect, useState } from "react";
import { type PollAnswerSubevent } from "matrix-js-sdk/src/extensible_events_v1/PollStartEvent";
import { type MatrixEvent, type Poll, PollEvent, type Relations } from "matrix-js-sdk/src/matrix";
import { Tooltip } from "@vector-im/compound-web";
+import { PollsEndIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
-import { Icon as PollIcon } from "../../../../../res/img/element-icons/room/composer/poll.svg";
import { _t } from "../../../../languageHandler";
import { formatLocalDateShort } from "../../../../DateUtils";
import { allVotes, collectUserVotes, countVotes } from "../../messages/MPollBody";
@@ -94,7 +94,7 @@ export const PollListItemEnded: React.FC = ({ event, poll, onClick }) =>
-
+ {pollEvent.question.text}
{formattedDate}
diff --git a/test/unit-tests/components/views/messages/__snapshots__/MPollEndBody-test.tsx.snap b/test/unit-tests/components/views/messages/__snapshots__/MPollEndBody-test.tsx.snap
index 6872894a65..e7d46f00b2 100644
--- a/test/unit-tests/components/views/messages/__snapshots__/MPollEndBody-test.tsx.snap
+++ b/test/unit-tests/components/views/messages/__snapshots__/MPollEndBody-test.tsx.snap
@@ -2,9 +2,21 @@
exports[` when poll start event does not exist in current timeline fetches the related poll start event and displays a poll tile 1`] = `