diff --git a/src/components/user/ha-person-badge.ts b/src/components/user/ha-person-badge.ts
new file mode 100644
index 0000000000..70c47d6023
--- /dev/null
+++ b/src/components/user/ha-person-badge.ts
@@ -0,0 +1,71 @@
+import {
+  css,
+  CSSResult,
+  customElement,
+  html,
+  LitElement,
+  property,
+  TemplateResult,
+} from "lit-element";
+import { classMap } from "lit-html/directives/class-map";
+import { styleMap } from "lit-html/directives/style-map";
+import { Person } from "../../data/person";
+import { computeInitials } from "./ha-user-badge";
+
+@customElement("ha-person-badge")
+class PersonBadge extends LitElement {
+  @property({ attribute: false }) public person?: Person;
+
+  protected render(): TemplateResult {
+    if (!this.person) {
+      return html``;
+    }
+
+    const picture = this.person.picture;
+
+    if (picture) {
+      return html`<div
+        style=${styleMap({ backgroundImage: `url(${picture})` })}
+        class="picture"
+      ></div>`;
+    }
+    const initials = computeInitials(this.person.name);
+    return html`<div
+      class="initials ${classMap({ long: initials!.length > 2 })}"
+    >
+      ${initials}
+    </div>`;
+  }
+
+  static get styles(): CSSResult {
+    return css`
+      .picture {
+        width: 40px;
+        height: 40px;
+        background-size: cover;
+        border-radius: 50%;
+      }
+      .initials {
+        display: inline-block;
+        box-sizing: border-box;
+        width: 40px;
+        line-height: 40px;
+        border-radius: 50%;
+        text-align: center;
+        background-color: var(--light-primary-color);
+        text-decoration: none;
+        color: var(--text-light-primary-color, var(--primary-text-color));
+        overflow: hidden;
+      }
+      .initials.long {
+        font-size: 80%;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-person-badge": PersonBadge;
+  }
+}
diff --git a/src/components/user/ha-user-badge.ts b/src/components/user/ha-user-badge.ts
index c7fd114ae4..09972237fc 100644
--- a/src/components/user/ha-user-badge.ts
+++ b/src/components/user/ha-user-badge.ts
@@ -8,15 +8,15 @@ import {
   property,
   TemplateResult,
 } from "lit-element";
+import { classMap } from "lit-html/directives/class-map";
 import { styleMap } from "lit-html/directives/style-map";
-import { toggleAttribute } from "../../common/dom/toggle_attribute";
 import { computeStateDomain } from "../../common/entity/compute_state_domain";
 import { User } from "../../data/user";
 import { CurrentUser, HomeAssistant } from "../../types";
 
-const computeInitials = (name: string) => {
+export const computeInitials = (name: string) => {
   if (!name) {
-    return "user";
+    return "?";
   }
   return (
     name
@@ -31,7 +31,7 @@ const computeInitials = (name: string) => {
 };
 
 @customElement("ha-user-badge")
-class StateBadge extends LitElement {
+class UserBadge extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property({ attribute: false }) public user?: User | CurrentUser;
@@ -44,14 +44,6 @@ class StateBadge extends LitElement {
     super.updated(changedProps);
     if (changedProps.has("user")) {
       this._getPersonPicture();
-      if (!this._personPicture) {
-        toggleAttribute(
-          this,
-          "long",
-          (this.hass.user ? computeInitials(this.hass.user.name) : "?").length >
-            2
-        );
-      }
       return;
     }
     const oldHass = changedProps.get("hass");
@@ -67,6 +59,8 @@ class StateBadge extends LitElement {
       } else {
         this._getPersonPicture();
       }
+    } else if (!this._personEntityId && oldHass) {
+      this._getPersonPicture();
     }
   }
 
@@ -74,22 +68,20 @@ class StateBadge extends LitElement {
     if (!this.hass || !this.user) {
       return html``;
     }
-    const user = this.user;
     const picture = this._personPicture;
 
-    return html`
-      ${picture
-        ? html`<div
-            style=${styleMap({ backgroundImage: `url(${picture})` })}
-            class="picture"
-          ></div>`
-        : html`<div
-            class="initials"
-            ?long=${(user ? computeInitials(user.name) : "?").length > 2}
-          >
-            ${computeInitials(user?.name!)}
-          </div>`}
-    `;
+    if (picture) {
+      return html`<div
+        style=${styleMap({ backgroundImage: `url(${picture})` })}
+        class="picture"
+      ></div>`;
+    }
+    const initials = computeInitials(this.user.name);
+    return html`<div
+      class="initials ${classMap({ long: initials!.length > 2 })}"
+    >
+      ${initials}
+    </div>`;
   }
 
   private _getPersonPicture() {
@@ -100,7 +92,7 @@ class StateBadge extends LitElement {
     }
     for (const entity of Object.values(this.hass.states)) {
       if (
-        entity.attributes.user_id === this.user!.id &&
+        entity.attributes.user_id === this.user.id &&
         computeStateDomain(entity) === "person"
       ) {
         this._personEntityId = entity.entity_id;
@@ -130,7 +122,7 @@ class StateBadge extends LitElement {
         color: var(--text-light-primary-color, var(--primary-text-color));
         overflow: hidden;
       }
-      :host([long]) .initials {
+      .initials.long {
         font-size: 80%;
       }
     `;
@@ -139,6 +131,6 @@ class StateBadge extends LitElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    "ha-user-badge": StateBadge;
+    "ha-user-badge": UserBadge;
   }
 }
diff --git a/src/panels/config/person/ha-config-person.ts b/src/panels/config/person/ha-config-person.ts
index 24f794b4e8..3d1de87bd0 100644
--- a/src/panels/config/person/ha-config-person.ts
+++ b/src/panels/config/person/ha-config-person.ts
@@ -1,4 +1,3 @@
-import "@material/mwc-fab";
 import { mdiPlus } from "@mdi/js";
 import "@polymer/paper-item/paper-icon-item";
 import "@polymer/paper-item/paper-item-body";
@@ -11,11 +10,10 @@ import {
   property,
   TemplateResult,
 } from "lit-element";
-import { styleMap } from "lit-html/directives/style-map";
 import { compare } from "../../../common/string/compare";
 import "../../../components/ha-card";
 import "../../../components/ha-svg-icon";
-import "../../../components/user/ha-user-badge";
+import "../../../components/user/ha-person-badge";
 import {
   createPerson,
   deletePerson,
@@ -87,15 +85,10 @@ class HaConfigPerson extends LitElement {
             ${this._storageItems.map((entry) => {
               return html`
                 <paper-icon-item @click=${this._openEditEntry} .entry=${entry}>
-                  ${entry.picture
-                    ? html`<div
-                        style=${styleMap({
-                          backgroundImage: `url(${entry.picture})`,
-                        })}
-                        class="picture"
-                        slot="item-icon"
-                      ></div>`
-                    : ""}
+                  <ha-person-badge
+                    slot="item-icon"
+                    .person=${entry}
+                  ></ha-person-badge>
                   <paper-item-body>
                     ${entry.name}
                   </paper-item-body>
@@ -123,15 +116,10 @@ class HaConfigPerson extends LitElement {
                   ${this._configItems.map((entry) => {
                     return html`
                       <paper-icon-item>
-                        ${entry.picture
-                          ? html`<div
-                              style=${styleMap({
-                                backgroundImage: `url(${entry.picture})`,
-                              })}
-                              class="picture"
-                              slot="item-icon"
-                            ></div>`
-                          : ""}
+                        <ha-person-badge
+                          slot="item-icon"
+                          .person=${entry}
+                        ></ha-person-badge>
                         <paper-item-body>
                           ${entry.name}
                         </paper-item-body>
@@ -248,12 +236,6 @@ class HaConfigPerson extends LitElement {
         margin: 16px auto;
         overflow: hidden;
       }
-      .picture {
-        width: 40px;
-        height: 40px;
-        background-size: cover;
-        border-radius: 50%;
-      }
       .empty {
         text-align: center;
         padding: 8px;