diff --git a/interface/src/lib/providerIcons.tsx b/interface/src/lib/providerIcons.tsx
index c4e0e0471..d2e2eddfa 100644
--- a/interface/src/lib/providerIcons.tsx
+++ b/interface/src/lib/providerIcons.tsx
@@ -1,3 +1,4 @@
+import { useId } from "react";
 import Anthropic from "@lobehub/icons/es/Anthropic";
 import OpenAI from "@lobehub/icons/es/OpenAI";
 import OpenRouter from "@lobehub/icons/es/OpenRouter";
@@ -20,6 +21,35 @@ interface ProviderIconProps {
 	size?: number;
 }
 
+function OpenCodeZenIcon({ size = 24, className }: IconProps) {
+	const clipId = useId();
+	const clipPathId = `opencode-zen-clip-${clipId}`;
+	const width = (size * 32) / 40;
+
+	return (
+		<svg
+			width={width}
+			height={size}
+			viewBox="0 0 32 40"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+			className={className}
+			aria-hidden="true"
+			focusable="false"
+		>
+			<g clipPath={`url(#${clipPathId})`}>
+				<path d="M24 32H8V16H24V32Z" fill="#4B4646" />
+				<path d="M24 8H8V32H24V8ZM32 40H0V0H32V40Z" fill="#F1ECEC" />
+			</g>
+			<defs>
+				<clipPath id={clipPathId}>
+					<rect width="32" height="40" fill="white" />
+				</clipPath>
+			</defs>
+		</svg>
+	);
+}
+
 export function ProviderIcon({ provider, className = "text-ink-faint", size = 24 }: ProviderIconProps) {
 	const iconProps: Partial<IconProps> = {
 		size,
@@ -37,7 +67,7 @@ export function ProviderIcon({ provider, className = "text-ink-faint", size = 24
 		together: Together,
 		xai: XAI,
 		zhipu: Zhipu,
-		"opencode-zen": OpenAI,
+		"opencode-zen": OpenCodeZenIcon,
 	};
 
 	const IconComponent = iconMap[provider.toLowerCase()];