From e5990a9143167a01211965f3016b727f130c42c6 Mon Sep 17 00:00:00 2001
From: Andrew Aquino <dawneraq@gmail.com>
Date: Tue, 7 Jul 2026 09:21:21 -0700
Subject: [PATCH] fix(site/src/pages/TemplateBuilder): display Avatar instead
 of img in BaseTemplateCard/SelectionSummary (#26951)

fixes DEVEX-576

## before

<img width="230" height="159" alt="image"
src="https://github.com/user-attachments/assets/d77b1343-f13b-472d-96ba-0b91baa8b17f"
/>

<img width="202" height="254" alt="image"
src="https://github.com/user-attachments/assets/458c5ea8-91cc-4ffe-8a49-132f186a9482"
/>

## after

<img width="232" height="161" alt="image"
src="https://github.com/user-attachments/assets/620ec315-4b95-44cc-90c0-2b24f8cb073e"
/>

<img width="205" height="252" alt="image"
src="https://github.com/user-attachments/assets/4268d12c-a37f-4dff-8c08-73b5a348d082"
/>
---
 site/src/pages/TemplateBuilder/SelectionSummary.tsx | 13 +++----------
 .../TemplateBuilder/TemplateCustomizationsStep.tsx  |  7 ++-----
 2 files changed, 5 insertions(+), 15 deletions(-)

diff --git a/site/src/pages/TemplateBuilder/SelectionSummary.tsx b/site/src/pages/TemplateBuilder/SelectionSummary.tsx
index 01070f70c2..73c873d5c0 100644
--- a/site/src/pages/TemplateBuilder/SelectionSummary.tsx
+++ b/site/src/pages/TemplateBuilder/SelectionSummary.tsx
@@ -1,6 +1,7 @@
 import { cva } from "class-variance-authority";
 import { XIcon } from "lucide-react";
 import { createContext, type PropsWithChildren, useContext } from "react";
+import { Avatar } from "#/components/Avatar/Avatar";
 import { Button } from "#/components/Button/Button";
 import { cn } from "#/utils/cn";
 
@@ -149,11 +150,7 @@ const BaseTemplateSelection: React.FC<BaseTemplateSelectionProps> = ({
 	return (
 		<StepDivider>
 			<div className="flex items-center p-1">
-				<img
-					src={template.iconUrl}
-					alt={`${template.name} icon`}
-					className="w-6 h-6 p-1 rounded-sm border border-border border-solid bg-surface-secondary"
-				/>
+				<Avatar src={template.iconUrl} size="sm" variant="icon" />
 				<span className="ml-2 text-content-secondary">{template.name}</span>
 			</div>
 		</StepDivider>
@@ -177,11 +174,7 @@ const ModuleSelection: React.FC<ModuleSelectionProps> = ({
 					className="group flex items-start justify-between p-1 mb-1 rounded-sm hover:bg-surface-secondary"
 				>
 					<div className="h-[1lh] content-center">
-						<img
-							src={module.iconUrl}
-							alt={`${module.name} icon`}
-							className="block w-6 h-6 p-1 rounded-sm border border-border border-solid bg-surface-secondary"
-						/>
+						<Avatar src={module.iconUrl} size="sm" variant="icon" />
 					</div>
 					<span className="flex-1 ml-2 text-content-secondary">
 						{module.name}
diff --git a/site/src/pages/TemplateBuilder/TemplateCustomizationsStep.tsx b/site/src/pages/TemplateBuilder/TemplateCustomizationsStep.tsx
index 076bdce18c..95a2aaf5fa 100644
--- a/site/src/pages/TemplateBuilder/TemplateCustomizationsStep.tsx
+++ b/site/src/pages/TemplateBuilder/TemplateCustomizationsStep.tsx
@@ -6,6 +6,7 @@ import {
 } from "#/api/queries/organizations";
 import type { Organization } from "#/api/typesGenerated";
 import { Alert } from "#/components/Alert/Alert";
+import { Avatar } from "#/components/Avatar/Avatar";
 import { IconField } from "#/components/IconField/IconField";
 import { Input } from "#/components/Input/Input";
 import { Label } from "#/components/Label/Label";
@@ -179,11 +180,7 @@ const ProvisionerWarning: FC = () => {
 const BaseTemplateCard: FC<{ base: SelectedBaseMeta }> = ({ base }) => {
 	return (
 		<div className="w-56 shrink-0 rounded-lg bg-surface-secondary p-4 self-start">
-			{base.iconUrl && (
-				<div className="w-10 h-10 rounded-md bg-surface-tertiary flex items-center justify-center mb-3">
-					<img src={base.iconUrl} alt="" className="w-6 h-6" />
-				</div>
-			)}
+			{base.iconUrl && <Avatar src={base.iconUrl} size="lg" variant="icon" />}
 			<p className="text-sm font-medium text-content-primary">{base.name}</p>
 			<p className="text-xs text-content-secondary mt-1">
 				Preset based on base template