diff --git a/apps/ui/src/components/ui/provider-icon.tsx b/apps/ui/src/components/ui/provider-icon.tsx
index 6c99cbad..456a09c8 100644
--- a/apps/ui/src/components/ui/provider-icon.tsx
+++ b/apps/ui/src/components/ui/provider-icon.tsx
@@ -1,4 +1,4 @@
-import type { ComponentType, SVGProps } from 'react';
+import type { ComponentType, ImgHTMLAttributes, SVGProps } from 'react';
 import { cn } from '@/lib/utils';
 import type { AgentModel, ModelProvider } from '@automaker/types';
 import { getProviderFromModel } from '@/lib/utils';
@@ -166,8 +166,36 @@ export function CursorIcon(props: Omit<ProviderIconProps, 'provider'>) {
   return <ProviderIcon provider={PROVIDER_ICON_KEYS.cursor} {...props} />;
 }
 
-export function GeminiIcon(props: Omit<ProviderIconProps, 'provider'>) {
-  return <ProviderIcon provider={PROVIDER_ICON_KEYS.gemini} {...props} />;
+const GEMINI_ICON_URL = new URL('../../assets/icons/gemini-icon.svg', import.meta.url).toString();
+const GEMINI_ICON_ALT = 'Gemini';
+
+type GeminiIconProps = Omit<ImgHTMLAttributes<HTMLImageElement>, 'src'> & {
+  title?: string;
+};
+
+export function GeminiIcon({ title, className, ...props }: GeminiIconProps) {
+  const {
+    role,
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledby,
+    'aria-hidden': ariaHidden,
+    ...rest
+  } = props;
+  const hasAccessibleLabel = Boolean(title || ariaLabel || ariaLabelledby);
+  const fallbackAlt = hasAccessibleLabel ? (title ?? ariaLabel ?? GEMINI_ICON_ALT) : '';
+
+  return (
+    <img
+      src={GEMINI_ICON_URL}
+      className={cn('inline-block', className)}
+      role={role ?? (hasAccessibleLabel ? 'img' : 'presentation')}
+      aria-hidden={ariaHidden ?? !hasAccessibleLabel}
+      aria-label={ariaLabel}
+      aria-labelledby={ariaLabelledby}
+      alt={fallbackAlt}
+      {...rest}
+    />
+  );
 }
 
 export function GrokIcon(props: Omit<ProviderIconProps, 'provider'>) {