What is MCP SVG to Fonts?
MCP SVG to Fonts is an MCP server that turns a directory of SVG icons into an icon font. It writes TTF, WOFF and WOFF2 files, a CSS file with icon classes and TypeScript types, and it can add icons to an existing font without changing old Unicode values.
It is a Model Context Protocol server for generating and managing icon fonts from SVG files. You hand an agent a folder of icons, and it produces a font family, a stylesheet and type definitions ready to drop into a front end.
The defaults are plain: a font named IconFont, output into a fonts folder, formats woff2, woff and ttf, and a CSS class prefix of icon. Each default can be overridden through tool parameters when a project needs different names.
What an agent can do with it
- Scan a directory and list every SVG before generating, which catches missing files and bad names early.
- Create a brand new font with CSS font-face rules and one class per icon.
- Emit a types file so TypeScript code can reference icon names safely, including a helper that returns the class.
- Extend a font later while keeping existing icons and their Unicode values, so shipped pages keep working.
Extending an existing font
Two tools add icons to a font. One needs the original SVG files. The advanced one extracts glyph shapes straight from the TTF with OpenType.js, so it also works on a third party font whose sources you do not have.
Who MCP SVG to Fonts is for
Best for
- Front end teams that keep icons as SVGs and want one font file with typed names.
- Design system owners who also manage tokens, see a design token skill, and want icons generated the same repeatable way.
- Builders who source icons elsewhere, for example with an icon search server, and then need a font.
Not for
- Projects that prefer inline SVG sprites. The output here is a font file with CSS classes, not inline SVG markup.
- Extending a font without its CSS. The advanced tool needs the TTF and a CSS file with Unicode mappings.
- Anyone expecting icon search. It reads folders you point it at and does not find icons for you.
Use it with UiChemy
This server makes the font file only. UiChemy converts Figma designs to WordPress through Figma to WordPress, and Composer edits the result in Elementor or Gutenberg. Wiring a custom icon font into a site is a separate step. Click Get Started on uichemy.com.
Connect MCP SVG to Fonts: Generate Icon Fonts from a Folder of SVGs to your AI client
npx -y mcp-svg-to-fontsCheck Node
The README requires Node.js 20.x or later. No clone or build is needed for the npx route.
Add the entry
Add the mcpServers entry above to .cursor/mcp.json or global MCP settings for Cursor, or to claude_desktop_config.json for Claude Desktop.
Start it once
Run npx -y mcp-svg-to-fonts in a terminal. The server starts and waits on stdio, which means it is ready. Stop it with Ctrl+C.
Ask for a font
Tell the agent to generate an icon font from the SVGs in a folder and write it to an output folder, then review the generated CSS and types.
Client configuration
{
"mcpServers": {
"mcp-svg-to-fonts": {
"command": "npx",
"args": ["-y", "mcp-svg-to-fonts"]
}
}
}Endpoints and ports
./fontsOverride with the outputDir parameterIconFontOverride with the fontName parameterWhat you can do with it
- Three font formatsOutput defaults to woff2, woff and ttf, so one run produces every file a stylesheet references.
- CSS generationA stylesheet carries the font-face declaration and one class for each icon, using a prefix you can change.
- TypeScript typesA types file exports icon names and a helper that returns the class, so icon use is type safe.
- Backward compatible extensionNew icons are added while existing icons keep their Unicode values, so shipped markup does not break.
- Glyph extractionOpenType.js reads vector paths from a TTF, so third party fonts can be extended without their SVGs.
- Directory scanninglist-svgs inventories a folder first, which helps spot duplicate names and missing files before a build.
- Name conflict warningsThe troubleshooting notes describe icon name conflicts being detected, so duplicate names get renamed first.
Tools it exposes
list-svgs
Scans a directory and lists every SVG file found. Takes a required directory path.
generate-font-from-svgs
Creates a new icon font with CSS and TypeScript types. Options: fontName, outputDir, formats, cssPrefix and generateTypes.
extend-existing-font
Adds icons to an existing font while keeping current icons and Unicode values. Needs the original SVG files and the CSS.
extend-font-advanced
Adds icons by extracting glyphs from the TTF file, with no original SVGs needed. Needs the TTF and a CSS file with Unicode mappings.
Frequently asked questions
What is MCP SVG to Fonts?
It is an MCP server that converts SVG icons into web fonts. An AI coding agent gives it a directory, and it generates TTF, WOFF and WOFF2 files, CSS with icon classes and TypeScript definitions, and it can extend an existing font later.
How do I install mcp-svg-to-fonts?
Add an mcpServers entry that runs npx with the arguments -y and mcp-svg-to-fonts. Node.js 20.x or later is required. To check it, run the same command in a terminal and confirm the server starts and waits on stdio.
Which tools does it have?
Four: list-svgs, generate-font-from-svgs, extend-existing-font and extend-font-advanced. The first inventories a folder, the second builds a new font, and the last two add icons to an existing font in different ways.
Can it extend a font I did not create?
Yes, with extend-font-advanced. It needs the font's TTF file and a CSS file whose classes map names to Unicode values, written like icon-name:before with a content value. It extracts the old glyphs and merges your new SVGs.
Does it work with Claude?
The README gives a ready config for Claude Desktop in claude_desktop_config.json, next to a Cursor config. Both use the same npx entry, and it describes the server as compatible with AI agents that speak the Model Context Protocol.
What SVG practices does it recommend?
Use consistent, preferably square SVG dimensions, optimize SVGs before generating, use semantic icon names, keep a backup of your originals and test the font across browsers. Avoid duplicate names, since conflicts are reported and need renaming.
What license does it use?
The repository is licensed under ISC. Its last push was August 25, 2026. For managing the icons you convert, see an icon system skill, which covers keeping a whole icon set consistent.