Skip to content

Custom markdown badges

To make a badge like the below:

deutschebank

Navigate to Simple icons

Make note of the Logo name. If you are struggling to find the name, go to their git repo and search for it

Encode the color

On the left hand side of a simpleicon is the color code

Paste the copied value in to the below site and encode it

https://meyerweb.com/eric/tools/dencoder/

Assemble the badge

![<brand>](https://img.shields.io/badge/<brand>-<encoded value>.svg?style=for-the-badge&logo=<brand>&logoColor=<hex>)

Replace with the brands icon name.

Brand names with spaces

Where the brand has a space in the name, like Pets at Home you will need to use the url encoded value of a space: %20

It will look like Pets%20at%20Home

Example

![deutschebank](https://img.shields.io/badge/deutschebank-%230018A8.svg?style=for-the-badge&logo=deutschebank&logoColor=#0018A8)

Examples

Pets at Home

PAH

![Pets at Home](https://img.shields.io/badge/Pets%20At%20Home-%23000000.svg?style=for-the-badge&logo=petsathome&logoColor=#4BA840)

![PAH](https://img.shields.io/badge/pets%20at%20home-%234BA840?style=for-the-badge&logo=petsathome&logoColor=white)

American Express

![American Express](https://img.shields.io/badge/American%20Express-%23000000.svg?style=for-the-badge&logo=americanexpress&logoColor=#2E77BC)

About the Color

The background color is back as the brands image is the same as the background, thus causing it to look bad

deutschebank

Want to make this site better? Open a PR or help fund hosting costs