diff --git a/packages/bbui/src/Avatar/Avatar.svelte b/packages/bbui/src/Avatar/Avatar.svelte
index ae3ebda82c..be8172b05d 100644
--- a/packages/bbui/src/Avatar/Avatar.svelte
+++ b/packages/bbui/src/Avatar/Avatar.svelte
@@ -1,5 +1,15 @@
 <script>
   import "@spectrum-css/avatar/dist/index-vars.css"
+  let sizes = new Map([
+    ["XXS", "--spectrum-alias-avatar-size-50"],
+    ["XS", "--spectrum-alias-avatar-size-75"],
+    ["S", "--spectrum-alias-avatar-size-200"],
+    ["M", "--spectrum-alias-avatar-size-300"],
+    ["L", "--spectrum-alias-avatar-size-500"],
+    ["XL", "--spectrum-alias-avatar-size-600"],
+    ["XXL", "--spectrum-alias-avatar-size-700"],
+  ])
+  export let size = "M"
   export let url = ""
   export let disabled = false
   export let initials = "KA"
@@ -11,9 +21,12 @@
     class="spectrum-Avatar"
     src={url}
     alt="Avatar"
+    style="width: var({sizes.get(size)}); height: var({sizes.get(size)});"
   />
 {:else}
-  <div>{initials}</div>
+  <div style="width: var({sizes.get(size)}); height: var({sizes.get(size)});">
+    {initials}
+  </div>
 {/if}
 
 <style>
@@ -29,7 +42,5 @@
       rgba(53, 199, 86, 1) 47%
     );
     border-radius: 50%;
-    width: 32px;
-    height: 32px;
   }
 </style>