diff --git a/res/css/compound/_Icon.pcss b/res/css/compound/_Icon.pcss
index 5edac93a7b..07f9eb5a0e 100644
--- a/res/css/compound/_Icon.pcss
+++ b/res/css/compound/_Icon.pcss
@@ -24,10 +24,6 @@ limitations under the License.
     box-sizing: border-box;
 }
 
-.mx_Icon_secondary-content {
-    color: $secondary-content;
-}
-
 .mx_Icon_accent {
     color: $accent;
 }
diff --git a/res/css/structures/_ToastContainer.pcss b/res/css/structures/_ToastContainer.pcss
index 5508fec63e..c33caf2758 100644
--- a/res/css/structures/_ToastContainer.pcss
+++ b/res/css/structures/_ToastContainer.pcss
@@ -16,9 +16,10 @@ limitations under the License.
 
 .mx_ToastContainer {
     position: absolute;
-    top: $spacing-4;
+    top: 0;
     left: 70px;
     z-index: 101;
+    padding: 4px;
     display: grid;
     grid-template-rows: 1fr 14px 6px;
 
@@ -33,29 +34,25 @@ limitations under the License.
     }
 
     .mx_Toast_toast {
-        background-color: $system;
-        border-radius: 8px;
-        box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.5);
-        color: $primary-content;
-        column-gap: $spacing-8;
-        display: grid;
-        grid-column: 1;
         grid-row: 1 / 3;
-        grid-template-columns: 24px 1fr;
+        grid-column: 1;
+        background-color: $system;
+        color: $primary-content;
+        box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.5);
+        border-radius: 8px;
         overflow: hidden;
-        padding: $spacing-16;
+        display: grid;
+        grid-template-columns: 22px 1fr;
+        column-gap: 8px;
+        row-gap: 4px;
+        padding: 8px;
 
         &.mx_Toast_hasIcon {
-            .mx_Toast_icon {
-                grid-column: 1;
-                grid-row: 1;
-            }
-
             &::before,
             &::after {
                 content: "";
-                width: 24px;
-                height: 24px;
+                width: 22px;
+                height: 22px;
                 grid-column: 1;
                 grid-row: 1;
                 mask-size: 100%;
@@ -65,6 +62,11 @@ limitations under the License.
                 background-repeat: no-repeat;
             }
 
+            &.mx_Toast_icon_verification::after {
+                mask-image: url("$(res)/img/e2e/normal.svg");
+                background-color: $primary-content;
+            }
+
             &.mx_Toast_icon_verification_warning {
                 /* white infill for the hollow svg mask */
                 &::before {
@@ -94,7 +96,6 @@ limitations under the License.
                 grid-column: 2;
             }
         }
-
         &:not(.mx_Toast_hasIcon) {
             padding-left: 12px;
 
@@ -103,19 +104,24 @@ limitations under the License.
             }
         }
 
+        .mx_Toast_title,
+        .mx_Toast_description {
+            padding-right: 8px;
+        }
+
         .mx_Toast_title {
-            align-items: center;
-            box-sizing: border-box;
-            column-gap: 8px;
             display: flex;
-            margin-bottom: $spacing-16;
+            align-items: center;
+            column-gap: 8px;
             width: 100%;
+            box-sizing: border-box;
 
             h2 {
-                color: $primary-content;
                 margin: 0;
-                font-size: $font-18px;
+                font-size: $font-15px;
                 font-weight: var(--font-semi-bold);
+                display: inline;
+                width: auto;
             }
 
             .mx_Toast_title_countIndicator {
@@ -129,21 +135,25 @@ limitations under the License.
         .mx_Toast_body {
             grid-column: 1 / 3;
             grid-row: 2;
-            position: relative;
         }
 
         .mx_Toast_buttons {
-            column-gap: $spacing-8;
             display: flex;
             justify-content: flex-end;
-            margin-top: $spacing-32;
+            column-gap: 5px;
+
+            .mx_AccessibleButton {
+                min-width: 96px;
+                box-sizing: border-box;
+            }
         }
 
         .mx_Toast_description {
-            color: $primary-content;
-            font-size: $font-15px;
-            font-weight: var(--font-semi-bold);
-            max-width: 300px;
+            max-width: 272px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            margin: 4px 0 11px 0;
+            font-size: $font-12px;
 
             a {
                 text-decoration: none;
@@ -151,10 +161,7 @@ limitations under the License.
         }
 
         .mx_Toast_detail {
-            display: block;
-            font-weight: var(--font-normal);
-            margin-top: $spacing-4;
-            max-width: 300px;
+            color: $secondary-content;
         }
 
         .mx_Toast_deviceID {
diff --git a/res/css/views/toasts/_IncomingLegacyCallToast.pcss b/res/css/views/toasts/_IncomingLegacyCallToast.pcss
index 0306aba8ac..e2092ef006 100644
--- a/res/css/views/toasts/_IncomingLegacyCallToast.pcss
+++ b/res/css/views/toasts/_IncomingLegacyCallToast.pcss
@@ -84,19 +84,20 @@ limitations under the License.
         }
 
         .mx_IncomingLegacyCallToast_buttons {
-            .mx_IncomingLegacyCallToast_button {
-                span {
-                    align-items: center;
-                    display: flex;
+            margin-top: 8px;
+            display: flex;
+            flex-direction: row;
+            gap: 12px;
 
-                    &::before {
-                        background-color: $button-fg-color;
-                        content: "";
-                        display: inline-block;
-                        margin-right: 8px;
-                        mask-position: center;
-                        mask-repeat: no-repeat;
-                    }
+            .mx_IncomingLegacyCallToast_button {
+                @mixin LegacyCallButton;
+                padding: 0px 8px;
+                flex-shrink: 0;
+                flex-grow: 1;
+                font-size: $font-15px;
+
+                span {
+                    padding: 8px 0;
                 }
 
                 &.mx_IncomingLegacyCallToast_button_accept span::before {
@@ -132,13 +133,6 @@ limitations under the License.
         }
     }
 
-    .mx_IncomingLegacyCallToast_silence,
-    .mx_IncomingLegacyCallToast_unSilence {
-        position: absolute;
-        right: 0;
-        top: 0;
-    }
-
     .mx_IncomingLegacyCallToast_silence::before {
         mask-image: url("$(res)/img/voip/silence.svg");
     }
diff --git a/res/img/compound/encryption-24px.svg b/res/img/compound/encryption-24px.svg
deleted file mode 100644
index c5f8b67fca..0000000000
--- a/res/img/compound/encryption-24px.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M12.0077 23.4869C12.0051 23.4875 12.0025 23.4881 12 23.4886C11.9975 23.4881 11.9949 23.4875 11.9923 23.4869C11.9204 23.4706 11.8129 23.4452 11.6749 23.4092C11.3989 23.3373 11.0015 23.2235 10.5233 23.0575C9.56541 22.725 8.29205 22.186 7.02249 21.3608C4.48971 19.7145 2 16.954 2 12.405V3.44957L12 0.521L22 3.44957V12.405C22 16.954 19.5103 19.7145 16.9775 21.3608C15.7079 22.186 14.4346 22.725 13.4767 23.0575C12.9985 23.2235 12.6011 23.3373 12.3251 23.4092C12.1871 23.4452 12.0796 23.4706 12.0077 23.4869Z" fill="currentColor" stroke="white"/>
-<path d="M1.5 12.405V3.075L12 0L22.5 3.075V12.405C22.5 21.945 12 24 12 24C12 24 1.5 21.945 1.5 12.405Z" fill="currentColor"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M12.0033 16.5C12.5774 16.5 13.0428 16.0346 13.0428 15.4605C13.0428 14.8865 12.5774 14.4211 12.0033 14.4211C11.4292 14.4211 10.9639 14.8865 10.9639 15.4605C10.9639 16.0346 11.4292 16.5 12.0033 16.5ZM10.5592 9.82291C10.5592 9.02285 11.2083 8.3792 12.0029 8.3792C12.7951 8.3792 13.4466 9.03065 13.4466 9.82291C13.4466 10.1898 13.2897 10.3208 12.6714 10.7479C12.3975 10.9372 12.0217 11.2001 11.7292 11.5858C11.416 11.9986 11.2233 12.5134 11.2233 13.168H12.7825C12.7825 12.8473 12.8677 12.6648 12.9714 12.5281C13.0957 12.3643 13.2758 12.2255 13.5577 12.0307C13.5873 12.0103 13.6185 11.989 13.6512 11.9668C14.1622 11.6192 15.0058 11.0455 15.0058 9.82291C15.0058 8.16955 13.6563 6.82001 12.0029 6.82001C10.3518 6.82001 9 8.15713 9 9.82291H10.5592Z" fill="white"/>
-</svg>
diff --git a/src/components/structures/MatrixChat.tsx b/src/components/structures/MatrixChat.tsx
index 7cfe1c213c..8a7dbe4bde 100644
--- a/src/components/structures/MatrixChat.tsx
+++ b/src/components/structures/MatrixChat.tsx
@@ -143,7 +143,7 @@ import { findDMForUser } from "../../utils/dm/findDMForUser";
 import { Linkify } from "../../HtmlUtils";
 import { NotificationColor } from "../../stores/notifications/NotificationColor";
 import { UserTab } from "../views/dialogs/UserTab";
-import { Icon as EncryptionIcon } from "../../../res/img/compound/encryption-24px.svg";
+
 // legacy export
 export { default as Views } from "../../Views";
 
@@ -1668,9 +1668,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
                 ToastStore.sharedInstance().addOrReplaceToast({
                     key: "verifreq_" + request.channel.transactionId,
                     title: _t("Verification requested"),
-                    iconElement: (
-                        <EncryptionIcon className="mx_Icon mx_Icon_24 mx_Icon_secondary-content mx_Toast_icon" />
-                    ),
+                    icon: "verification",
                     props: { request },
                     component: VerificationRequestToast,
                     priority: 90,
diff --git a/src/components/structures/ToastContainer.tsx b/src/components/structures/ToastContainer.tsx
index d829adfa80..c95f5a1099 100644
--- a/src/components/structures/ToastContainer.tsx
+++ b/src/components/structures/ToastContainer.tsx
@@ -57,10 +57,10 @@ export default class ToastContainer extends React.Component<{}, IState> {
         let containerClasses;
         if (totalCount !== 0) {
             const topToast = this.state.toasts[0];
-            const { title, icon, iconElement, key, component, className, bodyClassName, props } = topToast;
+            const { title, icon, key, component, className, bodyClassName, props } = topToast;
             const bodyClasses = classNames("mx_Toast_body", bodyClassName);
             const toastClasses = classNames("mx_Toast_toast", className, {
-                mx_Toast_hasIcon: icon || iconElement,
+                mx_Toast_hasIcon: icon,
                 [`mx_Toast_icon_${icon}`]: icon,
             });
             const toastProps = Object.assign({}, props, {
@@ -86,7 +86,6 @@ export default class ToastContainer extends React.Component<{}, IState> {
 
             toast = (
                 <div className={toastClasses}>
-                    {iconElement}
                     {titleElement}
                     <div className={bodyClasses}>{content}</div>
                 </div>
diff --git a/src/components/views/toasts/GenericToast.tsx b/src/components/views/toasts/GenericToast.tsx
index 8808ee6801..c40eaab8e8 100644
--- a/src/components/views/toasts/GenericToast.tsx
+++ b/src/components/views/toasts/GenericToast.tsx
@@ -18,7 +18,6 @@ import React, { ReactNode } from "react";
 
 import AccessibleButton from "../elements/AccessibleButton";
 import { XOR } from "../../../@types/common";
-import { Caption } from "../typography/Caption";
 
 export interface IProps {
     description: ReactNode;
@@ -41,7 +40,7 @@ const GenericToast: React.FC<XOR<IPropsExtended, IProps>> = ({
     onAccept,
     onReject,
 }) => {
-    const detailContent = detail ? <Caption className="mx_Toast_detail">{detail}</Caption> : null;
+    const detailContent = detail ? <div className="mx_Toast_detail">{detail}</div> : null;
 
     return (
         <div>
diff --git a/src/components/views/typography/Caption.tsx b/src/components/views/typography/Caption.tsx
index 89fd551ed5..69e7714b22 100644
--- a/src/components/views/typography/Caption.tsx
+++ b/src/components/views/typography/Caption.tsx
@@ -19,14 +19,13 @@ import React, { HTMLAttributes } from "react";
 
 interface Props extends Omit<HTMLAttributes<HTMLSpanElement>, "className"> {
     children: React.ReactNode;
-    className?: string;
     isError?: boolean;
 }
 
-export const Caption: React.FC<Props> = ({ children, className, isError, ...rest }) => {
+export const Caption: React.FC<Props> = ({ children, isError, ...rest }) => {
     return (
         <span
-            className={classNames("mx_Caption", className, {
+            className={classNames("mx_Caption", {
                 mx_Caption_error: isError,
             })}
             {...rest}
diff --git a/src/stores/ToastStore.ts b/src/stores/ToastStore.ts
index 2abd5e8beb..138eb9f5fa 100644
--- a/src/stores/ToastStore.ts
+++ b/src/stores/ToastStore.ts
@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 import EventEmitter from "events";
-import React, { ReactElement } from "react";
+import React from "react";
 
 import { ComponentClass } from "../@types/common";
 
@@ -24,14 +24,7 @@ export interface IToast<C extends ComponentClass> {
     // higher priority number will be shown on top of lower priority
     priority: number;
     title?: string;
-    /**
-     * Icon class.
-     *
-     * @deprecated Use iconElement instead.
-     */
     icon?: string;
-    /** Icon element. Displayed left of the title. */
-    iconElement?: ReactElement;
     component: C;
     className?: string;
     bodyClassName?: string;
diff --git a/src/toasts/IncomingLegacyCallToast.tsx b/src/toasts/IncomingLegacyCallToast.tsx
index 147a35a1d0..26ea393332 100644
--- a/src/toasts/IncomingLegacyCallToast.tsx
+++ b/src/toasts/IncomingLegacyCallToast.tsx
@@ -119,7 +119,7 @@ export default class IncomingLegacyCallToast extends React.Component<IProps, ISt
                         <div className="mx_LegacyCallEvent_type_icon" />
                         {isVoice ? _t("Voice call") : _t("Video call")}
                     </div>
-                    <div className="mx_Toast_buttons mx_IncomingLegacyCallToast_buttons">
+                    <div className="mx_IncomingLegacyCallToast_buttons">
                         <AccessibleButton
                             className="mx_IncomingLegacyCallToast_button mx_IncomingLegacyCallToast_button_decline"
                             onClick={this.onRejectClick}
diff --git a/test/components/views/toasts/__snapshots__/GenericToast-test.tsx.snap b/test/components/views/toasts/__snapshots__/GenericToast-test.tsx.snap
index b6e47abff7..ee033f70f4 100644
--- a/test/components/views/toasts/__snapshots__/GenericToast-test.tsx.snap
+++ b/test/components/views/toasts/__snapshots__/GenericToast-test.tsx.snap
@@ -42,11 +42,11 @@ exports[`GenericToast should render as expected without detail content 1`] = `
       <div>
         Description
       </div>
-      <span
-        class="mx_Caption mx_Toast_detail"
+      <div
+        class="mx_Toast_detail"
       >
         Detail
-      </span>
+      </div>
     </div>
     <div
       aria-live="off"
diff --git a/test/toasts/__snapshots__/UnverifiedSessionToast-test.tsx.snap b/test/toasts/__snapshots__/UnverifiedSessionToast-test.tsx.snap
index 07cd6cc365..0aef239030 100644
--- a/test/toasts/__snapshots__/UnverifiedSessionToast-test.tsx.snap
+++ b/test/toasts/__snapshots__/UnverifiedSessionToast-test.tsx.snap
@@ -27,8 +27,8 @@ exports[`UnverifiedSessionToast when rendering the toast should render as expect
             <div
               class="mx_Toast_description"
             >
-              <span
-                class="mx_Caption mx_Toast_detail"
+              <div
+                class="mx_Toast_detail"
               >
                 <span
                   data-testid="device-metadata-isVerified"
@@ -41,7 +41,7 @@ exports[`UnverifiedSessionToast when rendering the toast should render as expect
                 >
                   ABC123
                 </span>
-              </span>
+              </div>
             </div>
             <div
               aria-live="off"