Skip to content
SVG Generators

SVG Badge Generator

Make GitHub README style badges and metric pills in SVG. Pick the words, colours, style and an icon. Copy Markdown or HTML. Free.

Quick start

Words
Colours

Right side colour

Live preview of your SVG

Your picture shows here.

Markdown (README)


            

HTML


            

Save the SVG file next to your README and the links above will show your badge.

See the SVG code

            

Something not working? Report a problem

What is the SVG Badge Generator?

Badges are small labels like "build passing" or "license MIT". They are common on GitHub README files and project pages. Type a left and a right text, pick colours and a style, and the badge is drawn at once.

You can choose flat, flat square, plastic or big and bold styles, add a small icon, and copy ready Markdown and HTML. The badge is a plain SVG file that you host yourself, so it never depends on another website.

How to use it

  1. Type the left and right text, or press a quick start.
  2. Pick the style, colours and an icon.
  3. Download the SVG and copy the Markdown.

Why people like this tool

4 styles

Flat, flat square, plastic and bold.

Colour swatches

Pick or type any colour.

Small icons

Tick, star, heart, code and more.

Markdown and HTML

Copy and paste into your README.

How it works, in one picture

Infographic: how to use the SVG Badge Generator in 3 easy steps: Add your text, Choose your options and Save your file. You get: 4 styles, Colour swatches, Small icons and Markdown and HTML.

Frequently asked questions

How do I make a badge for my README?
Type your texts, download the SVG, upload it with your project, and paste the Markdown we give you.
Is it the same as Shields.io?
It looks the same, but you get a plain SVG file. It does not need any outside server to show.
Can I change the colours?
Yes. Use the swatches or the colour pickers for each side and each text.

You may also like