Figma Svg To Icon Mcp — independently scanned and version-tracked by SaferSkills.
SaferSkills independently audited Figma Svg To Icon Mcp (Agent Skill) and scored it 100/100 (green). The audit ran 55 deterministic rules across Security, Supply Chain, Maintenance, Transparency, and Community; it found 0 high-severity and 0 lower-severity findings. The full rule-by-rule trace and per-finding evidence are below. Free, methodology-open.
Findings & checks · 0 flagged
Every scanned point with the score it earned and what moved between them.
First recorded scan — no prior version to compare against.
The primary manifest — the file an agent reads to learn what this artifact does.
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.
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.Point it at any Figma node URL and it will:
components/icons folder for duplicates (name + path similarity).tsx icon components in a consistent formatGenerated 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/icons| Parameter | Description | Default |
|---|---|---|
figma_url | Figma node URL with node-id | required |
icons_dir | Absolute path to icons folder | required |
dry_run | Preview without writing files | false |
copy_existing | Write similar icons with -copy suffix instead of skipping | false |
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:
INSTANCE, COMPONENT, VECTOR, or BOOLEAN_OPERATIONwallet-03, arrow-right, x-close ✅Frame 123, Group, Solid, Bold, Featured icon ❌Before writing a file, the server checks your existing icons folder using:
If either matches, the icon is skipped (or written with -copy suffix if copy_existing: true).
| Tool | Description |
|---|---|
extract_icons_from_figma | Main tool — extracts icons from a Figma URL |
svg_to_icon | Convert a raw SVG string to a TSX component |
Issues and PRs welcome at https://github.com/Pruthvik1/figma-svg-to-icon-mcp.
MIT
~30 seconds. Free. No account. Every finding cites a rule and a line of evidence.