Font Maker Tools

Pixel Icon & Font Maker

Create custom icon fonts, keyboard fonts, or your own handwriting font directly in your browser. Upload SVGs, map artwork to keyboard characters, use Auto Keybind for properly named files, or write your characters by hand on this device or another device — then generate a downloadable TTF font with ready-to-use CSS.

✦ Plan on using Keyboard Font? Download the naming guide. ✦

💻 Desktop OptimizedPixel’N’Code is optimized for desktop browsers. For the intended experience, use the site on a desktop computer.

SVG to TTF Font & Icon Maker - Turn SVGs into usable TTF fonts — free, fast, no login | Product Hunt

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.

Write your font by hand

Choose where you want to write your characters. Your finished handwriting will return here already mapped to the correct keyboard characters.

Use Another Device creates a temporary 2-hour session. You can open it on your phone or tablet.

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
Quick How To — Font Mak’rChoose a font mode, add your glyphs, review, and export

Choose whether you are building an Icon Font, Keyboard Font, or Handwriting Font. Upload SVG artwork or write your characters by hand, review the names or key bindings, then generate your files directly in the browser.

⬆️ Add Your Glyphs
Upload multiple SVG files at once, or choose Handwriting Font to write your characters by hand on this device or another device.
🔀 Pick the Font Type
Icon Font assigns private Unicode codepoints automatically. Keyboard Font maps SVG artwork to printable keyboard characters. Handwriting Font lets you write characters by hand and maps them to the correct keys.
⌨️ Review the Bindings
Review your glyphs and mappings. In Keyboard Font mode, assign keys manually or use Auto Keybind when your filenames follow the naming guide; handwriting characters return already mapped.
📦 Generate & Export
Generate the font, check the live preview and mappings, then download the ZIP or CSS and copy the generated CSS when needed.

Add your glyphs

Upload one SVG or a whole pack, or write your characters by hand in Handwriting Font mode.

Choose your font mode

Choose Icon Font, Keyboard Font, or Handwriting Font depending on how you want to build.

Name or bind your glyphs

Review glyph names and codepoints, assign keyboard characters manually or with Auto Keybind, or use your mapped handwriting.

Generate & download

Generate your font, check the preview, then download the package and use the CSS in your project.

Turn Your Artwork or Handwriting Into a Usable Font

A closer look at how Pixel Icon & Font Maker helps you create icon fonts, keyboard fonts, and handwriting fonts directly in your browser.

Create a Custom Font Your Way

Pixel Icon & Font Maker is built for creators who want to turn their own artwork or handwriting into a real, reusable font. You can upload SVG files to build an icon font or keyboard font, or switch to Handwriting Font mode and write your characters directly with a mouse, touchscreen, stylus, phone, or tablet.

Instead of forcing every project into one workflow, the tool gives you different ways to build depending on what you are making. You might be assembling a custom icon set, turning hand-drawn letters into a keyboard font, creating a themed symbol font, or building a personal handwriting font from scratch. The goal is to keep those jobs together in one workspace instead of making you jump between several separate tools.

Icon Fonts, Keyboard Fonts, and Handwriting Fonts Serve Different Jobs

Icon Font mode is designed for artwork that does not need to match ordinary keyboard characters. Each uploaded SVG can receive its own private Unicode codepoint, allowing one font file to hold a collection of reusable icons or symbols without replacing normal letters and numbers. This works well for website controls, dashboards, custom interface symbols, themed icon packs, and other projects where you want many small graphics available from one font.

Keyboard Font mode maps SVG artwork to printable keyboard characters such as uppercase letters, lowercase letters, numbers, and symbols. This makes it useful for custom alphabets, decorative type, novelty fonts, symbol-based fonts, and prepared letter artwork that you want to type with normally.

Handwriting Font mode starts from your own writing instead of uploaded SVGs. You can draw each character by hand, review what you wrote, go back and fix anything you do not like, skip characters you do not need, and build a font from the characters you choose to keep.

Write on This Device or Continue on Another One

Handwriting does not have to be limited to the computer where Font Maker is open. You can write directly on the current device, or create a temporary remote writing session and continue on a phone or tablet.

The remote session can be opened by scanning a QR code, copying the session link, or emailing the link to yourself. Once the handwriting is approved, the characters return to Font Maker automatically and stay connected to the same project.

You can also move back and forth between devices during the same session. That means you can write several characters on a phone, return to the computer, fix one with the mouse, go back to another device later, and continue without starting the font over.

Auto Keybind Helps With Larger Keyboard Font Sets

When a keyboard font contains dozens of SVG files, assigning every character individually can become repetitive. Auto Keybind speeds up that process when filenames follow the supported naming rules.

Files that begin with recognized uppercase, lowercase, number, or symbol names can be matched to the intended keyboard characters automatically. Anything that cannot be matched confidently stays available for manual review instead of being guessed.

Manual assignment is always available when you need more control. You can choose the exact character yourself, correct a binding, or mix automatic and manual mapping in the same project.

Simple SVG Artwork Produces the Cleanest Font Glyphs

A font glyph is different from a full-color SVG illustration. Font outlines work best with clean shapes that can render clearly as a single solid color.

Simple monochrome artwork, bold silhouettes, clean outlines, symbols, letters, and uncomplicated icons usually convert more reliably than photographs, gradients, shadows, layered color effects, or extremely detailed illustrations.

If your SVG contains many tiny details or effects that depend on multiple colors, some of that information may not translate well into a font glyph. Preparing a cleaner version before conversion can help the finished set look more consistent.

Review, Preview, and Fix Before You Generate

Font Maker keeps the review process inside the same workspace. You can rename glyphs, inspect key assignments, redraw handwriting, remove characters, return to a missed character, and make changes before generating the final font.

The live preview helps you catch missing bindings, unexpected characters, or glyphs that do not look right beside the rest of the set.

Handwriting characters also return already mapped to the correct keyboard positions, so you can focus on how they look instead of manually assigning every character again.

Generate a Font You Can Actually Use

Once your glyphs are ready, Pixel Icon & Font Maker can generate the finished font package directly in the browser.

The downloadable TTF gives you a standard font file you can test in compatible desktop and design software. For web-based font projects, generated CSS provides a practical starting point for loading and using the font in a website or interface.

The goal is to make custom font creation feel less like a specialist-only task. Whether you are building an icon font, mapping SVG artwork to keyboard keys, or turning your own handwriting into something you can type with, the important steps stay together: create or upload your glyphs, organize them, review the mappings, preview the result, and generate a font you can actually use.

★ Share + Connect

Share Your Font-Making Spark

Enjoying Pixel Font Maker? Share the tool with another creator, then connect with Pixel’N’Code for more browser tools, creative projects, digital experiments, and factory updates.

Find Pixel’N’Code

Font Maker’s Best Features

Everything built into Pixel Icon & Font Maker for creating icon fonts, keyboard fonts, and handwriting fonts directly in your browser.

Free to Use

Create and export fonts in your browser without paying to start.

Browser Based

Build fonts directly online with no desktop app or installation required.

No Login

Start creating without making an account or signing in first.

Multi-SVG Upload

Upload multiple SVG glyphs at once instead of adding every file one by one.

Icon Font Mode

Turn SVG artwork into reusable icon-font glyphs with automatic codepoint assignment.

Keyboard Font Mode

Map SVG artwork to real keyboard characters for custom letter, number, and symbol fonts.

Handwriting Font Mode

Write your own letters, numbers, and symbols by hand and turn them into a usable keyboard font.

Cross-Device Writing

Continue the same handwriting session on your phone, tablet, or computer using QR, copied link, or email.

Edit & Resume Handwriting

Return to your handwriting during the project to redraw, add, or fix individual characters without starting over.

Auto Keybind

Bind properly named SVG files to matching keyboard characters automatically when filename rules are recognized.

Manual Editing & Mapping

Assign or correct glyph bindings and clean up imported glyph names whenever you want full control.

Live Glyph Preview

Preview imported artwork and assigned characters while you organize the font.

TTF + CSS Export

Generate a downloadable TrueType font and ready-to-use CSS for your finished font project.

Printable Character Support

Map artwork across standard printable keyboard characters, including letters, numbers, punctuation, and symbols.

Filename-Assisted Workflow

Use descriptive filenames to speed up organization and make Auto Keybind easier to use confidently.

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.