diff --git a/playbook/app/pb_kits/playbook/pb_avatar/_avatar.jsx b/playbook/app/pb_kits/playbook/pb_avatar/_avatar.jsx
index b028814151..251219e7b7 100755
--- a/playbook/app/pb_kits/playbook/pb_avatar/_avatar.jsx
+++ b/playbook/app/pb_kits/playbook/pb_avatar/_avatar.jsx
@@ -44,7 +44,7 @@ const Avatar = (props: AvatarProps) => {
   const dataProps = buildDataProps(data)
   const ariaProps = buildAriaProps(aria)
   const classes = classnames(
-    buildCss('pb_avatar_kit', size),
+    buildCss('pb_avatar_kit', `size_${size}`),
     globalProps(props),
     className
   )
diff --git a/playbook/app/pb_kits/playbook/pb_avatar/_avatar.scss b/playbook/app/pb_kits/playbook/pb_avatar/_avatar.scss
index fce1f2a4ed..0eacd32bb3 100755
--- a/playbook/app/pb_kits/playbook/pb_avatar/_avatar.scss
+++ b/playbook/app/pb_kits/playbook/pb_avatar/_avatar.scss
@@ -16,8 +16,8 @@ $avatar-sizes: (
   position: relative;
 
   @each $name, $size in $avatar-sizes {
-    &[class*=_#{$name}],
-    &[class*=_#{$name}_thumb] {
+    &[class*=_size_#{$name}],
+    &[class*=_size_#{$name}_thumb] {
       width: $size;
       height: $size;
       object-fit: cover;
diff --git a/playbook/app/pb_kits/playbook/pb_avatar/avatar.rb b/playbook/app/pb_kits/playbook/pb_avatar/avatar.rb
index 960ce19f75..07955aaac0 100755
--- a/playbook/app/pb_kits/playbook/pb_avatar/avatar.rb
+++ b/playbook/app/pb_kits/playbook/pb_avatar/avatar.rb
@@ -18,7 +18,7 @@ def initials
       end
 
       def classname
-        generate_classname("pb_avatar_kit", size)
+        generate_classname("pb_avatar_kit", "size_#{size}")
       end
 
       def online_status_props