How to preparing stroke-based svg icons for icon font generation
- Step 1Identify your target icon font tool — Icomoon, Fontello, and svgtofont all require single-path filled SVGs. Fantasticon is more flexible but also produces better results with filled paths. Each tool has slightly different SVG requirements.
- Step 2Convert strokes to fills via the JAD tool — Run your icon set through the JAD Stroke-to-Fill converter. Each icon's strokes are expanded into filled paths within the same viewBox coordinate space.
- Step 3Upload to your icon font tool and generate — Upload the ZIP of converted SVGs to Icomoon.io or pass the directory to the svgtofont CLI. The icons are now in the correct format for font generation.
Frequently asked questions
What SVG requirements does Icomoon have for upload?+
Icomoon requires: filled paths (no strokes), a consistent viewBox (ideally 0 0 1024 1024), no clipping paths or masks, and single compound paths where possible. The JAD converter prepares all of these.
Can I mix stroke and fill icons in the same icon font?+
Yes, but convert all strokes to fills first so the font generation tool processes a consistent format. Mixing stroke and fill icons in the raw upload creates inconsistent font metrics.
What is svgtofont?+
svgtofont is an npm package that converts SVG icon sets to icon fonts (TTF, WOFF, WOFF2, EOT) automatically. It accepts filled SVG paths and generates font files plus CSS and demo HTML.
Is icon fonts still a relevant format in 2026?+
For legacy browser support and self-hostable icon systems, yes. For modern projects, SVG sprites or React component libraries are preferred. Many enterprise projects still maintain icon fonts for backward compatibility.
Privacy first
Every JAD SVG tool runs entirely in your browser using the DOM API and Canvas. Your SVG files never leave your device — verified by zero outbound network requests during processing.