How to convert an svg icon sheet to a pdf reference
- Step 1Arrange all icons in one layout SVG — In Illustrator, Figma, or Inkscape, place every icon on a single artboard in a grid. Add
<text>labels under each icon if you want names documented. Export the whole artboard as one.svgwith a viewBox that hugs the grid. - Step 2Convert icon text and embed assets — Convert label text to outlines (so fonts don't need to load) and ensure each icon's geometry is embedded — external
hrefreferences won't be fetched during conversion. - Step 3Open the converter and drop the layout SVG — Add the single master
.svg. The tool takes one file — it does not accept a ZIP, a folder, or multiple icon files at once. - Step 4Let it convert automatically — No options appear, so conversion runs on drop: rasterise at 2×, JPEG-encode, one page sized to the layout's viewBox. There's no grid/columns/pagination setting.
- Step 5Check small-glyph clarity — Open the PDF and zoom to the smallest icons and labels. If they're soft, increase the layout's overall size (bigger viewBox) so the 2× render has more pixels, and re-convert.
- Step 6Paginate and merge for large sets — For a big library, split into several layout SVGs (a page of icons each), convert each, then combine with the merge tool into one catalogue PDF.
How icon-sheet inputs are handled
What the tool accepts and what it does — no auto-layout, no batching.
| You provide | Tool behaviour | What to do |
|---|---|---|
| One layout SVG (grid of icons) | Converts to a one-page PDF reference | This is the supported path — arrange the grid yourself |
Many separate icon .svg files | Not accepted together — one file per job | Combine into one layout SVG first, or convert each and merge |
| A ZIP of icons | Rejected (only .svg accepted) | Unpack and assemble a layout SVG |
Layout with <text> labels | Labels rasterised into the image | Convert label text to outlines for reliable fonts |
| 500+ icons in one SVG | Single page, may be huge / soft | Paginate into multiple layout SVGs, convert, merge |
Fixed conversion behaviour
Hard-coded values — there is no options panel for this tool.
| Property | Value | Effect on an icon sheet |
|---|---|---|
| Render scale | 2× | Keeps small glyphs crisp; clarity still depends on the layout's overall size |
| Background | White | Transparent icon canvases get a white sheet; light/white icons may vanish |
| Encoding | JPEG q=0.92 | Thin icon strokes can soften slightly at small sizes |
| Page size | viewBox → width/height → 612×792 pt | Wide grids yield wide pages; size the layout, not a tool setting |
| Pages | 1 | One layout = one page; merge multiple for a catalogue |
Cookbook
Building an icon reference sheet with the one-SVG, one-page pipeline.
24-icon grid with labels
A single layout SVG with a 6×4 grid and name labels converts to one tidy page.
Layout SVG: <svg viewBox="0 0 1200 800"> 6x4 grid,
each icon + <text> label below it
Result:
PDF page: 1200 x 800 pt (landscape grid)
Image: 2400 x 1600 px JPEG (2x)
Labels: readable (outlined text recommended)White / light-stroke icons disappear
On a white page, white or very light icons become invisible.
Problem: white line icons on transparent canvas
-> white page -> icons gone
Fix: add a tinted background rect per cell (e.g. light
grey) in the layout SVG so light icons are visibleTiny glyphs look fuzzy
If each icon is only a few SVG units, 2× isn't enough — scale the whole layout up.
Symptom: 16px icons soft in the PDF
Cause: small viewBox crammed with many cells
Fix: increase the layout viewBox (e.g. 2x the cell size)
so the 2x render has more pixels -> sharper glyphsPaginate a 300-icon library
Split into multiple page-sized layout SVGs, convert each, then merge.
Workflow: page-1.svg (60 icons) -> convert -> page-1...pdf page-2.svg (60 icons) -> convert -> page-2...pdf ... (5 pages) pdf-merge -> icon-catalogue.pdf (one 5-page PDF)
Labels with a brand font
Web fonts won't load; outline the label text before export.
Risk: <text font-family="BrandSans"> via @font-face
-> font not fetched -> fallback font on labels
Fix: Type -> Create Outlines on all labels before
exporting the layout SVGEdge cases and what actually happens
Tool won't take a folder or ZIP of icons
One file onlyOnly a single .svg is accepted per job — no multi-file drop, no ZIP. The intended workflow is to assemble all icons into one layout SVG first. For a big set, paginate into several layout SVGs and combine the converted PDFs with pdf-merge.
No automatic grid arrangement
Manual layoutThe converter doesn't lay out loose icons into a grid — it renders the SVG exactly as composed. Arrange the grid (and any labels) in your design tool before exporting the layout SVG.
White or light-stroke icons vanish
Flattened to whiteThe page background is white, so white/very light icons on transparent canvases disappear. Add a tinted background rectangle per cell (or a single light panel) in the layout SVG so light icons remain visible.
Labels are not selectable text
RasterisedAny <text> labels are rasterised into the image along with the icons — they can't be selected, searched, or copied in the PDF. That's fine for a visual reference; if you need a searchable name list, keep it in your design-system docs separately.
Dense layout, tiny glyphs look soft
Re-export largerClarity is bounded by the layout's viewBox size times the fixed 2× scale. A small viewBox packed with many cells yields soft glyphs. Scale the whole layout up (bigger viewBox) and re-convert for crisper icons.
Label font falls back
Font fallbackExternal fonts aren't fetched by the <img> renderer, so label text in a non-embedded brand font falls back to a system font. Convert label text to outlines before export, or embed the font as a data URI.
Icons referencing external sprites are blank
Not fetchedIf icons use <use href="external.svg#id"> or external image references, those aren't loaded during conversion and render blank. Inline all icon geometry into the single layout SVG before converting.
Layout SVG over the free size limit
Blocked on FreeFree handles files up to 2 MB per job. A layout with hundreds of detailed icons can exceed that and is blocked with a size message; Pro raises the limit to 50 MB. Optimise icon paths or split the layout across pages.
Frequently asked questions
Can I drop a folder or ZIP of individual icon files?
No. The tool accepts a single .svg per job — no multi-file drop and no ZIP. Assemble all icons into one master layout SVG (a grid, with labels if you want them), then convert that. For a large library, paginate into several layout SVGs, convert each, and merge with pdf-merge.
Will the tool arrange my icons into a grid automatically?
No — it renders the SVG exactly as you composed it. Build the grid (and any name labels) in your design tool before exporting the layout SVG. The converter just rasterises that layout to one PDF page.
Can I include icon names as labels?
Yes, but you add them in the layout SVG before converting — place <text> labels under each icon. They'll be rasterised into the image (not kept as selectable text). Convert the label text to outlines first so the font renders reliably.
What if I have 500+ icons?
Split them across several page-sized layout SVGs (e.g. 60 icons each), convert each to a PDF, then combine them into one multi-page catalogue with pdf-merge. A single 500-icon SVG would produce one enormous page and may exceed the file-size limit.
Why did my white icons disappear?
The page background is white, so white or very light icons on transparent canvases blend into it. Add a tinted background rectangle behind each icon (or a light panel behind the whole grid) in the layout SVG so light icons stay visible.
Are clipping paths and masks rendered?
They render to the extent the browser's SVG support handles them when drawing the <img> to canvas. Standard clip paths and masks generally work; very complex filter chains may render approximately. Always preview the PDF and adjust the source if something looks off.
Will the small glyphs stay sharp?
The tool renders at 2×, which keeps reasonably-sized glyphs crisp. If your layout has a small viewBox packed with many tiny icons, they can look soft — scale the whole layout up (larger viewBox) and re-convert so the 2× render has more pixels to work with.
Is the output editable vector?
No — it's a high-resolution raster (JPEG) embedded in a PDF, not editable vector paths. Keep your source SVGs as the editable masters; this PDF is the shareable, printable reference.
Can I pick the page size for the reference sheet?
There are no options; the page size comes from the layout SVG's viewBox (or width/height). Size the layout to the proportions you want. To force a specific paper size afterwards, run the PDF through pdf-resize.
Is my icon library uploaded?
No. Conversion runs locally in your browser via pdf-lib; the SVG never leaves your device — appropriate for unreleased or proprietary icon sets.
What's the file-size limit on the layout SVG?
Free tier allows up to 2 MB per job; Pro allows up to 50 MB. A grid of simple icons stays small, but a dense, highly-detailed layout can grow — optimise the paths or paginate if you hit the limit.
How is the downloaded file named?
It's saved as <your-svg-name>.svg-to-pdf.pdf. Rename it to your style-guide convention after download.
Privacy first
All PDF processing runs locally in your browser using PDF-lib and pdf.js. No file is ever uploaded — only metadata counters are saved for signed-in dashboard stats.