Badge Generator
Build shields.io README badges with a full visual editor — label, message, named or hex colour, five styles, Simple Icons logos and label-colour overrides — and watch the real badge render live. Assemble a whole README badge row from presets and your own badges, then export the block as Markdown, HTML, reStructuredText, AsciiDoc, or the raw image URL.
About this ToolHow it works, benefits & use casesTap to collapse
A full visual builder for shields.io README badges — not just a single-badge form, but the whole row people actually paste at the top of a project. Set a label, message, and colour (by shields.io name like brightgreen or any hex), pick one of five styles (flat, flat-square, plastic, for-the-badge, social), and optionally attach a Simple Icons logo with its own logo-colour and label-colour overrides. The real badge image renders live as you type, so you see the exact result before committing. Then assemble a README badge row: drop in ready-made presets (MIT/Apache/GPL licenses, build status, GitHub Actions CI, coverage, npm/SemVer versions, GitHub stars, Discord, Node/TypeScript/React/Docker tech badges, PRs Welcome, Maintained) and your own badges, and export the entire block in Markdown, HTML, reStructuredText, AsciiDoc, or as raw image URLs. A built-in validator flags unknown colours, orphaned logo colours, and bad links, and the whole configuration — badge plus row plus format — is captured in a shareable URL.
How to Use
- 1In the builder, set a Label (left side, optional) and Message (right side), then choose a colour by name, hex, or a one-click chip.
- 2Pick a style and optionally add a Simple Icons logo slug, a logo colour, a label colour, or a clickable link.
- 3Watch the live preview render the real shields.io badge and check the validation card for warnings.
- 4Click "Add to README row" — or hit "Row" on any preset — to assemble the block you will paste into your README.
- 5Choose an output format (Markdown, HTML, reStructuredText, AsciiDoc, or Image URL).
- 6Copy or download the badge block from the output panel, or share the URL to hand the exact configuration to a teammate.
Key Benefits
- Live preview renders the actual shields.io badge image as you edit
- Full builder: label, message, named or hex colour, five styles, logo, logo-colour, label-colour, and a link
- README row assembler that mixes presets with your own badges into one paste-ready block
- Five output formats: Markdown, HTML, reStructuredText, AsciiDoc, and raw image URL
- Nineteen presets across license, build, coverage, version, social, tech, and community categories
- Validation that flags unknown colours, logo colours with no logo, and non-absolute links
- Shareable URL captures the current badge, the whole row, and the selected format
Common Use Cases
- Building the full badge row at the top of an open-source README in one place
- Generating tech-stack badges (TypeScript, React, Node, Docker) with correct brand logos and colours
- Producing badges for non-Markdown docs — reStructuredText for Sphinx or AsciiDoc for Antora
- Creating a custom status badge with an exact hex colour to match a brand
- Handing a collaborator a reproducible badge configuration via a shared link
Live preview
Current badge
README row (empty)
Markdown
Badge builder
Left side (optional)
Right side
Simple Icons slug
Wraps the badge
Output format
Preset badges
How shields.io badges work
A badge is just an image served by img.shields.io. The path encodes label-message-colour, with - escaped to -- and spaces to _; style, logo, and colour overrides ride along as query params. This tool builds that URL for you and renders the real image so you see the result before you commit.
Build a real README row
The badges you actually paste at the top of a README are a row. Add badges from presets or your own builder, then export the whole block as Markdown, HTML, reStructuredText, AsciiDoc, or just the raw image URLs — whichever your docs use.
Was this tool helpful?
Share Your Experience
Help others discover this tool!
Related tools
- Markdown to HTMLConvert Markdown to HTML
- Markdown TOC GeneratorGenerate table of contents for Markdown
- Changelog GeneratorGenerate changelog from Git commit history
- Code Block FormatterFormat code blocks for Markdown
- Heroku Procfile GeneratorBuild a Heroku Procfile and matching app.json — process types, env vars, addons, dyno formation — plus a Procfile parser and audit
- HTML to MarkdownConvert HTML to Markdown
The builder always reflects one badge in the live preview. The README row is the block you actually paste at the top of a project — a sequence of badges. Use "Add to README row" or a preset’s "Row" button to collect badges, then export the whole row. The output panel shows the row followed by your current badge so you can copy either.
Markdown (``) for GitHub and most READMEs; HTML (`<img>`, wrapped in `<a>` when you set a link) for sites and rich READMEs; reStructuredText (`.. image::` with an optional `:target:`) for Sphinx docs; AsciiDoc (`image:url[alt]`) for Antora/AsciiDoctor; and Image URL for the raw img.shields.io link when you want to embed it yourself.