mohdrash / custom-badges

🛡 Allows users to more easily use Octicons and their own icons and logos in shields.io badges, inspired from DenverCoder1

Custom Icon Badges

Allows users to more easily use their own icons and logos to shields.io badges.

⚡ How to use

1. Get a badge URL from shields.io.

2. Replace img.shields.io with custom-icon-badges.herokuapp.com

3. Use any available slug as the logo query parameter.

https://custom-icon-badges.herokuapp.com/badge/custom-badge-blue.svg?logo=paintbrush&logoColor=white

Preview:

🖼️ Existing logos

The following are examples of existing icons and logos that are already available.

Octicons

Currently all Octicons are supported.

Slug	Example
issue-opened
repo-forked
star
git-commit
repo
git-pull-request
heart
mail
More Octicons	View all ⇨

Miscellaneous

Slug	Example
ceylon
color-swatch
controller
issue
fire
flag
translate
trending-up
trending-down
phone
swi-prolog
Add your own	Upload icon ⇨

➕ Adding a new logo

Upload new icons using the demo site!

The file type can be SVG, PNG, etc. but only SVG format supports the logoColor parameter for overriding the color of the logo.

If you think your icon is useful to others, feel free to open a PR to add it to the README above!

Demo site: https://custom-icon-badges.herokuapp.com

🚀 Example Usage

Click to get the URL!

🤗 Contributing

We welcome contributions!

Please see CONTRIBUTING.md for details.

📤 Deploying it on your own

Deploying on your own is optional. See the steps below.

Deploy to Heroku

1. Sign in to Heroku or create a new account at https://heroku.com
2. Click the Deploy button below

3. Add the url of a Mongo database as the DB_URL config var. The database should have a collection called icons. See getting started for more info on setting up a free Mongo Atlas database.

4. Click "Deploy App" at the end of the form
5. Once the app is deployed, you can use <your-app-name>.herokuapp.com in place of custom-icon-badges.herokuapp.com

💬 Questions?

Feel free to open an issue.

🤩 Support

💙 If you like this project, give it a ⭐ and share it with friends!

☕ Buy me a coffee

---

Made with ❤️ and TypeScript