Awesome Badge Variants: Complete Guide to Styles and Use Cases
The sindresorhus/awesome repository provides five distinct badge variants—including standard, flat, and flat-2 styles for list headers, plus standard and flat versions for project READMEs—that signal either a curated Awesome list or a project's inclusion in one.
The Awesome badge system in the sindresorhus/awesome repository offers multiple visual variants to accommodate different design aesthetics while maintaining brand consistency. These variants are divided into two functional categories: badges that identify the repository itself as an Awesome list, and badges that indicate a project has been featured in an Awesome list. Understanding the specific use cases for each variant ensures proper implementation across your GitHub projects.
Awesome Badge Variants for List Headers
Use these variants at the top of an actual Awesome list to identify it as a curated collection.
Standard Awesome Badge
The standard Awesome badge is the classic rectangular style with 3-D shading. This variant lives in media/badge.svg and is served via https://awesome.re/badge.svg. Place this at the top of your Awesome list documentation when you want the traditional, established look.
[](https://awesome.re)
Flat Awesome Badge
The flat Awesome badge offers a minimal style without the 3-D shading. Located in media/badge-flat.svg and served via https://awesome.re/badge-flat.svg, this variant provides a cleaner, modern aesthetic for your list's header.
[](https://awesome.re)
Flat-2 Awesome Badge
The flat-2 Awesome badge is a slightly thicker flat variant. Stored in media/badge-flat2.svg and served via https://awesome.re/badge-flat2.svg, choose this when the standard flat badge feels too thin for your design requirements.
[](https://awesome.re)
Featured Project Badge Variants
Use these variants in project READMEs to advertise that the project appears in an Awesome list.
Mentioned-in-Awesome Badge
The mentioned-in-Awesome badge signals that a project is featured in an Awesome list. This variant is stored in media/mentioned-badge.svg and served via https://awesome.re/mentioned-badge.svg. Add this to your project's README to highlight its inclusion in a curated collection.
[](https://github.com/sindresorhus/awesome-nodejs)
Flat Mentioned-in-Awesome Badge
The flat mentioned-in-Awesome badge provides the same functionality as the standard mentioned badge but with a flat aesthetic. Located in media/mentioned-badge-flat.svg and served via https://awesome.re/mentioned-badge-flat.svg, use this when you prefer a minimal look for your project's README.
[](https://github.com/sindresorhus/awesome-nodejs)
Implementation Reference
All badge variants are documented in the repository's awesome.md file under the Awesome badge and Awesome mentioned badge sections. The source image files reside in the media/ folder and are automatically served via the CDN at https://awesome.re/.
When implementing the mentioned-in-Awesome badges, replace the generic URL with the specific Awesome list that features your project:
<!-- Standard mentioned badge for a specific list -->
[](https://github.com/enaqx/awesome-react)
<!-- Flat mentioned badge for a specific list -->
[](https://github.com/vinta/awesome-python)
Summary
- Standard Awesome badge (
badge.svg): Classic rectangular style with 3-D shading for traditional Awesome list headers. - Flat Awesome badge (
badge-flat.svg): Minimal style without shading for cleaner list headers. - Flat-2 Awesome badge (
badge-flat2.svg): Thicker flat variant for additional visual weight. - Mentioned-in-Awesome badge (
mentioned-badge.svg): Indicates a project is featured in an Awesome list, placed in project READMEs. - Flat mentioned-in-Awesome badge (
mentioned-badge-flat.svg): Minimal version of the featured project badge. - All variants are served from
https://awesome.re/and documented inawesome.md.
Frequently Asked Questions
What is the difference between the Awesome badge and the Mentioned-in-Awesome badge?
The Awesome badge variants identify the repository itself as a curated Awesome list and belong at the top of list documentation, while the Mentioned-in-Awesome badges indicate that a specific project has been featured in an Awesome list and belong in that project's README. According to the source code in awesome.md, these serve distinct purposes: one marks the curator, the other marks the curated content.
When should I use the flat-2 variant instead of the standard flat badge?
Use the flat-2 variant (badge-flat2.svg) when the standard flat badge (badge-flat.svg) feels too thin for your design. As implemented in the sindresorhus/awesome repository, the flat-2 variant provides slightly thicker lines and more visual weight while maintaining the minimal flat aesthetic without 3-D shading.
Where are the badge image files stored in the repository?
The badge image files are stored in the media/ directory of the sindresorhus/awesome repository. The source files include media/badge.svg, media/badge-flat.svg, media/badge-flat2.svg, media/mentioned-badge.svg, and media/mentioned-badge-flat.svg. These files are served via the CDN at https://awesome.re/ and referenced in the documentation within awesome.md.
Can I customize the link target for the Awesome badge?
Yes, while the standard Awesome badge links to https://awesome.re, the Mentioned-in-Awesome badges should link to the specific Awesome list that features your project. The markdown syntax allows you to customize the URL in the parentheses, such as https://github.com/sindresorhus/awesome-nodejs for the Node.js Awesome list.
Have a question about this repo?
These articles cover the highlights, but your codebase questions are specific. Give your agent direct access to the source. Share this with your agent to get started:
curl -s "https://instagit.com/install.md" 
Maintain an open-source project? Get it listed too →