A modern web application for exploring, searching, and recognizing Unicode characters. Draw or upload images to find matching Unicode symbols, browse by category, and download characters in various formats.
- Search Unicode Characters - Search by character, code point, or common name
- Category Filtering - Browse characters by Unicode categories (Latin, Greek, Math Operators, Arrows, etc.)
- Draw to Recognize - Draw a character and find matching Unicode symbols
- Image Upload - Upload images with automatic background removal for character recognition
- Character Details - View detailed information including code points, common names, categories, and similar characters
- Similar Characters - Automatically discover visually similar Unicode characters for any character
- Export Options - Download characters as SVG or PNG (with transparent or solid backgrounds)
- Modern UI - Built with Next.js, React, Tailwind CSS, and Shadcn/UI
- Node.js 18+
- npm, yarn, pnpm, or bun
- Clone the repository:
git clone https://github.com/SpyC0der77/unicode-detector.git
cd unicode-detector- Install dependencies:
npm install
# or
yarn install
# or
pnpm install
# or
bun install- Run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev- Open http://localhost:3000 in your browser.
- Use the search bar to find characters by:
- Character itself (e.g., "€")
- Code point (e.g., "U+20AC" or "20AC")
- Common name (e.g., "euro", "space", "arrow")
- Use the sidebar to filter characters by Unicode categories
- Click "All" to select all categories
- Click "None" to clear all selections
- Click the pencil icon in the search bar
- Draw a character on the canvas
- Click "Search" to find matching Unicode characters
- Results will display matching characters
- Click "About" in the drawing modal to learn more about how character recognition works
- Click the pencil icon in the search bar
- Click "Upload" button
- Select an image file
- The app will automatically detect and remove plain color backgrounds
- Click "Search" to find matching Unicode characters
Click any character to view:
- Character display
- Common name (if available)
- Code point (hexadecimal)
- Decimal value
- Category
- Wikipedia link (if available)
- Similar characters - Automatically displayed characters that are visually similar
The similar characters grid allows you to quickly navigate to related characters by clicking on them.
From the character details modal:
- SVG - Download as SVG format
- PNG - Download with dark background
- PNG (Transparent) - Download with transparent background
unicode_detector/
├── app/
│ ├── api/
│ │ └── recognize/ # API route for character recognition
│ ├── page.tsx # Main page component
│ └── layout.tsx # Root layout
├── components/
│ ├── category-sidebar.tsx # Category filter sidebar
│ ├── character-grid.tsx # Character grid display
│ ├── character-modal.tsx # Character details modal
│ ├── drawing-modal.tsx # Drawing/upload modal
│ ├── search-header.tsx # Search bar component
│ └── ui/ # Shadcn UI components
├── lib/
│ ├── unicode-data.ts # Unicode data and utilities
│ └── utils.ts # Utility functions
└── public/ # Static assets
- Next.js 16 - React framework with App Router
- React 19 - UI library
- TypeScript - Type safety
- Tailwind CSS - Styling
- Shadcn/UI - UI component library
- Radix UI - Accessible component primitives
- Lucide React - Icons
The app uses the ShapeCatcher API for character recognition from drawings and images. The character recognition feature automatically processes your drawings and uploaded images to find matching Unicode characters, with automatic background removal for uploaded images.
npm run build
npm startThis project is open source and available under the MIT License.
Contributions are welcome! Please feel free to submit a Pull Request.