From 2943bf5f212e4417187f94e57b01854dbbf0a3ab Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kayla=20=E3=81=AF=E3=81=AA?= <mckayla@hey.com>
Date: Wed, 13 May 2026 17:52:05 -0600
Subject: [PATCH] fix(site): use ExternalImage for icon URLs (#25315)

---
 site/src/modules/dashboard/Navbar/MobileMenu.tsx         | 9 +++++++--
 site/src/modules/dashboard/Navbar/ProxyMenu.tsx          | 5 +++--
 site/src/modules/resources/AgentLogs/AgentLogs.tsx       | 3 ++-
 .../CreateWorkspacePage/CreateWorkspacePageView.tsx      | 3 ++-
 site/src/pages/HealthPage/WorkspaceProxyPage.tsx         | 3 ++-
 site/src/pages/LoginPage/OAuthSignInForm.tsx             | 2 +-
 .../TemplateInsightsPage/TemplateInsightsPage.tsx        | 2 +-
 .../SecurityPage/SingleSignOnSection.tsx                 | 6 +++++-
 site/src/pages/WorkspacePage/ResourcesSidebar.tsx        | 3 ++-
 9 files changed, 25 insertions(+), 11 deletions(-)

diff --git a/site/src/modules/dashboard/Navbar/MobileMenu.tsx b/site/src/modules/dashboard/Navbar/MobileMenu.tsx
index 81822669b0..ff498e1ac2 100644
--- a/site/src/modules/dashboard/Navbar/MobileMenu.tsx
+++ b/site/src/modules/dashboard/Navbar/MobileMenu.tsx
@@ -22,6 +22,7 @@ import {
 	DropdownMenuSeparator,
 	DropdownMenuTrigger,
 } from "#/components/DropdownMenu/DropdownMenu";
+import { ExternalImage } from "#/components/ExternalImage/ExternalImage";
 import { Latency } from "#/components/Latency/Latency";
 import type { ProxyContextValue } from "#/contexts/ProxyContext";
 import { cn } from "#/utils/cn";
@@ -134,7 +135,7 @@ const ProxySettingsSub: FC<ProxySettingsSubProps> = ({ proxyContextValue }) => {
 				>
 					Workspace proxy settings:
 					<span className="leading-none flex items-center gap-1">
-						<img
+						<ExternalImage
 							className="w-4 h-4"
 							src={selectedProxy.icon_url}
 							alt={selectedProxy.name}
@@ -171,7 +172,11 @@ const ProxySettingsSub: FC<ProxySettingsSubProps> = ({ proxyContextValue }) => {
 									setOpen(false);
 								}}
 							>
-								<img className="w-4 h-4" src={p.icon_url} alt={p.name} />
+								<ExternalImage
+									className="w-4 h-4"
+									src={p.icon_url}
+									alt={p.name}
+								/>
 								{p.display_name || p.name}
 								{latency ? (
 									<Latency className="ml-auto" latency={latency.latencyMS} />
diff --git a/site/src/modules/dashboard/Navbar/ProxyMenu.tsx b/site/src/modules/dashboard/Navbar/ProxyMenu.tsx
index 49f66efe37..85d9e37ff8 100644
--- a/site/src/modules/dashboard/Navbar/ProxyMenu.tsx
+++ b/site/src/modules/dashboard/Navbar/ProxyMenu.tsx
@@ -14,6 +14,7 @@ import {
 	DropdownMenuSeparator,
 	DropdownMenuTrigger,
 } from "#/components/DropdownMenu/DropdownMenu";
+import { ExternalImage } from "#/components/ExternalImage/ExternalImage";
 import { Latency } from "#/components/Latency/Latency";
 import { Skeleton } from "#/components/Skeleton/Skeleton";
 import type { ProxyContextValue } from "#/contexts/ProxyContext";
@@ -79,7 +80,7 @@ export const ProxyMenu: FC<ProxyMenuProps> = ({ proxyContextValue }) => {
 
 					{selectedProxy ? (
 						<>
-							<img
+							<ExternalImage
 								// Empty alt text used because we don't want to double up on
 								// screen reader announcements from visually-hidden span
 								alt=""
@@ -150,7 +151,7 @@ export const ProxyMenu: FC<ProxyMenuProps> = ({ proxyContextValue }) => {
 									>
 										<div className="flex gap-3 items-center w-full">
 											<div className="leading-none size-4">
-												<img
+												<ExternalImage
 													src={proxy.icon_url}
 													alt=""
 													className="object-contain size-full"
diff --git a/site/src/modules/resources/AgentLogs/AgentLogs.tsx b/site/src/modules/resources/AgentLogs/AgentLogs.tsx
index ad087742f6..83f43545c3 100644
--- a/site/src/modules/resources/AgentLogs/AgentLogs.tsx
+++ b/site/src/modules/resources/AgentLogs/AgentLogs.tsx
@@ -2,6 +2,7 @@ import type { JSX } from "react";
 import { FixedSizeList as List } from "react-window";
 import type { WorkspaceAgentLogSource } from "#/api/typesGenerated";
 import { Badge } from "#/components/Badge/Badge";
+import { ExternalImage } from "#/components/ExternalImage/ExternalImage";
 import type { Line } from "#/components/Logs/LogLine";
 import {
 	Tooltip,
@@ -70,7 +71,7 @@ export const AgentLogs: React.FC<AgentLogsProps> = ({
 					// colored circle to identify unique scripts.
 					if (logSource.icon) {
 						icon = (
-							<img
+							<ExternalImage
 								src={logSource.icon}
 								alt=""
 								className="size-3.5 mr-2 shrink-0"
diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx
index 9c11e6ac50..167b93838d 100644
--- a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx
+++ b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx
@@ -27,6 +27,7 @@ import {
 	ComboboxItem,
 	ComboboxTrigger,
 } from "#/components/Combobox/Combobox";
+import { ExternalImage } from "#/components/ExternalImage/ExternalImage";
 import {
 	HelpPopover,
 	HelpPopoverContent,
@@ -636,7 +637,7 @@ export const CreateWorkspacePageView: FC<CreateWorkspacePageViewProps> = ({
 															value={preset.value}
 														>
 															{preset.icon && (
-																<img
+																<ExternalImage
 																	src={preset.icon}
 																	alt={preset.label}
 																	className="w-4 h-4"
diff --git a/site/src/pages/HealthPage/WorkspaceProxyPage.tsx b/site/src/pages/HealthPage/WorkspaceProxyPage.tsx
index da2e490b1f..340507706b 100644
--- a/site/src/pages/HealthPage/WorkspaceProxyPage.tsx
+++ b/site/src/pages/HealthPage/WorkspaceProxyPage.tsx
@@ -3,6 +3,7 @@ import type { FC } from "react";
 import { useOutletContext } from "react-router";
 import type { HealthcheckReport } from "#/api/typesGenerated";
 import { Alert } from "#/components/Alert/Alert";
+import { ExternalImage } from "#/components/ExternalImage/ExternalImage";
 import {
 	Tooltip,
 	TooltipContent,
@@ -73,7 +74,7 @@ const WorkspaceProxyPage: FC = () => {
 							<header className="p-6 flex items-center justify-between gap-6">
 								<div className="flex items-center gap-6">
 									<div className="w-9 h-9 flex items-center justify-center">
-										<img
+										<ExternalImage
 											src={region.icon_url}
 											className="object-fill w-full h-full"
 											alt=""
diff --git a/site/src/pages/LoginPage/OAuthSignInForm.tsx b/site/src/pages/LoginPage/OAuthSignInForm.tsx
index 6e059ca487..a62aece2b6 100644
--- a/site/src/pages/LoginPage/OAuthSignInForm.tsx
+++ b/site/src/pages/LoginPage/OAuthSignInForm.tsx
@@ -77,7 +77,7 @@ const OidcIcon: FC<OidcIconProps> = ({ iconUrl }) => {
 	// if that happens, but also still need a way to inject accessible text
 	return (
 		<>
-			<img alt="" src={iconUrl} aria-labelledby={oidcId} />
+			<ExternalImage alt="" src={iconUrl} aria-labelledby={oidcId} />
 			<div id={oidcId} className="sr-only">
 				Open ID Connect
 			</div>
diff --git a/site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.tsx b/site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.tsx
index d023cd4add..430a51c530 100644
--- a/site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.tsx
+++ b/site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.tsx
@@ -600,7 +600,7 @@ const ParameterUsageLabel: FC<ParameterUsageLabelProps> = ({
 			<div className="flex items-center gap-4">
 				{icon && (
 					<div className="leading-none w-4 h-4">
-						<img
+						<ExternalImage
 							alt=""
 							src={icon}
 							className="w-full h-full object-contain"
diff --git a/site/src/pages/UserSettingsPage/SecurityPage/SingleSignOnSection.tsx b/site/src/pages/UserSettingsPage/SecurityPage/SingleSignOnSection.tsx
index a0b6db2324..7598bfbbf5 100644
--- a/site/src/pages/UserSettingsPage/SecurityPage/SingleSignOnSection.tsx
+++ b/site/src/pages/UserSettingsPage/SecurityPage/SingleSignOnSection.tsx
@@ -222,7 +222,11 @@ const OIDCIcon: FC<OIDCIconProps> = ({ oidcAuth }) => {
 	}
 
 	return (
-		<img alt="Open ID Connect icon" src={oidcAuth.iconUrl} className="size-4" />
+		<ExternalImage
+			alt="Open ID Connect icon"
+			src={oidcAuth.iconUrl}
+			className="size-4"
+		/>
 	);
 };
 
diff --git a/site/src/pages/WorkspacePage/ResourcesSidebar.tsx b/site/src/pages/WorkspacePage/ResourcesSidebar.tsx
index c5dea936bc..16f325eb0a 100644
--- a/site/src/pages/WorkspacePage/ResourcesSidebar.tsx
+++ b/site/src/pages/WorkspacePage/ResourcesSidebar.tsx
@@ -1,5 +1,6 @@
 import type { FC } from "react";
 import type { WorkspaceResource } from "#/api/typesGenerated";
+import { ExternalImage } from "#/components/ExternalImage/ExternalImage";
 import {
 	Sidebar,
 	SidebarCaption,
@@ -45,7 +46,7 @@ export const ResourcesSidebar: FC<ResourcesSidebarProps> = ({
 					className="leading-normal flex items-center gap-3"
 				>
 					<div className="flex items-center justify-center leading-none w-4 h-4 p-0.5">
-						<img
+						<ExternalImage
 							className="w-full h-full object-contain"
 							src={getResourceIconPath(r.type)}
 							alt=""