diff --git a/src/components/ha-chip.ts b/src/components/ha-chip.ts
index ce6363e512..2a41ffc760 100644
--- a/src/components/ha-chip.ts
+++ b/src/components/ha-chip.ts
@@ -18,13 +18,9 @@ export class HaChip extends LitElement {
 
   protected render(): TemplateResult {
     return html`
-      <div class="mdc-chip">
+      <div class="mdc-chip ${this.noText ? "no-text" : ""}">
         ${this.hasIcon
-          ? html`<div
-              class="mdc-chip__icon mdc-chip__icon--leading ${this.noText
-                ? "no-text"
-                : ""}"
-            >
+          ? html`<div class="mdc-chip__icon mdc-chip__icon--leading">
               <slot name="icon"></slot>
             </div>`
           : null}
@@ -49,6 +45,10 @@ export class HaChip extends LitElement {
         color: var(--ha-chip-text-color, var(--primary-text-color));
       }
 
+      .mdc-chip.no-text {
+        padding: 0 10px;
+      }
+
       .mdc-chip:hover {
         color: var(--ha-chip-text-color, var(--primary-text-color));
       }
@@ -57,8 +57,8 @@ export class HaChip extends LitElement {
         --mdc-icon-size: 20px;
         color: var(--ha-chip-icon-color, var(--ha-chip-text-color));
       }
-      .mdc-chip
-        .mdc-chip__icon--leading:not(.mdc-chip__icon--leading-hidden).no-text {
+      .mdc-chip.no-text
+        .mdc-chip__icon--leading:not(.mdc-chip__icon--leading-hidden) {
         margin-right: -4px;
       }
     `;
diff --git a/src/panels/lovelace/components/hui-buttons-base.ts b/src/panels/lovelace/components/hui-buttons-base.ts
index 7c5a0c60d4..0e0e0c3ad0 100644
--- a/src/panels/lovelace/components/hui-buttons-base.ts
+++ b/src/panels/lovelace/components/hui-buttons-base.ts
@@ -50,6 +50,7 @@ export class HuiButtonsBase extends LitElement {
                       .stateObj=${stateObj}
                       .overrideIcon=${entityConf.icon}
                       .overrideImage=${entityConf.image}
+                      class=${name ? "" : "no-text"}
                       stateColor
                       slot="icon"
                     ></state-badge>
@@ -85,9 +86,21 @@ export class HuiButtonsBase extends LitElement {
           flex-wrap: wrap;
         }
         state-badge {
+          display: inline-flex;
           line-height: inherit;
-          text-align: start;
           color: var(--secondary-text-color);
+          align-items: center;
+          justify-content: center;
+          width: 24px;
+          height: 24px;
+          margin-left: -4px;
+          margin-top: -2px;
+        }
+        state-badge.no-text {
+          width: 26px;
+          height: 26px;
+          margin-left: -3px;
+          margin-top: -3px;
         }
         ha-chip {
           padding: 4px;