Search and browse Unicode characters, draw a symbol to find matches, and export characters as images.
Watch the MP4 · Recording script
Screenshot
- Search by character, code point, or name, such as
€,U+20AC, oreuro. - Filter by Unicode category and character type.
- Open a character to inspect its code point, category, and visually similar characters.
- Open the drawing tool to sketch a symbol or upload an image for recognition.
- Download individual characters as SVG or PNG, with a solid or transparent background.
- Turn on selection mode to export multiple characters in a ZIP file.
Drawing recognition uses ShapeCatcher through the app's /api/recognize endpoint. Browsing and export run in the browser; recognition requires the external service.
Use Node.js 22 and npm. Bun is also needed for the optional similarity-data generation script.
git clone https://github.com/SpyC0der77/unicode-atlas.git
cd unicode-atlas
npm ci
npm run devOpen localhost:3000. No API key or environment file is required.
| Command | Purpose |
|---|---|
npm run dev |
Start the development server |
npm run build |
Build the production app |
npm start |
Serve a production build |
npm run lint |
Run ESLint |
npm run precompute-similar |
Rebuild the precomputed similarity data with Bun |
Run build before start. Similarity generation uses @napi-rs/canvas and can take time; the repo already includes the generated data.
app/page.tsx: search, filters, selection, and keyboard shortcuts.components/: character grid, details, drawing modal, and export toolbar.lib/unicode-data.ts: Unicode categories and search helpers.lib/similar-characters.json: precomputed visual matches.scripts/precompute-similar.ts: similarity-data generator.app/api/recognize/route.ts: ShapeCatcher proxy.
MIT.