diff --git a/src/shared/components/ProviderIcon.tsx b/src/shared/components/ProviderIcon.tsx
index a6d5f5fbb4..9c1fb70865 100644
--- a/src/shared/components/ProviderIcon.tsx
+++ b/src/shared/components/ProviderIcon.tsx
@@ -6,7 +6,8 @@
  * Strategy (#529):
  * 1. Try @lobehub/icons ProviderIcon (130+ providers, React components)
  * 2. Fall back to /providers/{id}.png (existing static assets)
- * 3. Fall back to a generic AI icon
+ * 3. Fall back to /providers/{id}.svg (SVG assets)
+ * 4. Fall back to a generic AI icon
  *
  * Usage:
  *   <ProviderIcon providerId="openai" size={24} />
@@ -123,6 +124,7 @@ const ProviderIcon = memo(function ProviderIcon({
   const lobehubId = LOBEHUB_PROVIDER_MAP[providerId.toLowerCase()] ?? null;
   const [useLobehub, setUseLobehub] = useState(lobehubId !== null);
   const [usePng, setUsePng] = useState(true);
+  const [useSvg, setUseSvg] = useState(true);
 
   if (useLobehub && lobehubId) {
     return (
@@ -156,6 +158,25 @@ const ProviderIcon = memo(function ProviderIcon({
     );
   }
 
+  if (useSvg) {
+    return (
+      <span
+        className={className}
+        style={{ display: "inline-flex", alignItems: "center", ...style }}
+      >
+        <Image
+          src={`/providers/${providerId}.svg`}
+          alt={providerId}
+          width={size}
+          height={size}
+          style={{ objectFit: "contain" }}
+          onError={() => setUseSvg(false)}
+          unoptimized
+        />
+      </span>
+    );
+  }
+
   return (
     <span className={className} style={{ display: "inline-flex", alignItems: "center", ...style }}>
       <GenericProviderIcon size={size} />