How to stroke icons and icon fonts: what actually has to happen
- Step 1Audit whether your icons are open or closed strokes — Line icons are usually open strokes (lines, arcs, unterminated paths) plus some closed shapes. Open strokes have no interior; they CANNOT be made into a font glyph by moving colour to fill — they need geometric expansion. Sort your set so you know what you're dealing with before touching any tool.
- Step 2Outline strokes geometrically — not with this tool — Run Inkscape
Path > Stroke to Path(or its CLIobject-stroke-to-path) / IllustratorObject > Path > Outline Strokeon every icon. This converts each stroked line into a closed filled band, which is what Icomoon/Fontello/svgtofont need. The JAD stroke-to-fill tool does NOT perform this step. - Step 3Flatten compound shapes and union overlaps — After outlining, use the editor's
Union/Combineso each glyph is a single closed path with consistent fill-rule. Font generators dislike overlapping subpaths and self-intersections that flip fill via even-odd. - Step 4Normalise the viewBox and canvas — Icon fonts expect a square, content-fitted canvas. Use svg-viewbox-fixer to set the viewBox to the actual content bounds so glyphs align on the baseline consistently.
- Step 5Optimise the outlined SVGs — Run svg-pro-minifier to strip metadata and redundant attributes, then svg-precision-tuner to trim coordinate decimals. Smaller, cleaner paths import faster and produce smaller fonts.
- Step 6Use the JAD stroke-to-fill tool only where it genuinely helps — If a few icons are already CLOSED outlines with
fill="none"and you want them solid, the JAD tool's colour move does that in one click. Do not rely on it for open-path line icons — those must be geometrically outlined in step 2.
The correct stroke-icon → font pipeline
Order matters. The geometric expansion (step 2) is the one the JAD stroke-to-fill tool cannot do.
| Step | Tool | Does the JAD stroke-to-fill tool do this? |
|---|---|---|
| Expand strokes into closed filled outlines | Inkscape Stroke to Path / Illustrator Outline Stroke | No — it only moves colour; open paths stay zero-area |
| Union overlaps, set fill-rule | Vector editor (Union / Combine) | No |
| Fit the viewBox to content | svg-viewbox-fixer | No |
| Strip metadata, redundant attrs | svg-pro-minifier | No |
| Trim coordinate precision | svg-precision-tuner | No |
| Colour move on already-closed outlines | JAD stroke-to-fill | Yes — this is its one fit in the pipeline |
| Generate the font | Icomoon / Fontello / svgtofont | No (external) |
What font generators do with each input
Why a colour-only conversion produces empty or blobby glyphs.
| Glyph source after 'conversion' | What Icomoon/Fontello import | Acceptable for a font? |
|---|---|---|
| Open path, fill set, no stroke (colour-only move) | Empty glyph — fill paints no area | No — invisible glyph |
| Closed shape filled (colour-only move on a ring) | Solid blob (disc) instead of a ring | Only if a solid silhouette is what you wanted |
| Geometrically outlined stroke (editor) | The intended outlined glyph | Yes — correct |
| Already-solid filled icon | Imported as-is | Yes |
Cookbook
The pipeline as commands, plus the empty-glyph trap shown concretely so you can recognise it before it reaches the font.
The empty-glyph trap
An open line icon 'converted' by the colour-only tool imports as an empty glyph. This is the number-one mistake when preparing stroke icons for a font.
Source line icon:
<path d="M5 12 H19 M12 5 V19" fill="none"
stroke="#000" stroke-width="2"/> (a plus sign)
After JAD stroke-to-fill (colour move):
<path d="M5 12 H19 M12 5 V19" fill="#000"/>
→ open paths, zero fill area → Icomoon imports BLANK.
Correct prep (Inkscape Stroke to Path) → two closed
filled bars forming a plus → imports correctly.Geometric outlining via Inkscape CLI
The step the font actually needs. This produces the closed filled geometry the JAD tool cannot.
inkscape plus.svg \ --actions="select-all;object-stroke-to-path;\ export-filename:plus-outlined.svg;export-do" plus-outlined.svg now contains closed filled paths (a real '+' silhouette) ready for the font generator.
Where the JAD tool legitimately fits
A closed badge outline you actually want solid. The colour move is the fastest way to do this single step.
Before:
<rect x="2" y="2" width="20" height="20" rx="4"
fill="none" stroke="#2563eb"/>
After JAD stroke-to-fill:
<rect x="2" y="2" width="20" height="20" rx="4"
fill="#2563eb"/>
→ solid rounded badge, ready as a filled glyph.Full prep order for one icon
End-to-end for a single line icon, showing exactly where each tool slots in. The JAD stroke-to-fill tool is absent from the critical path because outlining is geometric.
1. inkscape ... object-stroke-to-path → closed outlines 2. inkscape ... union → single path 3. svg-viewbox-fixer → square, fitted 4. svg-pro-minifier → strip cruft 5. svg-precision-tuner (2 dp) → smaller coords 6. import into Icomoon → font glyph
Detecting empty glyphs before the font build
A guard so blank glyphs never reach Icomoon. Flag open-path 'converted' files for re-outlining.
# Files where paths don't close are likely blank after a # colour-only move — re-outline these in the editor. grep -L 'Z"' prepared/*.svg # Any hit should go back through object-stroke-to-path.
Edge cases and what actually happens
Open line icons import as empty glyphs
rejected (empty glyph)Icomoon/Fontello/svgtofont build glyphs from filled area. An open path with fill set but no enclosed region has zero area, so the imported glyph is blank. A colour-only stroke-to-fill creates exactly this. Outline strokes geometrically (editor) so the line becomes a closed filled band with real area.
Ring/outline glyphs solidify into blobs
By designA ring drawn as <circle fill="none" stroke> becomes a solid disc after a colour move, because the empty centre is now filled. The font then shows a blob, not a ring. To keep the ring you need true expansion that produces an annulus (outer minus inner), which the JAD tool does not compute.
Overlapping subpaths flip fill via even-odd
Watch closelyAfter genuine outlining, overlapping bands can cancel under the even-odd fill rule, leaving holes in the glyph. Union/combine the paths in your editor and set fill-rule:nonzero before importing. This is independent of the JAD tool but a common icon-font failure.
Stroke styling lost — fine for fonts, but be aware
ExpectedCap, join, and dash styling are removed by the colour move and are also irrelevant to a monochrome font glyph. Just don't expect rounded line-caps to appear in the font from this tool — if you want them, they must be baked into the outline geometry by the editor's stroke-to-path.
Multi-colour icons in a monochrome font
Watch closelyIcon fonts are single-colour per glyph. A two-tone icon (fill plus stroke) where the JAD tool skips the filled part and converts the stroke part can yield inconsistent geometry. Flatten to one colour and one closed shape per glyph before importing.
viewBox not square / not content-fitted
Watch closelyGlyphs misalign on the baseline if the canvas isn't square and fitted. Run svg-viewbox-fixer after outlining so each icon's bounds map cleanly into the em square the font expects.
Strokes defined in CSS produce no conversion
Not convertedDesign-system exports often style strokes via <style>/classes. The JAD tool's attribute read misses these, so nothing converts and the underlying open strokes still need editor outlining anyway. Treat CSS-styled sets as 'must outline in editor'.
Developer-tier gate on the colour-move step
rejected (tier gate)Even for its narrow legitimate use, the JAD stroke-to-fill tool requires the Developer plan; Free/Pro see an upgrade overlay. The geometric outlining you actually need for fonts happens in an external editor and isn't tier-gated by JAD.
Frequently asked questions
Do icon-font generators really need filled paths?
Yes. Icomoon, Fontello, and svgtofont build each glyph from the filled region of your paths and ignore strokes. Stroke-based icons must become closed filled outlines first — that part of the standard advice is correct.
Can the JAD stroke-to-fill tool do that conversion?
Not the part that matters. It moves the stroke colour onto fill and deletes the stroke attributes; it does not expand open strokes into closed filled bands. Open line icons end up with zero fill area and import as empty glyphs. Use a vector editor's stroke-to-path for real outlining.
Why did my icon font glyph come out blank?
You almost certainly converted an open-path line icon by moving colour only. The path has no interior, so its fill paints nothing and the generator imports an empty glyph. Re-outline the strokes geometrically (Inkscape object-stroke-to-path / Illustrator Outline Stroke).
Why did my ring glyph turn into a solid dot?
A ring drawn as a single circle with fill=none becomes a solid disc when you move the stroke colour to fill — the empty centre gets filled. A real outliner would produce an annulus (a ring with a hole). The JAD tool does not compute that.
What's the correct order of operations?
1) Geometrically outline strokes in an editor. 2) Union overlaps and set fill-rule. 3) Fit the viewBox with svg-viewbox-fixer. 4) Optimise with svg-pro-minifier and svg-precision-tuner. 5) Import into the font generator. The colour-only JAD step only fits when you already have a closed outline you want solid.
Does the JAD tool have any role in an icon-font pipeline at all?
A small one: turning an already-closed outline (e.g. a rounded-rect badge with fill=none) into a solid filled shape in one click, or as a quick recolour before optimisation. For the strokes themselves you still need editor outlining.
Will round line-caps survive into the font?
Only if they're baked into the outline geometry by the editor's stroke-to-path. The JAD tool deletes stroke-linecap, so caps don't survive a colour move. Outline first if cap shape matters.
How do I catch empty glyphs before building the font?
Audit for open paths — files whose path data doesn't close (Z) are the candidates that go blank under a colour-only move. Re-run those through the editor's stroke-to-path, then re-check, before importing.
What about multi-colour icons?
Standard icon fonts are one colour per glyph. Flatten two-tone icons to a single closed shape before importing; relying on the JAD tool to convert just the stroke part of a two-tone icon leaves you with mixed geometry. Normalise to one colour per glyph.
Do CSS-styled strokes convert?
No. The JAD tool reads the stroke attribute only, so strokes from <style> blocks or classes are skipped. Such sets must be outlined in an editor that resolves CSS, which is the step you need for the font anyway.
What tier do I need for the JAD step?
Developer. Free and Pro see an upgrade overlay on the tool. The geometric outlining that the font actually requires is done in an external editor and is independent of JAD tiers.
Is my icon set uploaded?
No. The JAD tool processes in the browser via DOMParser/XMLSerializer with a 0 bytes uploaded badge; only anonymous run counts are recorded. Your editor-based outlining is local too.
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.