🎨Customizing

When using Shields.io badges in Markdown, you can modify various aspects such as badge color, text, logos, and styles.

Note: All of these examples use the "flat" style.

Want to use a different style? See the Styles documentation.

1. Changing Badge Color

You can change the color of your badge by choosing one of the colors seen in the image below in the place of blue.

Some examples. Original image comes from this Medium article.

For Example: ![Custom Badge](https://img.shields.io/badge/Custom%20Badge-blue?style=flat&logo=github)

Result:

Remember to replace "blue" with the color phrase you'd like to use.

---

1a. Using hexadecimal colors

Alternatively, you can use hexadecimal colors to get a specific shade of a color that shield.io may not have built in.

For Example: ![Custom Badge](https://img.shields.io/badge/Custom%20Badge-02354b?style=flat&logo=github)

Result:

Remember to replace "02354b" with the hexadecimal color code you'd like to use.

---

2. Modifying Text

Change the text displayed on the badge by altering the text after the badge name in the URL (in this case, its Some%20Placeholder%20Text).

For Example: ![Modified Text Badge](https://img.shields.io/badge/Some%20Placeholder%20Text-blue?style=flat&logo=github)

Result:

---

2a. Splitting text

Want to split the text to have 2 different sections? You can do this by adding a dash (-) between the words.

For Example: ![Modified Text Badge](https://img.shields.io/badge/Made%20In-Markdown-blue?style=flat&logo=github)

Result:

---

3. Adding Logos

You can include logos on your badges by specifying the logo name after the logo= parameter in the badge URL.

For Example (using the Docker logo): ![Logo Badge](https://img.shields.io/badge/Text%20with%20Logo-black?style=flat&logo=docker)

Result:

Another Example (using the Sass logo): ![Logo Badge](https://img.shields.io/badge/Text%20with%20Logo-pink?style=flat&logo=Sass)

Result:

---

3a. Supported icons/logos

Shields.io uses Simple Icons and a small sub-set of it's own icons/logos. If you can find your icon/logo on https://simpleicons.org, it will work with your badge. Shields.io also has its own few custom badges that you can find here.

Here's an example of the comparison between a SimpleIcons logo and a Shields.io logo:

Example: SimpleIcons

- [![npm](https://img.shields.io/badge/npm-CB3837?logo=npm&logoColor=fff)](#)

Example: Shields.io

- [![npm](https://img.shields.io/npm/v/npm.svg?logo=npm)](#)

For md-badges, badges are only included if they have a SimpleIcons variant.

---

3b. Custom Logo's

You can also utilize custom logo's in the URL parameter by base64 encoding it.

For example:

- ![Custom PlayStation Badge](https://img.shields.io/badge/play-station-blue.svg?logo=data:image/svg%2bxml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEiIHdpZHRoPSI2MDAiIGhlaWdodD0iNjAwIj48cGF0aCBkPSJNMTI5IDExMWMtNTUgNC05MyA2Ni05MyA3OEwwIDM5OGMtMiA3MCAzNiA5MiA2OSA5MWgxYzc5IDAgODctNTcgMTMwLTEyOGgyMDFjNDMgNzEgNTAgMTI4IDEyOSAxMjhoMWMzMyAxIDcxLTIxIDY5LTkxbC0zNi0yMDljMC0xMi00MC03OC05OC03OGgtMTBjLTYzIDAtOTIgMzUtOTIgNDJIMjM2YzAtNy0yOS00Mi05Mi00MmgtMTV6IiBmaWxsPSIjZmZmIi8+PC9zdmc+)