diff --git a/component-library/src/components/wrapped/BccAvatar/BccAvatar.css b/component-library/src/components/wrapped/BccAvatar/BccAvatar.css
index a2f33aa0..dfe4bc6a 100644
--- a/component-library/src/components/wrapped/BccAvatar/BccAvatar.css
+++ b/component-library/src/components/wrapped/BccAvatar/BccAvatar.css
@@ -3,7 +3,7 @@
 	.bcc-avatar {
 		--bcc-avatar-border: var(--ctx-border);
 		--p-icon-size: var(--icon-size-sm);
-		@apply ctx-gray-subtler shrink-0 overflow-hidden text-sm;
+		@apply ctx-gray-subtler shrink-0 overflow-hidden text-sm font-semibold;
 	}
 
 	.bcc-avatar.male,
@@ -30,6 +30,9 @@
 	.bcc-avatar.F.child {
 		@apply ctx-magenta-subtler;
 	}
+	.bcc-avatar.count {
+		@apply font-medium;
+	}
 	.bcc-avatar.bordered {
 		@apply border-ctx border-2;
 	}
diff --git a/component-library/src/components/wrapped/BccAvatar/BccAvatar.vue b/component-library/src/components/wrapped/BccAvatar/BccAvatar.vue
index 21cf91d6..7b1abc27 100644
--- a/component-library/src/components/wrapped/BccAvatar/BccAvatar.vue
+++ b/component-library/src/components/wrapped/BccAvatar/BccAvatar.vue
@@ -26,6 +26,8 @@ const bindings = computed(() => {
 	void icon;
 	return rest;
 });
+
+const isCount = computed(() => /^\+\d/.test(props.label ?? ''));
 </script>
 
 <template>
@@ -33,7 +35,7 @@ const bindings = computed(() => {
 		v-bind="bindings"
 		class="bcc-avatar"
 		:shape="squared ? 'square' : 'circle'"
-		:class="[gender, size, { child, bordered, squared }]"
+		:class="[gender, size, { child, bordered, squared, count: isCount }]"
 	>
 		<template v-if="icon" #icon>
 			<component :is="typeof icon === 'boolean' ? PersonFillIcon : icon" class="p-icon" />