# betterdocs/4.9.5/react-src/admin/mcp/components/Icons.js
BetterDocs – AI Documentation, Knowledge Base, MCP Server, Docs, Wikis, FAQ & Chatbot, version 4.9.5. 165 lines.
- Page: https://pluginprobe.com/plugins/betterdocs/4.9.5/code/react-src/admin/mcp/components/Icons.js
- Raw: https://pluginprobe.com/plugins/betterdocs/4.9.5/raw/react-src/admin/mcp/components/Icons.js
- Modified: 2026-10-12T10:07:14+00:00
Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/betterdocs/4.9.5/code/react-src/admin/mcp/components/Icons.js#L10-L20`.
```javascript
import React from "react";
/**
* Inline glyphs for the MCP page. Kept here rather than in `~betterdocs/icons`
* because they are specific to this screen; all of them inherit `currentColor`
* so they follow the token that colours their surrounding text in both light
* and dark mode.
*/
/**
* The Model Context Protocol mark — the three nested arcs, on the protocol's own
* 195x195 grid. This is the glyph every MCP client shows, so a site owner
* recognises what this screen is before reading a word of it; the abstract
* sun/asterisk that stood here said nothing (ADR-054).
*/
export const IconMcp = ({ size = 22 }) => (
);
export const IconCheck = ({ size = 14 }) => (
);
export const IconCopy = ({ size = 14 }) => (
);
export const IconRefresh = ({ size = 14 }) => (
);
export const IconPlay = ({ size = 14 }) => (
);
export const IconTrash = ({ size = 15 }) => (
);
export const IconPlug = ({ size = 18 }) => (
);
/**
* The KPI tiles' marks (ADR-062). `IconPlug` and `IconCode` above serve the
* first two tiles; these two are the grid and the clock.
*/
export const IconGrid = ({ size = 14 }) => (
);
export const IconClock = ({ size = 14 }) => (
);
/**
* The note beside a token-mode payload. Informational, not a warning triangle:
* using the connection token is a supported choice, only a narrower one.
*/
export const IconInfo = ({ size = 14 }) => (
);
export const IconExternal = ({ size = 13 }) => (
);
export const IconChevron = ({ open = false, size = 14 }) => (
);
/* ---------------------------------------------------------- client marks */
/**
* The marks of the clients the cards offer, in two kinds.
*
* `IconClaude` and `IconOpenAI` are the vendors' own published logo files, used
* exactly as published — path, viewBox and fill unchanged — each keeping its own
* colour on a white tile, which is why neither uses `currentColor` (ADR-066).
* Do not recolour, re-draw or re-grid them: an approximation of somebody else's
* logo is precisely what that decision exists to undo.
*
* The rest are ours, on the shared 24-unit grid, and inherit `currentColor` so
* the card sets the accent. `MCPManager::client_mark()` carries the same five
* marks for the consent screen: change one and change both.
*/
export const IconClaude = ({ size = 18 }) => (
);
export const IconChatGpt = ({ size = 18 }) => (
);
// The same closed arrow, filled rather than stroked: on a solid tile it knocks
// out as a glyph, not as a hairline outline.
export const IconCursor = ({ size = 18 }) => (
);
export const IconCode = ({ size = 18 }) => (
);
export const IconSpark = ({ size = 18 }) => (
);
```