Awesome Badges

A curated collection of awesome things related to status badges.

While this list is maintained by Paul Melnikow from the Shields core team, it includes Shields-related and non-Shields-related resources.

Dynamic badge services

• Shields.io – Original home of the badges, launched in 2014.
• Badgen.net – Fast badge generating service launched in 2018.
• NodeICO – Large-format status badges for Node.js projects – which were once very popular!

Raster badges

SVG badges are encouraged because they render better on Retina displays and scale up beautifully. However in a few environments, such as Slack and HTML email, SVG images won't render, so PNG badges are preferred. Shields offers raster badges through its raster server, raster.shields.io.

• svg-to-image-proxy – Rasterizing proxy based on Node and Puppeteer which can be hosted on Vercel. (Since 2019 this code has been used to run raster.shields.io, however it's about to be deprecated in favor of squint.)
• squint – Rasterizing proxy based on Rust and libcairo.

Static badges

• For The Badge – Provides static badges using a flat and boxy badge design which has become a classic. (This badge format is available as ?style=for-the-badge on Shields.io.)

Static badge collections

• Badges 4 README.md Profile – Catalog of Shields.io Badges for readme profiles
• Project Types – Static badges for four types of open-source project, as classified in Nadia Eghbal's Working in Public.
• Simple Badges – Catalog of Shields.io Badges with Simple Icons

Dynamic data providers

Dynamic data providers are third parties who publish data APIs which can be used to back one of the dynamic badge services:

• Shields' Endpoint badge
• Badgen's https badge
• Badgen's RunKit endpoint badge

• Transifex open API endpoints – Data gateway for projects using Transifex.
• Cell Shield – a service that allows backing a shields.io badge with a cell from a public Google Spreadsheet.
• TYPO3 Badges – API that provides JSON endpoints to render badges of TYPO3 CMS extensions via Shields or Badgen.

Badge-rendering software

• badge-maker – JavaScript; supports plastic, flat, flat-square, for-the-badge, and social styles. Powers Shields.io.
• badgen – TypeScript; supports classic and flat. Powers Badgen.
• gradient-badge – JavaScript; generates gradient badges in classic and flat.
• poser – PHP.
• pybadges – Python.
• browser-support-badge – JavaScript; generates browser version compatibility badges.
• badge4j – Java.

Icons

• Simple Icons – Home of the bulk of the icons used by both Shields and Badgen.

Academic articles

• Badges on npm packages – Data-driven assessment based on signaling theory applied to how badges are used in npm. Published in ICSE 2018.
• On the Usage of Badges in Open Source Packages on GitHub – Data-driven study of how status badges are used in Cargo and Packagist projects.

Historical articles

• An Open Source Rage Diamond (Jun. 5, 2014) – An article about the motivation for the Shields project by one of its creators.
• Shields badge specification – Visual design specification for Shields.

Talks

• Shields.io by Nicco Kunzmann – A talk given by Nicco Kunzmann for I Love Free Software Day in Berlin, Feb. 14, 2019.
• Cool badges for your project by Marcin Mielnicki (photos) – A talk given by Shields core team member Marcin Mielnicki for Hacktoberfest Poznań 2018.

Hosting your own badge service

• Shields self-hosting – Host your own copy of Shields to Heroku, Vercel, using Docker, or on a Node server.
• Badgen self-hosting – Host your own copy of Badgen on Vercel.

Achievement badges

• Open Badges – A specification for verifiable digital badges.
• Badgr – A service for creating verifiable achievement badges, based on the Open Badges specification.