From d85211685b7e33a4d3cb558eb4246452aab0c2b0 Mon Sep 17 00:00:00 2001
From: Andrew Aquino <dawneraq@gmail.com>
Date: Mon, 8 Jun 2026 09:13:01 -0700
Subject: [PATCH] feat: add group avatar to GroupPage (#25878)

ref DEVEX-24

Figma:
https://www.figma.com/design/KWMwUzDZtd5U0aU9xCdFR2/Service-accounts---user-driven-access-controls?node-id=129-2158&m=dev

<img width="1840" height="1191" alt="image"
src="https://github.com/user-attachments/assets/5164ba3b-f967-49ab-a5d4-a8c2f9f0b973"
/>
---
 site/src/pages/GroupsPage/GroupPage.tsx | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/site/src/pages/GroupsPage/GroupPage.tsx b/site/src/pages/GroupsPage/GroupPage.tsx
index 8ffd8cb041..a0520e9844 100644
--- a/site/src/pages/GroupsPage/GroupPage.tsx
+++ b/site/src/pages/GroupsPage/GroupPage.tsx
@@ -18,6 +18,8 @@ import {
 } from "#/api/queries/groups";
 import type { Group, ReducedUser } from "#/api/typesGenerated";
 import { ErrorAlert } from "#/components/Alert/ErrorAlert";
+import { Avatar } from "#/components/Avatar/Avatar";
+import { AvatarData } from "#/components/Avatar/AvatarData";
 import { Button } from "#/components/Button/Button";
 import { DeleteDialog } from "#/components/Dialogs/DeleteDialog/DeleteDialog";
 import { useFilter } from "#/components/Filter/Filter";
@@ -112,9 +114,20 @@ const GroupPage: FC = () => {
 
 			<div className="flex align-baseline justify-between w-full">
 				<SettingsHeader>
-					<SettingsHeaderTitle>
-						{groupData.display_name || groupData.name || "Unknown Group"}
-					</SettingsHeaderTitle>
+					<AvatarData
+						avatar={
+							<Avatar
+								src={groupData.avatar_url}
+								fallback={groupData.display_name || groupData.name}
+								size="lg"
+							/>
+						}
+						title={
+							<SettingsHeaderTitle>
+								{groupData.display_name || groupData.name || "Unknown Group"}
+							</SettingsHeaderTitle>
+						}
+					/>
 					<SettingsHeaderDescription>
 						Manage members for this group.
 					</SettingsHeaderDescription>