shieldcn
Docs
Studio
Showcase
Sponsor
jal-co/shieldcn603
shieldcn

Member of the Vercel OSS Program

Analytics provided by OpenPanel

Monitored by Sentry

Powered by Neon.

Community

GitHubjal-co/uiStatsllms.txtPrivacyContact

Product

DocumentationAPI ReferenceToken PoolGeneratorAgent Skill

inspired by shields.io and badgen.net

Made with in by Justin Levine

shieldcn
Docs
Studio
Showcase
Sponsor
jal-co/shieldcn603

Search documentation

Search all badge providers, guides, and reference docs.

Getting Started

IntroductionREADME StudioCLIAgent SkillNewSelf-HostingAPI ReferenceToken PoolSponsor
ThemesStylesLogos & IconsFontsLight & Dark ModeBrands

Badges

Badge GroupStatic BadgeDynamic JSONHTTPS Endpoint

Charts

OverviewStar history

Headers

OverviewGenerator

Sponsors

OverviewGenerator

Contributors

OverviewGenerator
shieldcn

Member of the Vercel OSS Program

Analytics provided by OpenPanel

Monitored by Sentry

Powered by Neon.

Community

GitHubjal-co/uiStatsllms.txtPrivacyContact

Product

DocumentationAPI ReferenceToken PoolGeneratorAgent Skill

inspired by shields.io and badgen.net

Made with in by Justin Levine

Fonts

Choose from 7 font families for your badges.

Pick a font with the ?font= query parameter. All fonts are rendered at weight 500 (medium) via Satori.

Available fonts

SlugFontTypeBest for
interInterSans-serifDefault — matches shadcn/ui
geistGeistSans-serifVercel projects
geist-monoGeist MonoMonospaceVersion numbers, code
jetbrains-monoJetBrains MonoMonospaceDeveloper-focused badges
fira-codeFira CodeMonospaceCode & terminal badges
robotoRobotoSans-serifUniversal readability
space-groteskSpace GroteskSans-serifModern, geometric look

Usage

![inter](https://shieldcn.dev/npm/react.svg?font=inter)
![jetbrains](https://shieldcn.dev/npm/react.svg?font=jetbrains-mono)
![fira](https://shieldcn.dev/npm/react.svg?font=fira-code)
![roboto](https://shieldcn.dev/npm/react.svg?font=roboto)
![space](https://shieldcn.dev/npm/react.svg?font=space-grotesk)

Comparison

Sans-serif fonts

Inter — the default, matches shadcn/ui.
Geist — Vercel's typeface.
Roboto — Google's universal font.
Space Grotesk — geometric, modern.

Monospace fonts

Monospace fonts work especially well for version badges, build status, and anything code-related.

Geist Mono — Vercel's monospace.
JetBrains Mono — designed for code.
Fira Code — the original coding font.

Combining with variants

Fonts compose freely with all variants, themes, sizes, and modes:

JetBrains Mono + branded
Fira Code + outline
Space Grotesk + secondary
Roboto + blue theme

In the builder

The font selector is available in both the Badge Builder and Profile Generator under Global defaults. You can also set fonts per-badge via the badge's override popover.

On This Page

Available fontsUsageComparisonSans-serif fontsMonospace fontsCombining with variantsIn the builder