.default})
diff --git a/src/components/views/rooms/EventTile/EventTileThreadToolbar.tsx b/src/components/views/rooms/EventTile/EventTileThreadToolbar.tsx
index bc41f20b22..d31a8258f7 100644
--- a/src/components/views/rooms/EventTile/EventTileThreadToolbar.tsx
+++ b/src/components/views/rooms/EventTile/EventTileThreadToolbar.tsx
@@ -15,11 +15,11 @@ limitations under the License.
*/
import React from "react";
+import { Icon as LinkIcon } from "@vector-im/compound-design-tokens/icons/link.svg";
import { RovingAccessibleButton } from "../../../../accessibility/RovingTabIndex";
import Toolbar from "../../../../accessibility/Toolbar";
import { _t } from "../../../../languageHandler";
-import { Icon as LinkIcon } from "../../../../../res/img/element-icons/link.svg";
import { Icon as ViewInRoomIcon } from "../../../../../res/img/element-icons/view-in-room.svg";
import { ButtonEvent } from "../../elements/AccessibleButton";
diff --git a/src/components/views/rooms/LinkPreviewGroup.tsx b/src/components/views/rooms/LinkPreviewGroup.tsx
index c940e9fce7..c575f04df5 100644
--- a/src/components/views/rooms/LinkPreviewGroup.tsx
+++ b/src/components/views/rooms/LinkPreviewGroup.tsx
@@ -78,7 +78,7 @@ const LinkPreviewGroup: React.FC
= ({ links, mxEvent, onCancelClick, onH
className="mx_filterFlipColor"
alt=""
role="presentation"
- src={require("../../../../res/img/cancel.svg").default}
+ src={require("@vector-im/compound-design-tokens/icons/close.svg").default}
width="18"
height="18"
draggable="false"
diff --git a/src/components/views/rooms/MemberList.tsx b/src/components/views/rooms/MemberList.tsx
index dea4dd58d3..796c84a05f 100644
--- a/src/components/views/rooms/MemberList.tsx
+++ b/src/components/views/rooms/MemberList.tsx
@@ -247,7 +247,11 @@ export default class MemberList extends React.Component {
+
}
name={text}
showPresence={false}
diff --git a/src/components/views/rooms/RoomKnocksBar.tsx b/src/components/views/rooms/RoomKnocksBar.tsx
index 9feb23a147..db7f52bf1d 100644
--- a/src/components/views/rooms/RoomKnocksBar.tsx
+++ b/src/components/views/rooms/RoomKnocksBar.tsx
@@ -17,9 +17,9 @@ limitations under the License.
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 { Icon as CheckIcon } from "@vector-im/compound-design-tokens/icons/check.svg";
+import { Icon as XIcon } from "@vector-im/compound-design-tokens/icons/close.svg";
-import { Icon as CheckIcon } from "../../../../res/img/feather-customised/check.svg";
-import { Icon as XIcon } from "../../../../res/img/feather-customised/x.svg";
import dis from "../../../dispatcher/dispatcher";
import { useTypedEventEmitterState } from "../../../hooks/useEventEmitter";
import { _t } from "../../../languageHandler";
diff --git a/src/components/views/rooms/RoomTileSubtitle.tsx b/src/components/views/rooms/RoomTileSubtitle.tsx
index f3f8604aca..55b3fd48c1 100644
--- a/src/components/views/rooms/RoomTileSubtitle.tsx
+++ b/src/components/views/rooms/RoomTileSubtitle.tsx
@@ -16,12 +16,12 @@ limitations under the License.
import React from "react";
import classNames from "classnames";
+import { Icon as ThreadIcon } from "@vector-im/compound-design-tokens/icons/threads-solid.svg";
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;
diff --git a/src/components/views/rooms/wysiwyg_composer/components/FormattingButtons.tsx b/src/components/views/rooms/wysiwyg_composer/components/FormattingButtons.tsx
index 0b09654b7f..ad1edb9733 100644
--- a/src/components/views/rooms/wysiwyg_composer/components/FormattingButtons.tsx
+++ b/src/components/views/rooms/wysiwyg_composer/components/FormattingButtons.tsx
@@ -17,19 +17,19 @@ limitations under the License.
import React, { MouseEventHandler, ReactNode } from "react";
import { FormattingFunctions, AllActionStates, ActionState } from "@matrix-org/matrix-wysiwyg";
import classNames from "classnames";
+import { Icon as BoldIcon } from "@vector-im/compound-design-tokens/icons/bold.svg";
+import { Icon as BulletedListIcon } from "@vector-im/compound-design-tokens/icons/list-bulleted.svg";
+import { Icon as CodeBlockIcon } from "@vector-im/compound-design-tokens/icons/code.svg";
+import { Icon as UnIndentIcon } from "@vector-im/compound-design-tokens/icons/indent-decrease.svg";
+import { Icon as IndentIcon } from "@vector-im/compound-design-tokens/icons/indent-increase.svg";
+import { Icon as InlineCodeIcon } from "@vector-im/compound-design-tokens/icons/inline-code.svg";
+import { Icon as ItalicIcon } from "@vector-im/compound-design-tokens/icons/italic.svg";
+import { Icon as NumberedListIcon } from "@vector-im/compound-design-tokens/icons/list-numbered.svg";
+import { Icon as QuoteIcon } from "@vector-im/compound-design-tokens/icons/quote.svg";
+import { Icon as StrikeThroughIcon } from "@vector-im/compound-design-tokens/icons/strikethrough.svg";
+import { Icon as UnderlineIcon } from "@vector-im/compound-design-tokens/icons/underline.svg";
-import { Icon as BoldIcon } from "../../../../../../res/img/element-icons/room/composer/bold.svg";
-import { Icon as ItalicIcon } from "../../../../../../res/img/element-icons/room/composer/italic.svg";
-import { Icon as UnderlineIcon } from "../../../../../../res/img/element-icons/room/composer/underline.svg";
-import { Icon as StrikeThroughIcon } from "../../../../../../res/img/element-icons/room/composer/strikethrough.svg";
-import { Icon as QuoteIcon } from "../../../../../../res/img/element-icons/room/composer/quote.svg";
-import { Icon as InlineCodeIcon } from "../../../../../../res/img/element-icons/room/composer/inline_code.svg";
import { Icon as LinkIcon } from "../../../../../../res/img/element-icons/room/composer/link.svg";
-import { Icon as BulletedListIcon } from "../../../../../../res/img/element-icons/room/composer/bulleted_list.svg";
-import { Icon as NumberedListIcon } from "../../../../../../res/img/element-icons/room/composer/numbered_list.svg";
-import { Icon as CodeBlockIcon } from "../../../../../../res/img/element-icons/room/composer/code_block.svg";
-import { Icon as IndentIcon } from "../../../../../../res/img/element-icons/room/composer/indent_increase.svg";
-import { Icon as UnIndentIcon } from "../../../../../../res/img/element-icons/room/composer/indent_decrease.svg";
import { _t } from "../../../../../languageHandler";
import AccessibleButton, { ButtonEvent } from "../../../elements/AccessibleButton";
import { openLinkModal } from "./LinkModal";
diff --git a/src/components/views/settings/devices/DeviceExpandDetailsButton.tsx b/src/components/views/settings/devices/DeviceExpandDetailsButton.tsx
index 791b612591..ef52b1a520 100644
--- a/src/components/views/settings/devices/DeviceExpandDetailsButton.tsx
+++ b/src/components/views/settings/devices/DeviceExpandDetailsButton.tsx
@@ -17,7 +17,7 @@ limitations under the License.
import classNames from "classnames";
import React, { ComponentProps } from "react";
-import { Icon as CaretIcon } from "../../../../../res/img/feather-customised/dropdown-arrow.svg";
+import { Icon as CaretIcon } from "@vector-im/compound-design-tokens/icons/chevron-down.svg";
import { _t } from "../../../../languageHandler";
import AccessibleButton from "../../elements/AccessibleButton";
diff --git a/src/components/views/settings/tabs/room/PeopleRoomSettingsTab.tsx b/src/components/views/settings/tabs/room/PeopleRoomSettingsTab.tsx
index 22c2bc471f..f4ddf5a3e4 100644
--- a/src/components/views/settings/tabs/room/PeopleRoomSettingsTab.tsx
+++ b/src/components/views/settings/tabs/room/PeopleRoomSettingsTab.tsx
@@ -17,9 +17,9 @@ limitations under the License.
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 { Icon as CheckIcon } from "@vector-im/compound-design-tokens/icons/check.svg";
+import { Icon as XIcon } from "@vector-im/compound-design-tokens/icons/close.svg";
-import { Icon as CheckIcon } from "../../../../../../res/img/feather-customised/check.svg";
-import { Icon as XIcon } from "../../../../../../res/img/feather-customised/x.svg";
import { formatRelativeTime } from "../../../../../DateUtils";
import { useTypedEventEmitterState } from "../../../../../hooks/useEventEmitter";
import { _t } from "../../../../../languageHandler";
diff --git a/src/components/views/settings/tabs/user/SidebarUserSettingsTab.tsx b/src/components/views/settings/tabs/user/SidebarUserSettingsTab.tsx
index 6f966948f5..8806145eb6 100644
--- a/src/components/views/settings/tabs/user/SidebarUserSettingsTab.tsx
+++ b/src/components/views/settings/tabs/user/SidebarUserSettingsTab.tsx
@@ -16,10 +16,10 @@ limitations under the License.
import React, { ChangeEvent, useMemo } from "react";
import { Icon as CameraCircle } from "@vector-im/compound-design-tokens/icons/video-call-solid.svg";
+import { Icon as MembersIcon } from "@vector-im/compound-design-tokens/icons/user-profile-solid.svg";
+import { Icon as FavoriteIcon } from "@vector-im/compound-design-tokens/icons/favourite-solid.svg";
+import { Icon as HomeIcon } from "@vector-im/compound-design-tokens/icons/home-solid.svg";
-import { Icon as HomeIcon } from "../../../../../../res/img/element-icons/home.svg";
-import { Icon as FavoriteIcon } from "../../../../../../res/img/element-icons/roomlist/favorite.svg";
-import { Icon as MembersIcon } from "../../../../../../res/img/element-icons/room/members.svg";
import { Icon as HashCircleIcon } from "../../../../../../res/img/element-icons/roomlist/hash-circle.svg";
import { _t } from "../../../../../languageHandler";
import SettingsStore from "../../../../../settings/SettingsStore";
diff --git a/src/components/views/spaces/QuickSettingsButton.tsx b/src/components/views/spaces/QuickSettingsButton.tsx
index cf031e4ff1..f30101dcc2 100644
--- a/src/components/views/spaces/QuickSettingsButton.tsx
+++ b/src/components/views/spaces/QuickSettingsButton.tsx
@@ -16,6 +16,9 @@ limitations under the License.
import React from "react";
import classNames from "classnames";
+import { Icon as EllipsisIcon } from "@vector-im/compound-design-tokens/icons/overflow-horizontal.svg";
+import { Icon as MembersIcon } from "@vector-im/compound-design-tokens/icons/user-profile-solid.svg";
+import { Icon as FavoriteIcon } from "@vector-im/compound-design-tokens/icons/favourite-solid.svg";
import { _t } from "../../../languageHandler";
import ContextMenu, { alwaysAboveRightOf, ChevronFace, useContextMenu } from "../../structures/ContextMenu";
@@ -29,9 +32,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";
import DevtoolsDialog from "../dialogs/DevtoolsDialog";
import { SdkContextClass } from "../../../contexts/SDKContext";
diff --git a/src/voice-broadcast/components/atoms/VoiceBroadcastError.tsx b/src/voice-broadcast/components/atoms/VoiceBroadcastError.tsx
index 9c312ac9e5..29a5c5b1fa 100644
--- a/src/voice-broadcast/components/atoms/VoiceBroadcastError.tsx
+++ b/src/voice-broadcast/components/atoms/VoiceBroadcastError.tsx
@@ -15,8 +15,7 @@ limitations under the License.
*/
import React from "react";
-
-import { Icon as WarningIcon } from "../../../../res/img/compound/error-16px.svg";
+import { Icon as WarningIcon } from "@vector-im/compound-design-tokens/icons/error.svg";
interface Props {
message: string;
diff --git a/src/voice-broadcast/components/atoms/VoiceBroadcastHeader.tsx b/src/voice-broadcast/components/atoms/VoiceBroadcastHeader.tsx
index 34a2a81a20..81c4bf1498 100644
--- a/src/voice-broadcast/components/atoms/VoiceBroadcastHeader.tsx
+++ b/src/voice-broadcast/components/atoms/VoiceBroadcastHeader.tsx
@@ -14,12 +14,12 @@ limitations under the License.
import React from "react";
import { Room } from "matrix-js-sdk/src/matrix";
import classNames from "classnames";
+import { Icon as MicrophoneIcon } from "@vector-im/compound-design-tokens/icons/mic-on-solid.svg";
+import { Icon as XIcon } from "@vector-im/compound-design-tokens/icons/close.svg";
import { LiveBadge, VoiceBroadcastLiveness } from "../..";
import { Icon as LiveIcon } from "../../../../res/img/compound/live-16px.svg";
-import { Icon as MicrophoneIcon } from "../../../../res/img/compound/mic-16px.svg";
import { Icon as TimerIcon } from "../../../../res/img/compound/timer-16px.svg";
-import { Icon as XIcon } from "../../../../res/img/compound/close-16px.svg";
import { _t } from "../../../languageHandler";
import RoomAvatar from "../../../components/views/avatars/RoomAvatar";
import AccessibleButton, { ButtonEvent } from "../../../components/views/elements/AccessibleButton";
diff --git a/src/voice-broadcast/components/atoms/VoiceBroadcastPlaybackControl.tsx b/src/voice-broadcast/components/atoms/VoiceBroadcastPlaybackControl.tsx
index d9285d4afe..eb8342a158 100644
--- a/src/voice-broadcast/components/atoms/VoiceBroadcastPlaybackControl.tsx
+++ b/src/voice-broadcast/components/atoms/VoiceBroadcastPlaybackControl.tsx
@@ -15,9 +15,9 @@ limitations under the License.
*/
import React, { ReactElement } from "react";
+import { Icon as PauseIcon } from "@vector-im/compound-design-tokens/icons/pause-solid.svg";
+import { Icon as PlayIcon } from "@vector-im/compound-design-tokens/icons/play-solid.svg";
-import { Icon as PlayIcon } from "../../../../res/img/compound/play-16.svg";
-import { Icon as PauseIcon } from "../../../../res/img/compound/pause-12.svg";
import { _t } from "../../../languageHandler";
import { VoiceBroadcastControl, VoiceBroadcastPlaybackState } from "../..";
diff --git a/src/voice-broadcast/components/atoms/VoiceBroadcastRecordingConnectionError.tsx b/src/voice-broadcast/components/atoms/VoiceBroadcastRecordingConnectionError.tsx
index 9072fbe92c..f24b47180d 100644
--- a/src/voice-broadcast/components/atoms/VoiceBroadcastRecordingConnectionError.tsx
+++ b/src/voice-broadcast/components/atoms/VoiceBroadcastRecordingConnectionError.tsx
@@ -15,8 +15,8 @@ limitations under the License.
*/
import React from "react";
+import { Icon as WarningIcon } from "@vector-im/compound-design-tokens/icons/error.svg";
-import { Icon as WarningIcon } from "../../../../res/img/compound/error-16px.svg";
import { _t } from "../../../languageHandler";
export const VoiceBroadcastRecordingConnectionError: React.FC = () => {
diff --git a/src/voice-broadcast/components/molecules/VoiceBroadcastRecordingPip.tsx b/src/voice-broadcast/components/molecules/VoiceBroadcastRecordingPip.tsx
index 46ca3f9319..bfb2a798a9 100644
--- a/src/voice-broadcast/components/molecules/VoiceBroadcastRecordingPip.tsx
+++ b/src/voice-broadcast/components/molecules/VoiceBroadcastRecordingPip.tsx
@@ -15,6 +15,8 @@ limitations under the License.
*/
import React, { useRef, useState } from "react";
+import { Icon as PauseIcon } from "@vector-im/compound-design-tokens/icons/pause-solid.svg";
+import { Icon as MicrophoneIcon } from "@vector-im/compound-design-tokens/icons/mic-on-solid.svg";
import {
VoiceBroadcastControl,
@@ -26,9 +28,7 @@ import {
import { useVoiceBroadcastRecording } from "../../hooks/useVoiceBroadcastRecording";
import { VoiceBroadcastHeader } from "../atoms/VoiceBroadcastHeader";
import { Icon as StopIcon } from "../../../../res/img/compound/stop-16.svg";
-import { Icon as PauseIcon } from "../../../../res/img/compound/pause-12.svg";
import { Icon as RecordIcon } from "../../../../res/img/compound/record-10px.svg";
-import { Icon as MicrophoneIcon } from "../../../../res/img/compound/mic-16px.svg";
import { _t } from "../../../languageHandler";
import { useAudioDeviceSelection } from "../../../hooks/useAudioDeviceSelection";
import { DevicesContextMenu } from "../../../components/views/audio_messages/DevicesContextMenu";
diff --git a/src/voice-broadcast/components/molecules/VoiceBroadcastSmallPlaybackBody.tsx b/src/voice-broadcast/components/molecules/VoiceBroadcastSmallPlaybackBody.tsx
index 921e1eb17f..8a005e9f72 100644
--- a/src/voice-broadcast/components/molecules/VoiceBroadcastSmallPlaybackBody.tsx
+++ b/src/voice-broadcast/components/molecules/VoiceBroadcastSmallPlaybackBody.tsx
@@ -15,6 +15,7 @@ limitations under the License.
*/
import React from "react";
+import { Icon as XIcon } from "@vector-im/compound-design-tokens/icons/close.svg";
import {
VoiceBroadcastHeader,
@@ -24,7 +25,6 @@ import {
} from "../..";
import AccessibleButton from "../../../components/views/elements/AccessibleButton";
import { useVoiceBroadcastPlayback } from "../../hooks/useVoiceBroadcastPlayback";
-import { Icon as XIcon } from "../../../../res/img/compound/close-8px.svg";
interface VoiceBroadcastSmallPlaybackBodyProps {
playback: VoiceBroadcastPlayback;