What is Badge/Button Maker?

Badge/Button Maker creates custom badges and shields with your choice of text, colors, and shapes. Set a label and value, pick a style, and download as PNG or SVG.

Produces shields.io-style badges (a coloured pill split into a grey label and a coloured value) rendered as inline SVG. Pick from flat, flat-square, rounded, pill, or for-the-badge shapes; set hex colours for each half plus a separate text colour for the label and the value; drop in a technology logo (GitHub, npm, Docker, Python, Node.js, and more) and have the brand colour applied for you; wrap the badge in a click-through link URL; copy the result as Markdown for a README, HTML for an email or web page, or download crisp SVG or 3x-scaled PNG. Add several badges to a list and grab every Markdown snippet at once or save them as a .md file. Width auto-grows with the text, so 'Build / Passing' and 'License / Apache 2.0' look balanced without manual sizing.

How to use

1. Enter your badge text — choose a label (left side) and a value (right side) like 'Version' and '2.0'.
2. Pick colors for the label and value backgrounds, choose a shape, and optionally add a technology logo on the left.
3. Watch the badge update live, then download as PNG or SVG, or copy as Markdown or HTML to paste into a README or page.

When to use

• Adding a build, version, or coverage badge to a GitHub README without a CI provider.
• Putting 'Beta', 'New', or 'Pro' tags on a landing page feature row or pricing tier.
• Highlighting a tech-stack chip on a personal portfolio or resume PDF.

Result

Create a project status badge: Label "Build" in gray, Value "Passing" in green, flat style. You get a status badge like the ones on GitHub repos.

FAQ

Will my badges keep working if I host them as PNG instead of using shields.io?

Yes. Downloaded SVG and PNG files are self-contained and don't ping any server. The downside vs. shields.io is no live data: a 'version 1.2' badge stays at 1.2 until you regenerate it.

What's the difference between flat, rounded, and pill styles?

Flat has sharp 0px corners with a subtle gradient, flat-square is the same shape without the gradient, rounded uses a 4px radius, pill is fully circular on the ends, and for-the-badge is the bold, taller, uppercase style popular on README badge rows. Pick the one that matches the surrounding UI.

Can I match my brand colours instead of using the green-and-grey default?

Yes — the label colour, value colour, and a separate text colour for each half are all pickable hex values. Try a dark label with light text and a bright value for a high-contrast look. The preview updates as you type.

Which format should I use, SVG or PNG?

SVG for GitHub READMEs, websites, and anywhere the badge might be scaled (it stays sharp). PNG when you need to paste into a place that won't render SVG: Word docs, Slack messages, or some screenshot tools.

Why is the PNG larger than the SVG file size?

PNG is rendered at 3x the on-screen size so it looks crisp on high-DPI displays. A typical badge SVG is under 1 KB; the PNG is usually 5-15 KB. Use SVG when file size matters, PNG when compatibility does.

Related Tools