Element: #238 Icons (navigation/tabs) What it shows: Tabs with a Lucide icon, a brand-colored svg icon and a scheme-aware monochrome icon next to each label. When to use: Tab bars that mix generic and third-party product marks, such as terminal or agent sessions. Spec: - `` with 3 triggers: `value="shell"`, `value="claude"`, `value="codex"` - Shell uses `{#snippet icon()}{/snippet}` - Claude Code and Codex set `brandIcon` so the inline `svg` keeps its own colors - Codex wraps `` with `{#snippet light()}` and `{#snippet dark()}` svg variants - Wrapper is `.wrap` with `max-width: 480px` Tags: tabs, icon, brand-icon, scheme-asset, dark-mode, tabs-trigger Needs: @codeatlasdev/ui@4.4.0 Components: Tabs, TabsList, TabsTrigger, TabsContent, SchemeAsset Live demo: https://ui.codeatlas.com.br/docs/navigation/tabs#icons

{#snippet icon()}{/snippet} Shell {#snippet icon()} {/snippet} Claude Code {#snippet icon()} {#snippet light()}{/snippet} {#snippet dark()}{/snippet} {/snippet} Codex

Shell session.

Claude Code session.

Codex session.