diff --git a/packages/bbui/src/Avatar/Avatar.svelte b/packages/bbui/src/Avatar/Avatar.svelte
index d2aef72446..ae3ebda82c 100644
--- a/packages/bbui/src/Avatar/Avatar.svelte
+++ b/packages/bbui/src/Avatar/Avatar.svelte
@@ -2,11 +2,34 @@
   import "@spectrum-css/avatar/dist/index-vars.css"
   export let url = ""
   export let disabled = false
+  export let initials = "KA"
 </script>
 
-<img
-  class:is-disabled={disabled}
-  class="spectrum-Avatar"
-  src={url}
-  alt="Avatar"
-/>
+{#if url}
+  <img
+    class:is-disabled={disabled}
+    class="spectrum-Avatar"
+    src={url}
+    alt="Avatar"
+  />
+{:else}
+  <div>{initials}</div>
+{/if}
+
+<style>
+  div {
+    color: white;
+    display: grid;
+    place-items: center;
+    font-weight: bold;
+    background: rgb(63, 94, 251);
+    background: linear-gradient(
+      155deg,
+      rgba(63, 94, 251, 1) 0%,
+      rgba(53, 199, 86, 1) 47%
+    );
+    border-radius: 50%;
+    width: 32px;
+    height: 32px;
+  }
+</style>