Pixel’N’Code™

SVG Tools

SVG to TTF Icon Font Converter.

Upload your own monochrome SVG artwork and turn it into a real custom font directly in your browser. Build an Icon Font with automatically assigned private-use glyphs and a ready-to-use CSS stylesheet, or switch to Keyboard Font mode and map your SVGs to letters, numbers, and symbols so they can be typed like a normal installed font. Rename glyphs, preview your finished mappings, switch between modes without re-uploading your artwork, and generate a downloadable TTF when you’re ready. Icon Font mode also creates matching CSS for easy website use. Everything is processed locally in your browser, so your SVG files stay on your device and are never uploaded.

Build your icon font

Runs entirely in your browser

Icon Font: each SVG is automatically assigned a private Unicode value (like U+E001). These aren’t regular keyboard keys — access them through a glyph/character picker, copy/paste, or the CSS this tool generates for web use.

Drag & drop SVG files here, or click to choose files

Simple, solid, single-color SVGs work best.

0 glyphs
Actions

Ready to generate your font

Upload your SVGs, choose your mode and settings, then generate when you’re ready.

WOFF2 isn’t included — real WOFF2 compression needs Brotli, which isn’t reliably available client-side without a heavy extra library. The TTF file works everywhere via @font-face, including modern browsers.

Font preview & mappings will appear here.

Export
Download CSS 

  


  












Upload your SVGs


Drag in multiple simple, solid, single-color SVG icons, or click to choose files from your computer.








Name each glyph


Every icon gets a preview, an editable glyph name, and an automatically assigned Unicode codepoint.








Generate your font


Click Generate Font to compile your icons into a real TTF font, right there in your browser.








Download & use the CSS


Grab the TTF and CSS files, drop them on your site, and use the generated classes in your HTML.








  
  Icon fonts work best with simple, solid, single-color artwork. Clean outlines and flat shapes convert cleanly into font glyphs. Highly detailed, multicolor, shaded, or photographic SVGs may lose important detail or not convert well, since a font glyph can only render as one solid color at a time.