Skip to content

πŸ›‘ Allows users to more easily use Octicons and their own icons and logos on shields.io badges

License

Notifications You must be signed in to change notification settings

nbuchele/custom-icon-badges

Β 
Β 

Repository files navigation

Custom Icon Badges

stars issues license discord

Allows users to more easily use Octicons and their own icons and logos on 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:

img

πŸ–ΌοΈ Existing logos

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

Simple Icons

Over 2,000 brand icons from Simple Icons are already supported by shields.io.

You can find a list of slugs for each brand here.

Octicons

All Octicons from GitHub are supported by Custom Icon Badges.

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

Miscellaneous

Slug Example
ceylon img
color-swatch img
controller img
issue img
fire img
flag img
translate img
trending-up img
trending-down img
phone img
swi-prolog img
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

image

πŸš€ Example Usage

Click to get the URL!

stars open issues license build last commit total contributions

code size pr closed tag rating github streak

followers stars fork watch downloads social

my repos downloads phone email location

open issue discuss install package use template github action

πŸ–₯️ Using a Different Badge Host

By default, fetching a badge from Custom Icon Badges will use img.shields.io as the badge host.

You can set the host parameter to one of the following to override the hostname of the badge URL:

If you would like to use a different badge host, fork and modify this repository. Create a PR if it may be useful to others.

πŸ€— 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

Deploy

  1. 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.

image

  1. Click "Deploy App" at the end of the form
  2. 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!

Youtube Sponsor with Github

β˜• Buy me a coffee


Made with ❀️ and TypeScript

Powered by Heroku

About

πŸ›‘ Allows users to more easily use Octicons and their own icons and logos on shields.io badges

Resources

License

Code of conduct

Stars

Watchers

Forks

Packages

No packages published

Languages

  • TypeScript 88.7%
  • HTML 6.4%
  • SCSS 4.8%
  • Procfile 0.1%