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