Generate your developer profile badges
A free tool to design and generate professional badges for developers, GitHub profiles, README files, CI status, coverage, tech stack, and personal or commercial branding.
| Feature | Status |
|---|---|
| Live SVG badge preview | ✅ |
| Full control over badge dimensions (width, height, radius) | ✅ |
| Left and right text customization | ✅ |
| Independent font family and weight per section | ✅ |
| Full color controls (backgrounds, text colors) | ✅ |
| Gradient support with custom start/end colors | ✅ |
| Icon presets (built-in library) | ✅ |
| Custom SVG icon upload | ✅ |
| Icon positioning and scaling | ✅ |
| Rounded corners | ✅ |
| Optional configurable outline/border | ✅ |
| Copy generated SVG code | ✅ |
| Download SVG file | ✅ |
| Download PNG file | ✅ |
| Copy README markdown snippet | ✅ |
| Built-in badge presets | ✅ |
| Build diagnostics panel (Shields.io standard checks) | ✅ |
| Safe SVG text escaping and validation | ✅ |
| Dark Mode support | ✅ |
| Drag-and-drop text position editing | ✅ |
- Static badge designer — Fully visual control over dimensions and colors
- README badge generator — Perfect for GitHub profiles and documentation
- GitHub badge snippet builder — Instant markdown and HTML code generation
- Visual preset system — Built-in templates for GitHub, NPM, and Shields styles
- Brand kit manager — Consistent branding for your developer identity
- Icon-powered badge builder — Integrated icons and custom SVG support
- Local-first tool — Your data stays in your browser (LocalStorage)
- GitHub README badges — Status, version, and tech-stack indicators
- Developer portfolios — Professional branding for your personal site
- Project documentation — Consistent visual indicators across docs
- CI/CD status & Coverage — Visual representation of project health
- Personal & Commercial branding — Custom labels for products or teams
- Node.js v18+
- npm or yarn
git clone https://github.com/DXBMark/badge-builder.git
cd badge-builder
npm install
npm run devOpen your browser at: http://localhost:5173
npm run buildOutput is placed in the dist/ directory.
This project can be deployed to any static hosting platform:
| Platform | Command / Notes |
|---|---|
| GitHub Pages | npm run build → push dist/ via gh-pages |
| Vercel | Connect repo → auto-build on push |
| Netlify | Connect repo → build command: npm run build |
Current version: v1.0.0
See full history in CHANGELOG.md
| Feature | Status |
|---|---|
| Custom SVG icon upload | ✅ Done |
| PNG export | ✅ Done |
| Drag-and-drop text position editing | ✅ Done |
| Saved custom presets | ✅ Done |
| Theme presets (GitHub, NPM, Shields-style) | ✅ Done |
| Dynamic badge API (generate via URL) | 🔜 Planned |
| Embed generator (iframe widget) | 🔜 Planned |
Contributions, issues, and feature requests are welcome!
- Fork the project
- Create your feature branch:
git checkout -b feat/amazing-feature - Commit your changes:
git commit -m '[TS] Add: amazing feature' - Push to the branch:
git push origin feat/amazing-feature - Open a Pull Request
⚠️ For major changes, please open an issue first to discuss what you would like to change.
Created and maintained by Tariq Said
- GitHub: @tariqsaidofficial
- Portfolio: portfolio.dxbmark.com
This project is licensed under the MIT License — see the LICENSE file for details.
Built with ❤️ by Tariq Said