diff --git a/package.json b/package.json
index 4c15e5c7e7..c1a98219a3 100644
--- a/package.json
+++ b/package.json
@@ -93,7 +93,7 @@
         "@types/png-chunks-extract": "^1.0.2",
         "@types/react-virtualized": "^9.21.30",
         "@vector-im/compound-design-tokens": "^4.0.0",
-        "@vector-im/compound-web": "^7.11.0",
+        "@vector-im/compound-web": "^8.0.0",
         "@vector-im/matrix-wysiwyg": "2.38.3",
         "@zxcvbn-ts/core": "^3.0.4",
         "@zxcvbn-ts/language-common": "^3.0.4",
diff --git a/playwright/snapshots/release-announcement/releaseAnnouncement.spec.ts/release-announcement-All-new-pinned-messages-linux.png b/playwright/snapshots/release-announcement/releaseAnnouncement.spec.ts/release-announcement-All-new-pinned-messages-linux.png
index f466c17d64..78ba6e5cfd 100644
Binary files a/playwright/snapshots/release-announcement/releaseAnnouncement.spec.ts/release-announcement-All-new-pinned-messages-linux.png and b/playwright/snapshots/release-announcement/releaseAnnouncement.spec.ts/release-announcement-All-new-pinned-messages-linux.png differ
diff --git a/res/css/structures/_ThreadsActivityCentre.pcss b/res/css/structures/_ThreadsActivityCentre.pcss
index a1472108ac..f26139da64 100644
--- a/res/css/structures/_ThreadsActivityCentre.pcss
+++ b/res/css/structures/_ThreadsActivityCentre.pcss
@@ -49,12 +49,12 @@
         &:hover,
         &:hover .mx_ThreadsActivityCentreButton_Icon {
             background-color: $quaternary-content;
-            color: $primary-content;
+            fill: $primary-content;
         }
     }
 
     & .mx_ThreadsActivityCentreButton_Icon {
-        color: $secondary-content;
+        fill: $secondary-content;
     }
 }
 
diff --git a/res/css/views/rooms/_RoomHeader.pcss b/res/css/views/rooms/_RoomHeader.pcss
index afde8f3464..0e2b40e0bd 100644
--- a/res/css/views/rooms/_RoomHeader.pcss
+++ b/res/css/views/rooms/_RoomHeader.pcss
@@ -103,5 +103,5 @@ Please see LICENSE files in the repository root for full details.
 }
 
 .mx_RoomHeader .mx_RoomHeader_toggled {
-    color: var(--cpd-color-icon-accent-primary);
+    fill: var(--cpd-color-icon-accent-primary);
 }
diff --git a/src/components/views/right_panel/BaseCard.tsx b/src/components/views/right_panel/BaseCard.tsx
index a564a60695..b308e1d973 100644
--- a/src/components/views/right_panel/BaseCard.tsx
+++ b/src/components/views/right_panel/BaseCard.tsx
@@ -76,7 +76,7 @@ const BaseCard: React.FC<IProps> = ({
                 data-testid="base-card-back-button"
                 onClick={onBackClick}
                 tooltip={label}
-                subtleBackground
+                kind="secondary"
             >
                 <ChevronLeftIcon />
             </IconButton>
@@ -92,7 +92,7 @@ const BaseCard: React.FC<IProps> = ({
                 onClick={onClose ?? closeRightPanel}
                 ref={closeButtonRef}
                 tooltip={closeLabel ?? _t("action|close")}
-                subtleBackground
+                kind="secondary"
             >
                 <CloseIcon />
             </IconButton>
diff --git a/src/components/views/rooms/RoomListPanel/RoomListPrimaryFilters.tsx b/src/components/views/rooms/RoomListPanel/RoomListPrimaryFilters.tsx
index 892f2b56b7..676501a3ea 100644
--- a/src/components/views/rooms/RoomListPanel/RoomListPrimaryFilters.tsx
+++ b/src/components/views/rooms/RoomListPanel/RoomListPrimaryFilters.tsx
@@ -39,7 +39,7 @@ export function RoomListPrimaryFilters({ vm }: RoomListPrimaryFiltersProps): JSX
         >
             {displayChevron && (
                 <IconButton
-                    subtleBackground={true}
+                    kind="secondary"
                     aria-expanded={isExpanded}
                     aria-controls={id}
                     className="mx_RoomListPrimaryFilters_IconButton"
@@ -47,7 +47,7 @@ export function RoomListPrimaryFilters({ vm }: RoomListPrimaryFiltersProps): JSX
                     size="28px"
                     onClick={() => setIsExpanded((_expanded) => !_expanded)}
                 >
-                    <ChevronDownIcon color="var(--cpd-color-icon-secondary)" />
+                    <ChevronDownIcon />
                 </IconButton>
             )}
             <Flex
diff --git a/test/unit-tests/components/structures/__snapshots__/FilePanel-test.tsx.snap b/test/unit-tests/components/structures/__snapshots__/FilePanel-test.tsx.snap
index f311521960..18fafbe3e2 100644
--- a/test/unit-tests/components/structures/__snapshots__/FilePanel-test.tsx.snap
+++ b/test/unit-tests/components/structures/__snapshots__/FilePanel-test.tsx.snap
@@ -20,7 +20,8 @@ exports[`FilePanel renders empty state 1`] = `
       </div>
       <button
         aria-labelledby="«r0»"
-        class="_icon-button_m2erp_8 _subtle-bg_m2erp_29"
+        class="_icon-button_1pz9o_8"
+        data-kind="secondary"
         data-testid="base-card-close-button"
         role="button"
         style="--cpd-icon-button-size: 28px;"
diff --git a/test/unit-tests/components/structures/__snapshots__/RoomView-test.tsx.snap b/test/unit-tests/components/structures/__snapshots__/RoomView-test.tsx.snap
index f194d0bb33..d33ff73307 100644
--- a/test/unit-tests/components/structures/__snapshots__/RoomView-test.tsx.snap
+++ b/test/unit-tests/components/structures/__snapshots__/RoomView-test.tsx.snap
@@ -48,7 +48,8 @@ exports[`RoomView for a local room in state CREATING should match the snapshot 1
       <button
         aria-disabled="false"
         aria-label="Video call"
-        class="_icon-button_m2erp_8"
+        class="_icon-button_1pz9o_8"
+        data-kind="primary"
         role="button"
         style="--cpd-icon-button-size: 32px;"
         tabindex="0"
@@ -75,7 +76,8 @@ exports[`RoomView for a local room in state CREATING should match the snapshot 1
         aria-disabled="false"
         aria-label="Voice call"
         aria-labelledby="«rg9»"
-        class="_icon-button_m2erp_8"
+        class="_icon-button_1pz9o_8"
+        data-kind="primary"
         role="button"
         style="--cpd-icon-button-size: 32px;"
         tabindex="0"
@@ -100,7 +102,8 @@ exports[`RoomView for a local room in state CREATING should match the snapshot 1
       <button
         aria-label="Threads"
         aria-labelledby="«rge»"
-        class="_icon-button_m2erp_8"
+        class="_icon-button_1pz9o_8"
+        data-kind="primary"
         role="button"
         style="--cpd-icon-button-size: 32px;"
         tabindex="0"
@@ -126,7 +129,8 @@ exports[`RoomView for a local room in state CREATING should match the snapshot 1
       <button
         aria-label="Room info"
         aria-labelledby="«rgj»"
-        class="_icon-button_m2erp_8"
+        class="_icon-button_1pz9o_8"
+        data-kind="primary"
         role="button"
         style="--cpd-icon-button-size: 32px;"
         tabindex="0"
@@ -263,7 +267,8 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
       <button
         aria-disabled="false"
         aria-label="Video call"
-        class="_icon-button_m2erp_8"
+        class="_icon-button_1pz9o_8"
+        data-kind="primary"
         role="button"
         style="--cpd-icon-button-size: 32px;"
         tabindex="0"
@@ -290,7 +295,8 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
         aria-disabled="false"
         aria-label="Voice call"
         aria-labelledby="«rh7»"
-        class="_icon-button_m2erp_8"
+        class="_icon-button_1pz9o_8"
+        data-kind="primary"
         role="button"
         style="--cpd-icon-button-size: 32px;"
         tabindex="0"
@@ -315,7 +321,8 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
       <button
         aria-label="Threads"
         aria-labelledby="«rhc»"
-        class="_icon-button_m2erp_8"
+        class="_icon-button_1pz9o_8"
+        data-kind="primary"
         role="button"
         style="--cpd-icon-button-size: 32px;"
         tabindex="0"
@@ -341,7 +348,8 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
       <button
         aria-label="Room info"
         aria-labelledby="«rhh»"
-        class="_icon-button_m2erp_8"
+        class="_icon-button_1pz9o_8"
+        data-kind="primary"
         role="button"
         style="--cpd-icon-button-size: 32px;"
         tabindex="0"
@@ -564,7 +572,8 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
       <button
         aria-disabled="false"
         aria-label="Video call"
-        class="_icon-button_m2erp_8"
+        class="_icon-button_1pz9o_8"
+        data-kind="primary"
         role="button"
         style="--cpd-icon-button-size: 32px;"
         tabindex="0"
@@ -591,7 +600,8 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
         aria-disabled="false"
         aria-label="Voice call"
         aria-labelledby="«rbt»"
-        class="_icon-button_m2erp_8"
+        class="_icon-button_1pz9o_8"
+        data-kind="primary"
         role="button"
         style="--cpd-icon-button-size: 32px;"
         tabindex="0"
@@ -616,7 +626,8 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
       <button
         aria-label="Threads"
         aria-labelledby="«rc2»"
-        class="_icon-button_m2erp_8"
+        class="_icon-button_1pz9o_8"
+        data-kind="primary"
         role="button"
         style="--cpd-icon-button-size: 32px;"
         tabindex="0"
@@ -642,7 +653,8 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
       <button
         aria-label="Room info"
         aria-labelledby="«rc7»"
-        class="_icon-button_m2erp_8"
+        class="_icon-button_1pz9o_8"
+        data-kind="primary"
         role="button"
         style="--cpd-icon-button-size: 32px;"
         tabindex="0"
@@ -942,7 +954,8 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
       <button
         aria-disabled="false"
         aria-label="Video call"
-        class="_icon-button_m2erp_8"
+        class="_icon-button_1pz9o_8"
+        data-kind="primary"
         role="button"
         style="--cpd-icon-button-size: 32px;"
         tabindex="0"
@@ -969,7 +982,8 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
         aria-disabled="false"
         aria-label="Voice call"
         aria-labelledby="«re3»"
-        class="_icon-button_m2erp_8"
+        class="_icon-button_1pz9o_8"
+        data-kind="primary"
         role="button"
         style="--cpd-icon-button-size: 32px;"
         tabindex="0"
@@ -994,7 +1008,8 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
       <button
         aria-label="Threads"
         aria-labelledby="«re8»"
-        class="_icon-button_m2erp_8"
+        class="_icon-button_1pz9o_8"
+        data-kind="primary"
         role="button"
         style="--cpd-icon-button-size: 32px;"
         tabindex="0"
@@ -1020,7 +1035,8 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
       <button
         aria-label="Room info"
         aria-labelledby="«red»"
-        class="_icon-button_m2erp_8"
+        class="_icon-button_1pz9o_8"
+        data-kind="primary"
         role="button"
         style="--cpd-icon-button-size: 32px;"
         tabindex="0"
@@ -1401,7 +1417,8 @@ exports[`RoomView should not display the timeline when the room encryption is lo
           <button
             aria-disabled="true"
             aria-label="There's no one here to call"
-            class="_icon-button_m2erp_8"
+            class="_icon-button_1pz9o_8"
+            data-kind="primary"
             role="button"
             style="--cpd-icon-button-size: 32px;"
             tabindex="0"
@@ -1428,7 +1445,8 @@ exports[`RoomView should not display the timeline when the room encryption is lo
             aria-disabled="true"
             aria-label="There's no one here to call"
             aria-labelledby="«r2h»"
-            class="_icon-button_m2erp_8"
+            class="_icon-button_1pz9o_8"
+            data-kind="primary"
             role="button"
             style="--cpd-icon-button-size: 32px;"
             tabindex="0"
@@ -1453,7 +1471,8 @@ exports[`RoomView should not display the timeline when the room encryption is lo
           <button
             aria-label="Threads"
             aria-labelledby="«r2m»"
-            class="_icon-button_m2erp_8"
+            class="_icon-button_1pz9o_8"
+            data-kind="primary"
             role="button"
             style="--cpd-icon-button-size: 32px;"
             tabindex="0"
@@ -1479,7 +1498,8 @@ exports[`RoomView should not display the timeline when the room encryption is lo
           <button
             aria-label="Room info"
             aria-labelledby="«r2r»"
-            class="_icon-button_m2erp_8"
+            class="_icon-button_1pz9o_8"
+            data-kind="primary"
             role="button"
             style="--cpd-icon-button-size: 32px;"
             tabindex="0"
@@ -1609,7 +1629,8 @@ exports[`RoomView should not display the timeline when the room encryption is lo
           <button
             aria-disabled="true"
             aria-label="There's no one here to call"
-            class="_icon-button_m2erp_8"
+            class="_icon-button_1pz9o_8"
+            data-kind="primary"
             role="button"
             style="--cpd-icon-button-size: 32px;"
             tabindex="0"
@@ -1636,7 +1657,8 @@ exports[`RoomView should not display the timeline when the room encryption is lo
             aria-disabled="true"
             aria-label="There's no one here to call"
             aria-labelledby="«r2h»"
-            class="_icon-button_m2erp_8"
+            class="_icon-button_1pz9o_8"
+            data-kind="primary"
             role="button"
             style="--cpd-icon-button-size: 32px;"
             tabindex="0"
@@ -1661,7 +1683,8 @@ exports[`RoomView should not display the timeline when the room encryption is lo
           <button
             aria-label="Threads"
             aria-labelledby="«r2m»"
-            class="_icon-button_m2erp_8"
+            class="_icon-button_1pz9o_8"
+            data-kind="primary"
             role="button"
             style="--cpd-icon-button-size: 32px;"
             tabindex="0"
@@ -1687,7 +1710,8 @@ exports[`RoomView should not display the timeline when the room encryption is lo
           <button
             aria-label="Room info"
             aria-labelledby="«r2r»"
-            class="_icon-button_m2erp_8"
+            class="_icon-button_1pz9o_8"
+            data-kind="primary"
             role="button"
             style="--cpd-icon-button-size: 32px;"
             tabindex="0"
@@ -1990,7 +2014,8 @@ exports[`RoomView video rooms should render joined video room view 1`] = `
           <button
             aria-label="Chat"
             aria-labelledby="«r7c»"
-            class="_icon-button_m2erp_8"
+            class="_icon-button_1pz9o_8"
+            data-kind="primary"
             role="button"
             style="--cpd-icon-button-size: 32px;"
             tabindex="0"
@@ -2016,7 +2041,8 @@ exports[`RoomView video rooms should render joined video room view 1`] = `
           <button
             aria-label="Threads"
             aria-labelledby="«r7h»"
-            class="_icon-button_m2erp_8"
+            class="_icon-button_1pz9o_8"
+            data-kind="primary"
             role="button"
             style="--cpd-icon-button-size: 32px;"
             tabindex="0"
@@ -2042,7 +2068,8 @@ exports[`RoomView video rooms should render joined video room view 1`] = `
           <button
             aria-label="Room info"
             aria-labelledby="«r7m»"
-            class="_icon-button_m2erp_8"
+            class="_icon-button_1pz9o_8"
+            data-kind="primary"
             role="button"
             style="--cpd-icon-button-size: 32px;"
             tabindex="0"
@@ -2145,7 +2172,8 @@ exports[`RoomView video rooms should render joined video room view 1`] = `
               </div>
               <button
                 aria-labelledby="«r84»"
-                class="_icon-button_m2erp_8 _subtle-bg_m2erp_29"
+                class="_icon-button_1pz9o_8"
+                data-kind="secondary"
                 data-testid="base-card-close-button"
                 role="button"
                 style="--cpd-icon-button-size: 28px;"
diff --git a/test/unit-tests/components/structures/__snapshots__/ThreadPanel-test.tsx.snap b/test/unit-tests/components/structures/__snapshots__/ThreadPanel-test.tsx.snap
index 41b789d831..aa5600052b 100644
--- a/test/unit-tests/components/structures/__snapshots__/ThreadPanel-test.tsx.snap
+++ b/test/unit-tests/components/structures/__snapshots__/ThreadPanel-test.tsx.snap
@@ -7,7 +7,8 @@ exports[`ThreadPanel Header expect that All filter for ThreadPanelHeader properl
   >
     <button
       aria-labelledby="«r0»"
-      class="_icon-button_m2erp_8"
+      class="_icon-button_1pz9o_8"
+      data-kind="primary"
       role="button"
       style="--cpd-icon-button-size: 28px;"
       tabindex="0"
@@ -45,7 +46,8 @@ exports[`ThreadPanel Header expect that My filter for ThreadPanelHeader properly
   >
     <button
       aria-labelledby="«r6»"
-      class="_icon-button_m2erp_8"
+      class="_icon-button_1pz9o_8"
+      data-kind="primary"
       role="button"
       style="--cpd-icon-button-size: 28px;"
       tabindex="0"
diff --git a/test/unit-tests/components/views/elements/__snapshots__/AppTile-test.tsx.snap b/test/unit-tests/components/views/elements/__snapshots__/AppTile-test.tsx.snap
index ccbdf5d8fb..6986fe9770 100644
--- a/test/unit-tests/components/views/elements/__snapshots__/AppTile-test.tsx.snap
+++ b/test/unit-tests/components/views/elements/__snapshots__/AppTile-test.tsx.snap
@@ -32,7 +32,8 @@ exports[`AppTile destroys non-persisted right panel widget on room change 1`] =
         </div>
         <button
           aria-labelledby="«r0»"
-          class="_icon-button_m2erp_8 _subtle-bg_m2erp_29"
+          class="_icon-button_1pz9o_8"
+          data-kind="secondary"
           data-testid="base-card-close-button"
           role="button"
           style="--cpd-icon-button-size: 28px;"
diff --git a/test/unit-tests/components/views/right_panel/__snapshots__/BaseCard-test.tsx.snap b/test/unit-tests/components/views/right_panel/__snapshots__/BaseCard-test.tsx.snap
index ef91df63af..425f5942dd 100644
--- a/test/unit-tests/components/views/right_panel/__snapshots__/BaseCard-test.tsx.snap
+++ b/test/unit-tests/components/views/right_panel/__snapshots__/BaseCard-test.tsx.snap
@@ -20,7 +20,8 @@ exports[`<BaseCard /> should close when clicking X button 1`] = `
       </div>
       <button
         aria-labelledby="«r0»"
-        class="_icon-button_m2erp_8 _subtle-bg_m2erp_29"
+        class="_icon-button_1pz9o_8"
+        data-kind="secondary"
         data-testid="base-card-close-button"
         role="button"
         style="--cpd-icon-button-size: 28px;"
diff --git a/test/unit-tests/components/views/right_panel/__snapshots__/ExtensionsCard-test.tsx.snap b/test/unit-tests/components/views/right_panel/__snapshots__/ExtensionsCard-test.tsx.snap
index b3a84240f0..acaacb0187 100644
--- a/test/unit-tests/components/views/right_panel/__snapshots__/ExtensionsCard-test.tsx.snap
+++ b/test/unit-tests/components/views/right_panel/__snapshots__/ExtensionsCard-test.tsx.snap
@@ -20,7 +20,8 @@ exports[`<ExtensionsCard /> should render empty state 1`] = `
       </div>
       <button
         aria-labelledby="«r0»"
-        class="_icon-button_m2erp_8 _subtle-bg_m2erp_29"
+        class="_icon-button_1pz9o_8"
+        data-kind="secondary"
         data-testid="base-card-close-button"
         role="button"
         style="--cpd-icon-button-size: 28px;"
@@ -120,7 +121,8 @@ exports[`<ExtensionsCard /> should render widgets 1`] = `
       </div>
       <button
         aria-labelledby="«r6»"
-        class="_icon-button_m2erp_8 _subtle-bg_m2erp_29"
+        class="_icon-button_1pz9o_8"
+        data-kind="secondary"
         data-testid="base-card-close-button"
         role="button"
         style="--cpd-icon-button-size: 28px;"
diff --git a/test/unit-tests/components/views/right_panel/__snapshots__/PinnedMessagesCard-test.tsx.snap b/test/unit-tests/components/views/right_panel/__snapshots__/PinnedMessagesCard-test.tsx.snap
index e0052d818c..2f222d34ea 100644
--- a/test/unit-tests/components/views/right_panel/__snapshots__/PinnedMessagesCard-test.tsx.snap
+++ b/test/unit-tests/components/views/right_panel/__snapshots__/PinnedMessagesCard-test.tsx.snap
@@ -20,7 +20,8 @@ exports[`<PinnedMessagesCard /> should show the empty state when there are no pi
       </div>
       <button
         aria-labelledby="«re»"
-        class="_icon-button_m2erp_8 _subtle-bg_m2erp_29"
+        class="_icon-button_1pz9o_8"
+        data-kind="secondary"
         data-testid="base-card-close-button"
         role="button"
         style="--cpd-icon-button-size: 28px;"
@@ -101,7 +102,8 @@ exports[`<PinnedMessagesCard /> should show two pinned messages 1`] = `
       </div>
       <button
         aria-labelledby="«rk»"
-        class="_icon-button_m2erp_8 _subtle-bg_m2erp_29"
+        class="_icon-button_1pz9o_8"
+        data-kind="secondary"
         data-testid="base-card-close-button"
         role="button"
         style="--cpd-icon-button-size: 28px;"
@@ -167,7 +169,8 @@ exports[`<PinnedMessagesCard /> should show two pinned messages 1`] = `
                 aria-expanded="false"
                 aria-haspopup="menu"
                 aria-label="Open menu"
-                class="_icon-button_m2erp_8"
+                class="_icon-button_1pz9o_8"
+                data-kind="primary"
                 data-state="closed"
                 id="radix-«rv»"
                 role="button"
@@ -245,7 +248,8 @@ exports[`<PinnedMessagesCard /> should show two pinned messages 1`] = `
                 aria-expanded="false"
                 aria-haspopup="menu"
                 aria-label="Open menu"
-                class="_icon-button_m2erp_8"
+                class="_icon-button_1pz9o_8"
+                data-kind="primary"
                 data-state="closed"
                 id="radix-«r16»"
                 role="button"
@@ -322,7 +326,8 @@ exports[`<PinnedMessagesCard /> unpin all should not allow to unpinall 1`] = `
       </div>
       <button
         aria-labelledby="«rt2»"
-        class="_icon-button_m2erp_8 _subtle-bg_m2erp_29"
+        class="_icon-button_1pz9o_8"
+        data-kind="secondary"
         data-testid="base-card-close-button"
         role="button"
         style="--cpd-icon-button-size: 28px;"
@@ -388,7 +393,8 @@ exports[`<PinnedMessagesCard /> unpin all should not allow to unpinall 1`] = `
                 aria-expanded="false"
                 aria-haspopup="menu"
                 aria-label="Open menu"
-                class="_icon-button_m2erp_8"
+                class="_icon-button_1pz9o_8"
+                data-kind="primary"
                 data-state="closed"
                 id="radix-«rtd»"
                 role="button"
@@ -466,7 +472,8 @@ exports[`<PinnedMessagesCard /> unpin all should not allow to unpinall 1`] = `
                 aria-expanded="false"
                 aria-haspopup="menu"
                 aria-label="Open menu"
-                class="_icon-button_m2erp_8"
+                class="_icon-button_1pz9o_8"
+                data-kind="primary"
                 data-state="closed"
                 id="radix-«rtk»"
                 role="button"
diff --git a/test/unit-tests/components/views/right_panel/__snapshots__/RoomSummaryCardView-test.tsx.snap b/test/unit-tests/components/views/right_panel/__snapshots__/RoomSummaryCardView-test.tsx.snap
index 10e9ae776d..be6fdd5fcf 100644
--- a/test/unit-tests/components/views/right_panel/__snapshots__/RoomSummaryCardView-test.tsx.snap
+++ b/test/unit-tests/components/views/right_panel/__snapshots__/RoomSummaryCardView-test.tsx.snap
@@ -17,7 +17,8 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
       />
       <button
         aria-labelledby="«rq»"
-        class="_icon-button_m2erp_8 _subtle-bg_m2erp_29"
+        class="_icon-button_1pz9o_8"
+        data-kind="secondary"
         data-testid="base-card-close-button"
         role="button"
         style="--cpd-icon-button-size: 28px;"
@@ -126,7 +127,8 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
               </span>
             </p>
             <button
-              class="_icon-button_m2erp_8 mx_RoomSummaryCard_topic_chevron"
+              class="_icon-button_1pz9o_8 mx_RoomSummaryCard_topic_chevron"
+              data-kind="primary"
               role="button"
               style="--cpd-icon-button-size: 24px;"
               tabindex="0"
@@ -775,7 +777,8 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
       />
       <button
         aria-labelledby="«r0»"
-        class="_icon-button_m2erp_8 _subtle-bg_m2erp_29"
+        class="_icon-button_1pz9o_8"
+        data-kind="secondary"
         data-testid="base-card-close-button"
         role="button"
         style="--cpd-icon-button-size: 28px;"
@@ -1496,7 +1499,8 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
       />
       <button
         aria-labelledby="«rd»"
-        class="_icon-button_m2erp_8 _subtle-bg_m2erp_29"
+        class="_icon-button_1pz9o_8"
+        data-kind="secondary"
         data-testid="base-card-close-button"
         role="button"
         style="--cpd-icon-button-size: 28px;"
@@ -1605,7 +1609,8 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
               </span>
             </p>
             <button
-              class="_icon-button_m2erp_8 mx_RoomSummaryCard_topic_chevron"
+              class="_icon-button_1pz9o_8 mx_RoomSummaryCard_topic_chevron"
+              data-kind="primary"
               role="button"
               style="--cpd-icon-button-size: 24px;"
               tabindex="0"
diff --git a/test/unit-tests/components/views/right_panel/__snapshots__/UserInfo-test.tsx.snap b/test/unit-tests/components/views/right_panel/__snapshots__/UserInfo-test.tsx.snap
index 654db50e0f..92de5429cb 100644
--- a/test/unit-tests/components/views/right_panel/__snapshots__/UserInfo-test.tsx.snap
+++ b/test/unit-tests/components/views/right_panel/__snapshots__/UserInfo-test.tsx.snap
@@ -20,7 +20,8 @@ exports[`<UserInfo /> with crypto enabled renders <BasicUserInfo /> 1`] = `
       </div>
       <button
         aria-labelledby="«r6i»"
-        class="_icon-button_m2erp_8 _subtle-bg_m2erp_29"
+        class="_icon-button_1pz9o_8"
+        data-kind="secondary"
         data-testid="base-card-close-button"
         role="button"
         style="--cpd-icon-button-size: 28px;"
@@ -306,7 +307,8 @@ exports[`<UserInfo /> with crypto enabled should render a deactivate button for
       </div>
       <button
         aria-labelledby="«r6s»"
-        class="_icon-button_m2erp_8 _subtle-bg_m2erp_29"
+        class="_icon-button_1pz9o_8"
+        data-kind="secondary"
         data-testid="base-card-close-button"
         role="button"
         style="--cpd-icon-button-size: 28px;"
diff --git a/test/unit-tests/components/views/rooms/RoomHeader/__snapshots__/RoomHeader-test.tsx.snap b/test/unit-tests/components/views/rooms/RoomHeader/__snapshots__/RoomHeader-test.tsx.snap
index a32d00d282..93b5229029 100644
--- a/test/unit-tests/components/views/rooms/RoomHeader/__snapshots__/RoomHeader-test.tsx.snap
+++ b/test/unit-tests/components/views/rooms/RoomHeader/__snapshots__/RoomHeader-test.tsx.snap
@@ -45,7 +45,8 @@ exports[`RoomHeader dm does not show the face pile for DMs 1`] = `
     <button
       aria-disabled="true"
       aria-label="There's no one here to call"
-      class="_icon-button_m2erp_8"
+      class="_icon-button_1pz9o_8"
+      data-kind="primary"
       role="button"
       style="--cpd-icon-button-size: 32px;"
       tabindex="0"
@@ -72,7 +73,8 @@ exports[`RoomHeader dm does not show the face pile for DMs 1`] = `
       aria-disabled="true"
       aria-label="There's no one here to call"
       aria-labelledby="«r1dt»"
-      class="_icon-button_m2erp_8"
+      class="_icon-button_1pz9o_8"
+      data-kind="primary"
       role="button"
       style="--cpd-icon-button-size: 32px;"
       tabindex="0"
@@ -97,7 +99,8 @@ exports[`RoomHeader dm does not show the face pile for DMs 1`] = `
     <button
       aria-label="Threads"
       aria-labelledby="«r1e2»"
-      class="_icon-button_m2erp_8"
+      class="_icon-button_1pz9o_8"
+      data-kind="primary"
       role="button"
       style="--cpd-icon-button-size: 32px;"
       tabindex="0"
@@ -123,7 +126,8 @@ exports[`RoomHeader dm does not show the face pile for DMs 1`] = `
     <button
       aria-label="Room info"
       aria-labelledby="«r1e7»"
-      class="_icon-button_m2erp_8"
+      class="_icon-button_1pz9o_8"
+      data-kind="primary"
       role="button"
       style="--cpd-icon-button-size: 32px;"
       tabindex="0"
diff --git a/test/unit-tests/components/views/rooms/RoomHeader/__snapshots__/VideoRoomChatButton-test.tsx.snap b/test/unit-tests/components/views/rooms/RoomHeader/__snapshots__/VideoRoomChatButton-test.tsx.snap
index ec92f780ea..a2cef17138 100644
--- a/test/unit-tests/components/views/rooms/RoomHeader/__snapshots__/VideoRoomChatButton-test.tsx.snap
+++ b/test/unit-tests/components/views/rooms/RoomHeader/__snapshots__/VideoRoomChatButton-test.tsx.snap
@@ -4,8 +4,9 @@ exports[`<VideoRoomChatButton /> renders button with an unread marker when room
 <button
   aria-label="Chat"
   aria-labelledby="«r6»"
-  class="_icon-button_m2erp_8"
+  class="_icon-button_1pz9o_8"
   data-indicator="default"
+  data-kind="primary"
   role="button"
   style="--cpd-icon-button-size: 32px;"
   tabindex="0"
diff --git a/test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListHeaderView-test.tsx.snap b/test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListHeaderView-test.tsx.snap
index 1291ef91ea..025240b170 100644
--- a/test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListHeaderView-test.tsx.snap
+++ b/test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListHeaderView-test.tsx.snap
@@ -22,7 +22,8 @@ exports[`<RoomListHeaderView /> compose menu should display the compose menu 1`]
         aria-expanded="false"
         aria-haspopup="menu"
         aria-label="Open space menu"
-        class="_icon-button_m2erp_8 mx_SpaceMenu_button"
+        class="_icon-button_1pz9o_8 mx_SpaceMenu_button"
+        data-kind="primary"
         data-state="closed"
         id="radix-«rc»"
         role="button"
@@ -59,7 +60,8 @@ exports[`<RoomListHeaderView /> compose menu should display the compose menu 1`]
         aria-haspopup="menu"
         aria-label="Room Options"
         aria-labelledby="«rg»"
-        class="_icon-button_m2erp_8"
+        class="_icon-button_1pz9o_8"
+        data-kind="primary"
         data-state="closed"
         id="radix-«re»"
         role="button"
@@ -90,7 +92,8 @@ exports[`<RoomListHeaderView /> compose menu should display the compose menu 1`]
         aria-expanded="false"
         aria-haspopup="menu"
         aria-label="Add"
-        class="_icon-button_m2erp_8"
+        class="_icon-button_1pz9o_8"
+        data-kind="primary"
         data-state="closed"
         id="radix-«rl»"
         role="button"
@@ -148,7 +151,8 @@ exports[`<RoomListHeaderView /> compose menu should not display the compose menu
         aria-expanded="false"
         aria-haspopup="menu"
         aria-label="Open space menu"
-        class="_icon-button_m2erp_8 mx_SpaceMenu_button"
+        class="_icon-button_1pz9o_8 mx_SpaceMenu_button"
+        data-kind="primary"
         data-state="closed"
         id="radix-«ro»"
         role="button"
@@ -185,7 +189,8 @@ exports[`<RoomListHeaderView /> compose menu should not display the compose menu
         aria-haspopup="menu"
         aria-label="Room Options"
         aria-labelledby="«rs»"
-        class="_icon-button_m2erp_8"
+        class="_icon-button_1pz9o_8"
+        data-kind="primary"
         data-state="closed"
         id="radix-«rq»"
         role="button"
@@ -213,7 +218,8 @@ exports[`<RoomListHeaderView /> compose menu should not display the compose menu
       </button>
       <button
         aria-label="New message"
-        class="_icon-button_m2erp_8"
+        class="_icon-button_1pz9o_8"
+        data-kind="primary"
         role="button"
         style="--cpd-icon-button-size: 32px;"
         tabindex="0"
@@ -268,7 +274,8 @@ exports[`<RoomListHeaderView /> should render 'room options' button 1`] = `
         aria-expanded="false"
         aria-haspopup="menu"
         aria-label="Open space menu"
-        class="_icon-button_m2erp_8 mx_SpaceMenu_button"
+        class="_icon-button_1pz9o_8 mx_SpaceMenu_button"
+        data-kind="primary"
         data-state="closed"
         id="radix-«r0»"
         role="button"
@@ -305,7 +312,8 @@ exports[`<RoomListHeaderView /> should render 'room options' button 1`] = `
         aria-haspopup="menu"
         aria-label="Room Options"
         aria-labelledby="«r4»"
-        class="_icon-button_m2erp_8"
+        class="_icon-button_1pz9o_8"
+        data-kind="primary"
         data-state="closed"
         id="radix-«r2»"
         role="button"
@@ -336,7 +344,8 @@ exports[`<RoomListHeaderView /> should render 'room options' button 1`] = `
         aria-expanded="false"
         aria-haspopup="menu"
         aria-label="Add"
-        class="_icon-button_m2erp_8"
+        class="_icon-button_1pz9o_8"
+        data-kind="primary"
         data-state="closed"
         id="radix-«r9»"
         role="button"
@@ -394,7 +403,8 @@ exports[`<RoomListHeaderView /> space menu should display the space menu 1`] = `
         aria-expanded="false"
         aria-haspopup="menu"
         aria-label="Open space menu"
-        class="_icon-button_m2erp_8 mx_SpaceMenu_button"
+        class="_icon-button_1pz9o_8 mx_SpaceMenu_button"
+        data-kind="primary"
         data-state="closed"
         id="radix-«r28»"
         role="button"
@@ -431,7 +441,8 @@ exports[`<RoomListHeaderView /> space menu should display the space menu 1`] = `
         aria-haspopup="menu"
         aria-label="Room Options"
         aria-labelledby="«r2c»"
-        class="_icon-button_m2erp_8"
+        class="_icon-button_1pz9o_8"
+        data-kind="primary"
         data-state="closed"
         id="radix-«r2a»"
         role="button"
@@ -462,7 +473,8 @@ exports[`<RoomListHeaderView /> space menu should display the space menu 1`] = `
         aria-expanded="false"
         aria-haspopup="menu"
         aria-label="Add"
-        class="_icon-button_m2erp_8"
+        class="_icon-button_1pz9o_8"
+        data-kind="primary"
         data-state="closed"
         id="radix-«r2h»"
         role="button"
@@ -526,7 +538,8 @@ exports[`<RoomListHeaderView /> space menu should not display the space menu 1`]
         aria-haspopup="menu"
         aria-label="Room Options"
         aria-labelledby="«r2m»"
-        class="_icon-button_m2erp_8"
+        class="_icon-button_1pz9o_8"
+        data-kind="primary"
         data-state="closed"
         id="radix-«r2k»"
         role="button"
@@ -557,7 +570,8 @@ exports[`<RoomListHeaderView /> space menu should not display the space menu 1`]
         aria-expanded="false"
         aria-haspopup="menu"
         aria-label="Add"
-        class="_icon-button_m2erp_8"
+        class="_icon-button_1pz9o_8"
+        data-kind="primary"
         data-state="closed"
         id="radix-«r2r»"
         role="button"
diff --git a/test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListItemMenuView-test.tsx.snap b/test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListItemMenuView-test.tsx.snap
index 7bb17cbd4f..233819e221 100644
--- a/test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListItemMenuView-test.tsx.snap
+++ b/test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListItemMenuView-test.tsx.snap
@@ -12,7 +12,8 @@ exports[`<RoomListItemMenuView /> should render the more options menu 1`] = `
       aria-haspopup="menu"
       aria-label="More Options"
       aria-labelledby="«r2»"
-      class="_icon-button_m2erp_8"
+      class="_icon-button_1pz9o_8"
+      data-kind="primary"
       data-state="closed"
       id="radix-«r0»"
       role="button"
@@ -43,7 +44,8 @@ exports[`<RoomListItemMenuView /> should render the more options menu 1`] = `
       aria-haspopup="menu"
       aria-label="Notification options"
       aria-labelledby="«r9»"
-      class="_icon-button_m2erp_8"
+      class="_icon-button_1pz9o_8"
+      data-kind="primary"
       data-state="closed"
       id="radix-«r7»"
       role="button"
@@ -87,7 +89,8 @@ exports[`<RoomListItemMenuView /> should render the notification options menu 1`
       aria-haspopup="menu"
       aria-label="More Options"
       aria-labelledby="«ri»"
-      class="_icon-button_m2erp_8"
+      class="_icon-button_1pz9o_8"
+      data-kind="primary"
       data-state="closed"
       id="radix-«rg»"
       role="button"
@@ -118,7 +121,8 @@ exports[`<RoomListItemMenuView /> should render the notification options menu 1`
       aria-haspopup="menu"
       aria-label="Notification options"
       aria-labelledby="«rp»"
-      class="_icon-button_m2erp_8"
+      class="_icon-button_1pz9o_8"
+      data-kind="primary"
       data-state="closed"
       id="radix-«rn»"
       role="button"
diff --git a/test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListOptionsMenu-test.tsx.snap b/test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListOptionsMenu-test.tsx.snap
index 6b75053753..26f4df265f 100644
--- a/test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListOptionsMenu-test.tsx.snap
+++ b/test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListOptionsMenu-test.tsx.snap
@@ -8,7 +8,8 @@ exports[`<RoomListOptionsMenu /> should match snapshot 1`] = `
     aria-haspopup="menu"
     aria-label="Room Options"
     aria-labelledby="«r2»"
-    class="_icon-button_m2erp_8"
+    class="_icon-button_1pz9o_8"
+    data-kind="primary"
     data-state="closed"
     id="radix-«r0»"
     role="button"
diff --git a/test/unit-tests/components/views/rooms/__snapshots__/PinnedEventTile-test.tsx.snap b/test/unit-tests/components/views/rooms/__snapshots__/PinnedEventTile-test.tsx.snap
index 84a4da73ef..26a121a88a 100644
--- a/test/unit-tests/components/views/rooms/__snapshots__/PinnedEventTile-test.tsx.snap
+++ b/test/unit-tests/components/views/rooms/__snapshots__/PinnedEventTile-test.tsx.snap
@@ -35,7 +35,8 @@ exports[`<PinnedEventTile /> should render pinned event 1`] = `
           aria-expanded="false"
           aria-haspopup="menu"
           aria-label="Open menu"
-          class="_icon-button_m2erp_8"
+          class="_icon-button_1pz9o_8"
+          data-kind="primary"
           data-state="closed"
           id="radix-«r5»"
           role="button"
@@ -111,7 +112,8 @@ exports[`<PinnedEventTile /> should render pinned event with thread info 1`] = `
           aria-expanded="false"
           aria-haspopup="menu"
           aria-label="Open menu"
-          class="_icon-button_m2erp_8"
+          class="_icon-button_1pz9o_8"
+          data-kind="primary"
           data-state="closed"
           id="radix-«rd»"
           role="button"
diff --git a/test/unit-tests/components/views/rooms/__snapshots__/ThirdPartyMemberInfo-test.tsx.snap b/test/unit-tests/components/views/rooms/__snapshots__/ThirdPartyMemberInfo-test.tsx.snap
index 75d559f390..3396f75663 100644
--- a/test/unit-tests/components/views/rooms/__snapshots__/ThirdPartyMemberInfo-test.tsx.snap
+++ b/test/unit-tests/components/views/rooms/__snapshots__/ThirdPartyMemberInfo-test.tsx.snap
@@ -20,7 +20,8 @@ exports[`<ThirdPartyMemberInfo /> should render invite 1`] = `
       </div>
       <button
         aria-labelledby="«r0»"
-        class="_icon-button_m2erp_8 _subtle-bg_m2erp_29"
+        class="_icon-button_1pz9o_8"
+        data-kind="secondary"
         data-testid="base-card-close-button"
         role="button"
         style="--cpd-icon-button-size: 28px;"
@@ -94,7 +95,8 @@ exports[`<ThirdPartyMemberInfo /> should render invite when room in not availabl
       </div>
       <button
         aria-labelledby="«r6»"
-        class="_icon-button_m2erp_8 _subtle-bg_m2erp_29"
+        class="_icon-button_1pz9o_8"
+        data-kind="secondary"
         data-testid="base-card-close-button"
         role="button"
         style="--cpd-icon-button-size: 28px;"
diff --git a/test/unit-tests/components/views/settings/__snapshots__/ThemeChoicePanel-test.tsx.snap b/test/unit-tests/components/views/settings/__snapshots__/ThemeChoicePanel-test.tsx.snap
index 64b9312ae8..487a674274 100644
--- a/test/unit-tests/components/views/settings/__snapshots__/ThemeChoicePanel-test.tsx.snap
+++ b/test/unit-tests/components/views/settings/__snapshots__/ThemeChoicePanel-test.tsx.snap
@@ -241,7 +241,8 @@ exports[`<ThemeChoicePanel /> custom theme should display custom theme 1`] = `
             <button
               aria-label="Delete"
               aria-labelledby="«r2f»"
-              class="_icon-button_m2erp_8 _destructive_m2erp_74"
+              class="_icon-button_1pz9o_8 _destructive_1pz9o_95"
+              data-kind="primary"
               role="button"
               style="--cpd-icon-button-size: 32px;"
               tabindex="0"
@@ -518,7 +519,8 @@ exports[`<ThemeChoicePanel /> custom theme should render the custom theme sectio
             <button
               aria-label="Delete"
               aria-labelledby="«r17»"
-              class="_icon-button_m2erp_8 _destructive_m2erp_74"
+              class="_icon-button_1pz9o_8 _destructive_1pz9o_95"
+              data-kind="primary"
               role="button"
               style="--cpd-icon-button-size: 32px;"
               tabindex="0"
diff --git a/test/unit-tests/components/views/settings/encryption/__snapshots__/ChangeRecoveryKey-test.tsx.snap b/test/unit-tests/components/views/settings/encryption/__snapshots__/ChangeRecoveryKey-test.tsx.snap
index c9fa65a64e..6330a01c05 100644
--- a/test/unit-tests/components/views/settings/encryption/__snapshots__/ChangeRecoveryKey-test.tsx.snap
+++ b/test/unit-tests/components/views/settings/encryption/__snapshots__/ChangeRecoveryKey-test.tsx.snap
@@ -7,7 +7,8 @@ exports[`<ChangeRecoveryKey /> flow to change the recovery key should display th
   >
     <button
       aria-label="Back"
-      class="_icon-button_m2erp_8 _subtle-bg_m2erp_29"
+      class="_icon-button_1pz9o_8"
+      data-kind="secondary"
       role="button"
       style="--cpd-icon-button-size: 28px;"
       tabindex="0"
@@ -108,7 +109,8 @@ exports[`<ChangeRecoveryKey /> flow to change the recovery key should display th
       </div>
       <button
         aria-label="Copy"
-        class="_icon-button_m2erp_8"
+        class="_icon-button_1pz9o_8"
+        data-kind="primary"
         role="button"
         style="--cpd-icon-button-size: 28px;"
         tabindex="0"
@@ -167,7 +169,8 @@ exports[`<ChangeRecoveryKey /> flow to set up a recovery key should ask the user
   >
     <button
       aria-label="Back"
-      class="_icon-button_m2erp_8 _subtle-bg_m2erp_29"
+      class="_icon-button_1pz9o_8"
+      data-kind="secondary"
       role="button"
       style="--cpd-icon-button-size: 28px;"
       tabindex="0"
@@ -300,7 +303,8 @@ exports[`<ChangeRecoveryKey /> flow to set up a recovery key should ask the user
   >
     <button
       aria-label="Back"
-      class="_icon-button_m2erp_8 _subtle-bg_m2erp_29"
+      class="_icon-button_1pz9o_8"
+      data-kind="secondary"
       role="button"
       style="--cpd-icon-button-size: 28px;"
       tabindex="0"
@@ -455,7 +459,8 @@ exports[`<ChangeRecoveryKey /> flow to set up a recovery key should display info
   >
     <button
       aria-label="Back"
-      class="_icon-button_m2erp_8 _subtle-bg_m2erp_29"
+      class="_icon-button_1pz9o_8"
+      data-kind="secondary"
       role="button"
       style="--cpd-icon-button-size: 28px;"
       tabindex="0"
@@ -571,7 +576,8 @@ exports[`<ChangeRecoveryKey /> flow to set up a recovery key should display the
   >
     <button
       aria-label="Back"
-      class="_icon-button_m2erp_8 _subtle-bg_m2erp_29"
+      class="_icon-button_1pz9o_8"
+      data-kind="secondary"
       role="button"
       style="--cpd-icon-button-size: 28px;"
       tabindex="0"
@@ -672,7 +678,8 @@ exports[`<ChangeRecoveryKey /> flow to set up a recovery key should display the
       </div>
       <button
         aria-label="Copy"
-        class="_icon-button_m2erp_8"
+        class="_icon-button_1pz9o_8"
+        data-kind="primary"
         role="button"
         style="--cpd-icon-button-size: 28px;"
         tabindex="0"
diff --git a/test/unit-tests/components/views/settings/encryption/__snapshots__/DeleteKeyStoragePanel-test.tsx.snap b/test/unit-tests/components/views/settings/encryption/__snapshots__/DeleteKeyStoragePanel-test.tsx.snap
index 52541c468b..3f2e3cae55 100644
--- a/test/unit-tests/components/views/settings/encryption/__snapshots__/DeleteKeyStoragePanel-test.tsx.snap
+++ b/test/unit-tests/components/views/settings/encryption/__snapshots__/DeleteKeyStoragePanel-test.tsx.snap
@@ -7,7 +7,8 @@ exports[`<DeleteKeyStoragePanel /> should match snapshot 1`] = `
   >
     <button
       aria-label="Back"
-      class="_icon-button_m2erp_8 _subtle-bg_m2erp_29"
+      class="_icon-button_1pz9o_8"
+      data-kind="secondary"
       role="button"
       style="--cpd-icon-button-size: 28px;"
       tabindex="0"
diff --git a/test/unit-tests/components/views/settings/encryption/__snapshots__/ResetIdentityPanel-test.tsx.snap b/test/unit-tests/components/views/settings/encryption/__snapshots__/ResetIdentityPanel-test.tsx.snap
index 894abf4842..e745de0695 100644
--- a/test/unit-tests/components/views/settings/encryption/__snapshots__/ResetIdentityPanel-test.tsx.snap
+++ b/test/unit-tests/components/views/settings/encryption/__snapshots__/ResetIdentityPanel-test.tsx.snap
@@ -7,7 +7,8 @@ exports[`<ResetIdentityPanel /> should display the 'forgot recovery key' variant
   >
     <button
       aria-label="Back"
-      class="_icon-button_m2erp_8 _subtle-bg_m2erp_29"
+      class="_icon-button_1pz9o_8"
+      data-kind="secondary"
       role="button"
       style="--cpd-icon-button-size: 28px;"
       tabindex="0"
@@ -189,7 +190,8 @@ exports[`<ResetIdentityPanel /> should display the 'sync failed' variant correct
   >
     <button
       aria-label="Back"
-      class="_icon-button_m2erp_8 _subtle-bg_m2erp_29"
+      class="_icon-button_1pz9o_8"
+      data-kind="secondary"
       role="button"
       style="--cpd-icon-button-size: 28px;"
       tabindex="0"
@@ -371,7 +373,8 @@ exports[`<ResetIdentityPanel /> should reset the encryption when the continue bu
   >
     <button
       aria-label="Back"
-      class="_icon-button_m2erp_8 _subtle-bg_m2erp_29"
+      class="_icon-button_1pz9o_8"
+      data-kind="secondary"
       role="button"
       style="--cpd-icon-button-size: 28px;"
       tabindex="0"
@@ -556,7 +559,8 @@ exports[`<ResetIdentityPanel /> should reset the encryption when the continue bu
   >
     <button
       aria-label="Back"
-      class="_icon-button_m2erp_8 _subtle-bg_m2erp_29"
+      class="_icon-button_1pz9o_8"
+      data-kind="secondary"
       role="button"
       style="--cpd-icon-button-size: 28px;"
       tabindex="0"
diff --git a/test/unit-tests/components/views/settings/tabs/user/__snapshots__/EncryptionUserSettingsTab-test.tsx.snap b/test/unit-tests/components/views/settings/tabs/user/__snapshots__/EncryptionUserSettingsTab-test.tsx.snap
index bff7a9ab57..0f4f41bd36 100644
--- a/test/unit-tests/components/views/settings/tabs/user/__snapshots__/EncryptionUserSettingsTab-test.tsx.snap
+++ b/test/unit-tests/components/views/settings/tabs/user/__snapshots__/EncryptionUserSettingsTab-test.tsx.snap
@@ -178,7 +178,8 @@ exports[`<EncryptionUserSettingsTab /> should display the reset identity panel w
       >
         <button
           aria-label="Back"
-          class="_icon-button_m2erp_8 _subtle-bg_m2erp_29"
+          class="_icon-button_1pz9o_8"
+          data-kind="secondary"
           role="button"
           style="--cpd-icon-button-size: 28px;"
           tabindex="0"
diff --git a/test/unit-tests/components/views/spaces/__snapshots__/SpacePanel-test.tsx.snap b/test/unit-tests/components/views/spaces/__snapshots__/SpacePanel-test.tsx.snap
index 5086a8aafc..ab823750ff 100644
--- a/test/unit-tests/components/views/spaces/__snapshots__/SpacePanel-test.tsx.snap
+++ b/test/unit-tests/components/views/spaces/__snapshots__/SpacePanel-test.tsx.snap
@@ -234,7 +234,8 @@ exports[`<SpacePanel /> should show all activated MetaSpaces in the correct orde
         aria-haspopup="menu"
         aria-label="Threads"
         aria-labelledby="«r12»"
-        class="_icon-button_m2erp_8 mx_ThreadsActivityCentreButton"
+        class="_icon-button_1pz9o_8 mx_ThreadsActivityCentreButton"
+        data-kind="primary"
         data-state="closed"
         id="radix-«r10»"
         role="button"
diff --git a/test/unit-tests/components/views/spaces/__snapshots__/ThreadsActivityCentre-test.tsx.snap b/test/unit-tests/components/views/spaces/__snapshots__/ThreadsActivityCentre-test.tsx.snap
index 41eefaf277..2e778b5120 100644
--- a/test/unit-tests/components/views/spaces/__snapshots__/ThreadsActivityCentre-test.tsx.snap
+++ b/test/unit-tests/components/views/spaces/__snapshots__/ThreadsActivityCentre-test.tsx.snap
@@ -151,7 +151,8 @@ exports[`ThreadsActivityCentre should close the release announcement when the TA
         aria-haspopup="menu"
         aria-label="Threads"
         aria-labelledby="«rq»"
-        class="_icon-button_m2erp_8 mx_ThreadsActivityCentreButton"
+        class="_icon-button_1pz9o_8 mx_ThreadsActivityCentreButton"
+        data-kind="primary"
         data-state="open"
         id="radix-«ro»"
         role="button"
@@ -487,7 +488,8 @@ exports[`ThreadsActivityCentre should render the release announcement 1`] = `
         aria-haspopup="menu"
         aria-label="Threads"
         aria-labelledby="«ra»"
-        class="_icon-button_m2erp_8 mx_ThreadsActivityCentreButton"
+        class="_icon-button_1pz9o_8 mx_ThreadsActivityCentreButton"
+        data-kind="primary"
         data-state="closed"
         id="radix-«r8»"
         role="button"
diff --git a/yarn.lock b/yarn.lock
index b1b78412f7..1f257fc161 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3836,10 +3836,10 @@
   resolved "https://registry.yarnpkg.com/@vector-im/compound-design-tokens/-/compound-design-tokens-4.0.2.tgz#27363d26446eaa21880ab126fa51fec112e6fd86"
   integrity sha512-y13bhPyJ5OzbGRl21F6+Y2adrjyK+mu67yKTx+o8MfmIpJzMSn4KkHZtcujMquWSh0e5ZAufsnk4VYvxbSpr1A==
 
-"@vector-im/compound-web@^7.11.0":
-  version "7.11.0"
-  resolved "https://registry.yarnpkg.com/@vector-im/compound-web/-/compound-web-7.11.0.tgz#b7c466e64089320b41f8eaf6f2b30950e9692ca2"
-  integrity sha512-lRxXUOQJHdBswhykpNs/J/cBW4fPY1qbwyDexlWxX5zCVAYiuMCWo2tI+Y7/SK4tNbDr7nwoTDRh4H9CO1L5LQ==
+"@vector-im/compound-web@^8.0.0":
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/@vector-im/compound-web/-/compound-web-8.0.0.tgz#1eeaf54c253730752393d0e5e7c8cd81030b80af"
+  integrity sha512-VAwCGl0KMjN+qEKflnQOB1LidSsxSDiczEWka1IGKj52EzrNOfY0wlfCs73v+H84zUanYKlgOwnQgWU5at9Q/w==
   dependencies:
     "@floating-ui/react" "^0.27.0"
     "@radix-ui/react-context-menu" "^2.2.1"