Utility-first SVG badges styled with Tailwind CSS.
Think shields.io — but fully customizable.
BadgeWind utilizes the vercel/satori library under the hood.
Badgewind is a utility-first alternative to shields.io, powered by Tailwind CSS.
Instead of being limited to predefined themes, you can style every aspect of your badges—colors, borders, spacing, shadows, and fonts—using standard Tailwind utility classes.
- 🎨 Full Control: Use
bg-slate-700,text-sky-400,rounded-full, etc. - 🧱 Iconify Support: Access to 100,000+ icons (FontAwesome, Material, etc.).
- 📝 Customizable: Add any google font, layout customizaton support.
- 🖼️ Vector Quality: Sharp SVGs that scale perfectly.
- Go to Badgewind Studio to start designing your badge.
- Or construct a URL manually:
https://badgewind.agmmnn.workers.dev/Hello-World?badgeStyle=bg-blue-500,text-white,rounded-md
(That's it. It renders an SVG.)
| Feature | shields.io | BadgeWind |
|---|---|---|
| Philosophy | Configuration-based | Utility-first (Tailwind, Supported Tailwind utilities) |
| Styling | Predefined themes (plastic, flat) | Infinite customization |
| Icons | Limited (Simple Icons) | All Iconify Sets (Material, Phosphor, etc.) |
| Layout | Fixed | Flexible (sizes, spacing, standalone icons) |
| Customization | Limited | Extensive |
| Supports many services (e.g., PyPI, npm download numbers) | Coming soon... |
You apply styles using the standard URL parameters. Use comma-separated Tailwind classes.
| Parameter | Description |
|---|---|
badgeStyle |
Container styles (e.g. rounded-full,border-2) |
leftStyle |
Left side text styles (e.g. bg-blue-500,text-white) |
rightStyle |
Right side text styles (e.g. font-bold,text-blue-500) |
iconStyle |
Icon styles (e.g. w-5,h-5,text-white) |
https://badgewind.agmmnn.workers.dev/My-Badge?badgeStyle=bg-slate-900,rounded-lg&leftStyle=text-white
| Parameter | Description | Example |
|---|---|---|
[left-right] |
Text for the left and right sides (path) | Github-Stars |
badgeStyle |
Main badge container styles | rounded-full,border-2 |
leftStyle |
Left section styles | bg-[#1ed760],text-white |
rightStyle |
Right section styles | bg-zinc-800 |
icon |
Iconify icon code | simple-icons:github |
iconStyle |
Icon styles | text-cyan-500,h-5,w-5 |
textShadow |
Enable text shadow | true (default) or false |
font |
Font family | inter, roboto, fira-code |
Use standard Tailwind CSS class names separated by commas:
badgeStyle=bg-slate-700,p-1,rounded-full,text-[#1ed760]
Normal Tailwind syntax uses characters that may break URLs (like # or []).
If you need to write URLs manually and want to avoid encoding, use this syntax:
| Feature | Standard (Encoded) | URL-Safe Shorthand |
|---|---|---|
| Hex Colors | bg-[#1ed760] |
bg-(@1ed760) |
| Arbitrary Values | w-[50px] |
w-(50px) |
Syntax reference:
- Commas
,separate classes - Square brackets
[]for arbitrary values (requires URL encoding) - Parentheses
()as alternative to brackets (no encoding needed) @as alternative to#inside parentheses
Text formatting (same as shields.io):
- Underscore
_→ Space - Double underscore
__→ Underscore_ - Double dash
--→ Dash-
You can use any font from Google Fonts. Just add the font name to the font parameter. For example:
https://badgewind.agmmnn.workers.dev/Project-v1.2.3?font=roboto
- Dynamic badges (Live stats for basic integrations)
- Progress & stat badges (Bars, gauges)
- Multiline / card-style badges
- shields.io compatibility layer (Drop-in replacement URLs)
MIT