Skip to content

OshanKHZ/bitbadges

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

55 Commits
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

BitBadges

8-bit style badges for your GitHub profile and projects

Retro pixel-art badges inspired by classic video games. Perfect for adding personality to your README files.


Badges โ€ข Usage โ€ข Contributing

๐Ÿ“‹ Table of Contents

Click to expand

๐ŸŽฎ Badges

Languages

Name Badge Markdown
TypeScript ![TypeScript](https://bitbadges.vercel.app/badge/TypeScript/3178C6?logo=typescript&textColor=black)
Python ![Python](https://bitbadges.vercel.app/badge/Python/3776AB?logo=python)
Golang ![Golang](https://bitbadges.vercel.app/badge/Golang/00ADD8?logo=golang)
HTML ![HTML](https://bitbadges.vercel.app/badge/HTML/E34F26?logo=html)
Java ![Java](https://bitbadges.vercel.app/badge/Java/E8E8E8?logo=java&logoColor=default&textColor=366C9C)

(back to top)

Frameworks & Libraries

Name Badge Markdown
React ![React](https://bitbadges.vercel.app/badge/React/61DAFB?logo=react&logoColor=black&textColor=black)
Next.js ![Next.js](https://bitbadges.vercel.app/badge/Next.js/000000?logo=next_js)
Tailwind ![Tailwind](https://bitbadges.vercel.app/badge/Tailwind/06B6D4?logo=tailwind&logoColor=black)
shadcn/ui ![shadcn/ui](https://bitbadges.vercel.app/badge/shadcn%2Fui/000000?logo=shadcnui)
Prisma ![Prisma](https://bitbadges.vercel.app/badge/Prisma/2D3748?logo=prisma&logoColor=white)

(back to top)

Databases & Storage

Name Badge Markdown
Redis ![Redis](https://bitbadges.vercel.app/badge/Redis/DC382D?logo=redis)
Supabase ![Supabase](https://bitbadges.vercel.app/badge/Supabase/3ECF8E?logo=supabase&logoColor=black)

(back to top)

DevOps & Tools

Name Badge Markdown
Docker ![Docker](https://bitbadges.vercel.app/badge/Docker/2496ED?logo=docker&textColor=black)
Git ![Git](https://bitbadges.vercel.app/badge/Git/F05032?logo=git&textColor=black)
NPM ![NPM](https://bitbadges.vercel.app/badge/NPM/CB3837?logo=npm)
Node.js ![Node.js](https://bitbadges.vercel.app/badge/Node.js/339933?logo=node_js&textColor=black)
Vercel ![Vercel](https://bitbadges.vercel.app/badge/Vercel/000000?logo=vercel&logoColor=white)
Traefik ![Traefik](https://bitbadges.vercel.app/badge/Traefik/24A1C1?logo=traefik&textColor=black)
n8n ![n8n](https://bitbadges.vercel.app/badge/n8n/EA4B71?logo=n8n&textColor=black)

(back to top)

AI & Editors

Name Badge Markdown
Claude Code ![Claude Code](https://bitbadges.vercel.app/badge/Claude%20Code/CC785C?logo=claude-code)
Cursor ![Cursor](https://bitbadges.vercel.app/badge/Cursor/000000?logo=cursor&logoColor=white)

(back to top)


๐Ÿ“– Usage

Click to expand usage guide

Basic Badge

https://bitbadges.vercel.app/badge/:text/:color
![Badge](https://bitbadges.vercel.app/badge/Hello/3178C6)

With Logo

![Python](https://bitbadges.vercel.app/badge/Python/3776AB?logo=python)

Parameters

Parameter Type Description Example
text path Badge text TypeScript
color path Hex color (no #) 3178C6
logo query Logo name ?logo=typescript
logoColor query Logo variant ?logoColor=black
textColor query Text color ?textColor=white
scale query Size preset or number ?scale=md

Scale Presets

Preset Scale Example
xs 1x
sm 2x
md 3x
lg 4x
xl 5x

๐Ÿค Contributing

Click to expand contributing guide

Adding New Logos

  1. Create a folder in assets/logos/ with the logo name
  2. Add 16x16 PNG files:
assets/logos/
โ””โ”€โ”€ mylogo/
    โ”œโ”€โ”€ mylogo.png        # default
    โ”œโ”€โ”€ mylogo-white.png  # white variant (optional)
    โ””โ”€โ”€ mylogo-black.png  # black variant (optional)
  1. Open a PR!

Running Locally

# Clone the repo
git clone https://github.com/yourusername/pixel-badges.git

# Install dependencies
pnpm install

# Start dev server
pnpm dev

# Open http://localhost:3000

API Endpoints

Endpoint Description
GET /badge/:text/:color Generate a badge
GET /logos List available logos (JSON)
GET / API info

๐Ÿ“„ License

MIT


Made with ๐ŸŽฎ by oshanKHZ

Inspired by shields.io and retro gaming

About

8-bit style badge generator API for README files. Create pixel art badges with custom colors, logos and text.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors