diff --git a/web/src/components/AgentFlavorIcon.test.tsx b/web/src/components/AgentFlavorIcon.test.tsx
index 76616df3..76d9f706 100644
--- a/web/src/components/AgentFlavorIcon.test.tsx
+++ b/web/src/components/AgentFlavorIcon.test.tsx
@@ -3,8 +3,7 @@ import { render } from '@testing-library/react'
 import { AGENT_FLAVORS } from '@hapi/protocol'
 import { AgentFlavorIcon } from './AgentFlavorIcon'
 
-// Flavors backed by a @lobehub/icons brand logo. 'pi' has no logo in the
-// package and intentionally falls back to the letter badge.
+// Flavors backed by a @lobehub/icons brand logo.
 const LOGO_FLAVORS = AGENT_FLAVORS.filter((f) => f !== 'pi')
 
 function getWrapper(container: HTMLElement): HTMLElement {
@@ -29,13 +28,15 @@ describe('AgentFlavorIcon', () => {
         }
     })
 
-    it('keeps the "Pi" letter badge for the pi flavor (no brand logo available)', () => {
+    it('renders the Pi logo with transparent, theme-aware coloring', () => {
         const { container } = render(<AgentFlavorIcon flavor="pi" />)
         const badge = getWrapper(container)
-        expect(container.querySelector('svg')).toBeNull()
-        expect(badge.textContent).toBe('Pi')
-        expect(badge.className).toContain('bg-[#5b21b6]')
-        expect(badge.className).toContain('text-white')
+        const svg = container.querySelector('svg')
+        expect(svg).not.toBeNull()
+        expect(badge.textContent).toBe('')
+        expect(badge.className).not.toContain('rounded-sm')
+        expect(badge.className).toContain('text-[var(--app-fg)]')
+        expect(svg?.getAttribute('viewBox')).toBe('0 0 800 800')
     })
 
     it.each([null, undefined, '', '   ', 'mystery-cli'])(
diff --git a/web/src/components/AgentFlavorIcon.tsx b/web/src/components/AgentFlavorIcon.tsx
index 259a4805..8df6f416 100644
--- a/web/src/components/AgentFlavorIcon.tsx
+++ b/web/src/components/AgentFlavorIcon.tsx
@@ -24,13 +24,13 @@ const FLAVOR_LOGOS: Record<string, IconType> = {
     opencode: OpenCodeMono,
 }
 
-// Letter-badge fallback for flavors without a brand logo in @lobehub/icons
-// (pi) and for anything unrecognized.
-const FLAVOR_BADGES: Record<string, { label: string; colors: string }> = {
-    pi: {
-        label: 'Pi',
-        colors: 'bg-[#5b21b6] text-white',
-    },
+function PiLogo() {
+    return (
+        <svg viewBox="0 0 800 800" width="100%" height="100%" fill="currentColor">
+            <path fillRule="evenodd" d="M165.29 165.29h352.07V400H400v117.36H282.65v117.36H165.29zM282.65 282.65V400H400V282.65z" />
+            <path d="M517.36 400h117.36v234.72H517.36z" />
+        </svg>
+    )
 }
 
 const UNKNOWN_FLAVOR_BADGE = {
@@ -54,7 +54,18 @@ export function AgentFlavorIcon({ flavor, className }: { flavor?: string | null;
         )
     }
 
-    const badge = FLAVOR_BADGES[normalized] ?? UNKNOWN_FLAVOR_BADGE
+    if (normalized === 'pi') {
+        return (
+            <span
+                aria-hidden="true"
+                className={`inline-flex items-center justify-center leading-none text-[var(--app-fg)] ${sizeClass}`}
+            >
+                <PiLogo />
+            </span>
+        )
+    }
+
+    const badge = UNKNOWN_FLAVOR_BADGE
     return (
         <span
             aria-hidden="true"