From 9bbb6c51ff0b7c963bd43f91346ebaf0f3d64e34 Mon Sep 17 00:00:00 2001
From: Jason <farion1231@gmail.com>
Date: Tue, 3 Feb 2026 22:45:59 +0800
Subject: [PATCH] feat(ui): add OpenClaw brand icon and component

---
 src/components/BrandIcons.tsx | 14 ++++++++++++++
 src/icons/extracted/claw.svg  | 22 ++++++++++++++++++++++
 2 files changed, 36 insertions(+)
 create mode 100644 src/icons/extracted/claw.svg

diff --git a/src/components/BrandIcons.tsx b/src/components/BrandIcons.tsx
index f6a68c67a..65bdb487a 100644
--- a/src/components/BrandIcons.tsx
+++ b/src/components/BrandIcons.tsx
@@ -7,6 +7,7 @@ interface IconProps {
 import ClaudeSvg from "@/icons/extracted/claude.svg?url";
 import OpenAISvg from "@/icons/extracted/openai.svg?url";
 import GeminiSvg from "@/icons/extracted/gemini.svg?url";
+import OpenClawSvg from "@/icons/extracted/claw.svg?url";
 
 export function ClaudeIcon({ size = 16, className = "" }: IconProps) {
   return (
@@ -47,6 +48,19 @@ export function GeminiIcon({ size = 16, className = "" }: IconProps) {
   );
 }
 
+export function OpenClawIcon({ size = 16, className = "" }: IconProps) {
+  return (
+    <img
+      src={OpenClawSvg}
+      width={size}
+      height={size}
+      className={className}
+      alt="OpenClaw"
+      loading="lazy"
+    />
+  );
+}
+
 // MCP icon uses inline SVG to support currentColor for hover effects
 export function McpIcon({ size = 16, className = "" }: IconProps) {
   return (
diff --git a/src/icons/extracted/claw.svg b/src/icons/extracted/claw.svg
new file mode 100644
index 000000000..bcbc1e10c
--- /dev/null
+++ b/src/icons/extracted/claw.svg
@@ -0,0 +1,22 @@
+<svg viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="lobster-gradient" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#ff4d4d"/>
+      <stop offset="100%" stop-color="#991b1b"/>
+    </linearGradient>
+  </defs>
+  <!-- Body -->
+  <path d="M60 10 C30 10 15 35 15 55 C15 75 30 95 45 100 L45 110 L55 110 L55 100 C55 100 60 102 65 100 L65 110 L75 110 L75 100 C90 95 105 75 105 55 C105 35 90 10 60 10Z" fill="url(#lobster-gradient)"/>
+  <!-- Left Claw -->
+  <path d="M20 45 C5 40 0 50 5 60 C10 70 20 65 25 55 C28 48 25 45 20 45Z" fill="url(#lobster-gradient)"/>
+  <!-- Right Claw -->
+  <path d="M100 45 C115 40 120 50 115 60 C110 70 100 65 95 55 C92 48 95 45 100 45Z" fill="url(#lobster-gradient)"/>
+  <!-- Antenna -->
+  <path d="M45 15 Q35 5 30 8" stroke="#ff4d4d" stroke-width="3" stroke-linecap="round"/>
+  <path d="M75 15 Q85 5 90 8" stroke="#ff4d4d" stroke-width="3" stroke-linecap="round"/>
+  <!-- Eyes -->
+  <circle cx="45" cy="35" r="6" fill="#050810"/>
+  <circle cx="75" cy="35" r="6" fill="#050810"/>
+  <circle cx="46" cy="34" r="2.5" fill="#00e5cc"/>
+  <circle cx="76" cy="34" r="2.5" fill="#00e5cc"/>
+</svg>