Skip to content
100% local

Markdown badge generator

Build shields.io badges for a README and wrap them in Markdown, HTML or reStructuredText.

Bulk badges — one label|value|color per line, for a row of badges
Output

Markdown badge generator

Every README with a build status, version number or license icon at the top is using a shields.io badge — a small SVG stitched together from a label, a value and a color. This tool builds that badge for you: fill in the label, value and color, pick a style and an optional logo, and it assembles the shields.io URL and wraps it in the markup your project actually uses.

The style option covers all five shields.io renderings — flat, flat-square, plastic, for-the-badge and social — and the logo field accepts any simple-icons slug (github, npm, docker and hundreds more), tinted with logo color when you want it to match the badge. Add a link and the badge becomes clickable in the rendered page; add alt text and it stays meaningful to a screen reader. Output format switches between Markdown, HTML and reStructuredText, so the same badge drops straight into a README, a docs site or a Sphinx project without hand-editing the markup.

Building more than one badge at a time is what the second box is for: paste a list, one badge per line as label|value|color, and the tool turns it into a row of badges side by side — the pattern you see under a project title with build, coverage, version and license all in a line. Turn on sorting to order that row alphabetically, or add a badge table to also render the same set as a two-column reference.

Everything runs in your browser. The label, value and any bulk list you paste are only used to build a URL string locally — nothing is uploaded, and the tool never contacts shields.io itself, it just writes the link. Copy the result, download it as a .txt file, or send it to another tool's input to keep editing.

FAQ

What is a shields.io badge, exactly?
It's an SVG image generated on demand from a URL like https://img.shields.io/badge/label-value-color. This tool builds that URL for you and wraps it in the markup format you need.
Why does my label need escaping?
shields.io reads a dash as the separator between label, value and color. Turn on "Escape spaces and dashes" and a literal dash or space in your label is doubled or replaced automatically so the URL still parses correctly.
How does the bulk mode work?
Paste one badge per line in the second box, formatted as label|value|color (the color is optional and falls back to the Color option). The tool renders them as a row of badges side by side, ready to paste under a project title.
Can I use a custom hex color instead of a name?
Yes. The Color field accepts either a shields.io color name like brightgreen or a hex code like ff69b4 without the leading #.
Is my badge text uploaded anywhere?
No. The badge URL is assembled entirely in your browser from the fields you fill in — nothing is sent to a server, and this tool never calls shields.io itself.