Support custom icons for custom agents in the chat agent picker (`icon` frontmatter in `.agent.md`)
- Dominant language
- TypeScript
- Stars
- 193k
- Forks
- 42.4k
- PR merge metrics
- PR metrics pending
Description
## Describe the feature you'd like
Custom agents (`.agent.md`) appear in the chat agent picker as plain-text entries without any icon, while built-in agents (Agent, Ask, Plan) each show a distinctive codicon. There is currently no way to assign an icon to a custom agent. I would like to declare one in the YAML frontmatter, e.g.:
```yaml
---
name: Design-temp
description: A specialized UI/UX design agent
icon: paintcan # any codicon id
tools: [...]
---
```
## Describe the problem / motivation
- Users maintaining several custom agents (user-level + workspace-level) get a long, text-only list in the picker that is hard to scan. Icons would make agents visually distinguishable and faster to find, consistent with the built-in entries.
- The frontmatter already supports rich metadata (`name`, `description`, `tools`, `model`, `argument-hint`, `handoffs`, `hooks`, ...), yet the visual presentation is the only aspect that cannot be customized.
## Current behavior (verified against `main` sources)
- `PromptHeaderAttributes` in `src/vs/workbench/contrib/chat/common/promptSyntax/promptFileParser.ts` has no `icon` attribute, so an `icon:` key in the frontmatter is silently ignored.
- `CustomChatMode.icon` in `src/vs/workbench/contrib/chat/common/chatModes.ts` is hard-coded to `constObservable(undefined)`.
- In `src/vs/workbench/contrib/chat/browser/widget/input/modePickerActionItem.ts`, an icon is only resolved for modes where `isModeConsideredBuiltIn()` returns true (`builtinDefaultIcon` maps `ask` → `Codicon.ask`, `plan` → `Codicon.tasklist`); user/workspace custom agents always render without an icon. The file even contains the comment `// TODO: there should be an icon contributed for built-in modes`, acknowledging this gap.
## Describe the solution you'd like
1. Add an optional `icon` attribute to the `.agent.md` frontmatter (and to `PromptHeaderAttributes`), accepting a codicon id (e.g. `robot`, `paintcan`, `symbol-color`), consistent with how `ThemeIcon`/codicons are used elsewhere in VS Code.
2. Wire it through `ICustomAgent` → `CustomChatMode.icon` (replace `constObservable(undefined)` with an observable of the parsed `ThemeIcon`).
3. Render it in the agent picker (`modePickerActionItem.ts`, as well as the sessions/mobile pickers that already read `mode.icon`), falling back to the current icon-less rendering when the attribute is absent or unknown.
4. Validate it in `promptValidator.ts` (warn on unknown codicon ids) and document the new field in the custom agents documentation.
Optionally, let extension-contributed agents provide icons too, resolving the existing TODO.
### Example
- Before: `Design-temp` (text only)
- After: `$(paintcan) Design-temp`
## Additional context
- VS Code 1.13x, Windows; user-level agents stored in the user prompts profile folder.
- Built-in modes hard-code their icons in `chatModes.ts` (`Codicon.agent` / `Codicon.question` / `Codicon.edit`).
Contributor guide
Assessment
This issue has not been assessed yet.