diff --git a/knip.ts b/knip.ts
index dcc7231c19..0dcf8b8c18 100644
--- a/knip.ts
+++ b/knip.ts
@@ -30,8 +30,6 @@ export default {
     // We obviously use this, but if the package has been linked with pnpm link,
     // then Knip will flag it as a false positive
     // https://github.com/webpro-nl/knip/issues/766
-    "@vector-im/compound-web",
-    "matrix-widget-api",
     // Used by oxlint
     "eslint-plugin-element-call",
     "eslint-plugin-storybook",
diff --git a/package.json b/package.json
index bd4769d919..54bf085242 100644
--- a/package.json
+++ b/package.json
@@ -7,10 +7,10 @@
     "dev:full": "vite",
     "dev:embedded": "vite --config vite-embedded.config.js",
     "build": "pnpm build:full",
-    "build:full": "NODE_OPTIONS=--max-old-space-size=16384 vite build",
+    "build:full": "vite build",
     "build:full:production": "pnpm build:full",
     "build:full:development": "pnpm build:full --mode development",
-    "build:embedded": "pnpm build:full --config vite-embedded.config.js",
+    "build:embedded": "pnpm build:full --config vite-embedded.config.ts",
     "build:embedded:production": "pnpm build:embedded",
     "build:embedded:development": "pnpm build:embedded --mode development",
     "build:sdk:development": "pnpm build:sdk --mode development",
@@ -145,6 +145,7 @@
   },
   "packageManager": "pnpm@11.6.0+sha512.9a36518224080c6fe5165afdcfe79bfa118c29be703f3f462b1e32efe1e98e47e8750b148e08286250aad4113cc7993ca413c4e2cd447752708c2ee5751bc95f",
   "dependencies": {
-    "@jitsi/rnnoise-wasm": "0.2.1"
+    "@jitsi/rnnoise-wasm": "0.2.1",
+    "@phosphor-icons/react": "^2.1.10"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 02d8978f46..b5bd3cf689 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -23,6 +23,9 @@ importers:
       '@jitsi/rnnoise-wasm':
         specifier: 0.2.1
         version: 0.2.1
+      '@phosphor-icons/react':
+        specifier: ^2.1.10
+        version: 2.1.10(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
     devDependencies:
       '@codecov/vite-plugin':
         specifier: ^1.3.0
@@ -2046,6 +2049,13 @@ packages:
     resolution: {integrity: sha512-tmmZ3lQxAe/k/+rNnXQRawJ4NjxO2hqiOLTHvWchtGZULp4RyFeh6aU4XdOYBFe2KE1oShQTv4AblOs2iOrNnQ==}
     engines: {node: '>= 10.0.0'}
 
+  '@phosphor-icons/react@2.1.10':
+    resolution: {integrity: sha512-vt8Tvq8GLjheAZZYa+YG/pW7HDbov8El/MANW8pOAz4eGxrwhnbfrQZq0Cp4q8zBEu8NIhHdnr+r8thnfRSNYA==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      react: '>= 16.8'
+      react-dom: '>= 16.8'
+
   '@pkgjs/parseargs@0.11.0':
     resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
     engines: {node: '>=14'}
@@ -7946,6 +7956,11 @@ snapshots:
       '@parcel/watcher-win32-x64': 2.5.6
     optional: true
 
+  '@phosphor-icons/react@2.1.10(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
+    dependencies:
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
+
   '@pkgjs/parseargs@0.11.0':
     optional: true
 
diff --git a/src/AppBar.tsx b/src/AppBar.tsx
index 18314dd325..0d02bc6d12 100644
--- a/src/AppBar.tsx
+++ b/src/AppBar.tsx
@@ -18,11 +18,7 @@ import {
 } from "react";
 import classNames from "classnames";
 import { Heading, IconButton, Text, Tooltip } from "@vector-im/compound-web";
-import {
-  ArrowLeftIcon,
-  ChevronLeftIcon,
-  CollapseIcon,
-} from "@vector-im/compound-design-tokens/assets/web/icons";
+import { ArrowLeft, CaretLeft, CornersIn } from "@phosphor-icons/react";
 import { useTranslation } from "react-i18next";
 import { logger } from "matrix-js-sdk/lib/logger";
 
@@ -81,7 +77,7 @@ export const AppBar: FC<Props> = ({ children }) => {
     ],
   );
 
-  const BackIcon = platform === "android" ? ArrowLeftIcon : ChevronLeftIcon;
+  const BackIcon = platform === "android" ? ArrowLeft : CaretLeft;
 
   return (
     <>
@@ -100,7 +96,7 @@ export const AppBar: FC<Props> = ({ children }) => {
               {primaryButtonIcon === "back" ? (
                 <BackIcon aria-hidden />
               ) : (
-                <CollapseIcon aria-hidden />
+                <CornersIn aria-hidden />
               )}
             </IconButton>
           </Tooltip>
diff --git a/src/FullScreenView.tsx b/src/FullScreenView.tsx
index eb84010e52..8eb496536a 100644
--- a/src/FullScreenView.tsx
+++ b/src/FullScreenView.tsx
@@ -10,7 +10,7 @@ import classNames from "classnames";
 import { useTranslation } from "react-i18next";
 import * as Sentry from "@sentry/react";
 import { logger } from "matrix-js-sdk/lib/logger";
-import { ErrorSolidIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
+import { Warning } from "@phosphor-icons/react";
 
 import { Header, HeaderLogo, LeftNav, RightNav } from "./Header";
 import styles from "./FullScreenView.module.css";
@@ -67,7 +67,9 @@ export const ErrorPage = ({ error, widget }: ErrorPageProps): ReactElement => {
       ) : (
         <ErrorView
           widget={widget}
-          Icon={ErrorSolidIcon}
+          Icon={() => (
+            <Warning weight="fill" width={24} height={24} aria-hidden />
+          )}
           title={t("error.generic")}
           rageshake
           fatal
diff --git a/src/Header.tsx b/src/Header.tsx
index cffc340235..7d838cb62d 100644
--- a/src/Header.tsx
+++ b/src/Header.tsx
@@ -10,7 +10,7 @@ import { type Ref, type FC, type HTMLAttributes, type ReactNode } from "react";
 import { Link } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import { Heading, Text } from "@vector-im/compound-web";
-import { UserProfileIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
+import { User } from "@phosphor-icons/react";
 
 import styles from "./Header.module.css";
 import Logo from "./icons/Logo.svg?react";
@@ -166,7 +166,7 @@ export const RoomHeaderInfo: FC<RoomHeaderInfoProps> = ({
       </div>
       {(participantCount ?? 0) > 0 && (
         <div className={styles.participantsLine}>
-          <UserProfileIcon
+          <User
             width={20}
             height={20}
             aria-label={t("header_participants_label")}
diff --git a/src/Modal.module.css b/src/Modal.module.css
index ae8006a532..186bc04dcf 100644
--- a/src/Modal.module.css
+++ b/src/Modal.module.css
@@ -116,14 +116,14 @@ body[data-platform="ios"] .drawer {
 }
 
 .dialog .body {
-  padding-inline: var(--cpd-space-10x);
-  padding-block: var(--cpd-space-10x) var(--cpd-space-12x);
+  padding-inline: var(--cpd-space-6x);
+  padding-block: var(--cpd-space-6x) var(--cpd-space-6x);
   overflow: auto;
 }
 
 .drawer .body {
   padding-inline: var(--cpd-space-4x);
-  padding-block: var(--cpd-space-9x) var(--cpd-space-10x);
+  padding-block: var(--cpd-space-4x) var(--cpd-space-4x);
 }
 
 .modal.tabbed .body {
diff --git a/src/Modal.tsx b/src/Modal.tsx
index e6ffdf450b..eec4a36058 100644
--- a/src/Modal.tsx
+++ b/src/Modal.tsx
@@ -17,7 +17,7 @@ import {
 } from "@radix-ui/react-dialog";
 import { Drawer } from "vaul";
 import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
-import { CloseIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
+import { X } from "@phosphor-icons/react";
 import classNames from "classnames";
 import { Heading, Glass } from "@vector-im/compound-web";
 
@@ -147,7 +147,7 @@ export const Modal: FC<Props> = ({
             data-testid="modal_close"
             aria-label={t("action.close")}
           >
-            <CloseIcon width={20} height={20} />
+            <X aria-hidden width={20} height={20} />
           </DialogClose>
         )}
       </div>
diff --git a/src/RTCConnectionStats.tsx b/src/RTCConnectionStats.tsx
index ea9df3f5e0..e94a98610b 100644
--- a/src/RTCConnectionStats.tsx
+++ b/src/RTCConnectionStats.tsx
@@ -7,10 +7,7 @@ Please see LICENSE in the repository root for full details.
 
 import { useState, type FC } from "react";
 import { Button, Text } from "@vector-im/compound-web";
-import {
-  MicOnSolidIcon,
-  VideoCallSolidIcon,
-} from "@vector-im/compound-design-tokens/assets/web/icons";
+import { Microphone, VideoCamera } from "@phosphor-icons/react";
 import classNames from "classnames";
 
 import { Modal } from "./Modal";
@@ -89,7 +86,7 @@ export const RTCConnectionStats: FC<Props> = ({
             onClick={() => showFullModal("audio")}
             size="md"
             kind="tertiary"
-            Icon={MicOnSolidIcon}
+            Icon={(props) => <Microphone weight="fill" {...props} />}
           >
             {"jitter" in audio && typeof audio.jitter === "number" && (
               <Text as="span" size="xs" title="jitter">
@@ -105,7 +102,7 @@ export const RTCConnectionStats: FC<Props> = ({
             onClick={() => showFullModal("video")}
             size="md"
             kind="tertiary"
-            Icon={VideoCallSolidIcon}
+            Icon={(props) => <VideoCamera weight="fill" {...props} />}
           >
             {!!video?.framesPerSecond && (
               <Text as="span" size="xs" title="frame rate">
diff --git a/src/RichError.tsx b/src/RichError.tsx
index 699486e25b..3a8e93ad1e 100644
--- a/src/RichError.tsx
+++ b/src/RichError.tsx
@@ -6,7 +6,7 @@ Please see LICENSE in the repository root for full details.
 */
 
 import { useTranslation } from "react-i18next";
-import { PopOutIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
+import { ArrowSquareOut } from "@phosphor-icons/react";
 
 import type { FC, ReactNode } from "react";
 import { ErrorView } from "./ErrorView";
@@ -34,7 +34,7 @@ const OpenElsewhere: FC = () => {
   return (
     <ErrorView
       widget={widget}
-      Icon={PopOutIcon}
+      Icon={ArrowSquareOut}
       title={t("error.open_elsewhere")}
     >
       <p>
diff --git a/src/__snapshots__/AppBar.test.tsx.snap b/src/__snapshots__/AppBar.test.tsx.snap
index 4821894817..beee342059 100644
--- a/src/__snapshots__/AppBar.test.tsx.snap
+++ b/src/__snapshots__/AppBar.test.tsx.snap
@@ -22,12 +22,12 @@ exports[`AppBar > renders 1`] = `
             aria-hidden="true"
             fill="currentColor"
             height="1em"
-            viewBox="0 0 24 24"
+            viewBox="0 0 256 256"
             width="1em"
             xmlns="http://www.w3.org/2000/svg"
           >
             <path
-              d="M12 11.034a1 1 0 0 0 .29.702l.005.005c.18.18.43.29.705.29h8a1 1 0 0 0 0-2h-5.586L22 3.445a1 1 0 0 0-1.414-1.414L14 8.617V3.031a1 1 0 1 0-2 0zm0 1.963a1 1 0 0 0-.29-.702l-.005-.004A1 1 0 0 0 11 12H3a1 1 0 1 0 0 2h5.586L2 20.586A1 1 0 1 0 3.414 22L10 15.414V21a1 1 0 0 0 2 0z"
+              d="M152,96V48a8,8,0,0,1,16,0V88h40a8,8,0,0,1,0,16H160A8,8,0,0,1,152,96ZM96,152H48a8,8,0,0,0,0,16H88v40a8,8,0,0,0,16,0V160A8,8,0,0,0,96,152Zm112,0H160a8,8,0,0,0-8,8v48a8,8,0,0,0,16,0V168h40a8,8,0,0,0,0-16ZM96,40a8,8,0,0,0-8,8V88H48a8,8,0,0,0,0,16H96a8,8,0,0,0,8-8V48A8,8,0,0,0,96,40Z"
             />
           </svg>
         </div>
@@ -65,12 +65,12 @@ exports[`AppBar > renders with title and subtitle 1`] = `
             aria-hidden="true"
             fill="currentColor"
             height="1em"
-            viewBox="0 0 24 24"
+            viewBox="0 0 256 256"
             width="1em"
             xmlns="http://www.w3.org/2000/svg"
           >
             <path
-              d="M12 11.034a1 1 0 0 0 .29.702l.005.005c.18.18.43.29.705.29h8a1 1 0 0 0 0-2h-5.586L22 3.445a1 1 0 0 0-1.414-1.414L14 8.617V3.031a1 1 0 1 0-2 0zm0 1.963a1 1 0 0 0-.29-.702l-.005-.004A1 1 0 0 0 11 12H3a1 1 0 1 0 0 2h5.586L2 20.586A1 1 0 1 0 3.414 22L10 15.414V21a1 1 0 0 0 2 0z"
+              d="M152,96V48a8,8,0,0,1,16,0V88h40a8,8,0,0,1,0,16H160A8,8,0,0,1,152,96ZM96,152H48a8,8,0,0,0,0,16H88v40a8,8,0,0,0,16,0V160A8,8,0,0,0,96,152Zm112,0H160a8,8,0,0,0-8,8v48a8,8,0,0,0,16,0V168h40a8,8,0,0,0,0-16ZM96,40a8,8,0,0,0-8,8V88H48a8,8,0,0,0,0,16H96a8,8,0,0,0,8-8V48A8,8,0,0,0,96,40Z"
             />
           </svg>
         </div>
diff --git a/src/button/Button.tsx b/src/button/Button.tsx
index 0e29512c68..9cc1891832 100644
--- a/src/button/Button.tsx
+++ b/src/button/Button.tsx
@@ -14,18 +14,20 @@ import {
   Tooltip,
 } from "@vector-im/compound-web";
 import {
-  MicOnSolidIcon,
-  MicOffSolidIcon,
-  SpinnerIcon,
-  VideoCallSolidIcon,
-  VideoCallOffSolidIcon,
-  EndCallIcon,
-  ShareScreenSolidIcon,
-  OverflowHorizontalIcon,
-  OverflowVerticalIcon,
-  VolumeOnSolidIcon,
-  VolumeOffSolidIcon,
-} from "@vector-im/compound-design-tokens/assets/web/icons";
+  Microphone,
+  MicrophoneSlash,
+  Spinner,
+  VideoCamera,
+  VideoCameraSlash,
+  PhoneDisconnect,
+  MonitorArrowUp,
+} from "@phosphor-icons/react";
+import {
+  DotsThreeOutlineVertical,
+  DotsThreeOutline,
+  SpeakerHigh,
+  SpeakerSlash,
+} from "@phosphor-icons/react";
 
 import styles from "./Button.module.css";
 import callFooterStyles from "../components/CallFooter.module.css";
@@ -39,7 +41,11 @@ interface MicButtonProps extends ComponentPropsWithoutRef<"button"> {
 
 export const MicButton: FC<MicButtonProps> = ({ enabled, busy, ...props }) => {
   const { t } = useTranslation();
-  const Icon = busy ? SpinnerIcon : enabled ? MicOnSolidIcon : MicOffSolidIcon;
+  const Icon = busy
+    ? Spinner
+    : enabled
+      ? (p: any) => <Microphone {...p} />
+      : (p: any) => <MicrophoneSlash weight="fill" {...p} />;
   const label = enabled
     ? t("mute_microphone_button_label")
     : t("unmute_microphone_button_label");
@@ -76,10 +82,10 @@ export const VideoButton: FC<VideoButtonProps> = ({
 }) => {
   const { t } = useTranslation();
   const Icon = busy
-    ? SpinnerIcon
+    ? Spinner
     : enabled
-      ? VideoCallSolidIcon
-      : VideoCallOffSolidIcon;
+      ? (p: any) => <VideoCamera {...p} />
+      : (p: any) => <VideoCameraSlash weight="fill" {...p} />;
   const label = enabled
     ? t("stop_video_button_label")
     : t("start_video_button_label");
@@ -121,7 +127,7 @@ export const ShareScreenButton: FC<ShareScreenButtonProps> = ({
     <Tooltip label={label}>
       <CpdButton
         iconOnly
-        Icon={ShareScreenSolidIcon}
+        Icon={MonitorArrowUp}
         kind={enabled ? "primary" : "secondary"}
         role="switch"
         aria-checked={enabled}
@@ -146,7 +152,7 @@ export const EndCallButton: FC<EndCallButtonProps> = ({
       <CpdButton
         className={classNames(className, styles.endCall)}
         iconOnly
-        Icon={EndCallIcon}
+        Icon={PhoneDisconnect}
         destructive
         {...props}
       />
@@ -171,7 +177,13 @@ export const LoudspeakerButton: FC<LoudspeakerButtonProps> = ({
     <Tooltip label={label}>
       <CpdButton
         iconOnly
-        Icon={loudspeakerModeEnabled ? VolumeOnSolidIcon : VolumeOffSolidIcon}
+        children={
+          loudspeakerModeEnabled ? (
+            <SpeakerHigh aria-hidden />
+          ) : (
+            <SpeakerSlash weight="fill" aria-hidden />
+          )
+        }
         {...props}
         kind={loudspeakerModeEnabled ? "secondary" : "primary"}
         aria-checked={loudspeakerModeEnabled}
@@ -201,15 +213,16 @@ export const SettingsIconButton: FC<SettingsIconButtonProps> = ({
   ...props
 }) => {
   const { t } = useTranslation();
-  const Icon =
-    platform === "android" ? OverflowVerticalIcon : OverflowHorizontalIcon;
   return (
     <Tooltip label={t("common.settings")}>
       <IconButton
         className={classNamesForScreenWidth(className, showForScreenWidth)}
         {...props}
       >
-        <Icon aria-hidden />
+        <DotsThreeOutlineVertical
+          aria-hidden
+          style={{ transform: "scale(0.75)", transformOrigin: "center" }}
+        />
       </IconButton>
     </Tooltip>
   );
@@ -231,9 +244,18 @@ export const SettingsButton: FC<SettingsButtonProps> = ({
       <CpdButton
         className={classNamesForScreenWidth(className, showForScreenWidth)}
         iconOnly
-        Icon={
-          platform === "android" ? OverflowVerticalIcon : OverflowHorizontalIcon
-        }
+        Icon={(p: any) => {
+          const IconComp =
+            platform === "android"
+              ? DotsThreeOutlineVertical
+              : DotsThreeOutline;
+          return (
+            <IconComp
+              {...p}
+              style={{ transform: "scale(0.75)", transformOrigin: "center" }}
+            />
+          );
+        }}
         kind={"secondary"}
         {...props}
       />
diff --git a/src/button/DeafenButton.tsx b/src/button/DeafenButton.tsx
new file mode 100644
index 0000000000..1053b7091b
--- /dev/null
+++ b/src/button/DeafenButton.tsx
@@ -0,0 +1,52 @@
+/*
+Copyright 2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import { type ComponentPropsWithoutRef, type FC } from "react";
+import classNames from "classnames";
+import { Button as CpdButton, Tooltip } from "@vector-im/compound-web";
+import { Headphones, SpeakerSlash, Spinner } from "@phosphor-icons/react";
+
+import styles from "./Button.module.css";
+
+interface DeafenButtonProps extends ComponentPropsWithoutRef<"button"> {
+  enabled: boolean;
+  busy?: boolean;
+  size?: "md" | "lg";
+}
+
+export const DeafenButton: FC<DeafenButtonProps> = ({
+  enabled,
+  busy,
+  ...props
+}) => {
+  const Icon = busy
+    ? Spinner
+    : enabled
+      ? (p: any) => <Headphones {...p} />
+      : (p: any) => <SpeakerSlash weight="fill" {...p} />;
+
+  // Using generic labels for now, these can be added to i18n later if needed
+  const label = enabled ? "Deafen" : "Undeafen";
+
+  return (
+    <Tooltip label={label}>
+      <CpdButton
+        iconOnly
+        Icon={Icon}
+        kind={enabled ? "secondary" : "primary"}
+        role="switch"
+        aria-checked={enabled}
+        {...props}
+        aria-busy={busy}
+        className={classNames(props.className, {
+          [styles.rotate]: !!busy,
+        })}
+        disabled={props.disabled || busy}
+      />
+    </Tooltip>
+  );
+};
diff --git a/src/button/InviteButton.tsx b/src/button/InviteButton.tsx
index 66ff57e2c4..466e63a041 100644
--- a/src/button/InviteButton.tsx
+++ b/src/button/InviteButton.tsx
@@ -8,14 +8,14 @@ Please see LICENSE in the repository root for full details.
 import { type ComponentPropsWithoutRef, type FC } from "react";
 import { Button } from "@vector-im/compound-web";
 import { useTranslation } from "react-i18next";
-import { UserAddIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
+import { UserPlus } from "@phosphor-icons/react";
 
 export const InviteButton: FC<
   Omit<ComponentPropsWithoutRef<"button">, "children">
 > = (props) => {
   const { t } = useTranslation();
   return (
-    <Button kind="secondary" size="md" Icon={UserAddIcon} {...props}>
+    <Button kind="secondary" size="md" Icon={UserPlus} {...props}>
       {t("action.invite")}
     </Button>
   );
diff --git a/src/button/ReactionToggleButton.module.css b/src/button/ReactionToggleButton.module.css
index 90c6af0219..dac2cdc4be 100644
--- a/src/button/ReactionToggleButton.module.css
+++ b/src/button/ReactionToggleButton.module.css
@@ -34,8 +34,8 @@ div.reactionPopupMenuRoot {
 }
 
 div.reactionPopupMenuRoot.reactionPopupMenuModal > div > div {
-  padding-inline: var(--cpd-space-6x);
-  padding-block: var(--cpd-space-6x);
+  padding-inline: var(--cpd-space-2x);
+  padding-block: var(--cpd-space-2x);
 }
 
 .reactionPopupMenu section {
diff --git a/src/button/ReactionToggleButton.tsx b/src/button/ReactionToggleButton.tsx
index c71642e97f..82062eff8d 100644
--- a/src/button/ReactionToggleButton.tsx
+++ b/src/button/ReactionToggleButton.tsx
@@ -6,12 +6,7 @@ Please see LICENSE in the repository root for full details.
 */
 
 import { Button as CpdButton, Tooltip, Alert } from "@vector-im/compound-web";
-import {
-  RaisedHandSolidIcon,
-  ChevronDownIcon,
-  ChevronUpIcon,
-  ReactionSolidIcon,
-} from "@vector-im/compound-design-tokens/assets/web/icons";
+import { CaretDown, CaretUp, Smiley, HandPalm } from "@phosphor-icons/react";
 import {
   type ComponentPropsWithoutRef,
   type FC,
@@ -53,7 +48,7 @@ const InnerButton: FC<InnerButtonProps> = ({ raised, open, ...props }) => {
         aria-haspopup
         kind={raised || open ? "primary" : "secondary"}
         iconOnly
-        Icon={raised ? RaisedHandSolidIcon : ReactionSolidIcon}
+        Icon={raised ? HandPalm : Smiley}
         {...props}
       />
     </Tooltip>
@@ -102,7 +97,7 @@ export function ReactionPopupMenu({
               aria-label={label}
               onClick={() => toggleRaisedHand()}
               iconOnly
-              Icon={RaisedHandSolidIcon}
+              Icon={HandPalm}
             />
           </Tooltip>
         </section>
@@ -153,10 +148,15 @@ export function ReactionPopupMenu({
               aria-label={
                 isFullyExpanded ? t("action.show_less") : t("action.show_more")
               }
-              Icon={isFullyExpanded ? ChevronUpIcon : ChevronDownIcon}
               kind="tertiary"
               onClick={() => setExpanded(!isFullyExpanded)}
-            />
+            >
+              {isFullyExpanded ? (
+                <CaretUp aria-hidden />
+              ) : (
+                <CaretDown aria-hidden />
+              )}
+            </CpdButton>
           </Tooltip>
         </section>
       </div>
diff --git a/src/button/__snapshots__/ReactionToggleButton.test.tsx.snap b/src/button/__snapshots__/ReactionToggleButton.test.tsx.snap
index a1e319d95c..31295e9a88 100644
--- a/src/button/__snapshots__/ReactionToggleButton.test.tsx.snap
+++ b/src/button/__snapshots__/ReactionToggleButton.test.tsx.snap
@@ -20,14 +20,12 @@ exports[`Can close reaction dialog 1`] = `
       aria-hidden="true"
       fill="currentColor"
       height="24"
-      viewBox="0 0 24 24"
+      viewBox="0 0 256 256"
       width="24"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        clip-rule="evenodd"
-        d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10m3.536-6.464a1 1 0 0 0-1.415-1.415A3 3 0 0 1 12 15a3 3 0 0 1-2.121-.879 1 1 0 1 0-1.414 1.415A5 5 0 0 0 12 17c1.38 0 2.632-.56 3.536-1.464M10 10.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m5.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3"
-        fill-rule="evenodd"
+        d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216ZM80,108a12,12,0,1,1,12,12A12,12,0,0,1,80,108Zm96,0a12,12,0,1,1-12-12A12,12,0,0,1,176,108Zm-1.07,48c-10.29,17.79-27.4,28-46.93,28s-36.63-10.2-46.92-28a8,8,0,1,1,13.84-8c7.47,12.91,19.21,20,33.08,20s25.61-7.1,33.07-20a8,8,0,0,1,13.86,8Z"
       />
     </svg>
   </button>
@@ -54,14 +52,12 @@ exports[`Can fully expand emoji picker 1`] = `
       aria-hidden="true"
       fill="currentColor"
       height="24"
-      viewBox="0 0 24 24"
+      viewBox="0 0 256 256"
       width="24"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        clip-rule="evenodd"
-        d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10m3.536-6.464a1 1 0 0 0-1.415-1.415A3 3 0 0 1 12 15a3 3 0 0 1-2.121-.879 1 1 0 1 0-1.414 1.415A5 5 0 0 0 12 17c1.38 0 2.632-.56 3.536-1.464M10 10.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m5.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3"
-        fill-rule="evenodd"
+        d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216ZM80,108a12,12,0,1,1,12,12A12,12,0,0,1,80,108Zm96,0a12,12,0,1,1-12-12A12,12,0,0,1,176,108Zm-1.07,48c-10.29,17.79-27.4,28-46.93,28s-36.63-10.2-46.92-28a8,8,0,1,1,13.84-8c7.47,12.91,19.21,20,33.08,20s25.61-7.1,33.07-20a8,8,0,0,1,13.86,8Z"
       />
     </svg>
   </button>
@@ -85,14 +81,12 @@ exports[`Can lower hand 1`] = `
       aria-hidden="true"
       fill="currentColor"
       height="24"
-      viewBox="0 0 24 24"
+      viewBox="0 0 256 256"
       width="24"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        clip-rule="evenodd"
-        d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10m3.536-6.464a1 1 0 0 0-1.415-1.415A3 3 0 0 1 12 15a3 3 0 0 1-2.121-.879 1 1 0 1 0-1.414 1.415A5 5 0 0 0 12 17c1.38 0 2.632-.56 3.536-1.464M10 10.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m5.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3"
-        fill-rule="evenodd"
+        d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216ZM80,108a12,12,0,1,1,12,12A12,12,0,0,1,80,108Zm96,0a12,12,0,1,1-12-12A12,12,0,0,1,176,108Zm-1.07,48c-10.29,17.79-27.4,28-46.93,28s-36.63-10.2-46.92-28a8,8,0,1,1,13.84-8c7.47,12.91,19.21,20,33.08,20s25.61-7.1,33.07-20a8,8,0,0,1,13.86,8Z"
       />
     </svg>
   </button>
@@ -119,14 +113,12 @@ exports[`Can open menu 1`] = `
       aria-hidden="true"
       fill="currentColor"
       height="24"
-      viewBox="0 0 24 24"
+      viewBox="0 0 256 256"
       width="24"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        clip-rule="evenodd"
-        d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10m3.536-6.464a1 1 0 0 0-1.415-1.415A3 3 0 0 1 12 15a3 3 0 0 1-2.121-.879 1 1 0 1 0-1.414 1.415A5 5 0 0 0 12 17c1.38 0 2.632-.56 3.536-1.464M10 10.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m5.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3"
-        fill-rule="evenodd"
+        d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216ZM80,108a12,12,0,1,1,12,12A12,12,0,0,1,80,108Zm96,0a12,12,0,1,1-12-12A12,12,0,0,1,176,108Zm-1.07,48c-10.29,17.79-27.4,28-46.93,28s-36.63-10.2-46.92-28a8,8,0,1,1,13.84-8c7.47,12.91,19.21,20,33.08,20s25.61-7.1,33.07-20a8,8,0,0,1,13.86,8Z"
       />
     </svg>
   </button>
@@ -150,12 +142,12 @@ exports[`Can raise hand 1`] = `
       aria-hidden="true"
       fill="currentColor"
       height="24"
-      viewBox="0 0 24 24"
+      viewBox="0 0 256 256"
       width="24"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        d="M11 3a1 1 0 1 1 2 0v8.5a.5.5 0 0 0 1 0V4a1 1 0 1 1 2 0v10.2l3.284-2.597a1.081 1.081 0 0 1 1.47 1.577c-.613.673-1.214 1.367-1.818 2.064-1.267 1.463-2.541 2.934-3.943 4.235A6 6 0 0 1 5 15V7a1 1 0 0 1 1.999 0v5.5a.5.5 0 0 0 1 0V4a1 1 0 0 1 2 0v7.5a.5.5 0 0 0 1 0z"
+        d="M188,88a27.75,27.75,0,0,0-12,2.71V60a28,28,0,0,0-41.36-24.6A28,28,0,0,0,80,44v6.71A27.75,27.75,0,0,0,68,48,28,28,0,0,0,40,76v76a88,88,0,0,0,176,0V116A28,28,0,0,0,188,88Zm12,64a72,72,0,0,1-144,0V76a12,12,0,0,1,24,0v44a8,8,0,0,0,16,0V44a12,12,0,0,1,24,0v68a8,8,0,0,0,16,0V60a12,12,0,0,1,24,0v68.67A48.08,48.08,0,0,0,120,176a8,8,0,0,0,16,0,32,32,0,0,1,32-32,8,8,0,0,0,8-8V116a12,12,0,0,1,24,0Z"
       />
     </svg>
   </button>
diff --git a/src/button/index.ts b/src/button/index.ts
index f1db314e59..0a910862e9 100644
--- a/src/button/index.ts
+++ b/src/button/index.ts
@@ -6,5 +6,6 @@ Please see LICENSE in the repository root for full details.
 */
 
 export * from "./Button";
+export * from "./DeafenButton";
 export * from "./LinkButton";
 export * from "./ReactionToggleButton";
diff --git a/src/components/CallFooter.stories.tsx b/src/components/CallFooter.stories.tsx
index a6b509fab2..a33e5b7600 100644
--- a/src/components/CallFooter.stories.tsx
+++ b/src/components/CallFooter.stories.tsx
@@ -86,6 +86,7 @@ export const Default: Story = {
     setLayoutMode: fn(),
     openSettings: fn(),
     toggleAudio: fn(),
+    toggleAudioOutput: fn(),
     toggleVideo: fn(),
     toggleScreenSharing: fn(),
     toggleBlur: fn(),
@@ -102,11 +103,16 @@ export const Default: Story = {
     debugTileLayout: false,
     tileStoreGeneration: undefined,
     audioOptions: [],
+    audioOutputOptions: [],
     videoOptions: [],
     selectedAudio: undefined,
+    selectedAudioOutput: undefined,
     selectedVideo: undefined,
     selectAudioButtonOption: undefined,
+    selectAudioOutputButtonOption: undefined,
     selectVideoButtonOption: undefined,
+    audioOutputEnabled: true,
+    audioOutputBusy: false,
   },
   parameters: {
     layout: "fullscreen",
@@ -131,6 +137,7 @@ export const Default: Story = {
     setLayoutMode: fnArgType,
     openSettings: fnArgType,
     toggleAudio: fnArgType,
+    toggleAudioOutput: fnArgType,
     toggleVideo: fnArgType,
     hangup: fnArgType,
   },
diff --git a/src/components/CallFooter.tsx b/src/components/CallFooter.tsx
index f952601dca..a92998628e 100644
--- a/src/components/CallFooter.tsx
+++ b/src/components/CallFooter.tsx
@@ -7,10 +7,7 @@ Please see LICENSE in the repository root for full details.
 
 import { type FC, type JSX, type Ref, useMemo } from "react";
 import classNames from "classnames";
-import {
-  SpotlightIcon,
-  GridIcon,
-} from "@vector-im/compound-design-tokens/assets/web/icons";
+import { Presentation, GridFour } from "@phosphor-icons/react";
 import { Switch } from "@vector-im/compound-web";
 import { t } from "i18next";
 
@@ -20,6 +17,7 @@ import {
   EndCallButton,
   MicButton,
   VideoButton,
+  DeafenButton,
   ShareScreenButton,
   SettingsButton,
   ReactionToggleButton,
@@ -58,6 +56,7 @@ export type FooterSnapshot = FooterActions & FooterState;
 export interface FooterActions {
   /** Also controls if the audioMute button is disabled */
   toggleAudio: (() => void) | undefined;
+  toggleAudioOutput: (() => void) | undefined;
   /** Also controls if the videoMute button is disabled */
   toggleVideo: (() => void) | undefined;
   toggleBlur: (() => void) | undefined;
@@ -73,6 +72,8 @@ export interface FooterActions {
 export interface FooterState {
   audioEnabled: boolean;
   audioBusy: boolean;
+  audioOutputEnabled: boolean;
+  audioOutputBusy: boolean;
   videoEnabled: boolean;
   videoBusy: boolean;
   videoBlurEnabled: boolean;
@@ -103,11 +104,14 @@ export interface FooterState {
 
   /** Providing no options `[]` or `undefined` will imply that we dont have a audio fast switcher */
   audioOptions: MenuOptions[];
+  audioOutputOptions: MenuOptions[];
   /** Providing no options `[]` or `undefined` will imply that we dont have a audio fast switcher */
   videoOptions: MenuOptions[];
   selectedAudio: string | undefined;
+  selectedAudioOutput: string | undefined;
   selectedVideo: string | undefined;
   selectAudioButtonOption: ((deviceId: string) => void) | undefined;
+  selectAudioOutputButtonOption: ((deviceId: string) => void) | undefined;
   selectVideoButtonOption: ((option: string) => void) | undefined;
 }
 
@@ -125,9 +129,12 @@ export const CallFooter: FC<FooterProps> = ({ ref, children, vm }) => {
   const openSettings = useBehavior(vm.openSettings$);
   const audioEnabled = useBehavior(vm.audioEnabled$);
   const audioBusy = useBehavior(vm.audioBusy$);
+  const audioOutputEnabled = useBehavior(vm.audioOutputEnabled$);
+  const audioOutputBusy = useBehavior(vm.audioOutputBusy$);
   const videoEnabled = useBehavior(vm.videoEnabled$);
   const videoBusy = useBehavior(vm.videoBusy$);
   const toggleAudio = useBehavior(vm.toggleAudio$);
+  const toggleAudioOutput = useBehavior(vm.toggleAudioOutput$);
   const toggleVideo = useBehavior(vm.toggleVideo$);
   const sharingScreen = useBehavior(vm.sharingScreen$);
   const toggleScreenSharing = useBehavior(vm.toggleScreenSharing$);
@@ -140,8 +147,13 @@ export const CallFooter: FC<FooterProps> = ({ ref, children, vm }) => {
   const videoOptions = useBehavior(vm.videoOptions$);
   const selectedVideo = useBehavior(vm.selectedVideo$);
   const audioOptions = useBehavior(vm.audioOptions$);
+  const audioOutputOptions = useBehavior(vm.audioOutputOptions$);
   const selectedAudio = useBehavior(vm.selectedAudio$);
+  const selectedAudioOutput = useBehavior(vm.selectedAudioOutput$);
   const selectAudioButtonOption = useBehavior(vm.selectAudioButtonOption$);
+  const selectAudioOutputButtonOption = useBehavior(
+    vm.selectAudioOutputButtonOption$,
+  );
   const selectVideoButtonOption = useBehavior(vm.selectVideoButtonOption$);
   const toggleBlur = useBehavior(vm.toggleBlur$);
   const videoBlurEnabled = useBehavior(vm.videoBlurEnabled$);
@@ -193,36 +205,68 @@ export const CallFooter: FC<FooterProps> = ({ ref, children, vm }) => {
     );
   }
 
-  if ((videoOptions?.length ?? 0) > 0) {
+  if ((audioOutputOptions?.length ?? 0) > 0) {
     buttons.push(
       <MediaMuteAndSwitchButton
-        title={"Camera Source"}
-        key="video"
-        iconsAndLabels="video"
-        enabled={videoEnabled ?? false}
-        busy={videoBusy ?? false}
-        onMuteClick={toggleVideo}
-        options={videoOptions}
-        selectedOption={selectedVideo}
-        onSelect={selectVideoButtonOption}
-        videoBlurToggleClick={toggleBlur}
-        videoBlurEnabled={videoBlurEnabled}
+        title={"Speaker Source"}
+        key="audioOutput"
+        iconsAndLabels="audioOutput"
+        enabled={audioOutputEnabled ?? false}
+        busy={audioOutputBusy ?? false}
+        onMuteClick={toggleAudioOutput}
+        data-testid="incall_deafen"
+        options={audioOutputOptions}
+        selectedOption={selectedAudioOutput}
+        onSelect={selectAudioOutputButtonOption}
       />,
     );
   } else {
     buttons.push(
-      <VideoButton
+      <DeafenButton
         size={buttonSize}
-        key="video"
-        enabled={videoEnabled ?? false}
-        busy={videoBusy ?? false}
-        onClick={toggleVideo}
-        disabled={(videoBusy ?? false) || toggleVideo === undefined}
-        data-testid="incall_videomute"
+        key="audioOutput"
+        enabled={audioOutputEnabled ?? false}
+        busy={audioOutputBusy ?? false}
+        onClick={toggleAudioOutput}
+        disabled={(audioOutputBusy ?? false) || toggleAudioOutput === undefined}
+        data-testid="incall_deafen"
       />,
     );
   }
 
+  if (toggleVideo !== undefined) {
+    if ((videoOptions?.length ?? 0) > 0) {
+      buttons.push(
+        <MediaMuteAndSwitchButton
+          title={t("settings.devices.camera")}
+          key="video"
+          iconsAndLabels="video"
+          enabled={videoEnabled ?? false}
+          busy={videoBusy ?? false}
+          onMuteClick={toggleVideo}
+          data-testid="incall_videomute"
+          options={videoOptions}
+          selectedOption={selectedVideo}
+          onSelect={selectVideoButtonOption}
+          videoBlurEnabled={videoBlurEnabled}
+          videoBlurToggleClick={toggleBlur}
+        />,
+      );
+    } else {
+      buttons.push(
+        <VideoButton
+          size={buttonSize}
+          key="video"
+          enabled={videoEnabled ?? false}
+          busy={videoBusy ?? false}
+          onClick={toggleVideo}
+          disabled={(videoBusy ?? false) || toggleVideo === undefined}
+          data-testid="incall_videomute"
+        />,
+      );
+    }
+  }
+
   if (toggleScreenSharing !== undefined) {
     buttons.push(
       <ShareScreenButton
@@ -317,10 +361,10 @@ export const CallFooter: FC<FooterProps> = ({ ref, children, vm }) => {
           aria-label={t("layout_switch_label")}
           leftLabel={t("layout_spotlight_label")}
           leftValue="spotlight"
-          leftIcon={SpotlightIcon}
+          leftIcon={Presentation}
           rightLabel={t("layout_grid_label")}
           rightValue="grid"
-          rightIcon={GridIcon}
+          rightIcon={GridFour}
           className={styles.layout}
           value={layoutMode}
           onChange={setLayoutMode}
diff --git a/src/components/CallFooterViewModel.tsx b/src/components/CallFooterViewModel.tsx
index 2f64cc83b6..1d403367b0 100644
--- a/src/components/CallFooterViewModel.tsx
+++ b/src/components/CallFooterViewModel.tsx
@@ -14,7 +14,9 @@ import { type MediaDevices } from "../state/MediaDevices";
 import {
   backgroundBlur as backgroundBlurSettings,
   debugTileLayout as debugTileLayoutSetting,
+  muteAllAudio as muteAllAudioSetting,
 } from "../settings/settings";
+import { muteAllAudio$ } from "../state/MuteAllAudioModel";
 import { type Behavior, constant } from "../state/Behavior";
 import type { ObservableScope } from "../state/ObservableScope";
 import { type MuteStates } from "../state/MuteStates";
@@ -35,6 +37,9 @@ function buildMuteBehaviors(
   | "audioEnabled$"
   | "audioBusy$"
   | "toggleAudio$"
+  | "audioOutputEnabled$"
+  | "audioOutputBusy$"
+  | "toggleAudioOutput$"
   | "videoEnabled$"
   | "videoBusy$"
   | "toggleVideo$"
@@ -45,6 +50,13 @@ function buildMuteBehaviors(
     toggleAudio$: scope.behavior(
       muteStates.audio.toggle$.pipe(map((t) => t ?? undefined)),
     ),
+    audioOutputEnabled$: scope.behavior(
+      muteAllAudio$.pipe(map((muted) => !muted)),
+    ),
+    audioOutputBusy$: constant(false),
+    toggleAudioOutput$: constant(() =>
+      muteAllAudioSetting.setValue(!muteAllAudioSetting.getValue()),
+    ),
     videoEnabled$: muteStates.video.enabled$,
     videoBusy$: muteStates.video.syncing$,
     toggleVideo$: scope.behavior(
@@ -67,6 +79,9 @@ function buildDeviceBehaviors(
   | "audioOptions$"
   | "selectedAudio$"
   | "selectAudioButtonOption$"
+  | "audioOutputOptions$"
+  | "selectedAudioOutput$"
+  | "selectAudioOutputButtonOption$"
   | "videoOptions$"
   | "selectedVideo$"
   | "selectVideoButtonOption$"
@@ -94,6 +109,26 @@ function buildDeviceBehaviors(
       mediaDevices.audioInput.selected$.pipe(map((s) => s?.id)),
     ),
     selectAudioButtonOption$: constant(mediaDevices.audioInput.select),
+    audioOutputOptions$: scope.behavior(
+      disableSwitcher$.pipe(
+        switchMap((disable) =>
+          disable
+            ? constant([] as MenuOptions[])
+            : mediaDevices.audioOutput.available$.pipe(
+                map((available) =>
+                  [...available.entries()].map(([id, label]) => ({
+                    id,
+                    label,
+                  })),
+                ),
+              ),
+        ),
+      ),
+    ),
+    selectedAudioOutput$: scope.behavior(
+      mediaDevices.audioOutput.selected$.pipe(map((s) => s?.id)),
+    ),
+    selectAudioOutputButtonOption$: constant(mediaDevices.audioOutput.select),
     videoOptions$: scope.behavior(
       disableSwitcher$.pipe(
         switchMap((disable) =>
@@ -253,11 +288,14 @@ export function createLobbyFooterViewModel(
       debugTileLayout: false,
       showFooter: true,
       toggleAudio: undefined,
+      toggleAudioOutput: undefined,
       toggleVideo: undefined,
       setLayoutMode: undefined,
       toggleScreenSharing: undefined,
       audioEnabled: undefined,
       audioBusy: false,
+      audioOutputEnabled: undefined,
+      audioOutputBusy: false,
       videoEnabled: undefined,
       videoBusy: false,
       layoutMode: undefined,
@@ -267,10 +305,13 @@ export function createLobbyFooterViewModel(
       reactionData: undefined,
       tileStoreGeneration: undefined,
       audioOptions: undefined,
+      audioOutputOptions: undefined,
       videoOptions: undefined,
       selectedAudio: undefined,
+      selectedAudioOutput: undefined,
       selectedVideo: undefined,
       selectAudioButtonOption: undefined,
+      selectAudioOutputButtonOption: undefined,
       selectVideoButtonOption: undefined,
     }),
     ...buildMuteBehaviors(scope, muteStates),
diff --git a/src/components/MediaMuteAndSwitchButton.module.css b/src/components/MediaMuteAndSwitchButton.module.css
index e5bba2383f..5bfca5be34 100644
--- a/src/components/MediaMuteAndSwitchButton.module.css
+++ b/src/components/MediaMuteAndSwitchButton.module.css
@@ -20,13 +20,41 @@ Please see LICENSE in the repository root for full details.
   color: var(--cpd-color-icon-on-solid-primary);
 }
 .menuButton {
-  width: 40px;
+  width: 24px !important;
+  padding: 0 !important;
   background-color: transparent !important;
 }
 .itemIcon {
   color: var(--cpd-color-text-secondary);
 }
 
+.menuItem {
+  display: flex !important;
+  align-items: center !important;
+  padding: 8px 16px !important;
+  gap: 12px;
+}
+
+.menuItem > :nth-child(2) {
+  flex-grow: 1;
+  text-align: left;
+}
+
+.iconWrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.scrollableArea {
+  max-height: 400px;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
 .rotate {
   animation: spinner 1.5s linear infinite;
 }
diff --git a/src/components/MediaMuteAndSwitchButton.tsx b/src/components/MediaMuteAndSwitchButton.tsx
index bd220330f3..47643c8919 100644
--- a/src/components/MediaMuteAndSwitchButton.tsx
+++ b/src/components/MediaMuteAndSwitchButton.tsx
@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { type ComponentType, useState, type FC, useEffect } from "react";
+import { useState, type FC, useEffect } from "react";
 import {
   Button,
   Menu,
@@ -13,23 +13,27 @@ import {
   ToggleMenuItem,
 } from "@vector-im/compound-web";
 import {
-  CheckIcon,
-  ChevronUpIcon,
-  ChevronDownIcon,
-  MicOnIcon,
-  SpinnerIcon,
-  VideoCallIcon,
-} from "@vector-im/compound-design-tokens/assets/web/icons";
+  Microphone,
+  Spinner,
+  VideoCamera,
+  Check,
+  CaretUp,
+  CaretDown,
+  Headphones,
+} from "@phosphor-icons/react";
 import classNames from "classnames";
 import { useTranslation } from "react-i18next";
 
 import styles from "./MediaMuteAndSwitchButton.module.css";
-import { MicButton, VideoButton } from "../button";
-import { type DeviceLabel } from "../state/MediaDevices";
+import { MicButton, VideoButton, DeafenButton } from "../button";
+import {
+  type DeviceLabel,
+  type AudioOutputDeviceLabel,
+} from "../state/MediaDevices";
 import { useMediaDevices } from "../MediaDevicesContext";
 
 export interface MenuOptions {
-  label: DeviceLabel;
+  label: DeviceLabel | AudioOutputDeviceLabel;
   id: string;
 }
 
@@ -42,7 +46,7 @@ export interface MediaMuteAndSwitchButtonProps {
   onMuteClick?: () => void;
   /** True while mute/unmute operation is syncing. */
   busy?: boolean;
-  iconsAndLabels: "video" | "audio";
+  iconsAndLabels: "video" | "audio" | "audioOutput";
   /** The options available for the media device selector modal */
   options?: MenuOptions[];
   /** The option that will currently be rendered as the selected option */
@@ -122,24 +126,44 @@ export const MediaMuteAndSwitchButton: FC<MediaMuteAndSwitchButtonProps> = ({
         />
       );
       break;
+    case "audioOutput":
+      button = (
+        <DeafenButton
+          enabled={enabled ?? false}
+          busy={isBusy}
+          onClick={(e) => {
+            onMuteClick?.();
+            e.preventDefault();
+            e.stopPropagation();
+          }}
+          disabled={isBusy || onMuteClick === undefined}
+          data-testid="incall_deafen"
+        />
+      );
+      break;
   }
 
-  let IconOptions: ComponentType<React.SVGAttributes<SVGElement>> | undefined;
+  let IconOptions: React.ElementType;
   let optionsButtonLabel: string;
   let numberedLabel: (number: number) => string;
   switch (iconsAndLabels) {
     case "video":
-      IconOptions = VideoCallIcon;
+      IconOptions = VideoCamera;
       optionsButtonLabel = t("settings.devices.camera");
       numberedLabel = (n): string =>
         t("settings.devices.camera_numbered", { n });
       break;
     case "audio":
-      IconOptions = MicOnIcon;
+      IconOptions = Microphone;
       optionsButtonLabel = t("settings.devices.microphone");
       numberedLabel = (n): string =>
         t("settings.devices.microphone_numbered", { n });
       break;
+    case "audioOutput":
+      IconOptions = Headphones;
+      optionsButtonLabel = "Audio Output Options";
+      numberedLabel = (n): string => `Speaker ${n}`;
+      break;
   }
 
   return (
@@ -164,63 +188,82 @@ export const MediaMuteAndSwitchButton: FC<MediaMuteAndSwitchButtonProps> = ({
               [styles.menuButton]: true,
               [styles.chevronIconOpen]: menuOpen,
             })}
-            Icon={menuOpen ? ChevronUpIcon : ChevronDownIcon}
+            Icon={menuOpen ? CaretUp : CaretDown}
             kind={"tertiary"}
             size="lg"
             aria-label={optionsButtonLabel}
           />
         }
       >
-        {options?.map(({ label, id }) => {
-          let labelText: string;
-          switch (label.type) {
-            case "name":
-              labelText = label.name;
-              break;
-            case "number":
-              labelText = numberedLabel(label.number);
-              break;
-          }
-          return (
-            <MenuItem
-              hideChevron
-              label={labelText}
-              Icon={
-                IconOptions && (
-                  <IconOptions
-                    width={24}
-                    height={24}
-                    className={styles.itemIcon}
-                  />
-                )
-              }
+        <div className={styles.scrollableArea}>
+          {options?.map(({ label, id }) => {
+            let labelText: string = "";
+            switch (label.type) {
+              case "name":
+                labelText = label.name;
+                break;
+              case "number":
+                labelText = numberedLabel(label.number);
+                break;
+              case "speaker":
+                labelText = t("settings.devices.loudspeaker") ?? "Speaker";
+                break;
+              case "earpiece":
+                labelText = t("settings.devices.handset") ?? "Earpiece";
+                break;
+              case "default":
+                labelText = label.name
+                  ? `${t("settings.devices.default", "Default")} (${label.name})`
+                  : t("settings.devices.default", "Default");
+                break;
+            }
+            return (
+              <MenuItem
+                hideChevron
+                className={styles.menuItem}
+                label={labelText}
+                Icon={
+                  IconOptions ? (
+                    <div className={styles.iconWrapper}>
+                      <IconOptions
+                        width={24}
+                        height={24}
+                        className={styles.itemIcon}
+                      />
+                    </div>
+                  ) : undefined
+                }
+                onSelect={(e) => {
+                  e.preventDefault();
+                  if (id === selectedOption) return;
+                  setPlannedSelection(id);
+                  onSelect?.(id);
+                }}
+                key={id}
+              >
+                <div className={styles.iconWrapper}>
+                  {selectedOption === id && <Check width={24} height={24} />}
+                  {selectedOption !== id && plannedSelection === id && (
+                    <Spinner width={24} height={24} className={styles.rotate} />
+                  )}
+                </div>
+              </MenuItem>
+            );
+          })}
+          {(toggles?.length ?? 0) > 0 && <hr />}
+          {toggles?.map((toggle) => (
+            <ToggleMenuItem
+              className={styles.menuItem}
+              label={toggle.label}
               onSelect={(e) => {
+                videoBlurToggleClick?.();
                 e.preventDefault();
-                if (id === selectedOption) return;
-                setPlannedSelection(id);
-                onSelect?.(id);
               }}
-              key={id}
-            >
-              {selectedOption === id && <CheckIcon width={24} height={24} />}
-              {selectedOption !== id && plannedSelection === id && (
-                <SpinnerIcon width={24} height={24} className={styles.rotate} />
-              )}
-            </MenuItem>
-          );
-        })}
-        {(toggles?.length ?? 0) > 0 && <hr />}
-        {toggles?.map((toggle) => (
-          <ToggleMenuItem
-            label={toggle.label}
-            onSelect={(e) => {
-              videoBlurToggleClick?.();
-              e.preventDefault();
-            }}
-            checked={toggle.enabled ?? false}
-            key={toggle.id}
-          />
-        ))}
+              checked={toggle.enabled ?? false}
+              key={toggle.id}
+            />
+          ))}
+        </div>
       </Menu>
     </div>
   );
diff --git a/src/components/__snapshots__/MediaMuteAndSwitchButton.test.tsx.snap b/src/components/__snapshots__/MediaMuteAndSwitchButton.test.tsx.snap
index 8fe77ef11a..ce6a14d56e 100644
--- a/src/components/__snapshots__/MediaMuteAndSwitchButton.test.tsx.snap
+++ b/src/components/__snapshots__/MediaMuteAndSwitchButton.test.tsx.snap
@@ -21,12 +21,12 @@ exports[`MediaMuteAndSwitchButton > renders 1`] = `
         aria-hidden="true"
         fill="currentColor"
         height="24"
-        viewBox="0 0 24 24"
+        viewBox="0 0 256 256"
         width="24"
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M8 8v-.006l6.831 6.832-.002.002 1.414 1.415.003-.003 1.414 1.414-.003.003L20.5 20.5a1 1 0 0 1-1.414 1.414l-3.022-3.022A7.95 7.95 0 0 1 13 19.938V21a1 1 0 0 1-2 0v-1.062A8 8 0 0 1 4 12a1 1 0 1 1 2 0 6 6 0 0 0 8.587 5.415l-1.55-1.55A4.005 4.005 0 0 1 8 12v-1.172L2.086 4.914A1 1 0 0 1 3.5 3.5zm9.417 6.583 1.478 1.477A7.96 7.96 0 0 0 20 12a1 1 0 0 0-2 0c0 .925-.21 1.8-.583 2.583M8.073 5.238l7.793 7.793q.132-.495.134-1.031V6a4 4 0 0 0-7.927-.762"
+          d="M213.38,229.92a8,8,0,0,1-11.3-.54l-30.92-34A78.83,78.83,0,0,1,136,207.59V240a8,8,0,0,1-16,0V207.6A80.11,80.11,0,0,1,48,128a8,8,0,0,1,16,0,64.07,64.07,0,0,0,64,64,63.41,63.41,0,0,0,32.21-8.68l-11.1-12.2A48,48,0,0,1,80,128V95.09L42.08,53.38A8,8,0,0,1,53.92,42.62l160,176A8,8,0,0,1,213.38,229.92Zm-24.19-63.13a7.88,7.88,0,0,0,3.51.82,8,8,0,0,0,7.19-4.49A79.16,79.16,0,0,0,208,128a8,8,0,0,0-16,0,63.32,63.32,0,0,1-6.48,28.09A8,8,0,0,0,189.19,166.79Zm-27.33-29.22A8,8,0,0,0,175.74,133a49.49,49.49,0,0,0,.26-5V64A48,48,0,0,0,84,44.87a8,8,0,0,0,1.41,8.57Z"
         />
       </svg>
     </button>
@@ -48,12 +48,12 @@ exports[`MediaMuteAndSwitchButton > renders 1`] = `
         aria-hidden="true"
         fill="currentColor"
         height="24"
-        viewBox="0 0 24 24"
+        viewBox="0 0 256 256"
         width="24"
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M12 14.95q-.2 0-.375-.062a.9.9 0 0 1-.325-.213l-4.6-4.6a.95.95 0 0 1-.275-.7q0-.425.275-.7a.95.95 0 0 1 .7-.275q.425 0 .7.275l3.9 3.9 3.9-3.9a.95.95 0 0 1 .7-.275q.425 0 .7.275a.95.95 0 0 1 .275.7.95.95 0 0 1-.275.7l-4.6 4.6q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
+          d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"
         />
       </svg>
     </button>
diff --git a/src/home/CallList.tsx b/src/home/CallList.tsx
index 44422587ef..f9f11fecd5 100644
--- a/src/home/CallList.tsx
+++ b/src/home/CallList.tsx
@@ -10,7 +10,7 @@ import { type RoomMember, type Room, type MatrixClient } from "matrix-js-sdk";
 import { type FC, useCallback, type MouseEvent, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { IconButton, Text } from "@vector-im/compound-web";
-import { CloseIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
+import { X } from "@phosphor-icons/react";
 import classNames from "classnames";
 
 import { Avatar, Size } from "../Avatar";
@@ -84,7 +84,7 @@ const CallTile: FC<CallTileProps> = ({ name, avatarUrl, room, client }) => {
         disabled={isLeaving}
         aria-label={t("action.remove")}
       >
-        <CloseIcon />
+        <X aria-hidden />
       </IconButton>
     </>
   );
diff --git a/src/input/AvatarInputField.tsx b/src/input/AvatarInputField.tsx
index f9b147076f..1f81e1db09 100644
--- a/src/input/AvatarInputField.tsx
+++ b/src/input/AvatarInputField.tsx
@@ -17,11 +17,7 @@ import {
 import classNames from "classnames";
 import { useTranslation } from "react-i18next";
 import { Button, Menu, MenuItem } from "@vector-im/compound-web";
-import {
-  DeleteIcon,
-  EditIcon,
-  ShareIcon,
-} from "@vector-im/compound-design-tokens/assets/web/icons";
+import { Trash, PencilSimple, Upload } from "@phosphor-icons/react";
 
 import { Avatar, Size } from "../Avatar";
 import styles from "./AvatarInputField.module.css";
@@ -111,7 +107,7 @@ export const AvatarInputField: FC<Props> = ({
             trigger={
               <Button
                 iconOnly
-                Icon={EditIcon}
+                Icon={PencilSimple}
                 kind="tertiary"
                 size="md"
                 aria-label={t("action.edit")}
@@ -119,12 +115,12 @@ export const AvatarInputField: FC<Props> = ({
             }
           >
             <MenuItem
-              Icon={ShareIcon}
+              Icon={Upload}
               label={t("action.upload_file")}
               onSelect={onSelectUpload}
             />
             <MenuItem
-              Icon={DeleteIcon}
+              Icon={Trash}
               label={t("action.remove")}
               kind="critical"
               onSelect={onSelectRemove}
@@ -134,7 +130,7 @@ export const AvatarInputField: FC<Props> = ({
           <Button
             type="button"
             iconOnly
-            Icon={EditIcon}
+            Icon={PencilSimple}
             kind="tertiary"
             size="md"
             aria-label={t("action.edit")}
diff --git a/src/room/EarpieceOverlay.tsx b/src/room/EarpieceOverlay.tsx
index 574792f0a2..1b2e85e41b 100644
--- a/src/room/EarpieceOverlay.tsx
+++ b/src/room/EarpieceOverlay.tsx
@@ -7,7 +7,7 @@ Please see LICENSE in the repository root for full details.
 
 import { type FC } from "react";
 import { BigIcon, Button, Heading, Text } from "@vector-im/compound-web";
-import { VoiceCallIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
+import { Phone } from "@phosphor-icons/react";
 import { useTranslation } from "react-i18next";
 
 import styles from "./EarpieceOverlay.module.css";
@@ -21,8 +21,8 @@ export const EarpieceOverlay: FC<Props> = ({ show, onBackToVideoPressed }) => {
   const { t } = useTranslation();
   return (
     <div className={styles.overlay} data-show={show} aria-hidden={!show}>
-      <BigIcon className={styles.icon}>
-        <VoiceCallIcon aria-hidden />
+      <BigIcon>
+        <Phone />
       </BigIcon>
       <Heading as="h2" weight="semibold" size="md">
         {t("handset.overlay_title")}
diff --git a/src/room/EncryptionLock.tsx b/src/room/EncryptionLock.tsx
index 52eaf17b86..537f5e7b8c 100644
--- a/src/room/EncryptionLock.tsx
+++ b/src/room/EncryptionLock.tsx
@@ -8,10 +8,7 @@ Please see LICENSE in the repository root for full details.
 import { type FC } from "react";
 import { Tooltip } from "@vector-im/compound-web";
 import { useTranslation } from "react-i18next";
-import {
-  LockSolidIcon,
-  LockOffIcon,
-} from "@vector-im/compound-design-tokens/assets/web/icons";
+import { Lock, LockOpen } from "@phosphor-icons/react";
 
 import styles from "./EncryptionLock.module.css";
 
@@ -21,7 +18,7 @@ interface Props {
 
 export const EncryptionLock: FC<Props> = ({ encrypted }) => {
   const { t } = useTranslation();
-  const Icon = encrypted ? LockSolidIcon : LockOffIcon;
+  const Icon = encrypted ? Lock : LockOpen;
   const label = encrypted ? t("common.encrypted") : t("common.unencrypted");
 
   return (
diff --git a/src/room/GroupCallErrorBoundary.tsx b/src/room/GroupCallErrorBoundary.tsx
index 390a5a8c2f..f5be8d2eb0 100644
--- a/src/room/GroupCallErrorBoundary.tsx
+++ b/src/room/GroupCallErrorBoundary.tsx
@@ -15,12 +15,7 @@ import {
   useCallback,
 } from "react";
 import { Trans, useTranslation } from "react-i18next";
-import {
-  ErrorSolidIcon,
-  HostIcon,
-  OfflineIcon,
-  WebBrowserIcon,
-} from "@vector-im/compound-design-tokens/assets/web/icons";
+import { Shield, WifiSlash, Browser, Warning } from "@phosphor-icons/react";
 import { Button } from "@vector-im/compound-web";
 import { logger } from "matrix-js-sdk/lib/logger";
 import { MatrixError } from "matrix-js-sdk";
@@ -60,16 +55,16 @@ const ErrorPage: FC<ErrorPageProps> = ({
   let icon: ComponentType<SVGAttributes<SVGElement>>;
   switch (error.category) {
     case ErrorCategory.CONFIGURATION_ISSUE:
-      icon = HostIcon;
+      icon = Shield;
       break;
     case ErrorCategory.NETWORK_CONNECTIVITY:
-      icon = OfflineIcon;
+      icon = WifiSlash;
       break;
     case ErrorCategory.CLIENT_CONFIGURATION:
-      icon = WebBrowserIcon;
+      icon = Browser;
       break;
     default:
-      icon = ErrorSolidIcon;
+      icon = Warning;
   }
 
   const actions: { label: string; onClick: () => void }[] = [];
diff --git a/src/room/InviteModal.tsx b/src/room/InviteModal.tsx
index 759dce3029..451e709608 100644
--- a/src/room/InviteModal.tsx
+++ b/src/room/InviteModal.tsx
@@ -15,10 +15,7 @@ import {
 import { useTranslation } from "react-i18next";
 import { type Room } from "matrix-js-sdk";
 import { Button, Text } from "@vector-im/compound-web";
-import {
-  LinkIcon,
-  CheckIcon,
-} from "@vector-im/compound-design-tokens/assets/web/icons";
+import { Link, Check } from "@phosphor-icons/react";
 import copy from "copy-to-clipboard";
 
 import { Modal } from "../Modal";
@@ -64,7 +61,7 @@ export const InviteModal: FC<Props> = ({ room, open, onDismiss }) => {
         </Text>
         <Button
           className={styles.button}
-          Icon={LinkIcon}
+          Icon={Link}
           onClick={onButtonClick}
           data-testid="modal_inviteLink"
         >
@@ -75,7 +72,7 @@ export const InviteModal: FC<Props> = ({ room, open, onDismiss }) => {
         open={toastOpen}
         onDismiss={onToastDismiss}
         autoDismiss={2000}
-        Icon={CheckIcon}
+        Icon={Check}
       >
         {t("invite_modal.link_copied_toast")}
       </Toast>
diff --git a/src/room/LobbyView.test.tsx b/src/room/LobbyView.test.tsx
index e2bb06ccbe..15d3aaea41 100644
--- a/src/room/LobbyView.test.tsx
+++ b/src/room/LobbyView.test.tsx
@@ -11,10 +11,7 @@ import { BrowserRouter } from "react-router-dom";
 import { TooltipProvider } from "@vector-im/compound-web";
 import { type MatrixClient } from "matrix-js-sdk";
 import { axe } from "vitest-axe";
-import {
-  ArrowLeftIcon,
-  ChevronLeftIcon,
-} from "@vector-im/compound-design-tokens/assets/web/icons";
+import { ArrowLeft, CaretLeft } from "@phosphor-icons/react";
 
 import { LobbyView } from "./LobbyView";
 import { E2eeType } from "../e2ee/e2eeType";
@@ -140,7 +137,7 @@ describe("LobbyView", () => {
     getByRole("banner");
     // Check that the primary button uses ArrowLeftIcon (the back/return icon),
     // not the default CollapseIcon
-    const { container: iconContainer } = render(<ArrowLeftIcon />);
+    const { container: iconContainer } = render(<ArrowLeft />);
     const expectedSvgPath = iconContainer
       .querySelector("path")!
       .getAttribute("d");
@@ -164,7 +161,7 @@ describe("LobbyView", () => {
     getByRole("banner");
     // Check that the primary button uses ArrowLeftIcon (the back/return icon),
     // not the default CollapseIcon
-    const { container: iconContainer } = render(<ChevronLeftIcon />);
+    const { container: iconContainer } = render(<CaretLeft />);
     const expectedSvgPath = iconContainer
       .querySelector("path")!
       .getAttribute("d");
diff --git a/src/room/RoomPage.tsx b/src/room/RoomPage.tsx
index b1ffb3ba28..338662f3eb 100644
--- a/src/room/RoomPage.tsx
+++ b/src/room/RoomPage.tsx
@@ -17,10 +17,7 @@ import {
 import { type MatrixError } from "matrix-js-sdk";
 import { logger } from "matrix-js-sdk/lib/logger";
 import { Trans, useTranslation } from "react-i18next";
-import {
-  CheckIcon,
-  UnknownSolidIcon,
-} from "@vector-im/compound-design-tokens/assets/web/icons";
+import { Check, Question } from "@phosphor-icons/react";
 
 import { useClientLegacy } from "../ClientContext";
 import { ErrorPage, FullScreenView, LoadingPage } from "../FullScreenView";
@@ -149,7 +146,7 @@ export const RoomPage: FC = (): ReactNode => {
           ) : (
             <>
               {t("lobby.waiting_for_invite")}
-              <CheckIcon />
+              <Check width={24} height={24} aria-hidden />
             </>
           );
         return (
@@ -196,7 +193,15 @@ export const RoomPage: FC = (): ReactNode => {
           return (
             <FullScreenView>
               <ErrorView
-                Icon={UnknownSolidIcon}
+                Icon={(props) => (
+                  <Question
+                    weight="fill"
+                    width={24}
+                    height={24}
+                    aria-hidden
+                    {...props}
+                  />
+                )}
                 title={t("error.call_not_found")}
                 widget={widget}
               >
diff --git a/src/room/__snapshots__/GroupCallErrorBoundary.test.tsx.snap b/src/room/__snapshots__/GroupCallErrorBoundary.test.tsx.snap
index 810419428a..eb3ace8a76 100644
--- a/src/room/__snapshots__/GroupCallErrorBoundary.test.tsx.snap
+++ b/src/room/__snapshots__/GroupCallErrorBoundary.test.tsx.snap
@@ -116,12 +116,12 @@ exports[`ConnectionLostError: Action handling should reset error state 1`] = `
               aria-hidden="true"
               fill="currentColor"
               height="1em"
-              viewBox="0 0 24 24"
+              viewBox="0 0 256 256"
               width="1em"
               xmlns="http://www.w3.org/2000/svg"
             >
               <path
-                d="M3.5 3.5a1 1 0 1 0-1.414 1.414l4.113 4.114a5.5 5.5 0 0 0-.184 1.07A5.002 5.002 0 0 0 7 20h10.172l1.914 1.914A1 1 0 1 0 20.5 20.5l-.979-.979.004-.001L7.145 7.14l-.002.003zm18.5 12a4.48 4.48 0 0 1-.928 2.738L8.637 5.803A5.47 5.47 0 0 1 11.5 5a5.49 5.49 0 0 1 4.25 2.008 4 4 0 0 1 4.187 4.708A4.5 4.5 0 0 1 22 15.5"
+                d="M213.92,210.62a8,8,0,1,1-11.84,10.76l-52-57.15a60,60,0,0,0-57.41,7.24,8,8,0,1,1-9.42-12.93A75.43,75.43,0,0,1,128,144c1.28,0,2.55,0,3.82.1L104.9,114.49A108,108,0,0,0,61,135.31,8,8,0,0,1,49.73,134,8,8,0,0,1,51,122.77a124.27,124.27,0,0,1,41.71-21.66L69.37,75.4a155.43,155.43,0,0,0-40.29,24A8,8,0,0,1,18.92,87,171.87,171.87,0,0,1,58,62.86L42.08,45.38A8,8,0,1,1,53.92,34.62ZM128,192a12,12,0,1,0,12,12A12,12,0,0,0,128,192ZM237.08,87A172.3,172.3,0,0,0,106,49.4a8,8,0,1,0,2,15.87A158.33,158.33,0,0,1,128,64a156.25,156.25,0,0,1,98.92,35.37A8,8,0,0,0,237.08,87ZM195,135.31a8,8,0,0,0,11.24-1.3,8,8,0,0,0-1.3-11.24,124.25,124.25,0,0,0-51.73-24.2A8,8,0,1,0,150,114.24,108.12,108.12,0,0,1,195,135.31Z"
               />
             </svg>
           </div>
@@ -274,12 +274,12 @@ exports[`LiveKit ConnectionError variants > should display LiveKit 'internal' er
               aria-hidden="true"
               fill="currentColor"
               height="1em"
-              viewBox="0 0 24 24"
+              viewBox="0 0 256 256"
               width="1em"
               xmlns="http://www.w3.org/2000/svg"
             >
               <path
-                d="M3.5 3.5a1 1 0 1 0-1.414 1.414l4.113 4.114a5.5 5.5 0 0 0-.184 1.07A5.002 5.002 0 0 0 7 20h10.172l1.914 1.914A1 1 0 1 0 20.5 20.5l-.979-.979.004-.001L7.145 7.14l-.002.003zm18.5 12a4.48 4.48 0 0 1-.928 2.738L8.637 5.803A5.47 5.47 0 0 1 11.5 5a5.49 5.49 0 0 1 4.25 2.008 4 4 0 0 1 4.187 4.708A4.5 4.5 0 0 1 22 15.5"
+                d="M213.92,210.62a8,8,0,1,1-11.84,10.76l-52-57.15a60,60,0,0,0-57.41,7.24,8,8,0,1,1-9.42-12.93A75.43,75.43,0,0,1,128,144c1.28,0,2.55,0,3.82.1L104.9,114.49A108,108,0,0,0,61,135.31,8,8,0,0,1,49.73,134,8,8,0,0,1,51,122.77a124.27,124.27,0,0,1,41.71-21.66L69.37,75.4a155.43,155.43,0,0,0-40.29,24A8,8,0,0,1,18.92,87,171.87,171.87,0,0,1,58,62.86L42.08,45.38A8,8,0,1,1,53.92,34.62ZM128,192a12,12,0,1,0,12,12A12,12,0,0,0,128,192ZM237.08,87A172.3,172.3,0,0,0,106,49.4a8,8,0,1,0,2,15.87A158.33,158.33,0,0,1,128,64a156.25,156.25,0,0,1,98.92,35.37A8,8,0,0,0,237.08,87ZM195,135.31a8,8,0,0,0,11.24-1.3,8,8,0,0,0-1.3-11.24,124.25,124.25,0,0,0-51.73-24.2A8,8,0,1,0,150,114.24,108.12,108.12,0,0,1,195,135.31Z"
               />
             </svg>
           </div>
@@ -431,12 +431,12 @@ exports[`LiveKit ConnectionError variants > should display LiveKit 'notAllowed'
               aria-hidden="true"
               fill="currentColor"
               height="1em"
-              viewBox="0 0 24 24"
+              viewBox="0 0 256 256"
               width="1em"
               xmlns="http://www.w3.org/2000/svg"
             >
               <path
-                d="M3.5 3.5a1 1 0 1 0-1.414 1.414l4.113 4.114a5.5 5.5 0 0 0-.184 1.07A5.002 5.002 0 0 0 7 20h10.172l1.914 1.914A1 1 0 1 0 20.5 20.5l-.979-.979.004-.001L7.145 7.14l-.002.003zm18.5 12a4.48 4.48 0 0 1-.928 2.738L8.637 5.803A5.47 5.47 0 0 1 11.5 5a5.49 5.49 0 0 1 4.25 2.008 4 4 0 0 1 4.187 4.708A4.5 4.5 0 0 1 22 15.5"
+                d="M213.92,210.62a8,8,0,1,1-11.84,10.76l-52-57.15a60,60,0,0,0-57.41,7.24,8,8,0,1,1-9.42-12.93A75.43,75.43,0,0,1,128,144c1.28,0,2.55,0,3.82.1L104.9,114.49A108,108,0,0,0,61,135.31,8,8,0,0,1,49.73,134,8,8,0,0,1,51,122.77a124.27,124.27,0,0,1,41.71-21.66L69.37,75.4a155.43,155.43,0,0,0-40.29,24A8,8,0,0,1,18.92,87,171.87,171.87,0,0,1,58,62.86L42.08,45.38A8,8,0,1,1,53.92,34.62ZM128,192a12,12,0,1,0,12,12A12,12,0,0,0,128,192ZM237.08,87A172.3,172.3,0,0,0,106,49.4a8,8,0,1,0,2,15.87A158.33,158.33,0,0,1,128,64a156.25,156.25,0,0,1,98.92,35.37A8,8,0,0,0,237.08,87ZM195,135.31a8,8,0,0,0,11.24-1.3,8,8,0,0,0-1.3-11.24,124.25,124.25,0,0,0-51.73-24.2A8,8,0,1,0,150,114.24,108.12,108.12,0,0,1,195,135.31Z"
               />
             </svg>
           </div>
@@ -588,12 +588,12 @@ exports[`LiveKit ConnectionError variants > should display LiveKit 'serverUnreac
               aria-hidden="true"
               fill="currentColor"
               height="1em"
-              viewBox="0 0 24 24"
+              viewBox="0 0 256 256"
               width="1em"
               xmlns="http://www.w3.org/2000/svg"
             >
               <path
-                d="M3.5 3.5a1 1 0 1 0-1.414 1.414l4.113 4.114a5.5 5.5 0 0 0-.184 1.07A5.002 5.002 0 0 0 7 20h10.172l1.914 1.914A1 1 0 1 0 20.5 20.5l-.979-.979.004-.001L7.145 7.14l-.002.003zm18.5 12a4.48 4.48 0 0 1-.928 2.738L8.637 5.803A5.47 5.47 0 0 1 11.5 5a5.49 5.49 0 0 1 4.25 2.008 4 4 0 0 1 4.187 4.708A4.5 4.5 0 0 1 22 15.5"
+                d="M213.92,210.62a8,8,0,1,1-11.84,10.76l-52-57.15a60,60,0,0,0-57.41,7.24,8,8,0,1,1-9.42-12.93A75.43,75.43,0,0,1,128,144c1.28,0,2.55,0,3.82.1L104.9,114.49A108,108,0,0,0,61,135.31,8,8,0,0,1,49.73,134,8,8,0,0,1,51,122.77a124.27,124.27,0,0,1,41.71-21.66L69.37,75.4a155.43,155.43,0,0,0-40.29,24A8,8,0,0,1,18.92,87,171.87,171.87,0,0,1,58,62.86L42.08,45.38A8,8,0,1,1,53.92,34.62ZM128,192a12,12,0,1,0,12,12A12,12,0,0,0,128,192ZM237.08,87A172.3,172.3,0,0,0,106,49.4a8,8,0,1,0,2,15.87A158.33,158.33,0,0,1,128,64a156.25,156.25,0,0,1,98.92,35.37A8,8,0,0,0,237.08,87ZM195,135.31a8,8,0,0,0,11.24-1.3,8,8,0,0,0-1.3-11.24,124.25,124.25,0,0,0-51.73-24.2A8,8,0,1,0,150,114.24,108.12,108.12,0,0,1,195,135.31Z"
               />
             </svg>
           </div>
@@ -745,12 +745,12 @@ exports[`LiveKit ConnectionError variants > should display LiveKit 'serviceNotFo
               aria-hidden="true"
               fill="currentColor"
               height="1em"
-              viewBox="0 0 24 24"
+              viewBox="0 0 256 256"
               width="1em"
               xmlns="http://www.w3.org/2000/svg"
             >
               <path
-                d="M3.5 3.5a1 1 0 1 0-1.414 1.414l4.113 4.114a5.5 5.5 0 0 0-.184 1.07A5.002 5.002 0 0 0 7 20h10.172l1.914 1.914A1 1 0 1 0 20.5 20.5l-.979-.979.004-.001L7.145 7.14l-.002.003zm18.5 12a4.48 4.48 0 0 1-.928 2.738L8.637 5.803A5.47 5.47 0 0 1 11.5 5a5.49 5.49 0 0 1 4.25 2.008 4 4 0 0 1 4.187 4.708A4.5 4.5 0 0 1 22 15.5"
+                d="M213.92,210.62a8,8,0,1,1-11.84,10.76l-52-57.15a60,60,0,0,0-57.41,7.24,8,8,0,1,1-9.42-12.93A75.43,75.43,0,0,1,128,144c1.28,0,2.55,0,3.82.1L104.9,114.49A108,108,0,0,0,61,135.31,8,8,0,0,1,49.73,134,8,8,0,0,1,51,122.77a124.27,124.27,0,0,1,41.71-21.66L69.37,75.4a155.43,155.43,0,0,0-40.29,24A8,8,0,0,1,18.92,87,171.87,171.87,0,0,1,58,62.86L42.08,45.38A8,8,0,1,1,53.92,34.62ZM128,192a12,12,0,1,0,12,12A12,12,0,0,0,128,192ZM237.08,87A172.3,172.3,0,0,0,106,49.4a8,8,0,1,0,2,15.87A158.33,158.33,0,0,1,128,64a156.25,156.25,0,0,1,98.92,35.37A8,8,0,0,0,237.08,87ZM195,135.31a8,8,0,0,0,11.24-1.3,8,8,0,0,0-1.3-11.24,124.25,124.25,0,0,0-51.73-24.2A8,8,0,1,0,150,114.24,108.12,108.12,0,0,1,195,135.31Z"
               />
             </svg>
           </div>
@@ -902,12 +902,12 @@ exports[`LiveKit ConnectionError variants > should display LiveKit 'timeout' err
               aria-hidden="true"
               fill="currentColor"
               height="1em"
-              viewBox="0 0 24 24"
+              viewBox="0 0 256 256"
               width="1em"
               xmlns="http://www.w3.org/2000/svg"
             >
               <path
-                d="M3.5 3.5a1 1 0 1 0-1.414 1.414l4.113 4.114a5.5 5.5 0 0 0-.184 1.07A5.002 5.002 0 0 0 7 20h10.172l1.914 1.914A1 1 0 1 0 20.5 20.5l-.979-.979.004-.001L7.145 7.14l-.002.003zm18.5 12a4.48 4.48 0 0 1-.928 2.738L8.637 5.803A5.47 5.47 0 0 1 11.5 5a5.49 5.49 0 0 1 4.25 2.008 4 4 0 0 1 4.187 4.708A4.5 4.5 0 0 1 22 15.5"
+                d="M213.92,210.62a8,8,0,1,1-11.84,10.76l-52-57.15a60,60,0,0,0-57.41,7.24,8,8,0,1,1-9.42-12.93A75.43,75.43,0,0,1,128,144c1.28,0,2.55,0,3.82.1L104.9,114.49A108,108,0,0,0,61,135.31,8,8,0,0,1,49.73,134,8,8,0,0,1,51,122.77a124.27,124.27,0,0,1,41.71-21.66L69.37,75.4a155.43,155.43,0,0,0-40.29,24A8,8,0,0,1,18.92,87,171.87,171.87,0,0,1,58,62.86L42.08,45.38A8,8,0,1,1,53.92,34.62ZM128,192a12,12,0,1,0,12,12A12,12,0,0,0,128,192ZM237.08,87A172.3,172.3,0,0,0,106,49.4a8,8,0,1,0,2,15.87A158.33,158.33,0,0,1,128,64a156.25,156.25,0,0,1,98.92,35.37A8,8,0,0,0,237.08,87ZM195,135.31a8,8,0,0,0,11.24-1.3,8,8,0,0,0-1.3-11.24,124.25,124.25,0,0,0-51.73-24.2A8,8,0,1,0,150,114.24,108.12,108.12,0,0,1,195,135.31Z"
               />
             </svg>
           </div>
@@ -1059,12 +1059,12 @@ exports[`LiveKit ConnectionError variants > should link to troubleshoot guide wh
               aria-hidden="true"
               fill="currentColor"
               height="1em"
-              viewBox="0 0 24 24"
+              viewBox="0 0 256 256"
               width="1em"
               xmlns="http://www.w3.org/2000/svg"
             >
               <path
-                d="M3.5 3.5a1 1 0 1 0-1.414 1.414l4.113 4.114a5.5 5.5 0 0 0-.184 1.07A5.002 5.002 0 0 0 7 20h10.172l1.914 1.914A1 1 0 1 0 20.5 20.5l-.979-.979.004-.001L7.145 7.14l-.002.003zm18.5 12a4.48 4.48 0 0 1-.928 2.738L8.637 5.803A5.47 5.47 0 0 1 11.5 5a5.49 5.49 0 0 1 4.25 2.008 4 4 0 0 1 4.187 4.708A4.5 4.5 0 0 1 22 15.5"
+                d="M213.92,210.62a8,8,0,1,1-11.84,10.76l-52-57.15a60,60,0,0,0-57.41,7.24,8,8,0,1,1-9.42-12.93A75.43,75.43,0,0,1,128,144c1.28,0,2.55,0,3.82.1L104.9,114.49A108,108,0,0,0,61,135.31,8,8,0,0,1,49.73,134,8,8,0,0,1,51,122.77a124.27,124.27,0,0,1,41.71-21.66L69.37,75.4a155.43,155.43,0,0,0-40.29,24A8,8,0,0,1,18.92,87,171.87,171.87,0,0,1,58,62.86L42.08,45.38A8,8,0,1,1,53.92,34.62ZM128,192a12,12,0,1,0,12,12A12,12,0,0,0,128,192ZM237.08,87A172.3,172.3,0,0,0,106,49.4a8,8,0,1,0,2,15.87A158.33,158.33,0,0,1,128,64a156.25,156.25,0,0,1,98.92,35.37A8,8,0,0,0,237.08,87ZM195,135.31a8,8,0,0,0,11.24-1.3,8,8,0,0,0-1.3-11.24,124.25,124.25,0,0,0-51.73-24.2A8,8,0,1,0,150,114.24,108.12,108.12,0,0,1,195,135.31Z"
               />
             </svg>
           </div>
@@ -1216,17 +1216,12 @@ exports[`should have a close button in widget mode 1`] = `
               aria-hidden="true"
               fill="currentColor"
               height="1em"
-              viewBox="0 0 24 24"
+              viewBox="0 0 256 256"
               width="1em"
               xmlns="http://www.w3.org/2000/svg"
             >
               <path
-                d="M16.713 6.713A.97.97 0 0 1 16 7a.97.97 0 0 1-.713-.287A.97.97 0 0 1 15 6q0-.424.287-.713A.97.97 0 0 1 16 5q.424 0 .712.287Q17 5.576 17 6t-.288.713"
-              />
-              <path
-                clip-rule="evenodd"
-                d="M6 2a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2zm12 2H6v4h12zM6 12v-2h12v2zm0 2v2h12v-2zm0 6v-2h12v2z"
-                fill-rule="evenodd"
+                d="M208,40H48A16,16,0,0,0,32,56v56c0,52.72,25.52,84.67,46.93,102.19,23.06,18.86,46,25.27,47,25.53a8,8,0,0,0,4.2,0c1-.26,23.91-6.67,47-25.53C198.48,196.67,224,164.72,224,112V56A16,16,0,0,0,208,40Zm0,72c0,37.07-13.66,67.16-40.6,89.42A129.3,129.3,0,0,1,128,223.62a128.25,128.25,0,0,1-38.92-21.81C61.82,179.51,48,149.3,48,112l0-56,160,0Z"
               />
             </svg>
           </div>
@@ -1370,17 +1365,12 @@ exports[`should render the error page with link back to home 1`] = `
               aria-hidden="true"
               fill="currentColor"
               height="1em"
-              viewBox="0 0 24 24"
+              viewBox="0 0 256 256"
               width="1em"
               xmlns="http://www.w3.org/2000/svg"
             >
               <path
-                d="M16.713 6.713A.97.97 0 0 1 16 7a.97.97 0 0 1-.713-.287A.97.97 0 0 1 15 6q0-.424.287-.713A.97.97 0 0 1 16 5q.424 0 .712.287Q17 5.576 17 6t-.288.713"
-              />
-              <path
-                clip-rule="evenodd"
-                d="M6 2a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2zm12 2H6v4h12zM6 12v-2h12v2zm0 2v2h12v-2zm0 6v-2h12v2z"
-                fill-rule="evenodd"
+                d="M208,40H48A16,16,0,0,0,32,56v56c0,52.72,25.52,84.67,46.93,102.19,23.06,18.86,46,25.27,47,25.53a8,8,0,0,0,4.2,0c1-.26,23.91-6.67,47-25.53C198.48,196.67,224,164.72,224,112V56A16,16,0,0,0,208,40Zm0,72c0,37.07-13.66,67.16-40.6,89.42A129.3,129.3,0,0,1,128,223.62a128.25,128.25,0,0,1-38.92-21.81C61.82,179.51,48,149.3,48,112l0-56,160,0Z"
               />
             </svg>
           </div>
@@ -1524,17 +1514,12 @@ exports[`should report correct error for 'Call is not supported' 1`] = `
               aria-hidden="true"
               fill="currentColor"
               height="1em"
-              viewBox="0 0 24 24"
+              viewBox="0 0 256 256"
               width="1em"
               xmlns="http://www.w3.org/2000/svg"
             >
               <path
-                d="M16.713 6.713A.97.97 0 0 1 16 7a.97.97 0 0 1-.713-.287A.97.97 0 0 1 15 6q0-.424.287-.713A.97.97 0 0 1 16 5q.424 0 .712.287Q17 5.576 17 6t-.288.713"
-              />
-              <path
-                clip-rule="evenodd"
-                d="M6 2a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2zm12 2H6v4h12zM6 12v-2h12v2zm0 2v2h12v-2zm0 6v-2h12v2z"
-                fill-rule="evenodd"
+                d="M208,40H48A16,16,0,0,0,32,56v56c0,52.72,25.52,84.67,46.93,102.19,23.06,18.86,46,25.27,47,25.53a8,8,0,0,0,4.2,0c1-.26,23.91-6.67,47-25.53C198.48,196.67,224,164.72,224,112V56A16,16,0,0,0,208,40Zm0,72c0,37.07-13.66,67.16-40.6,89.42A129.3,129.3,0,0,1,128,223.62a128.25,128.25,0,0,1-38.92-21.81C61.82,179.51,48,149.3,48,112l0-56,160,0Z"
               />
             </svg>
           </div>
@@ -1678,12 +1663,12 @@ exports[`should report correct error for 'Connection lost' 1`] = `
               aria-hidden="true"
               fill="currentColor"
               height="1em"
-              viewBox="0 0 24 24"
+              viewBox="0 0 256 256"
               width="1em"
               xmlns="http://www.w3.org/2000/svg"
             >
               <path
-                d="M3.5 3.5a1 1 0 1 0-1.414 1.414l4.113 4.114a5.5 5.5 0 0 0-.184 1.07A5.002 5.002 0 0 0 7 20h10.172l1.914 1.914A1 1 0 1 0 20.5 20.5l-.979-.979.004-.001L7.145 7.14l-.002.003zm18.5 12a4.48 4.48 0 0 1-.928 2.738L8.637 5.803A5.47 5.47 0 0 1 11.5 5a5.49 5.49 0 0 1 4.25 2.008 4 4 0 0 1 4.187 4.708A4.5 4.5 0 0 1 22 15.5"
+                d="M213.92,210.62a8,8,0,1,1-11.84,10.76l-52-57.15a60,60,0,0,0-57.41,7.24,8,8,0,1,1-9.42-12.93A75.43,75.43,0,0,1,128,144c1.28,0,2.55,0,3.82.1L104.9,114.49A108,108,0,0,0,61,135.31,8,8,0,0,1,49.73,134,8,8,0,0,1,51,122.77a124.27,124.27,0,0,1,41.71-21.66L69.37,75.4a155.43,155.43,0,0,0-40.29,24A8,8,0,0,1,18.92,87,171.87,171.87,0,0,1,58,62.86L42.08,45.38A8,8,0,1,1,53.92,34.62ZM128,192a12,12,0,1,0,12,12A12,12,0,0,0,128,192ZM237.08,87A172.3,172.3,0,0,0,106,49.4a8,8,0,1,0,2,15.87A158.33,158.33,0,0,1,128,64a156.25,156.25,0,0,1,98.92,35.37A8,8,0,0,0,237.08,87ZM195,135.31a8,8,0,0,0,11.24-1.3,8,8,0,0,0-1.3-11.24,124.25,124.25,0,0,0-51.73-24.2A8,8,0,1,0,150,114.24,108.12,108.12,0,0,1,195,135.31Z"
               />
             </svg>
           </div>
@@ -1836,17 +1821,12 @@ exports[`should report correct error for 'Homeserver does not support Matrix 2.
               aria-hidden="true"
               fill="currentColor"
               height="1em"
-              viewBox="0 0 24 24"
+              viewBox="0 0 256 256"
               width="1em"
               xmlns="http://www.w3.org/2000/svg"
             >
               <path
-                d="M16.713 6.713A.97.97 0 0 1 16 7a.97.97 0 0 1-.713-.287A.97.97 0 0 1 15 6q0-.424.287-.713A.97.97 0 0 1 16 5q.424 0 .712.287Q17 5.576 17 6t-.288.713"
-              />
-              <path
-                clip-rule="evenodd"
-                d="M6 2a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2zm12 2H6v4h12zM6 12v-2h12v2zm0 2v2h12v-2zm0 6v-2h12v2z"
-                fill-rule="evenodd"
+                d="M208,40H48A16,16,0,0,0,32,56v56c0,52.72,25.52,84.67,46.93,102.19,23.06,18.86,46,25.27,47,25.53a8,8,0,0,0,4.2,0c1-.26,23.91-6.67,47-25.53C198.48,196.67,224,164.72,224,112V56A16,16,0,0,0,208,40Zm0,72c0,37.07-13.66,67.16-40.6,89.42A129.3,129.3,0,0,1,128,223.62a128.25,128.25,0,0,1-38.92-21.81C61.82,179.51,48,149.3,48,112l0-56,160,0Z"
               />
             </svg>
           </div>
@@ -1990,12 +1970,12 @@ exports[`should report correct error for 'Incompatible browser' 1`] = `
               aria-hidden="true"
               fill="currentColor"
               height="1em"
-              viewBox="0 0 24 24"
+              viewBox="0 0 256 256"
               width="1em"
               xmlns="http://www.w3.org/2000/svg"
             >
               <path
-                d="M4 20q-.824 0-1.412-.587A1.93 1.93 0 0 1 2 18V6q0-.824.587-1.412A1.93 1.93 0 0 1 4 4h16q.824 0 1.413.588Q22 5.175 22 6v12q0 .824-.587 1.413A1.93 1.93 0 0 1 20 20zm0-2h16V8H4z"
+                d="M216,40H40A16,16,0,0,0,24,56V200a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A16,16,0,0,0,216,40Zm0,16V88H40V56Zm0,144H40V104H216v96Z"
               />
             </svg>
           </div>
@@ -2139,12 +2119,12 @@ exports[`should report correct error for 'Insufficient capacity' 1`] = `
               aria-hidden="true"
               fill="currentColor"
               height="1em"
-              viewBox="0 0 24 24"
+              viewBox="0 0 256 256"
               width="1em"
               xmlns="http://www.w3.org/2000/svg"
             >
               <path
-                d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 15a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 16q0 .424.287.712.288.288.713.288m0-4q.424 0 .713-.287A.97.97 0 0 0 13 12V8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8v4q0 .424.287.713.288.287.713.287m0 9a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22"
+                d="M236.8,188.09,149.35,36.22h0a24.76,24.76,0,0,0-42.7,0L19.2,188.09a23.51,23.51,0,0,0,0,23.72A24.35,24.35,0,0,0,40.55,224h174.9a24.35,24.35,0,0,0,21.33-12.19A23.51,23.51,0,0,0,236.8,188.09ZM222.93,203.8a8.5,8.5,0,0,1-7.48,4.2H40.55a8.5,8.5,0,0,1-7.48-4.2,7.59,7.59,0,0,1,0-7.72L120.52,44.21a8.75,8.75,0,0,1,15,0l87.45,151.87A7.59,7.59,0,0,1,222.93,203.8ZM120,144V104a8,8,0,0,1,16,0v40a8,8,0,0,1-16,0Zm20,36a12,12,0,1,1-12-12A12,12,0,0,1,140,180Z"
               />
             </svg>
           </div>
diff --git a/src/room/__snapshots__/InCallView.test.tsx.snap b/src/room/__snapshots__/InCallView.test.tsx.snap
index 0d7e605b9c..8a29b8aada 100644
--- a/src/room/__snapshots__/InCallView.test.tsx.snap
+++ b/src/room/__snapshots__/InCallView.test.tsx.snap
@@ -39,12 +39,12 @@ exports[`InCallView > rendering > renders 1`] = `
                 data-encrypted="false"
                 fill="currentColor"
                 height="16"
-                viewBox="0 0 24 24"
+                viewBox="0 0 256 256"
                 width="16"
                 xmlns="http://www.w3.org/2000/svg"
               >
                 <path
-                  d="M6 22q-.825 0-1.412-.587A1.93 1.93 0 0 1 4 20V10q0-.825.588-1.412a2 2 0 0 1 .702-.463L1.333 4.167a1 1 0 0 1 1.414-1.414L7 7.006v-.012l13 13v.012l1.247 1.247a1 1 0 1 1-1.414 1.414l-.896-.896A1.94 1.94 0 0 1 18 22zm14-4.834V10q0-.825-.587-1.412A1.93 1.93 0 0 0 18 8h-1V6q0-2.075-1.463-3.537Q14.075 1 12 1T8.463 2.463a4.9 4.9 0 0 0-1.22 1.946L9 6.166V6q0-1.25.875-2.125A2.9 2.9 0 0 1 12 3q1.25 0 2.125.875T15 6v2h-4.166z"
+                  d="M208,80H96V56a32,32,0,0,1,32-32c15.37,0,29.2,11,32.16,25.59a8,8,0,0,0,15.68-3.18C171.32,24.15,151.2,8,128,8A48.05,48.05,0,0,0,80,56V80H48A16,16,0,0,0,32,96V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V96A16,16,0,0,0,208,80Zm0,128H48V96H208V208Zm-68-56a12,12,0,1,1-12-12A12,12,0,0,1,140,152Z"
                 />
               </svg>
             </span>
@@ -56,18 +56,12 @@ exports[`InCallView > rendering > renders 1`] = `
               aria-label="Participants"
               fill="currentColor"
               height="20"
-              viewBox="0 0 24 24"
+              viewBox="0 0 256 256"
               width="20"
               xmlns="http://www.w3.org/2000/svg"
             >
               <path
-                d="M9.175 13.825Q10.35 15 12 15t2.825-1.175T16 11t-1.175-2.825T12 7 9.175 8.175 8 11t1.175 2.825m4.237-1.412A1.93 1.93 0 0 1 12 13q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 11q0-.825.588-1.412A1.93 1.93 0 0 1 12 9q.825 0 1.412.588Q14 10.175 14 11t-.588 1.412"
-              />
-              <path
-                d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10m-2 0a8 8 0 1 0-16 0 8 8 0 0 0 16 0"
-              />
-              <path
-                d="M16.23 18.792a13 13 0 0 0-1.455-.455 11.6 11.6 0 0 0-5.55 0q-.73.18-1.455.455a8 8 0 0 1-1.729-1.454q1.336-.618 2.709-.95A13.8 13.8 0 0 1 12 16q1.65 0 3.25.387 1.373.333 2.709.95a8 8 0 0 1-1.73 1.455"
+                d="M230.92,212c-15.23-26.33-38.7-45.21-66.09-54.16a72,72,0,1,0-73.66,0C63.78,166.78,40.31,185.66,25.08,212a8,8,0,1,0,13.85,8c18.84-32.56,52.14-52,89.07-52s70.23,19.44,89.07,52a8,8,0,1,0,13.85-8ZM72,96a56,56,0,1,1,56,56A56.06,56.06,0,0,1,72,96Z"
               />
             </svg>
             <span
@@ -118,22 +112,19 @@ exports[`InCallView > rendering > renders 1`] = `
       data-show="false"
     >
       <div
-        class="_big-icon_1ssbv_8 icon"
+        class="_big-icon_1ssbv_8"
         data-kind="primary"
         data-size="lg"
       >
         <svg
-          aria-hidden="true"
           fill="currentColor"
           height="1em"
-          viewBox="0 0 24 24"
+          viewBox="0 0 256 256"
           width="1em"
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            clip-rule="evenodd"
-            d="M8.929 15.1a13.6 13.6 0 0 0 4.654 3.066q2.62 1.036 5.492.923h.008l.003-.004.003-.002-.034-3.124-3.52-.483-1.791 1.792-.645-.322a13.5 13.5 0 0 1-3.496-2.52 13.4 13.4 0 0 1-2.52-3.496l-.322-.645 1.792-1.791-.483-3.52-3.123-.033-.003.002-.003.004v.002a13.65 13.65 0 0 0 .932 5.492A13.4 13.4 0 0 0 8.93 15.1m3.92 4.926a15.6 15.6 0 0 1-5.334-3.511 15.4 15.4 0 0 1-3.505-5.346 15.6 15.6 0 0 1-1.069-6.274 1.93 1.93 0 0 1 .589-1.366c.366-.366.84-.589 1.386-.589h.01l3.163.035a1.96 1.96 0 0 1 1.958 1.694v.005l.487 3.545v.003c.043.297.025.605-.076.907a2 2 0 0 1-.485.773l-.762.762a11.3 11.3 0 0 0 1.806 2.348 11.4 11.4 0 0 0 2.348 1.806l.762-.762a2 2 0 0 1 .774-.485c.302-.1.61-.118.907-.076l3.553.487a1.96 1.96 0 0 1 1.694 1.958l.034 3.174c0 .546-.223 1.02-.588 1.386-.36.36-.827.582-1.363.588a15.3 15.3 0 0 1-6.29-1.062"
-            fill-rule="evenodd"
+            d="M222.37,158.46l-47.11-21.11-.13-.06a16,16,0,0,0-15.17,1.4,8.12,8.12,0,0,0-.75.56L134.87,160c-15.42-7.49-31.34-23.29-38.83-38.51l20.78-24.71c.2-.25.39-.5.57-.77a16,16,0,0,0,1.32-15.06l0-.12L97.54,33.64a16,16,0,0,0-16.62-9.52A56.26,56.26,0,0,0,32,80c0,79.4,64.6,144,144,144a56.26,56.26,0,0,0,55.88-48.92A16,16,0,0,0,222.37,158.46ZM176,208A128.14,128.14,0,0,1,48,80,40.2,40.2,0,0,1,82.87,40a.61.61,0,0,0,0,.12l21,47L83.2,111.86a6.13,6.13,0,0,0-.57.77,16,16,0,0,0-1,15.7c9.06,18.53,27.73,37.06,46.46,46.11a16,16,0,0,0,15.75-1.14,8.44,8.44,0,0,0,.74-.56L168.89,152l47,21.05h0s.08,0,.11,0A40.21,40.21,0,0,1,176,208Z"
           />
         </svg>
       </div>
@@ -187,12 +178,13 @@ exports[`InCallView > rendering > renders 1`] = `
               aria-hidden="true"
               fill="currentColor"
               height="1em"
-              viewBox="0 0 24 24"
+              style="transform: scale(0.75); transform-origin: center;"
+              viewBox="0 0 256 256"
               width="1em"
               xmlns="http://www.w3.org/2000/svg"
             >
               <path
-                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                d="M128,96a32,32,0,1,0,32,32A32,32,0,0,0,128,96Zm0,48a16,16,0,1,1,16-16A16,16,0,0,1,128,144Zm0-64A32,32,0,1,0,96,48,32,32,0,0,0,128,80Zm0-48a16,16,0,1,1-16,16A16,16,0,0,1,128,32Zm0,144a32,32,0,1,0,32,32A32,32,0,0,0,128,176Zm0,48a16,16,0,1,1,16-16A16,16,0,0,1,128,224Z"
               />
             </svg>
           </div>
@@ -318,12 +310,13 @@ exports[`InCallView > rendering > renders 1`] = `
             aria-hidden="true"
             fill="currentColor"
             height="24"
-            viewBox="0 0 24 24"
+            style="transform: scale(0.75); transform-origin: center;"
+            viewBox="0 0 256 256"
             width="24"
             xmlns="http://www.w3.org/2000/svg"
           >
             <path
-              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+              d="M128,96a32,32,0,1,0,32,32A32,32,0,0,0,128,96Zm0,48a16,16,0,1,1,16-16A16,16,0,0,1,128,144ZM48,96a32,32,0,1,0,32,32A32,32,0,0,0,48,96Zm0,48a16,16,0,1,1,16-16A16,16,0,0,1,48,144ZM208,96a32,32,0,1,0,32,32A32,32,0,0,0,208,96Zm0,48a16,16,0,1,1,16-16A16,16,0,0,1,208,144Z"
             />
           </svg>
         </button>
@@ -343,24 +336,24 @@ exports[`InCallView > rendering > renders 1`] = `
             aria-hidden="true"
             fill="currentColor"
             height="24"
-            viewBox="0 0 24 24"
+            viewBox="0 0 256 256"
             width="24"
             xmlns="http://www.w3.org/2000/svg"
           >
             <path
-              d="M8 8v-.006l6.831 6.832-.002.002 1.414 1.415.003-.003 1.414 1.414-.003.003L20.5 20.5a1 1 0 0 1-1.414 1.414l-3.022-3.022A7.95 7.95 0 0 1 13 19.938V21a1 1 0 0 1-2 0v-1.062A8 8 0 0 1 4 12a1 1 0 1 1 2 0 6 6 0 0 0 8.587 5.415l-1.55-1.55A4.005 4.005 0 0 1 8 12v-1.172L2.086 4.914A1 1 0 0 1 3.5 3.5zm9.417 6.583 1.478 1.477A7.96 7.96 0 0 0 20 12a1 1 0 0 0-2 0c0 .925-.21 1.8-.583 2.583M8.073 5.238l7.793 7.793q.132-.495.134-1.031V6a4 4 0 0 0-7.927-.762"
+              d="M213.38,229.92a8,8,0,0,1-11.3-.54l-30.92-34A78.83,78.83,0,0,1,136,207.59V240a8,8,0,0,1-16,0V207.6A80.11,80.11,0,0,1,48,128a8,8,0,0,1,16,0,64.07,64.07,0,0,0,64,64,63.41,63.41,0,0,0,32.21-8.68l-11.1-12.2A48,48,0,0,1,80,128V95.09L42.08,53.38A8,8,0,0,1,53.92,42.62l160,176A8,8,0,0,1,213.38,229.92Zm-24.19-63.13a7.88,7.88,0,0,0,3.51.82,8,8,0,0,0,7.19-4.49A79.16,79.16,0,0,0,208,128a8,8,0,0,0-16,0,63.32,63.32,0,0,1-6.48,28.09A8,8,0,0,0,189.19,166.79Zm-27.33-29.22A8,8,0,0,0,175.74,133a49.49,49.49,0,0,0,.26-5V64A48,48,0,0,0,84,44.87a8,8,0,0,0,1.41,8.57Z"
             />
           </svg>
         </button>
         <button
           aria-busy="false"
-          aria-checked="false"
-          aria-disabled="true"
+          aria-checked="true"
+          aria-disabled="false"
           aria-labelledby="_r_n_"
           class="_button_1nw83_8 _has-icon_1nw83_60 _icon-only_1nw83_53"
-          data-kind="primary"
+          data-kind="secondary"
           data-size="lg"
-          data-testid="incall_videomute"
+          data-testid="incall_deafen"
           role="switch"
           tabindex="0"
         >
@@ -368,12 +361,12 @@ exports[`InCallView > rendering > renders 1`] = `
             aria-hidden="true"
             fill="currentColor"
             height="24"
-            viewBox="0 0 24 24"
+            viewBox="0 0 256 256"
             width="24"
             xmlns="http://www.w3.org/2000/svg"
           >
             <path
-              d="M2.747 2.753 4.35 4.355l.007-.003L18 17.994v.012l3.247 3.247a1 1 0 0 1-1.414 1.414l-2.898-2.898A2 2 0 0 1 16 20H6a4 4 0 0 1-4-4V8c0-.892.292-1.715.785-2.38L1.333 4.166a1 1 0 0 1 1.414-1.414M18 15.166 6.834 4H16a2 2 0 0 1 2 2v4.286l3.35-2.871a1 1 0 0 1 1.65.76v7.65a1 1 0 0 1-1.65.76L18 13.715z"
+              d="M201.89,54.66A103.43,103.43,0,0,0,128.79,24H128A104,104,0,0,0,24,128v56a24,24,0,0,0,24,24H64a24,24,0,0,0,24-24V144a24,24,0,0,0-24-24H40.36A88,88,0,0,1,128,40h.67a87.71,87.71,0,0,1,87,80H192a24,24,0,0,0-24,24v40a24,24,0,0,0,24,24h16a24,24,0,0,0,24-24V128A103.41,103.41,0,0,0,201.89,54.66ZM64,136a8,8,0,0,1,8,8v40a8,8,0,0,1-8,8H48a8,8,0,0,1-8-8V136Zm152,48a8,8,0,0,1-8,8H192a8,8,0,0,1-8-8V144a8,8,0,0,1,8-8h24Z"
             />
           </svg>
         </button>
@@ -392,14 +385,12 @@ exports[`InCallView > rendering > renders 1`] = `
             aria-hidden="true"
             fill="currentColor"
             height="24"
-            viewBox="0 0 24 24"
+            viewBox="0 0 256 256"
             width="24"
             xmlns="http://www.w3.org/2000/svg"
           >
             <path
-              clip-rule="evenodd"
-              d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10m3.536-6.464a1 1 0 0 0-1.415-1.415A3 3 0 0 1 12 15a3 3 0 0 1-2.121-.879 1 1 0 1 0-1.414 1.415A5 5 0 0 0 12 17c1.38 0 2.632-.56 3.536-1.464M10 10.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m5.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3"
-              fill-rule="evenodd"
+              d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216ZM80,108a12,12,0,1,1,12,12A12,12,0,0,1,80,108Zm96,0a12,12,0,1,1-12-12A12,12,0,0,1,176,108Zm-1.07,48c-10.29,17.79-27.4,28-46.93,28s-36.63-10.2-46.92-28a8,8,0,1,1,13.84-8c7.47,12.91,19.21,20,33.08,20s25.61-7.1,33.07-20a8,8,0,0,1,13.86,8Z"
             />
           </svg>
         </button>
@@ -416,12 +407,12 @@ exports[`InCallView > rendering > renders 1`] = `
             aria-hidden="true"
             fill="currentColor"
             height="24"
-            viewBox="0 0 24 24"
+            viewBox="0 0 256 256"
             width="24"
             xmlns="http://www.w3.org/2000/svg"
           >
             <path
-              d="m2.765 16.02-2.47-2.416A1.02 1.02 0 0 1 0 12.852q0-.456.295-.751a15.6 15.6 0 0 1 5.316-3.786A15.9 15.9 0 0 1 12 7q3.355 0 6.39 1.329a16 16 0 0 1 5.315 3.772q.295.294.295.751t-.295.752l-2.47 2.416a1.047 1.047 0 0 1-1.396.108l-3.114-2.363a1.1 1.1 0 0 1-.322-.376 1.1 1.1 0 0 1-.108-.483v-2.27a13.6 13.6 0 0 0-2.12-.524C13.459 9.996 12 9.937 12 9.937s-1.459.059-2.174.175q-1.074.174-2.121.523v2.271q0 .268-.108.483a1.1 1.1 0 0 1-.322.376l-3.114 2.363a1.047 1.047 0 0 1-1.396-.107"
+              d="M231.59,90.13h0C175.44,34,80.56,34,24.41,90.13c-20,20-21.92,49.49-4.69,71.71A16,16,0,0,0,32.35,168a15.8,15.8,0,0,0,5.75-1.08l49-17.37.29-.11a16,16,0,0,0,9.75-11.73l5.9-29.52a76.52,76.52,0,0,1,49.68-.11h0l6.21,29.75a16,16,0,0,0,9.72,11.59l.29.11,49,17.39a16,16,0,0,0,18.38-5.06C253.51,139.62,251.58,110.13,231.59,90.13ZM223.67,152l-.3-.12-48.82-17.33-6.21-29.74A16,16,0,0,0,158,93a92.56,92.56,0,0,0-60.34.13,16,16,0,0,0-10.32,12l-5.9,29.51L32.63,151.86c-.1,0-.17.13-.27.17-12.33-15.91-11-36.23,3.36-50.58,25-25,58.65-37.53,92.28-37.53s67.27,12.51,92.28,37.53C234.61,115.8,236,136.12,223.67,152Zm.32,48a8,8,0,0,1-8,8H40a8,8,0,0,1,0-16H216A8,8,0,0,1,224,200Z"
             />
           </svg>
         </button>
@@ -441,12 +432,12 @@ exports[`InCallView > rendering > renders 1`] = `
           aria-hidden="true"
           fill="currentColor"
           height="1em"
-          viewBox="0 0 24 24"
+          viewBox="0 0 256 256"
           width="1em"
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            d="M5 5h14v8h-5a1 1 0 0 0-1 1v5H5zm10 14v-4h4v4zM5 21h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2"
+            d="M216,40H136V24a8,8,0,0,0-16,0V40H40A16,16,0,0,0,24,56V176a16,16,0,0,0,16,16H79.36L57.75,219a8,8,0,0,0,12.5,10l29.59-37h56.32l29.59,37a8,8,0,1,0,12.5-10l-21.61-27H216a16,16,0,0,0,16-16V56A16,16,0,0,0,216,40Zm0,136H40V56H216V176Z"
           />
         </svg>
         <input
@@ -460,12 +451,12 @@ exports[`InCallView > rendering > renders 1`] = `
           aria-hidden="true"
           fill="currentColor"
           height="1em"
-          viewBox="0 0 24 24"
+          viewBox="0 0 256 256"
           width="1em"
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            d="M4 11a.97.97 0 0 1-.712-.287A.97.97 0 0 1 3 10V4q0-.424.288-.712A.97.97 0 0 1 4 3h6q.424 0 .713.288Q11 3.575 11 4v6q0 .424-.287.713A.97.97 0 0 1 10 11zm5-2V5H5v4zm5 12a.97.97 0 0 1-.713-.288A.97.97 0 0 1 13 20v-6q0-.424.287-.713A.97.97 0 0 1 14 13h6q.424 0 .712.287.288.288.288.713v6q0 .424-.288.712A.97.97 0 0 1 20 21zm5-2v-4h-4v4zM4 21a.97.97 0 0 1-.712-.288A.97.97 0 0 1 3 20v-6q0-.424.288-.713A.97.97 0 0 1 4 13h6q.424 0 .713.287.287.288.287.713v6q0 .424-.287.712A.97.97 0 0 1 10 21zm5-2v-4H5v4zm5-8a.97.97 0 0 1-.713-.287A.97.97 0 0 1 13 10V4q0-.424.287-.712A.97.97 0 0 1 14 3h6q.424 0 .712.288Q21 3.575 21 4v6q0 .424-.288.713A.97.97 0 0 1 20 11zm5-2V5h-4v4z"
+            d="M200,40H56A16,16,0,0,0,40,56V200a16,16,0,0,0,16,16H200a16,16,0,0,0,16-16V56A16,16,0,0,0,200,40Zm0,80H136V56h64ZM120,56v64H56V56ZM56,136h64v64H56Zm144,64H136V136h64v64Z"
           />
         </svg>
       </fieldset>
diff --git a/src/room/__snapshots__/LobbyView.test.tsx.snap b/src/room/__snapshots__/LobbyView.test.tsx.snap
index ac89651b9f..b947ce8577 100644
--- a/src/room/__snapshots__/LobbyView.test.tsx.snap
+++ b/src/room/__snapshots__/LobbyView.test.tsx.snap
@@ -22,12 +22,12 @@ exports[`LobbyView > renders with AppBar android 1`] = `
             aria-hidden="true"
             fill="currentColor"
             height="1em"
-            viewBox="0 0 24 24"
+            viewBox="0 0 256 256"
             width="1em"
             xmlns="http://www.w3.org/2000/svg"
           >
             <path
-              d="M12.207 5.293a1 1 0 0 1 0 1.414L7.914 11H18.5a1 1 0 1 1 0 2H7.914l4.293 4.293a1 1 0 0 1-1.414 1.414l-6-6a1 1 0 0 1 0-1.414l6-6a1 1 0 0 1 1.414 0"
+              d="M224,128a8,8,0,0,1-8,8H59.31l58.35,58.34a8,8,0,0,1-11.32,11.32l-72-72a8,8,0,0,1,0-11.32l72-72a8,8,0,0,1,11.32,11.32L59.31,120H216A8,8,0,0,1,224,128Z"
             />
           </svg>
         </div>
@@ -117,12 +117,13 @@ exports[`LobbyView > renders with AppBar android 1`] = `
               aria-hidden="true"
               fill="currentColor"
               height="1em"
-              viewBox="0 0 24 24"
+              style="transform: scale(0.75); transform-origin: center;"
+              viewBox="0 0 256 256"
               width="1em"
               xmlns="http://www.w3.org/2000/svg"
             >
               <path
-                d="M12 20q-.825 0-1.412-.587A1.93 1.93 0 0 1 10 18q0-.824.588-1.413A1.93 1.93 0 0 1 12 16q.825 0 1.412.587Q14 17.176 14 18t-.588 1.413A1.93 1.93 0 0 1 12 20m0-6q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m0-6q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 6q0-.824.588-1.412A1.93 1.93 0 0 1 12 4q.825 0 1.412.588Q14 5.175 14 6q0 .824-.588 1.412A1.93 1.93 0 0 1 12 8"
+                d="M128,96a32,32,0,1,0,32,32A32,32,0,0,0,128,96Zm0,48a16,16,0,1,1,16-16A16,16,0,0,1,128,144Zm0-64A32,32,0,1,0,96,48,32,32,0,0,0,128,80Zm0-48a16,16,0,1,1-16,16A16,16,0,0,1,128,32Zm0,144a32,32,0,1,0,32,32A32,32,0,0,0,128,176Zm0,48a16,16,0,1,1,16-16A16,16,0,0,1,128,224Z"
               />
             </svg>
           </div>
@@ -144,12 +145,13 @@ exports[`LobbyView > renders with AppBar android 1`] = `
             aria-hidden="true"
             fill="currentColor"
             height="24"
-            viewBox="0 0 24 24"
+            style="transform: scale(0.75); transform-origin: center;"
+            viewBox="0 0 256 256"
             width="24"
             xmlns="http://www.w3.org/2000/svg"
           >
             <path
-              d="M12 20q-.825 0-1.412-.587A1.93 1.93 0 0 1 10 18q0-.824.588-1.413A1.93 1.93 0 0 1 12 16q.825 0 1.412.587Q14 17.176 14 18t-.588 1.413A1.93 1.93 0 0 1 12 20m0-6q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m0-6q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 6q0-.824.588-1.412A1.93 1.93 0 0 1 12 4q.825 0 1.412.588Q14 5.175 14 6q0 .824-.588 1.412A1.93 1.93 0 0 1 12 8"
+              d="M128,96a32,32,0,1,0,32,32A32,32,0,0,0,128,96Zm0,48a16,16,0,1,1,16-16A16,16,0,0,1,128,144Zm0-64A32,32,0,1,0,96,48,32,32,0,0,0,128,80Zm0-48a16,16,0,1,1-16,16A16,16,0,0,1,128,32Zm0,144a32,32,0,1,0,32,32A32,32,0,0,0,128,176Zm0,48a16,16,0,1,1,16-16A16,16,0,0,1,128,224Z"
             />
           </svg>
         </button>
@@ -169,24 +171,24 @@ exports[`LobbyView > renders with AppBar android 1`] = `
             aria-hidden="true"
             fill="currentColor"
             height="24"
-            viewBox="0 0 24 24"
+            viewBox="0 0 256 256"
             width="24"
             xmlns="http://www.w3.org/2000/svg"
           >
             <path
-              d="M8 8v-.006l6.831 6.832-.002.002 1.414 1.415.003-.003 1.414 1.414-.003.003L20.5 20.5a1 1 0 0 1-1.414 1.414l-3.022-3.022A7.95 7.95 0 0 1 13 19.938V21a1 1 0 0 1-2 0v-1.062A8 8 0 0 1 4 12a1 1 0 1 1 2 0 6 6 0 0 0 8.587 5.415l-1.55-1.55A4.005 4.005 0 0 1 8 12v-1.172L2.086 4.914A1 1 0 0 1 3.5 3.5zm9.417 6.583 1.478 1.477A7.96 7.96 0 0 0 20 12a1 1 0 0 0-2 0c0 .925-.21 1.8-.583 2.583M8.073 5.238l7.793 7.793q.132-.495.134-1.031V6a4 4 0 0 0-7.927-.762"
+              d="M213.38,229.92a8,8,0,0,1-11.3-.54l-30.92-34A78.83,78.83,0,0,1,136,207.59V240a8,8,0,0,1-16,0V207.6A80.11,80.11,0,0,1,48,128a8,8,0,0,1,16,0,64.07,64.07,0,0,0,64,64,63.41,63.41,0,0,0,32.21-8.68l-11.1-12.2A48,48,0,0,1,80,128V95.09L42.08,53.38A8,8,0,0,1,53.92,42.62l160,176A8,8,0,0,1,213.38,229.92Zm-24.19-63.13a7.88,7.88,0,0,0,3.51.82,8,8,0,0,0,7.19-4.49A79.16,79.16,0,0,0,208,128a8,8,0,0,0-16,0,63.32,63.32,0,0,1-6.48,28.09A8,8,0,0,0,189.19,166.79Zm-27.33-29.22A8,8,0,0,0,175.74,133a49.49,49.49,0,0,0,.26-5V64A48,48,0,0,0,84,44.87a8,8,0,0,0,1.41,8.57Z"
             />
           </svg>
         </button>
         <button
           aria-busy="false"
-          aria-checked="false"
-          aria-disabled="true"
+          aria-checked="true"
+          aria-disabled="false"
           aria-labelledby="_r_3r_"
           class="_button_1nw83_8 _has-icon_1nw83_60 _icon-only_1nw83_53"
-          data-kind="primary"
+          data-kind="secondary"
           data-size="lg"
-          data-testid="incall_videomute"
+          data-testid="incall_deafen"
           role="switch"
           tabindex="0"
         >
@@ -194,12 +196,12 @@ exports[`LobbyView > renders with AppBar android 1`] = `
             aria-hidden="true"
             fill="currentColor"
             height="24"
-            viewBox="0 0 24 24"
+            viewBox="0 0 256 256"
             width="24"
             xmlns="http://www.w3.org/2000/svg"
           >
             <path
-              d="M2.747 2.753 4.35 4.355l.007-.003L18 17.994v.012l3.247 3.247a1 1 0 0 1-1.414 1.414l-2.898-2.898A2 2 0 0 1 16 20H6a4 4 0 0 1-4-4V8c0-.892.292-1.715.785-2.38L1.333 4.166a1 1 0 0 1 1.414-1.414M18 15.166 6.834 4H16a2 2 0 0 1 2 2v4.286l3.35-2.871a1 1 0 0 1 1.65.76v7.65a1 1 0 0 1-1.65.76L18 13.715z"
+              d="M201.89,54.66A103.43,103.43,0,0,0,128.79,24H128A104,104,0,0,0,24,128v56a24,24,0,0,0,24,24H64a24,24,0,0,0,24-24V144a24,24,0,0,0-24-24H40.36A88,88,0,0,1,128,40h.67a87.71,87.71,0,0,1,87,80H192a24,24,0,0,0-24,24v40a24,24,0,0,0,24,24h16a24,24,0,0,0,24-24V128A103.41,103.41,0,0,0,201.89,54.66ZM64,136a8,8,0,0,1,8,8v40a8,8,0,0,1-8,8H48a8,8,0,0,1-8-8V136Zm152,48a8,8,0,0,1-8,8H192a8,8,0,0,1-8-8V144a8,8,0,0,1,8-8h24Z"
             />
           </svg>
         </button>
@@ -216,12 +218,12 @@ exports[`LobbyView > renders with AppBar android 1`] = `
             aria-hidden="true"
             fill="currentColor"
             height="24"
-            viewBox="0 0 24 24"
+            viewBox="0 0 256 256"
             width="24"
             xmlns="http://www.w3.org/2000/svg"
           >
             <path
-              d="m2.765 16.02-2.47-2.416A1.02 1.02 0 0 1 0 12.852q0-.456.295-.751a15.6 15.6 0 0 1 5.316-3.786A15.9 15.9 0 0 1 12 7q3.355 0 6.39 1.329a16 16 0 0 1 5.315 3.772q.295.294.295.751t-.295.752l-2.47 2.416a1.047 1.047 0 0 1-1.396.108l-3.114-2.363a1.1 1.1 0 0 1-.322-.376 1.1 1.1 0 0 1-.108-.483v-2.27a13.6 13.6 0 0 0-2.12-.524C13.459 9.996 12 9.937 12 9.937s-1.459.059-2.174.175q-1.074.174-2.121.523v2.271q0 .268-.108.483a1.1 1.1 0 0 1-.322.376l-3.114 2.363a1.047 1.047 0 0 1-1.396-.107"
+              d="M231.59,90.13h0C175.44,34,80.56,34,24.41,90.13c-20,20-21.92,49.49-4.69,71.71A16,16,0,0,0,32.35,168a15.8,15.8,0,0,0,5.75-1.08l49-17.37.29-.11a16,16,0,0,0,9.75-11.73l5.9-29.52a76.52,76.52,0,0,1,49.68-.11h0l6.21,29.75a16,16,0,0,0,9.72,11.59l.29.11,49,17.39a16,16,0,0,0,18.38-5.06C253.51,139.62,251.58,110.13,231.59,90.13ZM223.67,152l-.3-.12-48.82-17.33-6.21-29.74A16,16,0,0,0,158,93a92.56,92.56,0,0,0-60.34.13,16,16,0,0,0-10.32,12l-5.9,29.51L32.63,151.86c-.1,0-.17.13-.27.17-12.33-15.91-11-36.23,3.36-50.58,25-25,58.65-37.53,92.28-37.53s67.27,12.51,92.28,37.53C234.61,115.8,236,136.12,223.67,152Zm.32,48a8,8,0,0,1-8,8H40a8,8,0,0,1,0-16H216A8,8,0,0,1,224,200Z"
             />
           </svg>
         </button>
@@ -253,12 +255,12 @@ exports[`LobbyView > renders with AppBar ios 1`] = `
             aria-hidden="true"
             fill="currentColor"
             height="1em"
-            viewBox="0 0 24 24"
+            viewBox="0 0 256 256"
             width="1em"
             xmlns="http://www.w3.org/2000/svg"
           >
             <path
-              d="m13.3 17.3-4.6-4.6a.9.9 0 0 1-.213-.325A1.1 1.1 0 0 1 8.425 12q0-.2.062-.375A.9.9 0 0 1 8.7 11.3l4.6-4.6a.95.95 0 0 1 .7-.275q.425 0 .7.275a.95.95 0 0 1 .275.7.95.95 0 0 1-.275.7L10.8 12l3.9 3.9a.95.95 0 0 1 .275.7.95.95 0 0 1-.275.7.95.95 0 0 1-.7.275.95.95 0 0 1-.7-.275"
+              d="M165.66,202.34a8,8,0,0,1-11.32,11.32l-80-80a8,8,0,0,1,0-11.32l80-80a8,8,0,0,1,11.32,11.32L91.31,128Z"
             />
           </svg>
         </div>
@@ -348,12 +350,13 @@ exports[`LobbyView > renders with AppBar ios 1`] = `
               aria-hidden="true"
               fill="currentColor"
               height="1em"
-              viewBox="0 0 24 24"
+              style="transform: scale(0.75); transform-origin: center;"
+              viewBox="0 0 256 256"
               width="1em"
               xmlns="http://www.w3.org/2000/svg"
             >
               <path
-                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                d="M128,96a32,32,0,1,0,32,32A32,32,0,0,0,128,96Zm0,48a16,16,0,1,1,16-16A16,16,0,0,1,128,144Zm0-64A32,32,0,1,0,96,48,32,32,0,0,0,128,80Zm0-48a16,16,0,1,1-16,16A16,16,0,0,1,128,32Zm0,144a32,32,0,1,0,32,32A32,32,0,0,0,128,176Zm0,48a16,16,0,1,1,16-16A16,16,0,0,1,128,224Z"
               />
             </svg>
           </div>
@@ -375,12 +378,13 @@ exports[`LobbyView > renders with AppBar ios 1`] = `
             aria-hidden="true"
             fill="currentColor"
             height="24"
-            viewBox="0 0 24 24"
+            style="transform: scale(0.75); transform-origin: center;"
+            viewBox="0 0 256 256"
             width="24"
             xmlns="http://www.w3.org/2000/svg"
           >
             <path
-              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+              d="M128,96a32,32,0,1,0,32,32A32,32,0,0,0,128,96Zm0,48a16,16,0,1,1,16-16A16,16,0,0,1,128,144ZM48,96a32,32,0,1,0,32,32A32,32,0,0,0,48,96Zm0,48a16,16,0,1,1,16-16A16,16,0,0,1,48,144ZM208,96a32,32,0,1,0,32,32A32,32,0,0,0,208,96Zm0,48a16,16,0,1,1,16-16A16,16,0,0,1,208,144Z"
             />
           </svg>
         </button>
@@ -400,24 +404,24 @@ exports[`LobbyView > renders with AppBar ios 1`] = `
             aria-hidden="true"
             fill="currentColor"
             height="24"
-            viewBox="0 0 24 24"
+            viewBox="0 0 256 256"
             width="24"
             xmlns="http://www.w3.org/2000/svg"
           >
             <path
-              d="M8 8v-.006l6.831 6.832-.002.002 1.414 1.415.003-.003 1.414 1.414-.003.003L20.5 20.5a1 1 0 0 1-1.414 1.414l-3.022-3.022A7.95 7.95 0 0 1 13 19.938V21a1 1 0 0 1-2 0v-1.062A8 8 0 0 1 4 12a1 1 0 1 1 2 0 6 6 0 0 0 8.587 5.415l-1.55-1.55A4.005 4.005 0 0 1 8 12v-1.172L2.086 4.914A1 1 0 0 1 3.5 3.5zm9.417 6.583 1.478 1.477A7.96 7.96 0 0 0 20 12a1 1 0 0 0-2 0c0 .925-.21 1.8-.583 2.583M8.073 5.238l7.793 7.793q.132-.495.134-1.031V6a4 4 0 0 0-7.927-.762"
+              d="M213.38,229.92a8,8,0,0,1-11.3-.54l-30.92-34A78.83,78.83,0,0,1,136,207.59V240a8,8,0,0,1-16,0V207.6A80.11,80.11,0,0,1,48,128a8,8,0,0,1,16,0,64.07,64.07,0,0,0,64,64,63.41,63.41,0,0,0,32.21-8.68l-11.1-12.2A48,48,0,0,1,80,128V95.09L42.08,53.38A8,8,0,0,1,53.92,42.62l160,176A8,8,0,0,1,213.38,229.92Zm-24.19-63.13a7.88,7.88,0,0,0,3.51.82,8,8,0,0,0,7.19-4.49A79.16,79.16,0,0,0,208,128a8,8,0,0,0-16,0,63.32,63.32,0,0,1-6.48,28.09A8,8,0,0,0,189.19,166.79Zm-27.33-29.22A8,8,0,0,0,175.74,133a49.49,49.49,0,0,0,.26-5V64A48,48,0,0,0,84,44.87a8,8,0,0,0,1.41,8.57Z"
             />
           </svg>
         </button>
         <button
           aria-busy="false"
-          aria-checked="false"
-          aria-disabled="true"
+          aria-checked="true"
+          aria-disabled="false"
           aria-labelledby="_r_4v_"
           class="_button_1nw83_8 _has-icon_1nw83_60 _icon-only_1nw83_53"
-          data-kind="primary"
+          data-kind="secondary"
           data-size="lg"
-          data-testid="incall_videomute"
+          data-testid="incall_deafen"
           role="switch"
           tabindex="0"
         >
@@ -425,12 +429,12 @@ exports[`LobbyView > renders with AppBar ios 1`] = `
             aria-hidden="true"
             fill="currentColor"
             height="24"
-            viewBox="0 0 24 24"
+            viewBox="0 0 256 256"
             width="24"
             xmlns="http://www.w3.org/2000/svg"
           >
             <path
-              d="M2.747 2.753 4.35 4.355l.007-.003L18 17.994v.012l3.247 3.247a1 1 0 0 1-1.414 1.414l-2.898-2.898A2 2 0 0 1 16 20H6a4 4 0 0 1-4-4V8c0-.892.292-1.715.785-2.38L1.333 4.166a1 1 0 0 1 1.414-1.414M18 15.166 6.834 4H16a2 2 0 0 1 2 2v4.286l3.35-2.871a1 1 0 0 1 1.65.76v7.65a1 1 0 0 1-1.65.76L18 13.715z"
+              d="M201.89,54.66A103.43,103.43,0,0,0,128.79,24H128A104,104,0,0,0,24,128v56a24,24,0,0,0,24,24H64a24,24,0,0,0,24-24V144a24,24,0,0,0-24-24H40.36A88,88,0,0,1,128,40h.67a87.71,87.71,0,0,1,87,80H192a24,24,0,0,0-24,24v40a24,24,0,0,0,24,24h16a24,24,0,0,0,24-24V128A103.41,103.41,0,0,0,201.89,54.66ZM64,136a8,8,0,0,1,8,8v40a8,8,0,0,1-8,8H48a8,8,0,0,1-8-8V136Zm152,48a8,8,0,0,1-8,8H192a8,8,0,0,1-8-8V144a8,8,0,0,1,8-8h24Z"
             />
           </svg>
         </button>
@@ -447,12 +451,12 @@ exports[`LobbyView > renders with AppBar ios 1`] = `
             aria-hidden="true"
             fill="currentColor"
             height="24"
-            viewBox="0 0 24 24"
+            viewBox="0 0 256 256"
             width="24"
             xmlns="http://www.w3.org/2000/svg"
           >
             <path
-              d="m2.765 16.02-2.47-2.416A1.02 1.02 0 0 1 0 12.852q0-.456.295-.751a15.6 15.6 0 0 1 5.316-3.786A15.9 15.9 0 0 1 12 7q3.355 0 6.39 1.329a16 16 0 0 1 5.315 3.772q.295.294.295.751t-.295.752l-2.47 2.416a1.047 1.047 0 0 1-1.396.108l-3.114-2.363a1.1 1.1 0 0 1-.322-.376 1.1 1.1 0 0 1-.108-.483v-2.27a13.6 13.6 0 0 0-2.12-.524C13.459 9.996 12 9.937 12 9.937s-1.459.059-2.174.175q-1.074.174-2.121.523v2.271q0 .268-.108.483a1.1 1.1 0 0 1-.322.376l-3.114 2.363a1.047 1.047 0 0 1-1.396-.107"
+              d="M231.59,90.13h0C175.44,34,80.56,34,24.41,90.13c-20,20-21.92,49.49-4.69,71.71A16,16,0,0,0,32.35,168a15.8,15.8,0,0,0,5.75-1.08l49-17.37.29-.11a16,16,0,0,0,9.75-11.73l5.9-29.52a76.52,76.52,0,0,1,49.68-.11h0l6.21,29.75a16,16,0,0,0,9.72,11.59l.29.11,49,17.39a16,16,0,0,0,18.38-5.06C253.51,139.62,251.58,110.13,231.59,90.13ZM223.67,152l-.3-.12-48.82-17.33-6.21-29.74A16,16,0,0,0,158,93a92.56,92.56,0,0,0-60.34.13,16,16,0,0,0-10.32,12l-5.9,29.51L32.63,151.86c-.1,0-.17.13-.27.17-12.33-15.91-11-36.23,3.36-50.58,25-25,58.65-37.53,92.28-37.53s67.27,12.51,92.28,37.53C234.61,115.8,236,136.12,223.67,152Zm.32,48a8,8,0,0,1-8,8H40a8,8,0,0,1,0-16H216A8,8,0,0,1,224,200Z"
             />
           </svg>
         </button>
@@ -505,12 +509,12 @@ exports[`LobbyView > renders with header and participant count 1`] = `
                 data-encrypted="false"
                 fill="currentColor"
                 height="16"
-                viewBox="0 0 24 24"
+                viewBox="0 0 256 256"
                 width="16"
                 xmlns="http://www.w3.org/2000/svg"
               >
                 <path
-                  d="M6 22q-.825 0-1.412-.587A1.93 1.93 0 0 1 4 20V10q0-.825.588-1.412a2 2 0 0 1 .702-.463L1.333 4.167a1 1 0 0 1 1.414-1.414L7 7.006v-.012l13 13v.012l1.247 1.247a1 1 0 1 1-1.414 1.414l-.896-.896A1.94 1.94 0 0 1 18 22zm14-4.834V10q0-.825-.587-1.412A1.93 1.93 0 0 0 18 8h-1V6q0-2.075-1.463-3.537Q14.075 1 12 1T8.463 2.463a4.9 4.9 0 0 0-1.22 1.946L9 6.166V6q0-1.25.875-2.125A2.9 2.9 0 0 1 12 3q1.25 0 2.125.875T15 6v2h-4.166z"
+                  d="M208,80H96V56a32,32,0,0,1,32-32c15.37,0,29.2,11,32.16,25.59a8,8,0,0,0,15.68-3.18C171.32,24.15,151.2,8,128,8A48.05,48.05,0,0,0,80,56V80H48A16,16,0,0,0,32,96V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V96A16,16,0,0,0,208,80Zm0,128H48V96H208V208Zm-68-56a12,12,0,1,1-12-12A12,12,0,0,1,140,152Z"
                 />
               </svg>
             </span>
@@ -522,18 +526,12 @@ exports[`LobbyView > renders with header and participant count 1`] = `
               aria-label="Participants"
               fill="currentColor"
               height="20"
-              viewBox="0 0 24 24"
+              viewBox="0 0 256 256"
               width="20"
               xmlns="http://www.w3.org/2000/svg"
             >
               <path
-                d="M9.175 13.825Q10.35 15 12 15t2.825-1.175T16 11t-1.175-2.825T12 7 9.175 8.175 8 11t1.175 2.825m4.237-1.412A1.93 1.93 0 0 1 12 13q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 11q0-.825.588-1.412A1.93 1.93 0 0 1 12 9q.825 0 1.412.588Q14 10.175 14 11t-.588 1.412"
-              />
-              <path
-                d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10m-2 0a8 8 0 1 0-16 0 8 8 0 0 0 16 0"
-              />
-              <path
-                d="M16.23 18.792a13 13 0 0 0-1.455-.455 11.6 11.6 0 0 0-5.55 0q-.73.18-1.455.455a8 8 0 0 1-1.729-1.454q1.336-.618 2.709-.95A13.8 13.8 0 0 1 12 16q1.65 0 3.25.387 1.373.333 2.709.95a8 8 0 0 1-1.73 1.455"
+                d="M230.92,212c-15.23-26.33-38.7-45.21-66.09-54.16a72,72,0,1,0-73.66,0C63.78,166.78,40.31,185.66,25.08,212a8,8,0,1,0,13.85,8c18.84-32.56,52.14-52,89.07-52s70.23,19.44,89.07,52a8,8,0,1,0,13.85-8ZM72,96a56,56,0,1,1,56,56A56.06,56.06,0,0,1,72,96Z"
               />
             </svg>
             <span
@@ -625,12 +623,13 @@ exports[`LobbyView > renders with header and participant count 1`] = `
               aria-hidden="true"
               fill="currentColor"
               height="1em"
-              viewBox="0 0 24 24"
+              style="transform: scale(0.75); transform-origin: center;"
+              viewBox="0 0 256 256"
               width="1em"
               xmlns="http://www.w3.org/2000/svg"
             >
               <path
-                d="M12 20q-.825 0-1.412-.587A1.93 1.93 0 0 1 10 18q0-.824.588-1.413A1.93 1.93 0 0 1 12 16q.825 0 1.412.587Q14 17.176 14 18t-.588 1.413A1.93 1.93 0 0 1 12 20m0-6q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m0-6q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 6q0-.824.588-1.412A1.93 1.93 0 0 1 12 4q.825 0 1.412.588Q14 5.175 14 6q0 .824-.588 1.412A1.93 1.93 0 0 1 12 8"
+                d="M128,96a32,32,0,1,0,32,32A32,32,0,0,0,128,96Zm0,48a16,16,0,1,1,16-16A16,16,0,0,1,128,144Zm0-64A32,32,0,1,0,96,48,32,32,0,0,0,128,80Zm0-48a16,16,0,1,1-16,16A16,16,0,0,1,128,32Zm0,144a32,32,0,1,0,32,32A32,32,0,0,0,128,176Zm0,48a16,16,0,1,1,16-16A16,16,0,0,1,128,224Z"
               />
             </svg>
           </div>
@@ -756,12 +755,13 @@ exports[`LobbyView > renders with header and participant count 1`] = `
             aria-hidden="true"
             fill="currentColor"
             height="24"
-            viewBox="0 0 24 24"
+            style="transform: scale(0.75); transform-origin: center;"
+            viewBox="0 0 256 256"
             width="24"
             xmlns="http://www.w3.org/2000/svg"
           >
             <path
-              d="M12 20q-.825 0-1.412-.587A1.93 1.93 0 0 1 10 18q0-.824.588-1.413A1.93 1.93 0 0 1 12 16q.825 0 1.412.587Q14 17.176 14 18t-.588 1.413A1.93 1.93 0 0 1 12 20m0-6q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m0-6q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 6q0-.824.588-1.412A1.93 1.93 0 0 1 12 4q.825 0 1.412.588Q14 5.175 14 6q0 .824-.588 1.412A1.93 1.93 0 0 1 12 8"
+              d="M128,96a32,32,0,1,0,32,32A32,32,0,0,0,128,96Zm0,48a16,16,0,1,1,16-16A16,16,0,0,1,128,144Zm0-64A32,32,0,1,0,96,48,32,32,0,0,0,128,80Zm0-48a16,16,0,1,1-16,16A16,16,0,0,1,128,32Zm0,144a32,32,0,1,0,32,32A32,32,0,0,0,128,176Zm0,48a16,16,0,1,1,16-16A16,16,0,0,1,128,224Z"
             />
           </svg>
         </button>
@@ -781,24 +781,24 @@ exports[`LobbyView > renders with header and participant count 1`] = `
             aria-hidden="true"
             fill="currentColor"
             height="24"
-            viewBox="0 0 24 24"
+            viewBox="0 0 256 256"
             width="24"
             xmlns="http://www.w3.org/2000/svg"
           >
             <path
-              d="M8 8v-.006l6.831 6.832-.002.002 1.414 1.415.003-.003 1.414 1.414-.003.003L20.5 20.5a1 1 0 0 1-1.414 1.414l-3.022-3.022A7.95 7.95 0 0 1 13 19.938V21a1 1 0 0 1-2 0v-1.062A8 8 0 0 1 4 12a1 1 0 1 1 2 0 6 6 0 0 0 8.587 5.415l-1.55-1.55A4.005 4.005 0 0 1 8 12v-1.172L2.086 4.914A1 1 0 0 1 3.5 3.5zm9.417 6.583 1.478 1.477A7.96 7.96 0 0 0 20 12a1 1 0 0 0-2 0c0 .925-.21 1.8-.583 2.583M8.073 5.238l7.793 7.793q.132-.495.134-1.031V6a4 4 0 0 0-7.927-.762"
+              d="M213.38,229.92a8,8,0,0,1-11.3-.54l-30.92-34A78.83,78.83,0,0,1,136,207.59V240a8,8,0,0,1-16,0V207.6A80.11,80.11,0,0,1,48,128a8,8,0,0,1,16,0,64.07,64.07,0,0,0,64,64,63.41,63.41,0,0,0,32.21-8.68l-11.1-12.2A48,48,0,0,1,80,128V95.09L42.08,53.38A8,8,0,0,1,53.92,42.62l160,176A8,8,0,0,1,213.38,229.92Zm-24.19-63.13a7.88,7.88,0,0,0,3.51.82,8,8,0,0,0,7.19-4.49A79.16,79.16,0,0,0,208,128a8,8,0,0,0-16,0,63.32,63.32,0,0,1-6.48,28.09A8,8,0,0,0,189.19,166.79Zm-27.33-29.22A8,8,0,0,0,175.74,133a49.49,49.49,0,0,0,.26-5V64A48,48,0,0,0,84,44.87a8,8,0,0,0,1.41,8.57Z"
             />
           </svg>
         </button>
         <button
           aria-busy="false"
-          aria-checked="false"
-          aria-disabled="true"
+          aria-checked="true"
+          aria-disabled="false"
           aria-labelledby="_r_l_"
           class="_button_1nw83_8 _has-icon_1nw83_60 _icon-only_1nw83_53"
-          data-kind="primary"
+          data-kind="secondary"
           data-size="lg"
-          data-testid="incall_videomute"
+          data-testid="incall_deafen"
           role="switch"
           tabindex="0"
         >
@@ -806,12 +806,12 @@ exports[`LobbyView > renders with header and participant count 1`] = `
             aria-hidden="true"
             fill="currentColor"
             height="24"
-            viewBox="0 0 24 24"
+            viewBox="0 0 256 256"
             width="24"
             xmlns="http://www.w3.org/2000/svg"
           >
             <path
-              d="M2.747 2.753 4.35 4.355l.007-.003L18 17.994v.012l3.247 3.247a1 1 0 0 1-1.414 1.414l-2.898-2.898A2 2 0 0 1 16 20H6a4 4 0 0 1-4-4V8c0-.892.292-1.715.785-2.38L1.333 4.166a1 1 0 0 1 1.414-1.414M18 15.166 6.834 4H16a2 2 0 0 1 2 2v4.286l3.35-2.871a1 1 0 0 1 1.65.76v7.65a1 1 0 0 1-1.65.76L18 13.715z"
+              d="M201.89,54.66A103.43,103.43,0,0,0,128.79,24H128A104,104,0,0,0,24,128v56a24,24,0,0,0,24,24H64a24,24,0,0,0,24-24V144a24,24,0,0,0-24-24H40.36A88,88,0,0,1,128,40h.67a87.71,87.71,0,0,1,87,80H192a24,24,0,0,0-24,24v40a24,24,0,0,0,24,24h16a24,24,0,0,0,24-24V128A103.41,103.41,0,0,0,201.89,54.66ZM64,136a8,8,0,0,1,8,8v40a8,8,0,0,1-8,8H48a8,8,0,0,1-8-8V136Zm152,48a8,8,0,0,1-8,8H192a8,8,0,0,1-8-8V144a8,8,0,0,1,8-8h24Z"
             />
           </svg>
         </button>
@@ -828,12 +828,12 @@ exports[`LobbyView > renders with header and participant count 1`] = `
             aria-hidden="true"
             fill="currentColor"
             height="24"
-            viewBox="0 0 24 24"
+            viewBox="0 0 256 256"
             width="24"
             xmlns="http://www.w3.org/2000/svg"
           >
             <path
-              d="m2.765 16.02-2.47-2.416A1.02 1.02 0 0 1 0 12.852q0-.456.295-.751a15.6 15.6 0 0 1 5.316-3.786A15.9 15.9 0 0 1 12 7q3.355 0 6.39 1.329a16 16 0 0 1 5.315 3.772q.295.294.295.751t-.295.752l-2.47 2.416a1.047 1.047 0 0 1-1.396.108l-3.114-2.363a1.1 1.1 0 0 1-.322-.376 1.1 1.1 0 0 1-.108-.483v-2.27a13.6 13.6 0 0 0-2.12-.524C13.459 9.996 12 9.937 12 9.937s-1.459.059-2.174.175q-1.074.174-2.121.523v2.271q0 .268-.108.483a1.1 1.1 0 0 1-.322.376l-3.114 2.363a1.047 1.047 0 0 1-1.396-.107"
+              d="M231.59,90.13h0C175.44,34,80.56,34,24.41,90.13c-20,20-21.92,49.49-4.69,71.71A16,16,0,0,0,32.35,168a15.8,15.8,0,0,0,5.75-1.08l49-17.37.29-.11a16,16,0,0,0,9.75-11.73l5.9-29.52a76.52,76.52,0,0,1,49.68-.11h0l6.21,29.75a16,16,0,0,0,9.72,11.59l.29.11,49,17.39a16,16,0,0,0,18.38-5.06C253.51,139.62,251.58,110.13,231.59,90.13ZM223.67,152l-.3-.12-48.82-17.33-6.21-29.74A16,16,0,0,0,158,93a92.56,92.56,0,0,0-60.34.13,16,16,0,0,0-10.32,12l-5.9,29.51L32.63,151.86c-.1,0-.17.13-.27.17-12.33-15.91-11-36.23,3.36-50.58,25-25,58.65-37.53,92.28-37.53s67.27,12.51,92.28,37.53C234.61,115.8,236,136.12,223.67,152Zm.32,48a8,8,0,0,1-8,8H40a8,8,0,0,1,0-16H216A8,8,0,0,1,224,200Z"
             />
           </svg>
         </button>
diff --git a/src/room/useLoadGroupCall.ts b/src/room/useLoadGroupCall.ts
index 2cd0d40b03..a494e9381e 100644
--- a/src/room/useLoadGroupCall.ts
+++ b/src/room/useLoadGroupCall.ts
@@ -28,11 +28,7 @@ import {
 import { logger } from "matrix-js-sdk/lib/logger";
 import { type MatrixRTCSession } from "matrix-js-sdk/lib/matrixrtc";
 import { useTranslation } from "react-i18next";
-import {
-  AdminIcon,
-  CloseIcon,
-  EndCallIcon,
-} from "@vector-im/compound-design-tokens/assets/web/icons";
+import { Shield, X, PhoneDisconnect } from "@phosphor-icons/react";
 
 import { widget } from "../widget";
 
@@ -136,7 +132,7 @@ export const useLoadGroupCall = (
   const bannedError = useCallback(
     (): CallTerminatedMessage =>
       new CallTerminatedMessage(
-        AdminIcon,
+        Shield,
         t("group_call_loader.banned_heading"),
         t("group_call_loader.banned_body"),
         leaveReason(),
@@ -146,7 +142,7 @@ export const useLoadGroupCall = (
   const knockRejectError = useCallback(
     (): CallTerminatedMessage =>
       new CallTerminatedMessage(
-        CloseIcon,
+        X,
         t("group_call_loader.knock_reject_heading"),
         t("group_call_loader.knock_reject_body"),
         leaveReason(),
@@ -156,7 +152,7 @@ export const useLoadGroupCall = (
   const removeNoticeError = useCallback(
     (): CallTerminatedMessage =>
       new CallTerminatedMessage(
-        EndCallIcon,
+        PhoneDisconnect,
         t("group_call_loader.call_ended_heading"),
         t("group_call_loader.call_ended_body"),
         leaveReason(),
diff --git a/src/state/MuteStates.ts b/src/state/MuteStates.ts
index d89cb8442a..8050a46cb2 100644
--- a/src/state/MuteStates.ts
+++ b/src/state/MuteStates.ts
@@ -27,6 +27,8 @@ import { type MediaDevices, type MediaDevice } from "../state/MediaDevices";
 import { ElementWidgetActions, widget } from "../widget";
 import { type ObservableScope } from "./ObservableScope";
 import { type Behavior, constant } from "./Behavior";
+import { muteAllAudio as muteAllAudioSetting } from "../settings/settings";
+import { muteAllAudio$ } from "./MuteAllAudioModel";
 
 interface MuteStateData {
   enabled$: Observable<boolean>;
@@ -220,8 +222,12 @@ export class MuteStates {
     if (widget !== null) {
       // Sync our mute states with the hosting client
       const widgetApiState$ = combineLatest(
-        [this.audio.enabled$, this.video.enabled$],
-        (audio, video) => ({ audio_enabled: audio, video_enabled: video }),
+        [this.audio.enabled$, this.video.enabled$, muteAllAudio$],
+        (audio, video, muteAllAudio) => ({
+          audio_enabled: audio,
+          video_enabled: video,
+          audio_output_enabled: !muteAllAudio,
+        }),
       );
       widgetApiState$.pipe(this.scope.bind()).subscribe((state) => {
         widget!.api.transport
@@ -266,6 +272,21 @@ export class MuteStates {
             newState.video_enabled = ev.detail.data.video_enabled;
             setVideoEnabled(newState.video_enabled);
           }
+          if (
+            ev.detail.data.audio_output_enabled != null &&
+            typeof ev.detail.data.audio_output_enabled === "boolean"
+          ) {
+            (newState as any).audio_output_enabled =
+              ev.detail.data.audio_output_enabled;
+            if (
+              muteAllAudioSetting.getValue() ===
+              ev.detail.data.audio_output_enabled
+            ) {
+              muteAllAudioSetting.setValue(
+                !ev.detail.data.audio_output_enabled,
+              );
+            }
+          }
           widget!.api.transport.reply(ev.detail, newState);
         });
     }
diff --git a/src/tile/GridTile.tsx b/src/tile/GridTile.tsx
index 657bf0bc88..1544e41da1 100644
--- a/src/tile/GridTile.tsx
+++ b/src/tile/GridTile.tsx
@@ -19,17 +19,15 @@ import { type animated } from "@react-spring/web";
 import classNames from "classnames";
 import { useTranslation } from "react-i18next";
 import {
-  MicOnSolidIcon,
-  MicOffSolidIcon,
-  MicOffIcon,
-  OverflowHorizontalIcon,
-  VolumeOnIcon,
-  VolumeOffIcon,
-  VisibilityOnIcon,
-  UserProfileIcon,
-  VolumeOffSolidIcon,
-  SwitchCameraSolidIcon,
-} from "@vector-im/compound-design-tokens/assets/web/icons";
+  User,
+  SpeakerSlash,
+  SpeakerHigh,
+  ArrowsClockwise,
+  Microphone,
+  MicrophoneSlash,
+  DotsThreeOutline,
+  Eye,
+} from "@phosphor-icons/react";
 import {
   ContextMenu,
   MenuItem,
@@ -155,10 +153,10 @@ const UserMediaTile: FC<UserMediaTileProps> = ({
   }, [targetWidth, targetHeight, vm]);
 
   const AudioIcon = playbackMuted
-    ? VolumeOffSolidIcon
+    ? (props: any) => <SpeakerSlash weight="fill" {...props} />
     : audioEnabled
-      ? MicOnSolidIcon
-      : MicOffSolidIcon;
+      ? (props: any) => <Microphone weight="fill" {...props} />
+      : (props: any) => <MicrophoneSlash weight="fill" {...props} />;
   const audioIconLabel = playbackMuted
     ? t("video_tile.muted_for_me")
     : audioEnabled
@@ -196,13 +194,22 @@ const UserMediaTile: FC<UserMediaTileProps> = ({
         [styles.handRaised]: !showSpeaking && handRaised,
       })}
       nameTagLeadingIcon={
-        <AudioIcon
-          width={20}
-          height={20}
-          aria-label={audioIconLabel}
-          data-muted={playbackMuted || !audioEnabled}
-          className={styles.muteIcon}
-        />
+        playbackMuted ? (
+          <SpeakerSlash
+            width={20}
+            height={20}
+            aria-label={audioIconLabel}
+            className={styles.muteIcon}
+          />
+        ) : (
+          <AudioIcon
+            width={20}
+            height={20}
+            aria-label={audioIconLabel}
+            data-muted={!audioEnabled}
+            className={styles.muteIcon}
+          />
+        )
       }
       displayName={displayName}
       mxcAvatarUrl={mxcAvatarUrl}
@@ -218,7 +225,15 @@ const UserMediaTile: FC<UserMediaTileProps> = ({
                 aria-label={t("common.options")}
                 tabIndex={focusable ? undefined : -1}
               >
-                <OverflowHorizontalIcon aria-hidden width={20} height={20} />
+                <DotsThreeOutline
+                  aria-hidden
+                  width={18}
+                  height={18}
+                  style={{
+                    transform: "scale(0.75)",
+                    transformOrigin: "center",
+                  }}
+                />
               </button>
             }
             side="left"
@@ -293,13 +308,13 @@ const LocalUserMediaTile: FC<LocalUserMediaTileProps> = ({
             onClick={switchCamera}
             tabIndex={focusable ? undefined : -1}
           >
-            <SwitchCameraSolidIcon aria-hidden width={20} height={20} />
+            <ArrowsClockwise weight="fill" width={20} height={20} aria-hidden />
           </button>
         )
       }
       menuStart={
         <ToggleMenuItem
-          Icon={VisibilityOnIcon}
+          Icon={Eye}
           label={t("video_tile.always_show")}
           checked={alwaysShow}
           onSelect={onSelectAlwaysShow}
@@ -308,7 +323,7 @@ const LocalUserMediaTile: FC<LocalUserMediaTileProps> = ({
       menuEnd={
         onOpenProfile && (
           <MenuItem
-            Icon={UserProfileIcon}
+            Icon={User}
             label={t("common.profile")}
             onSelect={onOpenProfile}
           />
@@ -347,7 +362,7 @@ const RemoteUserMediaTile: FC<RemoteUserMediaTileProps> = ({
     [vm],
   );
 
-  const VolumeIcon = playbackMuted ? VolumeOffIcon : VolumeOnIcon;
+  const VolumeIcon = playbackMuted ? SpeakerSlash : SpeakerHigh;
 
   return (
     <UserMediaTile
@@ -359,7 +374,7 @@ const RemoteUserMediaTile: FC<RemoteUserMediaTileProps> = ({
       menuStart={
         <>
           <ToggleMenuItem
-            Icon={MicOffIcon}
+            Icon={MicrophoneSlash}
             label={t("video_tile.mute_for_me")}
             checked={playbackMuted}
             onSelect={onSelectMute}
diff --git a/src/tile/MediaView.tsx b/src/tile/MediaView.tsx
index bd57cb2485..4035eec8ce 100644
--- a/src/tile/MediaView.tsx
+++ b/src/tile/MediaView.tsx
@@ -12,7 +12,7 @@ import { useTranslation } from "react-i18next";
 import classNames from "classnames";
 import { VideoTrack } from "@livekit/components-react";
 import { Text, Tooltip } from "@vector-im/compound-web";
-import { ErrorSolidIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
+import { Warning } from "@phosphor-icons/react";
 
 import styles from "./MediaView.module.css";
 import { Avatar } from "../Avatar";
@@ -101,7 +101,8 @@ export const MediaView: FC<Props> = ({
       isTriggerInteractive={false}
       nonInteractiveTriggerTabIndex={focusable ? undefined : -1}
     >
-      <ErrorSolidIcon
+      <Warning
+        weight="fill"
         width={20}
         height={20}
         className={styles.errorIcon}
diff --git a/src/tile/RingingStatus.tsx b/src/tile/RingingStatus.tsx
index 384d3c65b5..74d5c81c60 100644
--- a/src/tile/RingingStatus.tsx
+++ b/src/tile/RingingStatus.tsx
@@ -6,11 +6,7 @@ Please see LICENSE in the repository root for full details.
 */
 
 import { type FC } from "react";
-import {
-  VideoCallSolidIcon,
-  VoiceCallSolidIcon,
-  EndCallIcon,
-} from "@vector-im/compound-design-tokens/assets/web/icons";
+import { VideoCamera, Phone, PhoneDisconnect } from "@phosphor-icons/react";
 import { useTranslation } from "react-i18next";
 
 import { type RingingMediaViewModel } from "../state/media/RingingMediaViewModel";
@@ -26,13 +22,13 @@ export const RingingStatus: FC<Props> = ({ vm }) => {
   const Icon =
     pickupState === "ringing"
       ? vm.intent === "video"
-        ? VideoCallSolidIcon
-        : VoiceCallSolidIcon
-      : EndCallIcon;
+        ? VideoCamera
+        : Phone
+      : PhoneDisconnect;
 
   return (
     <>
-      <Icon aria-hidden />
+      <Icon weight="fill" aria-hidden />
       {pickupState === "ringing"
         ? t("video_tile.calling")
         : t("video_tile.call_ended")}
diff --git a/src/tile/SpotlightTile.tsx b/src/tile/SpotlightTile.tsx
index 7f6b446a37..f1e0427460 100644
--- a/src/tile/SpotlightTile.tsx
+++ b/src/tile/SpotlightTile.tsx
@@ -20,11 +20,8 @@ import {
   CollapseIcon,
   ChevronLeftIcon,
   ChevronRightIcon,
-  VolumeOffIcon,
-  VolumeOnIcon,
-  VolumeOffSolidIcon,
-  VolumeOnSolidIcon,
 } from "@vector-im/compound-design-tokens/assets/web/icons";
+import { SpeakerHigh, SpeakerSlash } from "@phosphor-icons/react";
 import { animated } from "@react-spring/web";
 import { type Observable, map } from "rxjs";
 import { useObservableRef } from "observable-hooks";
@@ -323,11 +320,6 @@ const ScreenShareVolumeButton: FC<ScreenShareVolumeButtonProps> = ({ vm }) => {
   const playbackMuted = useBehavior(vm.playbackMuted$);
   const playbackVolume = useBehavior(vm.playbackVolume$);
 
-  const VolumeIcon = playbackMuted ? VolumeOffIcon : VolumeOnIcon;
-  const VolumeSolidIcon = playbackMuted
-    ? VolumeOffSolidIcon
-    : VolumeOnSolidIcon;
-
   const [volumeMenuOpen, setVolumeMenuOpen] = useState(false);
   const onMuteButtonClick = useCallback(() => vm.togglePlaybackMuted(), [vm]);
   const onVolumeChange = useCallback(
@@ -349,7 +341,11 @@ const ScreenShareVolumeButton: FC<ScreenShareVolumeButtonProps> = ({ vm }) => {
             className={styles.expand}
             aria-label={t("video_tile.screen_share_volume")}
           >
-            <VolumeSolidIcon aria-hidden width={20} height={20} />
+            {playbackMuted ? (
+              <SpeakerSlash size={20} />
+            ) : (
+              <SpeakerHigh size={20} />
+            )}
           </button>
         }
       >
@@ -361,7 +357,11 @@ const ScreenShareVolumeButton: FC<ScreenShareVolumeButtonProps> = ({ vm }) => {
           hideChevron={true}
         >
           <button className={styles.menuMuteButton} onClick={onMuteButtonClick}>
-            <VolumeIcon aria-hidden width={24} height={24} />
+            {playbackMuted ? (
+              <SpeakerSlash aria-hidden width={24} height={24} />
+            ) : (
+              <SpeakerHigh aria-hidden width={24} height={24} />
+            )}
           </button>
           <Slider
             className={styles.volumeSlider}
diff --git a/src/widget.ts b/src/widget.ts
index 462fc6e05c..6bb326e7d7 100644
--- a/src/widget.ts
+++ b/src/widget.ts
@@ -40,7 +40,8 @@ export enum ElementWidgetActions {
   // The data of the widget action request and the response are:
   // {
   //   audio_enabled?: boolean,
-  //   video_enabled?: boolean
+  //   video_enabled?: boolean,
+  //   audio_output_enabled?: boolean
   // }
   DeviceMute = "io.element.device_mute",
 }