Showcase

Every badge variant, size, theme, and icon — live from the API.

Variants

defaultsecondaryoutlineghostdestructive

Sizes

xssmdefaultlg

Color Themes

badgebadgebadgebadgebadgebadgebadgebadgebadgebadge

Light Mode

badgebadgebadgebadgebadge

GitHub — Repository

badgebadgebadgebadgebadgebadge

GitHub — Releases & Tags

badgebadgebadgebadge

GitHub — CI & Checks

badgebadgebadge

GitHub — Issues & PRs

badgebadgebadgebadge

GitHub — Commits

badgebadge

npm

badgebadgebadgebadgebadgebadge

Discord

badgebadgebadge

Static Badges

badgebadgebadgebadgebadgebadgebadgebadgebadgebadge

Split Mode

badgebadgebadgebadgebadge

SimpleIcons Logos

Languages

badgebadgebadgebadgebadgebadge

Frameworks

badgebadgebadgebadgebadgebadge

Tools

badgebadgebadgebadgebadgebadge

Platforms

badgebadgebadgebadgebadge

Lucide Icons

badgebadgebadgebadgebadgebadgebadgebadge

React Icons

badgebadgebadgebadgebadge

Theme × Variant Combinations

Blue theme

badgebadgebadgebadge

Green theme

badgebadgebadgebadge

Rose theme

badgebadgebadgebadge

Real-World README Examples

Project status row

badgebadgebadgebadgebadge

Tech stack row

badgebadgebadgebadge

Social row

badgebadgebadge

shields.io vs shieldcn

Same data, different look. Left is shields.io, right is shieldcn.

npm version
shields.ioshields.io npm version
shieldcnshieldcn npm version
npm downloads
shields.ioshields.io npm downloads
shieldcnshieldcn npm downloads
GitHub stars
shields.ioshields.io GitHub stars
shieldcnshieldcn GitHub stars
GitHub forks
shields.ioshields.io GitHub forks
shieldcnshieldcn GitHub forks
GitHub license
shields.ioshields.io GitHub license
shieldcnshieldcn GitHub license
GitHub release
shields.ioshields.io GitHub release
shieldcnshieldcn GitHub release
GitHub issues
shields.ioshields.io GitHub issues
shieldcnshieldcn GitHub issues
GitHub PRs
shields.ioshields.io GitHub PRs
shieldcnshieldcn GitHub PRs
GitHub last commit
shields.ioshields.io GitHub last commit
shieldcnshieldcn GitHub last commit
GitHub contributors
shields.ioshields.io GitHub contributors
shieldcnshieldcn GitHub contributors
Static badge
shields.ioshields.io Static badge
shieldcnshieldcn Static badge
Static (custom color)
shields.ioshields.io Static (custom color)
shieldcnshieldcn Static (custom color)
Static with logo
shields.ioshields.io Static with logo
shieldcnshieldcn Static with logo

shields.io styles vs shieldcn variants

shields.io has flat/plastic/for-the-badge. shieldcn has shadcn Button variants.

shields.io styles
flatflat-squareplasticfor-the-badgesocial
shieldcn variants
badgebadgebadgebadgebadge
shields.io sizes (limited)
flatfor-the-badge
shieldcn sizes (shadcn Button sizes)
badgebadgebadgebadge

Custom Colors

badgebadgebadgebadgebadge