diff --git a/src/components/avatar/avatar.css b/src/components/avatar/avatar.css
index 0ce9455da..f2e34991a 100644
--- a/src/components/avatar/avatar.css
+++ b/src/components/avatar/avatar.css
@@ -22,21 +22,20 @@
   vertical-align: middle;
 }
 
-.avatar--circle,
-.avatar--circle .avatar__image {
+:host([shape='circle']) {
   border-radius: var(--wa-border-radius-circle);
 }
 
-.avatar--rounded,
-.avatar--rounded .avatar__image {
+.rounded,
+.rounded .image {
   border-radius: var(--wa-border-radius-s);
 }
 
-.avatar--square {
+.square {
   border-radius: 0;
 }
 
-.avatar__icon {
+.icon {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -47,12 +46,12 @@
   height: 100%;
 }
 
-.avatar__initials {
+.initials {
   line-height: 1;
   text-transform: uppercase;
 }
 
-.avatar__image {
+.image {
   position: absolute;
   top: 0;
   left: 0;
diff --git a/src/components/avatar/avatar.ts b/src/components/avatar/avatar.ts
index b95c1354d..0130c7ec0 100644
--- a/src/components/avatar/avatar.ts
+++ b/src/components/avatar/avatar.ts
@@ -65,7 +65,7 @@ export default class WaAvatar extends WebAwesomeElement {
     const avatarWithImage = html`
       <img
         part="image"
-        class="avatar__image"
+        class="image"
         src="${this.image}"
         loading="${this.loading}"
         alt=""
@@ -76,10 +76,10 @@ export default class WaAvatar extends WebAwesomeElement {
     let avatarWithoutImage = html``;
 
     if (this.initials) {
-      avatarWithoutImage = html`<div part="initials" class="avatar__initials">${this.initials}</div>`;
+      avatarWithoutImage = html`<div part="initials" class="initials">${this.initials}</div>`;
     } else {
       avatarWithoutImage = html`
-        <div part="icon" class="avatar__icon" aria-hidden="true">
+        <div part="icon" class="icon" aria-hidden="true">
           <slot name="icon">
             <wa-icon name="user" library="system" variant="solid"></wa-icon>
           </slot>
@@ -92,9 +92,9 @@ export default class WaAvatar extends WebAwesomeElement {
         part="base"
         class=${classMap({
           avatar: true,
-          'avatar--circle': this.shape === 'circle',
-          'avatar--rounded': this.shape === 'rounded',
-          'avatar--square': this.shape === 'square',
+          circle: this.shape === 'circle',
+          rounded: this.shape === 'rounded',
+          square: this.shape === 'square',
         })}
         role="img"
         aria-label=${this.label}