Beautiful README badges
A shields.io alternative with the visual quality of shadcn/ui. Drop-in SVG badges for npm, GitHub, Discord, and more.
Badge Builder
(slug or lucide:name)
(hex)
Logos: any Simple Icons slug, Lucide with lucide:name, or React Icons with ri:ComponentName.
URL Reference
| Badge | URL |
|---|---|
| Static badge | /badge/{label}-{value}-{color}.svg |
| Dynamic JSON | /badge/dynamic/json.svg?url=...&query=... |
| npm version | /npm/{package}.svg |
| npm downloads | /npm/{package}/downloads.svg |
| GitHub stars | /github/{owner}/{repo}/stars.svg |
| GitHub release | /github/{owner}/{repo}/release.svg |
| CI status | /github/{owner}/{repo}/ci.svg |
| License | /github/{owner}/{repo}/license.svg |
| Discord | /discord/{serverId}.svg |
Query Parameters
| Param | Values | Default |
|---|---|---|
| variant | default, secondary, outline, ghost, destructive | default |
| size | xs, sm, default, lg | sm |
| theme | zinc, slate, blue, green, rose, ... | — |
| mode | dark, light | dark |
| split | true, false | false |
| logo | SimpleIcons slug, lucide:name, ri:Name, or false | auto |
| logoColor | hex (no #) | — |
| color | hex (no #) | — |
| labelColor | hex (no #) | — |
| label | string | auto |
| labelOpacity | 0–1 | 0.7 |
| valueColor | hex (no #) | — |
| labelTextColor | hex (no #) | — |