Keycap Forge

Keycap Forge is a browser-based generator for keyboard and mouse key icons — the kind you need for tutorials, control schemes, onboarding screens, key-rebinding UIs, or just a clean cheatsheet.

Lay out your keys on a grid, style them once, and export the whole set as a single sprite-sheet PNG plus a JSON atlas with pixel-perfect coordinates for every key. Drop it into Unity, Godot, a web app, a Figma file, an explainer video — anywhere a sheet of icons fits.

Features

• Square-cell grid layout. Every key gets a clean cell — Shift, Ctrl, Space, Backspace and friends span 2× or 3× cells naturally.
• Custom frame styling. Independent controls for corner radius, padding, stroke width, stroke color, and fill color.
• Tiled textures. Drop in any PNG and it tiles per cell, clipped to the rounded frame edge — works with both photographic textures and pixel-art patterns.
• Smoothing toggle. HIGH for bilinear + progressive downscale (best for photos). CRISP for nearest-neighbor (best for pixel art).
• Google Fonts, built in. Search across ~120 curated families, filter by category, lazy-load on demand. Each row previews itself in its own face.
• Resizable workspace. Drag the splitter to make the side menu match your layout.
• Export options. – PNG sprite sheet — transparent background, ready to import. – JSON atlas — every key's cellX, cellY, pxX, pxY, pxW, pxH plus full style metadata. – Individual PNGs — each key as its own file, named after its label.

How it works

1. Add keys, set their cell width (1× through 6×).
2. Style the frame, type, and texture.
3. Pan and zoom the preview canvas to inspect.
4. Hit export.

Everything runs in your browser. No account, no uploads, no telemetry — your fonts and textures never leave the page.

Technical notes

Built with vanilla HTML, CSS, and Canvas2D. Single HTML file, ~60 KB. Works offline once loaded. Tested in Chrome, Firefox, Safari.

License

This application is distributed under the GNU Affero General Public License v3.0 (AGPL-3.0).