Static Badge
Create a badge with any custom text and color.
GET/badge/:badgeContent.svg
Path Parameters
required
Dashes separate label, message, and color. Underscores → spaces.
<picture><source media="(prefers-color-scheme: dark)" srcset="https://shieldcn.dev/badge/build-passing-green.svg?mode=dark"><img alt="badge" src="https://shieldcn.dev/badge/build-passing-green.svg?mode=light"></picture>
Text encoding
| Input | Output |
|---|---|
_ or %20 | Space |
__ | Literal _ |
-- | Literal - |
Named colors
brightgreen, green, yellow, orange, red, blue, purple, violet, grey, lightgrey — or any hex value.
Examples
Named color (green)
Secondary variant
Outline variant
Community badge
Status badge
Blue theme
Copy-paste examples
Classic build badge for status rows
<picture><source media="(prefers-color-scheme: dark)" srcset="https://shieldcn.dev/badge/build-passing-green.svg?mode=dark"><img alt="build passing" src="https://shieldcn.dev/badge/build-passing-green.svg?mode=light"></picture>Outline — subtle metadata badge for repo headers
<picture><source media="(prefers-color-scheme: dark)" srcset="https://shieldcn.dev/badge/license-MIT-green.svg?variant=outline&mode=dark"><img alt="license MIT" src="https://shieldcn.dev/badge/license-MIT-green.svg?variant=outline&mode=light"></picture>Secondary — contributor-friendly signal
<picture><source media="(prefers-color-scheme: dark)" srcset="https://shieldcn.dev/badge/PRs-welcome-brightgreen.svg?variant=secondary&mode=dark"><img alt="PRs welcome" src="https://shieldcn.dev/badge/PRs-welcome-brightgreen.svg?variant=secondary&mode=light"></picture>