diff --git a/site/src/pages/TemplateBuilder/ModuleCard.tsx b/site/src/pages/TemplateBuilder/ModuleCard.tsx
index a1199b90d1..e9214ec11e 100644
--- a/site/src/pages/TemplateBuilder/ModuleCard.tsx
+++ b/site/src/pages/TemplateBuilder/ModuleCard.tsx
@@ -1,5 +1,6 @@
 import { BadgeCheckIcon, CheckIcon } from "lucide-react";
 import { useId } from "react";
+import { Avatar } from "#/components/Avatar/Avatar";
 import { Link } from "#/components/Link/Link";
 import { cn } from "#/utils/cn";
 
@@ -45,13 +46,7 @@ export const ModuleCard: React.FC<ModuleCardProps> = ({
 			}}
 		>
 			<div className="flex items-start justify-between mb-3">
-				<div className="flex items-center justify-center p-1 rounded-md size-10 shrink-0 bg-surface-secondary border border-solid border-border">
-					{iconUrl ? (
-						<img src={iconUrl} alt="" className="size-7 object-contain" />
-					) : (
-						<div className="size-7 rounded bg-surface-primary" />
-					)}
-				</div>
+				<Avatar src={iconUrl} size="lg" variant="icon" />
 				<div
 					aria-hidden="true"
 					className={cn(
diff --git a/site/src/pages/TemplateBuilder/TemplateBuilderAvatarData.tsx b/site/src/pages/TemplateBuilder/TemplateBuilderAvatarData.tsx
index 7ac2cdd451..7310ced0f3 100644
--- a/site/src/pages/TemplateBuilder/TemplateBuilderAvatarData.tsx
+++ b/site/src/pages/TemplateBuilder/TemplateBuilderAvatarData.tsx
@@ -18,7 +18,7 @@ export const TemplateBuilderAvatarData: FC<TemplateBuilderAvatarDataProps> = ({
 }) => {
 	return (
 		<AvatarData
-			avatar={<Avatar src={iconUrl} size="lg" />}
+			avatar={<Avatar src={iconUrl} size="lg" variant="icon" />}
 			title={<h3 className="m-0 text-xl font-semibold">{name}</h3>}
 			subtitle={
 				<>
diff --git a/site/src/pages/TemplateBuilder/TemplateCard.tsx b/site/src/pages/TemplateBuilder/TemplateCard.tsx
index 5650a3358b..8465d5b76f 100644
--- a/site/src/pages/TemplateBuilder/TemplateCard.tsx
+++ b/site/src/pages/TemplateBuilder/TemplateCard.tsx
@@ -1,5 +1,6 @@
 import { BadgeCheckIcon } from "lucide-react";
 import { useId } from "react";
+import { Avatar } from "#/components/Avatar/Avatar";
 import { Link } from "#/components/Link/Link";
 import { cn } from "#/utils/cn";
 
@@ -45,13 +46,7 @@ export const TemplateCard: React.FC<TemplateCardProps> = ({
 			}}
 		>
 			<div className="flex items-start justify-between mb-3">
-				<div className="flex items-center justify-center p-1 rounded-md size-10 shrink-0 bg-surface-secondary border border-solid border-border">
-					{iconUrl ? (
-						<img src={iconUrl} alt="" className="size-7 object-contain" />
-					) : (
-						<div className="size-7 rounded bg-surface-primary" />
-					)}
-				</div>
+				<Avatar src={iconUrl} size="lg" variant="icon" />
 				<div
 					aria-hidden="true"
 					className={cn(