diff --git a/site/src/components/Avatar/Avatar.stories.tsx b/site/src/components/Avatar/Avatar.stories.tsx
index 4b6b020dd8a..a9c51fef621 100644
--- a/site/src/components/Avatar/Avatar.stories.tsx
+++ b/site/src/components/Avatar/Avatar.stories.tsx
@@ -53,6 +53,26 @@ export const NonSquaredIcon: Story = {
 	},
 };
 
+export const BuiltInEmojiLgSize: Story = {
+	args: {
+		size: "lg",
+		src: "/emojis/1f64c.png",
+	},
+};
+
+export const BuiltInEmojiMdSize: Story = {
+	args: {
+		src: "/emojis/1f64c.png",
+	},
+};
+
+export const BuiltInEmojiSmSize: Story = {
+	args: {
+		size: "sm",
+		src: "/emojis/1f64c.png",
+	},
+};
+
 export const FallbackLgSize: Story = {
 	args: {
 		src: "",
diff --git a/site/src/components/Avatar/Avatar.tsx b/site/src/components/Avatar/Avatar.tsx
index d080ebed312..71dd67b05de 100644
--- a/site/src/components/Avatar/Avatar.tsx
+++ b/site/src/components/Avatar/Avatar.tsx
@@ -73,13 +73,26 @@ export const Avatar: React.FC<AvatarProps> = ({
 	fallback,
 	alt = "",
 	children,
+	style,
 	...props
 }) => {
 	const { externalImages } = useAppearance();
 
+	const isEmoji = src?.startsWith("/emojis/");
+
 	return (
 		<AvatarPrimitive.Root
-			className={cn(avatarVariants({ size, variant, className }))}
+			className={cn(
+				avatarVariants({
+					size,
+					variant: isEmoji ? "default" : variant,
+					className,
+				}),
+			)}
+			style={{
+				...style,
+				padding: isEmoji ? "20%" : style?.padding,
+			}}
 			{...props}
 		>
 			<AvatarPrimitive.Image