GitHub Shield badge SVG. README / blog. shields.io-compatible design.
๐Ÿ›ก๏ธ Preview

How to use

  1. Type label (left) and value (right).
  2. Pick colors (or use a preset).
  3. Choose style (flat, flat-square, for-the-badge, plastic).
  4. Optionally add an emoji logo.
  5. Download SVG/PNG or copy Markdown.

Key features

  • 4 styles (shields.io-compatible)
  • 5 presets (build ยท version ยท license ยท DOWNLOADS ยท status)
  • Emoji logo support
  • SVG/PNG export
  • Auto-generated Markdown for README

Use cases

  • GitHub README โ€” build status, version, license
  • npm / PyPI packages โ€” downloads, version
  • Blog / Notion โ€” tech-stack badges
  • Resume โ€” visualize skills
  • Company site โ€” awards / certifications

What is shields.io?

shields.io is the most popular SVG-badge service, used on 99% of GitHub READMEs. Its strength is dynamic data (GitHub stars, npm version, etc.). For static custom badges, this tool is faster โ€” instant SVG with full control over colors, style, and logo, no external dependencies.

FAQ

Different from shields.io?

shields.io focuses on dynamic badges; this tool generates static SVG instantly with no external deps.

Color recommendations?

Success = #4c1 (green), failure = #e05d44 (red), info = #007ec6 (blue), warning = #dfb317 (orange), label = #555 (gray).

Use on README?

Click "Copy Markdown" โ†’ paste into README.md. Or upload SVG to repo and reference relative path.

Free?

Yes, no signup.