diff --git a/src/panels/profile/ha-long-lived-access-tokens-card.ts b/src/panels/profile/ha-long-lived-access-tokens-card.ts
index d82e1952b9..99ea0bd7bd 100644
--- a/src/panels/profile/ha-long-lived-access-tokens-card.ts
+++ b/src/panels/profile/ha-long-lived-access-tokens-card.ts
@@ -1,4 +1,5 @@
 import "@material/mwc-button/mwc-button";
+import "@material/mwc-icon-button/mwc-icon-button";
 import { mdiDelete } from "@mdi/js";
 import {
   css,
@@ -80,14 +81,14 @@ class HaLongLivedTokens extends LitElement {
                       )
                     )}
                   </div>
-                  <mwc-button
+                  <mwc-icon-button
                     .token=${token}
                     .disabled=${token.is_current}
                     .title=${this.hass.localize(`ui.common.delete`)}
                     @click=${this._deleteToken}
                   >
                     <ha-svg-icon .path=${mdiDelete}></ha-svg-icon>
-                  </mwc-button>
+                  </mwc-icon-button>
                 </ha-settings-row>`
               )}
         </div>
@@ -185,6 +186,9 @@ class HaLongLivedTokens extends LitElement {
         mwc-button {
           --mdc-theme-primary: var(--primary-color);
         }
+        mwc-icon-button {
+          color: var(--primary-text-color);
+        }
       `,
     ];
   }
diff --git a/src/panels/profile/ha-refresh-tokens-card.ts b/src/panels/profile/ha-refresh-tokens-card.ts
index 920d69e3db..f6f1cc3277 100644
--- a/src/panels/profile/ha-refresh-tokens-card.ts
+++ b/src/panels/profile/ha-refresh-tokens-card.ts
@@ -1,4 +1,4 @@
-import "@material/mwc-button/mwc-button";
+import "@material/mwc-icon-button/mwc-icon-button";
 import { mdiDelete } from "@mdi/js";
 import "@polymer/paper-tooltip/paper-tooltip";
 import {
@@ -83,14 +83,14 @@ class HaRefreshTokens extends LitElement {
                         )}
                       </paper-tooltip>`
                     : ""}
-                  <mwc-button
+                  <mwc-icon-button
                     .token=${token}
                     .disabled=${token.is_current}
                     .title=${this.hass.localize(`ui.common.delete`)}
                     @click=${this._deleteToken}
                   >
                     <ha-svg-icon .path=${mdiDelete}></ha-svg-icon>
-                  </mwc-button>
+                  </mwc-icon-button>
                 </div>
               </ha-settings-row>`
             )
@@ -135,8 +135,8 @@ class HaRefreshTokens extends LitElement {
         ha-settings-row {
           padding: 0;
         }
-        mwc-button {
-          --mdc-theme-primary: var(--primary-color);
+        mwc-icon-button {
+          color: var(--primary-text-color);
         }
       `,
     ];