diff --git a/src/lib/components/avatar.svelte b/src/lib/components/avatar.svelte
index df8e832e2..ea7b6ef7e 100644
--- a/src/lib/components/avatar.svelte
+++ b/src/lib/components/avatar.svelte
@@ -2,13 +2,14 @@
     export let size: number;
     export let src: string;
     export let name: string;
+    export let color: string;
 </script>
 
 <img
     width={size}
     height={size}
     class="avatar"
-    style="--size: {size / 16}rem"
+    style="--size: {size / 16}rem; background-color: {color};"
     {src}
     title={name}
     alt={name} />
diff --git a/src/lib/components/avatarInitials.svelte b/src/lib/components/avatarInitials.svelte
index 0d4df1a70..ee9331002 100644
--- a/src/lib/components/avatarInitials.svelte
+++ b/src/lib/components/avatarInitials.svelte
@@ -5,8 +5,9 @@
     export let name: string;
     export let size: number;
     export let background: string | undefined = undefined;
+    export let color: string = '#FFFFFF';
 
     $: src = sdk.forConsole.avatars.getInitials(name, size * 2, size * 2, background).toString();
 </script>
 
-<Avatar {name} {size} {src} />
+<Avatar {name} {size} {src} {color} />