Click on "Deploy Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type @ followed by the MCP server name and your instructions, e.g., "@figma-svg-to-icon-mcp Extract all icons from this Figma node and save new ones to my icons folder."
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
An MCP (Model Context Protocol) server that extracts SVG icons from Figma and generates React TSX icon components — automatically, from your AI assistant.
Works with GitHub Copilot, Claude, and any MCP-compatible AI assistant.
Node.js 18+
VS Code with GitHub Copilot (agent mode) or Claude Desktop
A Figma personal access token
Go to figma.com → Settings → Security → Personal access tokens → Generate new token.
Scopes needed: file_content:read
VS Code (.vscode/mcp.json or user settings):
{
"servers": {
"figma-svg-to-icon-mcp": {
"type": "stdio",
"command": "npx",
"args": ["-y", "figma-svg-to-icon-mcp"],
"env": {
"FIGMA_TOKEN": "figd_your_token_here"
}
}
}
}Claude Desktop (claude_desktop_config.json):
{
"mcpServers": {
"figma-svg-to-icon-mcp": {
"command": "npx",
"args": ["-y", "figma-svg-to-icon-mcp"],
"env": {
"FIGMA_TOKEN": "figd_your_token_here"
}
}
}
}Note: Each user needs their own
FIGMA_TOKEN. Tokens are tied to Figma account permissions.
Related MCP server: Figma to React MCP
Point it at any Figma node URL and it will:
Fetch the full node tree via Figma REST API (handles deeply nested instances)
Detect icon nodes by name pattern + size
Export clean SVG via Figma's image export API
Check your existing components/icons folder for duplicates (name + path similarity)
Generate .tsx icon components in a consistent format
Generated component format:
interface IconProps {
className?: string;
}
export default function ArrowRightIcon({ className }: IconProps) {
return (
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20" fill="none" className={className}>
<path d="..." stroke="currentColor" strokeWidth="1.66667" strokeLinecap="round" strokeLinejoin="round" />
</svg>
);
}Once configured, just tell your AI assistant:
Extract all icons from this Figma node and save new ones to my icons folder.
figma_url: https://www.figma.com/design/FILEID/Name?node-id=1234-5678
icons_dir: /absolute/path/to/your/project/src/components/iconsParameter | Description | Default |
| Figma node URL with | required |
| Absolute path to icons folder | required |
| Preview without writing files |
|
| Write similar icons with |
|
Extract icons — dry run only, don't write files.
figma_url: https://www.figma.com/design/xxx?node-id=1234-5678
icons_dir: /Users/you/project/src/components/icons
dry_run: trueConvert this SVG to an icon component and save it.
icon_name: arrow-right
icons_dir: /Users/you/project/src/components/icons
svg_code: <svg viewBox="0 0 24 24">...</svg>Icons are identified by:
Type: INSTANCE, COMPONENT, VECTOR, or BOOLEAN_OPERATION
Name: kebab-case pattern — wallet-03, arrow-right, x-close ✅
Excluded: Frame 123, Group, Solid, Bold, Featured icon ❌
Size: Square dimensions in common icon sizes: 12, 14, 16, 18, 20, 24, 28, 32, 36, 40, 48, 64px
Before writing a file, the server checks your existing icons folder using:
Name similarity — fuzzy match on component name (70%+ threshold)
SVG path similarity — Jaccard similarity on path data (85%+ threshold)
If either matches, the icon is skipped (or written with -copy suffix if copy_existing: true).
Tool | Description |
| Main tool — extracts icons from a Figma URL |
| Convert a raw SVG string to a TSX component |
Issues and PRs welcome at https://github.com/Pruthvik1/figma-svg-to-icon-mcp.
MIT
Extract all SVG icons from a Figma node URL and save new ones as TSX components. Uses the Figma REST API directly — handles deep/nested nodes including instances. Checks existing icons folder and skips duplicates. Parameter is figma_url (not figma_node_url).
| Name | Required | Description | Default |
|---|---|---|---|
| dry_run | No | Preview results without writing files. Default: false. | |
| figma_url | Yes | Figma node URL. MUST use parameter name 'figma_url'. e.g. https://www.figma.com/design/xxx/Name?node-id=21551-57647 | |
| icons_dir | Yes | Absolute path to your icons folder e.g. /Users/you/project/src/components/icons | |
| copy_existing | No | Write similar/duplicate icons with a -copy suffix instead of skipping. Default: false. |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations provided, the description carries the full burden and does disclose meaningful behavior: it uses the Figma REST API directly, handles deep/nested nodes and instances, checks the existing icon folder, and skips duplicates. It does not mention authentication or rate limits, but it covers the main behavioral traits.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is three sentences with each sentence serving a distinct purpose: purpose, behavior/method, and parameter-naming caveat. It is front-loaded and contains no filler.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a moderately complex tool, the description covers purpose, network method, nested-node handling, duplicate behavior, and a parameter caveat. It does not specify auth requirements or output details, but the input schema fully documents the four parameters, making the description reasonably complete.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100%, so the baseline is 3. The description adds value beyond the schema by explicitly warning that the parameter name is figma_url and not figma_node_url, which helps avoid a common invocation error.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description is explicit: 'Extract all SVG icons from a Figma node URL and save new ones as TSX components.' It names the specific resource (Figma node URL), the action, and the output format, and the mention of using the Figma REST API clearly differentiates it from sibling svg_to_icon.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
It provides clear context for using the tool: extract from Figma node URLs, write TSX files, and handle duplicates. It also warns that the parameter must be figma_url, not figma_node_url. However, it does not explicitly name the sibling tool as an alternative or state when not to use it.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Convert raw SVG code into a TSX icon component and optionally write it to your icons folder.
| Name | Required | Description | Default |
|---|---|---|---|
| dry_run | No | Only return TSX, don't write file. | |
| svg_code | Yes | Raw SVG markup string. | |
| icon_name | Yes | Icon name e.g. 'arrow-right' → ArrowRightIcon. | |
| icons_dir | No | If provided, writes the TSX file after similarity check. |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations, the description must disclose side effects. It mentions the write is optional, but critically omits the 'similarity check' noted in the icons_dir parameter, whether existing files are overwritten, and the behavior of dry_run. This leaves the AI uncertain about the tool's safety and failure modes.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is a single sentence that front-loads the core purpose and concisely notes the optional write behavior. There is no redundancy or filler; every word earns its place.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
The tool has no output schema and no annotations, but the description does not explain the return value (TSX code), the dry_run behavior, or the file write conditions (similarity check). These are significant gaps for a 4-parameter tool, leaving the AI without essential workflow details.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
All parameters have full schema descriptions, so the baseline is 3. The description adds little beyond the schema, only loosely tying the optional write to the icons_dir parameter without adding new meaning or usage nuance.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description uses the specific verb 'Convert' and clearly identifies both the input ('raw SVG code') and output ('TSX icon component'). This differentiates it from the sibling tool extract_icons_from_figma, which handles Figma extraction.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The context is clear: use this tool when you have raw SVG code that needs conversion to a TSX component. However, it does not explicitly mention alternatives or exclusion conditions, so it lacks the explicit guidance needed for a 5.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Recent tool additions, removals, and schema changes observed during successful MCP inspections.
v1.0.1extract_icons_from_figmasvg_to_iconScored across 2 tools
The two tools are clearly distinct: one extracts icons from Figma via URL, the other converts raw SVG code. No overlap in input methods, making selection unambiguous.
Naming is mixed: 'extract_icons_from_figma' follows a verb-object-source pattern, while 'svg_to_icon' is a transformation phrase without a verb. Both use snake_case, but the semantic patterns differ.
Only two tools exist, which is borderline per the rubric. However, the server's narrow purpose (Figma to icon conversion) is directly served by these two operations, so the count is reasonable.
The two tools cover the entire conversion pipeline: batch extraction from Figma and single conversion from raw SVG. Duplicate checking and file writing are included, leaving no obvious gaps for the stated purpose.
Build and manage your design system with AI: tokens, themes, components, icons, Figma and code.
Multilingual semantic SVG icon search with previews for AI coding agents. 20,000+ icons.
Icons for agentic development: search & fetch 366,000+ open-source icons as SVG/PNG. No API key.
Connect AI assistants to your GitHub-hosted Obsidian vault to seamlessly access, search, and analy…
