Add your glyphs
Upload one SVG or a whole pack, or write your characters by hand in Handwriting Font mode.
Font Maker Tools
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.
Runs entirely in your browser
Drag & drop SVG files here, or click to choose files
Simple, solid, single-color SVGs work best.
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.
Waiting for your other device…
Finish or cancel this remote session before editing on this device.
Cancel this remote session? Any changes not yet approved on the other device will be lost.
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.
This does not read or recognize the artwork. Auto Keybind only uses each glyph’s filename/name and the naming rules below.
capital-a-anything.svg → Alowercase-a-anything.svg → anumber-7-anything.svg → 7asterisk-anything.svg → *
Matching is case-insensitive, but spelling and dash format must match the guide. Anything Auto Keybind cannot confidently match will stay unbound and be outlined for you to fix manually.
Auto Keybind has already been used in this session. What would you like to do with the newly added glyphs?
Rebind All rescans the full pack from names and may replace manual key assignments.
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.
Upload one SVG or a whole pack, or write your characters by hand in Handwriting Font mode.
Choose Icon Font, Keyboard Font, or Handwriting Font depending on how you want to build.
Review glyph names and codepoints, assign keyboard characters manually or with Auto Keybind, or use your mapped handwriting.
Generate your font, check the preview, then download the package and use the CSS in your project.
See how your SVG artwork or handwriting can become a custom icon font, keyboard font, or personal handwriting font right in your browser.
Turn SVG artwork into custom icon or keyboard fonts, or write your own characters by hand to create a personal handwriting font. Use multi-file upload, Auto Keybind, manual mapping, live previews, cross-device writing, and downloadable TTF and CSS output.
A closer look at how Pixel Icon & Font Maker helps you create icon fonts, keyboard fonts, and handwriting fonts directly in your browser.
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 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.
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.
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.
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.
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.
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.
Everything built into Pixel Icon & Font Maker for creating icon fonts, keyboard fonts, and handwriting fonts directly in your browser.
Create and export fonts in your browser without paying to start.
Build fonts directly online with no desktop app or installation required.
Start creating without making an account or signing in first.
Upload multiple SVG glyphs at once instead of adding every file one by one.
Turn SVG artwork into reusable icon-font glyphs with automatic codepoint assignment.
Map SVG artwork to real keyboard characters for custom letter, number, and symbol fonts.
Write your own letters, numbers, and symbols by hand and turn them into a usable keyboard font.
Continue the same handwriting session on your phone, tablet, or computer using QR, copied link, or email.
Return to your handwriting during the project to redraw, add, or fix individual characters without starting over.
Bind properly named SVG files to matching keyboard characters automatically when filename rules are recognized.
Assign or correct glyph bindings and clean up imported glyph names whenever you want full control.
Preview imported artwork and assigned characters while you organize the font.
Generate a downloadable TrueType font and ready-to-use CSS for your finished font project.
Map artwork across standard printable keyboard characters, including letters, numbers, punctuation, and symbols.
Use descriptive filenames to speed up organization and make Auto Keybind easier to use confidently.
Tell our little factory helper what went wrong.
Are you sure you want to reset all?
This will clear the entire project, including your current glyphs and handwriting session.