diff --git a/.changeset/long-humans-sink.md b/.changeset/long-humans-sink.md
new file mode 100644
index 0000000000..9959caf1b1
--- /dev/null
+++ b/.changeset/long-humans-sink.md
@@ -0,0 +1,5 @@
+---
+'@backstage/ui': patch
+---
+
+Avatar components in x-small and small sizes now display only one initial instead of two, improving readability at smaller dimensions.
diff --git a/packages/ui/src/components/Avatar/Avatar.stories.tsx b/packages/ui/src/components/Avatar/Avatar.stories.tsx
index 2ad51e4a5d..582d82393e 100644
--- a/packages/ui/src/components/Avatar/Avatar.stories.tsx
+++ b/packages/ui/src/components/Avatar/Avatar.stories.tsx
@@ -45,12 +45,21 @@ export const Sizes: Story = {
     ...Default.args,
   },
   render: args => (
-    <Flex>
-      <Avatar {...args} size="x-small" />
-      <Avatar {...args} size="small" />
-      <Avatar {...args} size="medium" />
-      <Avatar {...args} size="large" />
-      <Avatar {...args} size="x-large" />
+    <Flex direction="column" gap="6">
+      <Flex>
+        <Avatar {...args} size="x-small" />
+        <Avatar {...args} size="small" />
+        <Avatar {...args} size="medium" />
+        <Avatar {...args} size="large" />
+        <Avatar {...args} size="x-large" />
+      </Flex>
+      <Flex>
+        <Avatar {...args} size="x-small" src="" />
+        <Avatar {...args} size="small" src="" />
+        <Avatar {...args} size="medium" src="" />
+        <Avatar {...args} size="large" src="" />
+        <Avatar {...args} size="x-large" src="" />
+      </Flex>
     </Flex>
   ),
 };
diff --git a/packages/ui/src/components/Avatar/Avatar.tsx b/packages/ui/src/components/Avatar/Avatar.tsx
index 1490d86098..7cbb4f80c7 100644
--- a/packages/ui/src/components/Avatar/Avatar.tsx
+++ b/packages/ui/src/components/Avatar/Avatar.tsx
@@ -47,12 +47,16 @@ export const Avatar = forwardRef<HTMLDivElement, AvatarProps>((props, ref) => {
     };
   }, [src]);
 
+  const initialsCount = ['x-small', 'small'].includes(cleanedProps.size)
+    ? 1
+    : 2;
+
   const initials = name
     .split(' ')
     .map(word => word[0])
     .join('')
     .toLocaleUpperCase('en-US')
-    .slice(0, 2);
+    .slice(0, initialsCount);
 
   return (
     <div