diff --git a/apps/web/playwright/snapshots/devtools/devtools.spec.ts/devtools-dialog-linux.png b/apps/web/playwright/snapshots/devtools/devtools.spec.ts/devtools-dialog-linux.png
index 7ce069ae94..c63dda06ce 100644
Binary files a/apps/web/playwright/snapshots/devtools/devtools.spec.ts/devtools-dialog-linux.png and b/apps/web/playwright/snapshots/devtools/devtools.spec.ts/devtools-dialog-linux.png differ
diff --git a/apps/web/playwright/snapshots/invite/invite-dialog.spec.ts/invite-dialog-dm-with-user-pill-linux.png b/apps/web/playwright/snapshots/invite/invite-dialog.spec.ts/invite-dialog-dm-with-user-pill-linux.png
index 86154ad35d..33815f6fe0 100644
Binary files a/apps/web/playwright/snapshots/invite/invite-dialog.spec.ts/invite-dialog-dm-with-user-pill-linux.png and b/apps/web/playwright/snapshots/invite/invite-dialog.spec.ts/invite-dialog-dm-with-user-pill-linux.png differ
diff --git a/apps/web/playwright/snapshots/invite/invite-dialog.spec.ts/invite-dialog-dm-without-user-linux.png b/apps/web/playwright/snapshots/invite/invite-dialog.spec.ts/invite-dialog-dm-without-user-linux.png
index e63333c1e9..3d9a23d2db 100644
Binary files a/apps/web/playwright/snapshots/invite/invite-dialog.spec.ts/invite-dialog-dm-without-user-linux.png and b/apps/web/playwright/snapshots/invite/invite-dialog.spec.ts/invite-dialog-dm-without-user-linux.png differ
diff --git a/apps/web/playwright/snapshots/right-panel/right-panel.spec.ts/with-long-name-linux.png b/apps/web/playwright/snapshots/right-panel/right-panel.spec.ts/with-long-name-linux.png
index b1f73126c8..2d28874cf9 100644
Binary files a/apps/web/playwright/snapshots/right-panel/right-panel.spec.ts/with-long-name-linux.png and b/apps/web/playwright/snapshots/right-panel/right-panel.spec.ts/with-long-name-linux.png differ
diff --git a/apps/web/playwright/snapshots/settings/account-user-settings-tab.spec.ts/account-linux.png b/apps/web/playwright/snapshots/settings/account-user-settings-tab.spec.ts/account-linux.png
index 6038500c47..87216d424c 100644
Binary files a/apps/web/playwright/snapshots/settings/account-user-settings-tab.spec.ts/account-linux.png and b/apps/web/playwright/snapshots/settings/account-user-settings-tab.spec.ts/account-linux.png differ
diff --git a/apps/web/playwright/snapshots/settings/account-user-settings-tab.spec.ts/account-manage-account-button-linux.png b/apps/web/playwright/snapshots/settings/account-user-settings-tab.spec.ts/account-manage-account-button-linux.png
index 40f79c05b3..a971213bc6 100644
Binary files a/apps/web/playwright/snapshots/settings/account-user-settings-tab.spec.ts/account-manage-account-button-linux.png and b/apps/web/playwright/snapshots/settings/account-user-settings-tab.spec.ts/account-manage-account-button-linux.png differ
diff --git a/apps/web/playwright/snapshots/settings/account-user-settings-tab.spec.ts/account-smallscreen-linux.png b/apps/web/playwright/snapshots/settings/account-user-settings-tab.spec.ts/account-smallscreen-linux.png
index b3496cc266..0256588810 100644
Binary files a/apps/web/playwright/snapshots/settings/account-user-settings-tab.spec.ts/account-smallscreen-linux.png and b/apps/web/playwright/snapshots/settings/account-user-settings-tab.spec.ts/account-smallscreen-linux.png differ
diff --git a/apps/web/playwright/snapshots/timeline/timeline.spec.ts/edited-code-block-linux.png b/apps/web/playwright/snapshots/timeline/timeline.spec.ts/edited-code-block-linux.png
index 76a23e8f90..0bb444c304 100644
Binary files a/apps/web/playwright/snapshots/timeline/timeline.spec.ts/edited-code-block-linux.png and b/apps/web/playwright/snapshots/timeline/timeline.spec.ts/edited-code-block-linux.png differ
diff --git a/apps/web/playwright/snapshots/user-view/user-view.spec.ts/user-info-linux.png b/apps/web/playwright/snapshots/user-view/user-view.spec.ts/user-info-linux.png
index 9926b5801a..4dc23aee42 100644
Binary files a/apps/web/playwright/snapshots/user-view/user-view.spec.ts/user-info-linux.png and b/apps/web/playwright/snapshots/user-view/user-view.spec.ts/user-info-linux.png differ
diff --git a/apps/web/res/css/views/elements/_CopyableText.pcss b/apps/web/res/css/views/elements/_CopyableText.pcss
index e5cf1c51da..94964758ea 100644
--- a/apps/web/res/css/views/elements/_CopyableText.pcss
+++ b/apps/web/res/css/views/elements/_CopyableText.pcss
@@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 .mx_CopyableText {
-    align-items: flex-start;
+    align-items: center;
     display: flex;
     justify-content: space-between;
     width: max-content;
@@ -20,27 +20,17 @@ Please see LICENSE files in the repository root for full details.
         border: solid 1px $light-fg-color;
         margin-bottom: 10px;
         margin-top: 10px;
-        padding: 10px 0 10px 10px;
+        padding: 10px;
     }
 
     .mx_CopyableText_copyButton {
         flex-shrink: 0;
-        /* using em here to adapt to the local font size */
-        width: 1em;
-        height: 1em;
-        padding-left: 12px;
-        padding-right: 10px;
         display: block;
         /* If the copy button is used within a scrollable div, make it stick to the right while scrolling */
         position: sticky;
-        right: 0;
-        /* center to first line */
-        top: 0.15em;
-        background-color: $background;
+        margin-left: var(--cpd-space-1x);
 
         svg {
-            width: 1em;
-            height: 1em;
             color: $message-action-bar-fg-color;
             display: block;
         }
diff --git a/apps/web/res/css/views/right_panel/_UserInfo.pcss b/apps/web/res/css/views/right_panel/_UserInfo.pcss
index 70cc4ba064..93511a9406 100644
--- a/apps/web/res/css/views/right_panel/_UserInfo.pcss
+++ b/apps/web/res/css/views/right_panel/_UserInfo.pcss
@@ -126,19 +126,10 @@ Please see LICENSE files in the repository root for full details.
         }
 
         .mx_CopyableText_copyButton {
-            width: 28px;
-            height: 28px;
             display: flex;
             justify-content: center;
             align-items: center;
             position: unset;
-            padding-left: var(--cpd-space-2x);
-        }
-
-        .mx_CopyableText_copyButton::before {
-            width: 20px;
-            height: 20px;
-            background-color: var(--cpd-color-icon-secondary-alpha);
         }
     }
 
diff --git a/apps/web/res/css/views/rooms/_EventTile.pcss b/apps/web/res/css/views/rooms/_EventTile.pcss
index 967f282cf4..32d90af263 100644
--- a/apps/web/res/css/views/rooms/_EventTile.pcss
+++ b/apps/web/res/css/views/rooms/_EventTile.pcss
@@ -869,8 +869,6 @@ $left-gutter: 64px;
             position: absolute;
             top: $spacing-8;
             right: $spacing-8;
-            width: 16px;
-            height: 16px;
             visibility: hidden;
 
             &.mx_EventTile_buttonBottom {
diff --git a/apps/web/src/components/views/elements/CopyableText.tsx b/apps/web/src/components/views/elements/CopyableText.tsx
index 834386e450..51812e7cec 100644
--- a/apps/web/src/components/views/elements/CopyableText.tsx
+++ b/apps/web/src/components/views/elements/CopyableText.tsx
@@ -10,10 +10,10 @@ Please see LICENSE files in the repository root for full details.
 import React, { useState } from "react";
 import classNames from "classnames";
 import { CopyIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
+import { IconButton } from "@vector-im/compound-web";
 
 import { _t } from "../../../languageHandler";
 import { copyPlaintext } from "../../../utils/strings";
-import AccessibleButton, { type ButtonEvent } from "./AccessibleButton";
 
 interface IProps extends React.HTMLAttributes<HTMLDivElement> {
     children?: React.ReactNode;
@@ -29,7 +29,7 @@ export const CopyTextButton: React.FC<Pick<IProps, "getTextToCopy" | "className"
 }) => {
     const [tooltip, setTooltip] = useState<string | undefined>(undefined);
 
-    const onCopyClickInternal = async (e: ButtonEvent): Promise<void> => {
+    const onCopyClickInternal = async (e: React.MouseEvent<HTMLButtonElement>): Promise<void> => {
         e.preventDefault();
         const text = getTextToCopy();
         const successful = !!text && (await copyPlaintext(text));
@@ -43,17 +43,18 @@ export const CopyTextButton: React.FC<Pick<IProps, "getTextToCopy" | "className"
     };
 
     return (
-        <AccessibleButton
-            element="button"
-            title={tooltip ?? _t("action|copy")}
+        <IconButton
+            tooltip={tooltip ?? _t("action|copy")}
             onClick={onCopyClickInternal}
             className={className}
-            onTooltipOpenChange={(open) => {
+            size="28px"
+            style={{ padding: "4px" }} // Work around miscalculated padding on 28px button: https://github.com/element-hq/compound/issues/409
+            onTooltipOpenChange={(open: boolean) => {
                 if (!open) onHideTooltip();
             }}
         >
             {children}
-        </AccessibleButton>
+        </IconButton>
     );
 };
 
diff --git a/apps/web/test/unit-tests/components/views/beacon/__snapshots__/BeaconListItem-test.tsx.snap b/apps/web/test/unit-tests/components/views/beacon/__snapshots__/BeaconListItem-test.tsx.snap
index d7961e1656..3230269617 100644
--- a/apps/web/test/unit-tests/components/views/beacon/__snapshots__/BeaconListItem-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/beacon/__snapshots__/BeaconListItem-test.tsx.snap
@@ -58,25 +58,32 @@ exports[`<BeaconListItem /> when a beacon is live and has locations renders beac
             class="mx_CopyableText mx_ShareLatestLocation_copy"
           >
             <button
-              aria-label="Copy"
-              class="mx_AccessibleButton mx_CopyableText_copyButton"
+              aria-labelledby="react-use-id-2"
+              class="_icon-button_1215g_8 mx_CopyableText_copyButton"
+              data-kind="primary"
               role="button"
+              style="--cpd-icon-button-size: 28px; padding: 4px;"
               tabindex="0"
             >
-              <svg
-                fill="currentColor"
-                height="1em"
-                viewBox="0 0 24 24"
-                width="1em"
-                xmlns="http://www.w3.org/2000/svg"
+              <div
+                class="_indicator-icon_147l5_17"
+                style="--cpd-icon-button-size: 100%;"
               >
-                <path
-                  d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
-                />
-                <path
-                  d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
-                />
-              </svg>
+                <svg
+                  fill="currentColor"
+                  height="1em"
+                  viewBox="0 0 24 24"
+                  width="1em"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
+                  />
+                  <path
+                    d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
+                  />
+                </svg>
+              </div>
             </button>
           </span>
         </div>
diff --git a/apps/web/test/unit-tests/components/views/beacon/__snapshots__/DialogSidebar-test.tsx.snap b/apps/web/test/unit-tests/components/views/beacon/__snapshots__/DialogSidebar-test.tsx.snap
index a44bcf7164..10e8fd099a 100644
--- a/apps/web/test/unit-tests/components/views/beacon/__snapshots__/DialogSidebar-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/beacon/__snapshots__/DialogSidebar-test.tsx.snap
@@ -98,25 +98,32 @@ exports[`<DialogSidebar /> renders sidebar correctly with beacons 1`] = `
                 class="mx_CopyableText mx_ShareLatestLocation_copy"
               >
                 <button
-                  aria-label="Copy"
-                  class="mx_AccessibleButton mx_CopyableText_copyButton"
+                  aria-labelledby="react-use-id-2"
+                  class="_icon-button_1215g_8 mx_CopyableText_copyButton"
+                  data-kind="primary"
                   role="button"
+                  style="--cpd-icon-button-size: 28px; padding: 4px;"
                   tabindex="0"
                 >
-                  <svg
-                    fill="currentColor"
-                    height="1em"
-                    viewBox="0 0 24 24"
-                    width="1em"
-                    xmlns="http://www.w3.org/2000/svg"
+                  <div
+                    class="_indicator-icon_147l5_17"
+                    style="--cpd-icon-button-size: 100%;"
                   >
-                    <path
-                      d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
-                    />
-                    <path
-                      d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
-                    />
-                  </svg>
+                    <svg
+                      fill="currentColor"
+                      height="1em"
+                      viewBox="0 0 24 24"
+                      width="1em"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
+                      />
+                      <path
+                        d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
+                      />
+                    </svg>
+                  </div>
                 </button>
               </span>
             </div>
diff --git a/apps/web/test/unit-tests/components/views/beacon/__snapshots__/ShareLatestLocation-test.tsx.snap b/apps/web/test/unit-tests/components/views/beacon/__snapshots__/ShareLatestLocation-test.tsx.snap
index 4b8e873575..38a3cb20d8 100644
--- a/apps/web/test/unit-tests/components/views/beacon/__snapshots__/ShareLatestLocation-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/beacon/__snapshots__/ShareLatestLocation-test.tsx.snap
@@ -29,25 +29,32 @@ exports[`<ShareLatestLocation /> renders share buttons when there is a location
     class="mx_CopyableText mx_ShareLatestLocation_copy"
   >
     <button
-      aria-label="Copy"
-      class="mx_AccessibleButton mx_CopyableText_copyButton"
+      aria-labelledby="react-use-id-2"
+      class="_icon-button_1215g_8 mx_CopyableText_copyButton"
+      data-kind="primary"
       role="button"
+      style="--cpd-icon-button-size: 28px; padding: 4px;"
       tabindex="0"
     >
-      <svg
-        fill="currentColor"
-        height="1em"
-        viewBox="0 0 24 24"
-        width="1em"
-        xmlns="http://www.w3.org/2000/svg"
+      <div
+        class="_indicator-icon_147l5_17"
+        style="--cpd-icon-button-size: 100%;"
       >
-        <path
-          d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
-        />
-        <path
-          d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
-        />
-      </svg>
+        <svg
+          fill="currentColor"
+          height="1em"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
+          />
+          <path
+            d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
+          />
+        </svg>
+      </div>
     </button>
   </span>
 </DocumentFragment>
diff --git a/apps/web/test/unit-tests/components/views/dialogs/DevtoolsDialog-test.tsx b/apps/web/test/unit-tests/components/views/dialogs/DevtoolsDialog-test.tsx
index 448a762876..a0553bd641 100644
--- a/apps/web/test/unit-tests/components/views/dialogs/DevtoolsDialog-test.tsx
+++ b/apps/web/test/unit-tests/components/views/dialogs/DevtoolsDialog-test.tsx
@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React from "react";
-import { getByLabelText, getAllByLabelText, render } from "jest-matrix-react";
+import { render, screen } from "jest-matrix-react";
 import { Room, type MatrixClient } from "matrix-js-sdk/src/matrix";
 import userEvent from "@testing-library/user-event";
 
@@ -49,11 +49,11 @@ describe("DevtoolsDialog", () => {
         const user = userEvent.setup();
         jest.spyOn(navigator.clipboard, "writeText");
 
-        const { container } = getComponent(room.roomId);
+        getComponent(room.roomId);
 
-        const copyBtn = getByLabelText(container, "Copy");
+        const copyBtn = screen.getByLabelText("Copy");
         await user.click(copyBtn);
-        const copiedBtn = getByLabelText(container, "Copied!");
+        const copiedBtn = screen.getByLabelText("Copied!");
 
         expect(copiedBtn).toBeInTheDocument();
         expect(navigator.clipboard.writeText).toHaveBeenCalledWith(room.roomId);
@@ -64,11 +64,11 @@ describe("DevtoolsDialog", () => {
         jest.spyOn(navigator.clipboard, "writeText");
 
         const threadRootId = "$test_event_id_goes_here";
-        const { container } = getComponent(room.roomId, threadRootId);
+        getComponent(room.roomId, threadRootId);
 
-        const copyBtn = getAllByLabelText(container, "Copy")[1];
+        const copyBtn = screen.getAllByLabelText("Copy")[1];
         await user.click(copyBtn);
-        const copiedBtn = getByLabelText(container, "Copied!");
+        const copiedBtn = screen.getByLabelText("Copied!");
 
         expect(copiedBtn).toBeInTheDocument();
         expect(navigator.clipboard.writeText).toHaveBeenCalledWith(threadRootId);
diff --git a/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/DevtoolsDialog-test.tsx.snap b/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/DevtoolsDialog-test.tsx.snap
index 2a4176fafa..c476c1d360 100644
--- a/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/DevtoolsDialog-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/DevtoolsDialog-test.tsx.snap
@@ -34,26 +34,32 @@ exports[`DevtoolsDialog renders the devtools dialog 1`] = `
     >
       Room ID: !id
       <button
-        aria-describedby="react-use-id-1"
-        aria-label="Copy"
-        class="mx_AccessibleButton mx_CopyableText_copyButton"
+        aria-labelledby="react-use-id-1"
+        class="_icon-button_1215g_8 mx_CopyableText_copyButton"
+        data-kind="primary"
         role="button"
+        style="--cpd-icon-button-size: 28px; padding: 4px;"
         tabindex="0"
       >
-        <svg
-          fill="currentColor"
-          height="1em"
-          viewBox="0 0 24 24"
-          width="1em"
-          xmlns="http://www.w3.org/2000/svg"
+        <div
+          class="_indicator-icon_147l5_17"
+          style="--cpd-icon-button-size: 100%;"
         >
-          <path
-            d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
-          />
-          <path
-            d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
-          />
-        </svg>
+          <svg
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
+            />
+            <path
+              d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
+            />
+          </svg>
+        </div>
       </button>
     </span>
     <div
diff --git a/apps/web/test/unit-tests/components/views/dialogs/devtools/__snapshots__/Users-test.tsx.snap b/apps/web/test/unit-tests/components/views/dialogs/devtools/__snapshots__/Users-test.tsx.snap
index 622df9d442..1e77b0d218 100644
--- a/apps/web/test/unit-tests/components/views/dialogs/devtools/__snapshots__/Users-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/dialogs/devtools/__snapshots__/Users-test.tsx.snap
@@ -12,25 +12,32 @@ exports[`<Users /> should render a single device - signed by owner 1`] = `
         >
           User ID: @alice:example.com
           <button
-            aria-label="Copy"
-            class="mx_AccessibleButton mx_CopyableText_copyButton"
+            aria-labelledby="react-use-id-1"
+            class="_icon-button_1215g_8 mx_CopyableText_copyButton"
+            data-kind="primary"
             role="button"
+            style="--cpd-icon-button-size: 28px; padding: 4px;"
             tabindex="0"
           >
-            <svg
-              fill="currentColor"
-              height="1em"
-              viewBox="0 0 24 24"
-              width="1em"
-              xmlns="http://www.w3.org/2000/svg"
+            <div
+              class="_indicator-icon_147l5_17"
+              style="--cpd-icon-button-size: 100%;"
             >
-              <path
-                d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
-              />
-              <path
-                d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
-              />
-            </svg>
+              <svg
+                fill="currentColor"
+                height="1em"
+                viewBox="0 0 24 24"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
+                />
+                <path
+                  d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
+                />
+              </svg>
+            </div>
           </button>
         </span>
       </li>
@@ -40,25 +47,32 @@ exports[`<Users /> should render a single device - signed by owner 1`] = `
         >
           Device ID: SIGNED
           <button
-            aria-label="Copy"
-            class="mx_AccessibleButton mx_CopyableText_copyButton"
+            aria-labelledby="react-use-id-2"
+            class="_icon-button_1215g_8 mx_CopyableText_copyButton"
+            data-kind="primary"
             role="button"
+            style="--cpd-icon-button-size: 28px; padding: 4px;"
             tabindex="0"
           >
-            <svg
-              fill="currentColor"
-              height="1em"
-              viewBox="0 0 24 24"
-              width="1em"
-              xmlns="http://www.w3.org/2000/svg"
+            <div
+              class="_indicator-icon_147l5_17"
+              style="--cpd-icon-button-size: 100%;"
             >
-              <path
-                d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
-              />
-              <path
-                d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
-              />
-            </svg>
+              <svg
+                fill="currentColor"
+                height="1em"
+                viewBox="0 0 24 24"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
+                />
+                <path
+                  d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
+                />
+              </svg>
+            </div>
           </button>
         </span>
       </li>
@@ -100,25 +114,32 @@ exports[`<Users /> should render a single device - signed by owner 1`] = `
             >
               ed25519: an_ed25519_public_key
               <button
-                aria-label="Copy"
-                class="mx_AccessibleButton mx_CopyableText_copyButton"
+                aria-labelledby="react-use-id-3"
+                class="_icon-button_1215g_8 mx_CopyableText_copyButton"
+                data-kind="primary"
                 role="button"
+                style="--cpd-icon-button-size: 28px; padding: 4px;"
                 tabindex="0"
               >
-                <svg
-                  fill="currentColor"
-                  height="1em"
-                  viewBox="0 0 24 24"
-                  width="1em"
-                  xmlns="http://www.w3.org/2000/svg"
+                <div
+                  class="_indicator-icon_147l5_17"
+                  style="--cpd-icon-button-size: 100%;"
                 >
-                  <path
-                    d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
-                  />
-                  <path
-                    d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
-                  />
-                </svg>
+                  <svg
+                    fill="currentColor"
+                    height="1em"
+                    viewBox="0 0 24 24"
+                    width="1em"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
+                    />
+                    <path
+                      d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
+                    />
+                  </svg>
+                </div>
               </button>
             </span>
           </li>
@@ -128,25 +149,32 @@ exports[`<Users /> should render a single device - signed by owner 1`] = `
             >
               curve25519: a_curve25519_public_key
               <button
-                aria-label="Copy"
-                class="mx_AccessibleButton mx_CopyableText_copyButton"
+                aria-labelledby="react-use-id-4"
+                class="_icon-button_1215g_8 mx_CopyableText_copyButton"
+                data-kind="primary"
                 role="button"
+                style="--cpd-icon-button-size: 28px; padding: 4px;"
                 tabindex="0"
               >
-                <svg
-                  fill="currentColor"
-                  height="1em"
-                  viewBox="0 0 24 24"
-                  width="1em"
-                  xmlns="http://www.w3.org/2000/svg"
+                <div
+                  class="_indicator-icon_147l5_17"
+                  style="--cpd-icon-button-size: 100%;"
                 >
-                  <path
-                    d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
-                  />
-                  <path
-                    d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
-                  />
-                </svg>
+                  <svg
+                    fill="currentColor"
+                    height="1em"
+                    viewBox="0 0 24 24"
+                    width="1em"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
+                    />
+                    <path
+                      d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
+                    />
+                  </svg>
+                </div>
               </button>
             </span>
           </li>
@@ -176,25 +204,32 @@ exports[`<Users /> should render a single device - unsigned 1`] = `
         >
           User ID: @alice:example.com
           <button
-            aria-label="Copy"
-            class="mx_AccessibleButton mx_CopyableText_copyButton"
+            aria-labelledby="react-use-id-1"
+            class="_icon-button_1215g_8 mx_CopyableText_copyButton"
+            data-kind="primary"
             role="button"
+            style="--cpd-icon-button-size: 28px; padding: 4px;"
             tabindex="0"
           >
-            <svg
-              fill="currentColor"
-              height="1em"
-              viewBox="0 0 24 24"
-              width="1em"
-              xmlns="http://www.w3.org/2000/svg"
+            <div
+              class="_indicator-icon_147l5_17"
+              style="--cpd-icon-button-size: 100%;"
             >
-              <path
-                d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
-              />
-              <path
-                d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
-              />
-            </svg>
+              <svg
+                fill="currentColor"
+                height="1em"
+                viewBox="0 0 24 24"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
+                />
+                <path
+                  d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
+                />
+              </svg>
+            </div>
           </button>
         </span>
       </li>
@@ -204,25 +239,32 @@ exports[`<Users /> should render a single device - unsigned 1`] = `
         >
           Device ID: UNSIGNED
           <button
-            aria-label="Copy"
-            class="mx_AccessibleButton mx_CopyableText_copyButton"
+            aria-labelledby="react-use-id-2"
+            class="_icon-button_1215g_8 mx_CopyableText_copyButton"
+            data-kind="primary"
             role="button"
+            style="--cpd-icon-button-size: 28px; padding: 4px;"
             tabindex="0"
           >
-            <svg
-              fill="currentColor"
-              height="1em"
-              viewBox="0 0 24 24"
-              width="1em"
-              xmlns="http://www.w3.org/2000/svg"
+            <div
+              class="_indicator-icon_147l5_17"
+              style="--cpd-icon-button-size: 100%;"
             >
-              <path
-                d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
-              />
-              <path
-                d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
-              />
-            </svg>
+              <svg
+                fill="currentColor"
+                height="1em"
+                viewBox="0 0 24 24"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
+                />
+                <path
+                  d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
+                />
+              </svg>
+            </div>
           </button>
         </span>
       </li>
@@ -264,25 +306,32 @@ exports[`<Users /> should render a single device - unsigned 1`] = `
             >
               ed25519: an_ed25519_public_key
               <button
-                aria-label="Copy"
-                class="mx_AccessibleButton mx_CopyableText_copyButton"
+                aria-labelledby="react-use-id-3"
+                class="_icon-button_1215g_8 mx_CopyableText_copyButton"
+                data-kind="primary"
                 role="button"
+                style="--cpd-icon-button-size: 28px; padding: 4px;"
                 tabindex="0"
               >
-                <svg
-                  fill="currentColor"
-                  height="1em"
-                  viewBox="0 0 24 24"
-                  width="1em"
-                  xmlns="http://www.w3.org/2000/svg"
+                <div
+                  class="_indicator-icon_147l5_17"
+                  style="--cpd-icon-button-size: 100%;"
                 >
-                  <path
-                    d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
-                  />
-                  <path
-                    d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
-                  />
-                </svg>
+                  <svg
+                    fill="currentColor"
+                    height="1em"
+                    viewBox="0 0 24 24"
+                    width="1em"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
+                    />
+                    <path
+                      d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
+                    />
+                  </svg>
+                </div>
               </button>
             </span>
           </li>
@@ -292,25 +341,32 @@ exports[`<Users /> should render a single device - unsigned 1`] = `
             >
               curve25519: a_curve25519_public_key
               <button
-                aria-label="Copy"
-                class="mx_AccessibleButton mx_CopyableText_copyButton"
+                aria-labelledby="react-use-id-4"
+                class="_icon-button_1215g_8 mx_CopyableText_copyButton"
+                data-kind="primary"
                 role="button"
+                style="--cpd-icon-button-size: 28px; padding: 4px;"
                 tabindex="0"
               >
-                <svg
-                  fill="currentColor"
-                  height="1em"
-                  viewBox="0 0 24 24"
-                  width="1em"
-                  xmlns="http://www.w3.org/2000/svg"
+                <div
+                  class="_indicator-icon_147l5_17"
+                  style="--cpd-icon-button-size: 100%;"
                 >
-                  <path
-                    d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
-                  />
-                  <path
-                    d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
-                  />
-                </svg>
+                  <svg
+                    fill="currentColor"
+                    height="1em"
+                    viewBox="0 0 24 24"
+                    width="1em"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
+                    />
+                    <path
+                      d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
+                    />
+                  </svg>
+                </div>
               </button>
             </span>
           </li>
@@ -340,25 +396,32 @@ exports[`<Users /> should render a single device - verified by cross-signing 1`]
         >
           User ID: @alice:example.com
           <button
-            aria-label="Copy"
-            class="mx_AccessibleButton mx_CopyableText_copyButton"
+            aria-labelledby="react-use-id-1"
+            class="_icon-button_1215g_8 mx_CopyableText_copyButton"
+            data-kind="primary"
             role="button"
+            style="--cpd-icon-button-size: 28px; padding: 4px;"
             tabindex="0"
           >
-            <svg
-              fill="currentColor"
-              height="1em"
-              viewBox="0 0 24 24"
-              width="1em"
-              xmlns="http://www.w3.org/2000/svg"
+            <div
+              class="_indicator-icon_147l5_17"
+              style="--cpd-icon-button-size: 100%;"
             >
-              <path
-                d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
-              />
-              <path
-                d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
-              />
-            </svg>
+              <svg
+                fill="currentColor"
+                height="1em"
+                viewBox="0 0 24 24"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
+                />
+                <path
+                  d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
+                />
+              </svg>
+            </div>
           </button>
         </span>
       </li>
@@ -368,25 +431,32 @@ exports[`<Users /> should render a single device - verified by cross-signing 1`]
         >
           Device ID: VERIFIED
           <button
-            aria-label="Copy"
-            class="mx_AccessibleButton mx_CopyableText_copyButton"
+            aria-labelledby="react-use-id-2"
+            class="_icon-button_1215g_8 mx_CopyableText_copyButton"
+            data-kind="primary"
             role="button"
+            style="--cpd-icon-button-size: 28px; padding: 4px;"
             tabindex="0"
           >
-            <svg
-              fill="currentColor"
-              height="1em"
-              viewBox="0 0 24 24"
-              width="1em"
-              xmlns="http://www.w3.org/2000/svg"
+            <div
+              class="_indicator-icon_147l5_17"
+              style="--cpd-icon-button-size: 100%;"
             >
-              <path
-                d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
-              />
-              <path
-                d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
-              />
-            </svg>
+              <svg
+                fill="currentColor"
+                height="1em"
+                viewBox="0 0 24 24"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
+                />
+                <path
+                  d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
+                />
+              </svg>
+            </div>
           </button>
         </span>
       </li>
@@ -430,25 +500,32 @@ exports[`<Users /> should render a single device - verified by cross-signing 1`]
             >
               ed25519: an_ed25519_public_key
               <button
-                aria-label="Copy"
-                class="mx_AccessibleButton mx_CopyableText_copyButton"
+                aria-labelledby="react-use-id-3"
+                class="_icon-button_1215g_8 mx_CopyableText_copyButton"
+                data-kind="primary"
                 role="button"
+                style="--cpd-icon-button-size: 28px; padding: 4px;"
                 tabindex="0"
               >
-                <svg
-                  fill="currentColor"
-                  height="1em"
-                  viewBox="0 0 24 24"
-                  width="1em"
-                  xmlns="http://www.w3.org/2000/svg"
+                <div
+                  class="_indicator-icon_147l5_17"
+                  style="--cpd-icon-button-size: 100%;"
                 >
-                  <path
-                    d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
-                  />
-                  <path
-                    d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
-                  />
-                </svg>
+                  <svg
+                    fill="currentColor"
+                    height="1em"
+                    viewBox="0 0 24 24"
+                    width="1em"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
+                    />
+                    <path
+                      d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
+                    />
+                  </svg>
+                </div>
               </button>
             </span>
           </li>
@@ -458,25 +535,32 @@ exports[`<Users /> should render a single device - verified by cross-signing 1`]
             >
               curve25519: a_curve25519_public_key
               <button
-                aria-label="Copy"
-                class="mx_AccessibleButton mx_CopyableText_copyButton"
+                aria-labelledby="react-use-id-4"
+                class="_icon-button_1215g_8 mx_CopyableText_copyButton"
+                data-kind="primary"
                 role="button"
+                style="--cpd-icon-button-size: 28px; padding: 4px;"
                 tabindex="0"
               >
-                <svg
-                  fill="currentColor"
-                  height="1em"
-                  viewBox="0 0 24 24"
-                  width="1em"
-                  xmlns="http://www.w3.org/2000/svg"
+                <div
+                  class="_indicator-icon_147l5_17"
+                  style="--cpd-icon-button-size: 100%;"
                 >
-                  <path
-                    d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
-                  />
-                  <path
-                    d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
-                  />
-                </svg>
+                  <svg
+                    fill="currentColor"
+                    height="1em"
+                    viewBox="0 0 24 24"
+                    width="1em"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
+                    />
+                    <path
+                      d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
+                    />
+                  </svg>
+                </div>
               </button>
             </span>
           </li>
@@ -506,25 +590,32 @@ exports[`<Users /> should render a single user 1`] = `
         >
           User ID: @alice:example.com
           <button
-            aria-label="Copy"
-            class="mx_AccessibleButton mx_CopyableText_copyButton"
+            aria-labelledby="react-use-id-1"
+            class="_icon-button_1215g_8 mx_CopyableText_copyButton"
+            data-kind="primary"
             role="button"
+            style="--cpd-icon-button-size: 28px; padding: 4px;"
             tabindex="0"
           >
-            <svg
-              fill="currentColor"
-              height="1em"
-              viewBox="0 0 24 24"
-              width="1em"
-              xmlns="http://www.w3.org/2000/svg"
+            <div
+              class="_indicator-icon_147l5_17"
+              style="--cpd-icon-button-size: 100%;"
             >
-              <path
-                d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
-              />
-              <path
-                d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
-              />
-            </svg>
+              <svg
+                fill="currentColor"
+                height="1em"
+                viewBox="0 0 24 24"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
+                />
+                <path
+                  d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
+                />
+              </svg>
+            </div>
           </button>
         </span>
       </li>
diff --git a/apps/web/test/unit-tests/components/views/messages/__snapshots__/TextualBody-test.tsx.snap b/apps/web/test/unit-tests/components/views/messages/__snapshots__/TextualBody-test.tsx.snap
index 8028d123fa..b800194a21 100644
--- a/apps/web/test/unit-tests/components/views/messages/__snapshots__/TextualBody-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/messages/__snapshots__/TextualBody-test.tsx.snap
@@ -60,25 +60,32 @@ exports[`<TextualBody /> renders formatted m.text correctly linkification is not
       </div>
     </pre>
     <button
-      aria-label="Copy"
-      class="mx_AccessibleButton mx_EventTile_button mx_EventTile_copyButton"
+      aria-labelledby="react-use-id-1"
+      class="_icon-button_1215g_8 mx_EventTile_button mx_EventTile_copyButton"
+      data-kind="primary"
       role="button"
+      style="--cpd-icon-button-size: 28px; padding: 4px;"
       tabindex="0"
     >
-      <svg
-        fill="currentColor"
-        height="1em"
-        viewBox="0 0 24 24"
-        width="1em"
-        xmlns="http://www.w3.org/2000/svg"
+      <div
+        class="_indicator-icon_147l5_17"
+        style="--cpd-icon-button-size: 100%;"
       >
-        <path
-          d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
-        />
-        <path
-          d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
-        />
-      </svg>
+        <svg
+          fill="currentColor"
+          height="1em"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
+          />
+          <path
+            d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
+          />
+        </svg>
+      </div>
     </button>
   </div>
   
@@ -279,25 +286,32 @@ exports[`<TextualBody /> renders formatted m.text correctly pills do not appear
       </div>
     </pre>
     <button
-      aria-label="Copy"
-      class="mx_AccessibleButton mx_EventTile_button mx_EventTile_copyButton"
+      aria-labelledby="react-use-id-1"
+      class="_icon-button_1215g_8 mx_EventTile_button mx_EventTile_copyButton"
+      data-kind="primary"
       role="button"
+      style="--cpd-icon-button-size: 28px; padding: 4px;"
       tabindex="0"
     >
-      <svg
-        fill="currentColor"
-        height="1em"
-        viewBox="0 0 24 24"
-        width="1em"
-        xmlns="http://www.w3.org/2000/svg"
+      <div
+        class="_indicator-icon_147l5_17"
+        style="--cpd-icon-button-size: 100%;"
       >
-        <path
-          d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
-        />
-        <path
-          d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
-        />
-      </svg>
+        <svg
+          fill="currentColor"
+          height="1em"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
+          />
+          <path
+            d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
+          />
+        </svg>
+      </div>
     </button>
   </div>
   
@@ -486,25 +500,32 @@ num_sqrt = num **
       </svg>
     </button>
     <button
-      aria-label="Copy"
-      class="mx_AccessibleButton mx_EventTile_button mx_EventTile_copyButton mx_EventTile_buttonBottom"
+      aria-labelledby="react-use-id-1"
+      class="_icon-button_1215g_8 mx_EventTile_button mx_EventTile_copyButton mx_EventTile_buttonBottom"
+      data-kind="primary"
       role="button"
+      style="--cpd-icon-button-size: 28px; padding: 4px;"
       tabindex="0"
     >
-      <svg
-        fill="currentColor"
-        height="1em"
-        viewBox="0 0 24 24"
-        width="1em"
-        xmlns="http://www.w3.org/2000/svg"
+      <div
+        class="_indicator-icon_147l5_17"
+        style="--cpd-icon-button-size: 100%;"
       >
-        <path
-          d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
-        />
-        <path
-          d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
-        />
-      </svg>
+        <svg
+          fill="currentColor"
+          height="1em"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
+          />
+          <path
+            d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
+          />
+        </svg>
+      </div>
     </button>
   </div>
   
diff --git a/apps/web/test/unit-tests/components/views/right_panel/__snapshots__/UserInfo-test.tsx.snap b/apps/web/test/unit-tests/components/views/right_panel/__snapshots__/UserInfo-test.tsx.snap
index 5429dab1f0..a228981b2b 100644
--- a/apps/web/test/unit-tests/components/views/right_panel/__snapshots__/UserInfo-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/right_panel/__snapshots__/UserInfo-test.tsx.snap
@@ -105,25 +105,32 @@ exports[`<UserInfo /> with crypto enabled renders <BasicUserInfo /> 1`] = `
             >
               customUserIdentifier
               <button
-                aria-label="Copy"
-                class="mx_AccessibleButton mx_CopyableText_copyButton"
+                aria-labelledby="react-use-id-2"
+                class="_icon-button_1215g_8 mx_CopyableText_copyButton"
+                data-kind="primary"
                 role="button"
+                style="--cpd-icon-button-size: 28px; padding: 4px;"
                 tabindex="0"
               >
-                <svg
-                  fill="currentColor"
-                  height="1em"
-                  viewBox="0 0 24 24"
-                  width="1em"
-                  xmlns="http://www.w3.org/2000/svg"
+                <div
+                  class="_indicator-icon_147l5_17"
+                  style="--cpd-icon-button-size: 100%;"
                 >
-                  <path
-                    d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
-                  />
-                  <path
-                    d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
-                  />
-                </svg>
+                  <svg
+                    fill="currentColor"
+                    height="1em"
+                    viewBox="0 0 24 24"
+                    width="1em"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
+                    />
+                    <path
+                      d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
+                    />
+                  </svg>
+                </div>
               </button>
             </span>
           </p>
@@ -408,25 +415,32 @@ exports[`<UserInfo /> with crypto enabled should render a deactivate button for
             >
               customUserIdentifier
               <button
-                aria-label="Copy"
-                class="mx_AccessibleButton mx_CopyableText_copyButton"
+                aria-labelledby="react-use-id-2"
+                class="_icon-button_1215g_8 mx_CopyableText_copyButton"
+                data-kind="primary"
                 role="button"
+                style="--cpd-icon-button-size: 28px; padding: 4px;"
                 tabindex="0"
               >
-                <svg
-                  fill="currentColor"
-                  height="1em"
-                  viewBox="0 0 24 24"
-                  width="1em"
-                  xmlns="http://www.w3.org/2000/svg"
+                <div
+                  class="_indicator-icon_147l5_17"
+                  style="--cpd-icon-button-size: 100%;"
                 >
-                  <path
-                    d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
-                  />
-                  <path
-                    d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
-                  />
-                </svg>
+                  <svg
+                    fill="currentColor"
+                    height="1em"
+                    viewBox="0 0 24 24"
+                    width="1em"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
+                    />
+                    <path
+                      d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
+                    />
+                  </svg>
+                </div>
               </button>
             </span>
           </p>
diff --git a/apps/web/test/unit-tests/components/views/right_panel/user_info/__snapshots__/UserInfoHeaderView-test.tsx.snap b/apps/web/test/unit-tests/components/views/right_panel/user_info/__snapshots__/UserInfoHeaderView-test.tsx.snap
index 348e688b06..034e73c676 100644
--- a/apps/web/test/unit-tests/components/views/right_panel/user_info/__snapshots__/UserInfoHeaderView-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/right_panel/user_info/__snapshots__/UserInfoHeaderView-test.tsx.snap
@@ -53,25 +53,32 @@ exports[`<UserInfoHeaderView /> renders custom user identifiers in the header 1`
         >
           customUserIdentifier
           <button
-            aria-label="Copy"
-            class="mx_AccessibleButton mx_CopyableText_copyButton"
+            aria-labelledby="react-use-id-1"
+            class="_icon-button_1215g_8 mx_CopyableText_copyButton"
+            data-kind="primary"
             role="button"
+            style="--cpd-icon-button-size: 28px; padding: 4px;"
             tabindex="0"
           >
-            <svg
-              fill="currentColor"
-              height="1em"
-              viewBox="0 0 24 24"
-              width="1em"
-              xmlns="http://www.w3.org/2000/svg"
+            <div
+              class="_indicator-icon_147l5_17"
+              style="--cpd-icon-button-size: 100%;"
             >
-              <path
-                d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
-              />
-              <path
-                d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
-              />
-            </svg>
+              <svg
+                fill="currentColor"
+                height="1em"
+                viewBox="0 0 24 24"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
+                />
+                <path
+                  d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
+                />
+              </svg>
+            </div>
           </button>
         </span>
       </p>
diff --git a/apps/web/test/unit-tests/components/views/settings/tabs/room/__snapshots__/AdvancedRoomSettingsTab-test.tsx.snap b/apps/web/test/unit-tests/components/views/settings/tabs/room/__snapshots__/AdvancedRoomSettingsTab-test.tsx.snap
index b4d4bacd02..b90c094f38 100644
--- a/apps/web/test/unit-tests/components/views/settings/tabs/room/__snapshots__/AdvancedRoomSettingsTab-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/settings/tabs/room/__snapshots__/AdvancedRoomSettingsTab-test.tsx.snap
@@ -43,25 +43,32 @@ exports[`AdvancedRoomSettingsTab should render as expected 1`] = `
                 >
                   !room:example.com
                   <button
-                    aria-label="Copy"
-                    class="mx_AccessibleButton mx_CopyableText_copyButton"
+                    aria-labelledby="react-use-id-1"
+                    class="_icon-button_1215g_8 mx_CopyableText_copyButton"
+                    data-kind="primary"
                     role="button"
+                    style="--cpd-icon-button-size: 28px; padding: 4px;"
                     tabindex="0"
                   >
-                    <svg
-                      fill="currentColor"
-                      height="1em"
-                      viewBox="0 0 24 24"
-                      width="1em"
-                      xmlns="http://www.w3.org/2000/svg"
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
                     >
-                      <path
-                        d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
-                      />
-                      <path
-                        d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
-                      />
-                    </svg>
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
+                        />
+                        <path
+                          d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
+                        />
+                      </svg>
+                    </div>
                   </button>
                 </span>
               </div>
diff --git a/apps/web/test/unit-tests/components/views/settings/tabs/user/__snapshots__/AccountUserSettingsTab-test.tsx.snap b/apps/web/test/unit-tests/components/views/settings/tabs/user/__snapshots__/AccountUserSettingsTab-test.tsx.snap
index c6a31f0b12..7002d4bd09 100644
--- a/apps/web/test/unit-tests/components/views/settings/tabs/user/__snapshots__/AccountUserSettingsTab-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/settings/tabs/user/__snapshots__/AccountUserSettingsTab-test.tsx.snap
@@ -42,14 +42,14 @@ exports[`<AccountUserSettingsTab /> 3pids should display 3pid email addresses an
       >
         <input
           autocomplete="email"
-          id="mx_Field_3"
+          id="mx_Field_11"
           label="Email Address"
           placeholder="Email Address"
           type="text"
           value=""
         />
         <label
-          for="mx_Field_3"
+          for="mx_Field_11"
         >
           Email Address
         </label>
@@ -154,14 +154,14 @@ exports[`<AccountUserSettingsTab /> 3pids should display 3pid email addresses an
         </span>
         <input
           autocomplete="tel-national"
-          id="mx_Field_4"
+          id="mx_Field_12"
           label="Phone Number"
           placeholder="Phone Number"
           type="text"
           value=""
         />
         <label
-          for="mx_Field_4"
+          for="mx_Field_12"
         >
           Phone Number
         </label>
diff --git a/packages/shared-components/src/room-list/RoomListHeaderView/RoomListHeaderView.tsx b/packages/shared-components/src/room-list/RoomListHeaderView/RoomListHeaderView.tsx
index 689bb7efbd..45af90aeb6 100644
--- a/packages/shared-components/src/room-list/RoomListHeaderView/RoomListHeaderView.tsx
+++ b/packages/shared-components/src/room-list/RoomListHeaderView/RoomListHeaderView.tsx
@@ -191,7 +191,7 @@ export function RoomListHeaderView({ vm }: Readonly<RoomListHeaderViewProps>): J
                     {canOnlyStartChat ? (
                         <IconButton
                             size="28px"
-                            style={{ padding: "4px" }}
+                            style={{ padding: "4px" }} // Work around miscalculated padding on 28px button: https://github.com/element-hq/compound/issues/409
                             onClick={(e) => vm.createChatRoom(e.nativeEvent)}
                             tooltip={_t("action|start_chat")}
                         >