What is a status badge?

A status badge is a small SVG image that communicates a key metric or property of a project at a glance — build status, test coverage, license type, version number, and more. They are widely used in README files on GitHub, GitLab, and Bitbucket, and in project documentation. The de-facto standard format was popularised by shields.io.

How it works

Badge URLs encode the badge content directly in the path:/badge/{label}-{message}-{color}.svg. Spaces are written as _, literal underscores as __, and literal dashes as --. The server renders the SVG on each request using precise character-width measurements for Verdana 11px, and responds with aggressive cache headers so badges load instantly from CDN edges.

How to use this tool

• Type a label (left segment) and message (right segment) — the label can be left empty for a single-segment badge
• Pick a style: flat, flat-square, plastic, for-the-badge, or social
• Choose a message color from the swatches or type a named color / bare hex value like 4c1
• The preview updates live — copy the Markdown, HTML, or reStructuredText snippet directly into your docs

Common use cases

• Adding a CI status badge — build-passing-brightgreen — to a GitHub README
• Showing test coverage as a dynamic percentage badge updated on each CI run
• Displaying the current version from a package registry: npm-v1.2.3-blue
• License badges like license-MIT-lightgrey in open-source project READMEs
• Custom project or team badges for internal documentation portals

AI agent integration

A machine-readable llms.txt file is available at /tools/badge/llms.txt containing the full badge URL specification, all named colors, style options, logo slugs, and ready-to-use badge patterns for common use cases. Paste this file into your AI coding assistant (Claude, Cursor, GitHub Copilot, or any LLM-powered tool) and ask it to add badges to your project — it will construct the correct URLs automatically.