What Shields.io Badges Are
Shields.io provides dynamic and static SVG badges — the small colored rectangles with a label on the left and a value on the right — that you see at the top of almost every GitHub repository. They communicate build status, test coverage, npm version, license type, and any other metadata that fits in a compact visual. Dynamic badges pull data from APIs (CI status, package version); static badges are hardcoded — perfect for project metadata that doesn't change often.
Badge Anatomy
A typical badge URL encodes everything:
https://img.shields.io/badge/LABEL-MESSAGE-COLOR?logo=LOGO&style=STYLE- Label: Left side text — the category ("build", "version", "license").
- Message: Right side text — the value ("passing", "v2.0.1", "MIT").
- Color: Background color of the message — named colors (green, red, blue), hex, or semantic (success, important, critical).
- Logo: A Simple Icons slug for the icon on the left side.
- Style:
plastic(3D),flat(default),flat-square(most popular),for-the-badge(large, bold),social(rounded).
Common Badge Patterns
- Version:
version-2.0.1-blue— tells users which version is current. - License:
license-MIT-green— indicates the project's open-source license. - PRs welcome:
PRs-welcome-brightgreen— signals contribution friendliness. - Made with:
made%20with-TypeScript-3178C6?logo=typescript— shows the tech stack. - Status: Dynamic from CI —
build-passing-brightgreen— always shows live status.
Generate Custom Badges Now
Use ToolsVito's Badge Generator to create custom shields.io-style badges with any label, message, color, and logo. Copy as Markdown, HTML, or URL. All generated in your browser.