README Badges: Complete Guide to Shields.io

Complete Guide to README Badges

Badges (also called shields) are small images at the top of a README that communicate key project metadata at a glance. They serve as trust signals for potential users and contributors.

Essential Badges

npm Version

[![npm version](https://img.shields.io/npm/v/my-package.svg)](https://npmjs.com/package/my-package)

Shows the latest published version on npm. Links to the package page.

License

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

Communicates licensing terms instantly. Essential for enterprise adoption.

Build Status

[![CI](https://github.com/user/repo/actions/workflows/ci.yml/badge.svg)](https://github.com/user/repo/actions)

Shows whether the CI pipeline is passing. Green builds trust.

Coverage

[![codecov](https://codecov.io/gh/user/repo/branch/main/graph/badge.svg)](https://codecov.io/gh/user/repo)

Demonstrates test quality. High coverage percentages attract contributors.

Additional Useful Badges

Downloads

[![npm downloads](https://img.shields.io/npm/dm/my-package.svg)](https://npmjs.com/package/my-package)

TypeScript

[![TypeScript](https://img.shields.io/badge/TypeScript-Ready-blue.svg)](https://www.typescriptlang.org/)

Bundle Size

[![bundlephobia](https://img.shields.io/bundlephobia/minzip/my-package)](https://bundlephobia.com/package/my-package)

Badge Layout

Place badges on a single line or group related badges:

[![npm](https://img.shields.io/npm/v/pkg.svg)](link) [![CI](https://github.com/user/repo/actions/workflows/ci.yml/badge.svg)](link) [![codecov](https://codecov.io/gh/user/repo/badge.svg)](link)

Custom Badges

Create custom badges with shields.io:

https://img.shields.io/badge/<LABEL>-<MESSAGE>-<COLOR>

Example: https://img.shields.io/badge/PRs-welcome-brightgreen.svg