Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.
Awesome Lists | Featured Topics | Projects
https://github.com/DenverCoder1/custom-icon-badges

🛡 Allows users to more easily use Octicons and their own icons and logos on shields.io badges
https://github.com/DenverCoder1/custom-icon-badges
badge badge-maker custom github hacktoberfest readme shields status svg
Last synced: about 2 months ago
JSON representation
🛡 Allows users to more easily use Octicons and their own icons and logos on shields.io badges
Host: GitHub
URL: https://github.com/DenverCoder1/custom-icon-badges
Owner: DenverCoder1
License: mit
Created: 2021-07-17T19:39:44.000Z (over 3 years ago)
Default Branch: main
Last Pushed: 2024-09-09T16:46:50.000Z (3 months ago)
Last Synced: 2024-09-09T20:39:46.324Z (3 months ago)
Topics: badge, badge-maker, custom, github, hacktoberfest, readme, shields, status, svg
Language: TypeScript
Homepage: https://custom-icon-badges.demolab.com
Size: 3.65 MB
Stars: 545
Watchers: 3
Forks: 84
Open Issues: 7
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project

badges-awesome-badges - Custom Icon Badges
awesome-badges - Custom Icon Badges
awesome - DenverCoder1/custom-icon-badges - 🛡 Allows users to more easily use Octicons and their own icons and logos on shields.io badges (TypeScript)
awesome-github-profile - Custom Icon Badges
README

        # Custom Icon Badges

[![stars](https://custom-icon-badges.demolab.com/github/stars/DenverCoder1/custom-icon-badges?logo=star&logoColor=black)](https://github.com/DenverCoder1/custom-icon-badges/stargazers "stars")

[![issues](https://custom-icon-badges.demolab.com/github/issues-raw/DenverCoder1/custom-icon-badges?logo=issue)](https://github.com/DenverCoder1/custom-icon-badges/issues "issues")

[![license](https://custom-icon-badges.demolab.com/github/license/denvercoder1/custom-icon-badges?logo=law&logoColor=white)](https://github.com/DenverCoder1/custom-icon-badges/blob/main/LICENSE?rgh-link-date=2021-08-09T18%3A10%3A26Z "license MIT")

[![discord](https://custom-icon-badges.demolab.com/discord/819650821314052106?color=7289DA&logo=comments&label=discord&logoColor=white)](https://discord.gg/fPrdqh3Zfu "Dev Pro Tips Discussion & Support Server")

Allows users to more easily use Octicons and their own icons and logos on [shields.io badges](https://github.com/badges/shields).

## ⚡ How to use

1. Get a badge URL from [shields.io](https://shields.io/).

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

3. Use any [available slug](#%EF%B8%8F-existing-logos) as the logo query parameter or [upload your own](https://custom-icon-badges.demolab.com).

```md

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

```

Preview:

![img](https://custom-icon-badges.demolab.com/badge/custom-badge-blue.svg?logo=paintbrush&logoColor=white)

4. You're done! Use the image URL in your HTML or markdown! Star this repo if you find it useful! ⭐

## 🖼️ 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](https://github.com/simple-icons/simple-icons) are already supported by shields.io.

You can find a list of slugs for each brand [here](https://github.com/simple-icons/simple-icons/blob/develop/slugs.md).

### Octicons

All [250+ Octicons](https://primer.style/octicons/) from GitHub are supported by Custom Icon Badges.

| Slug               | Example                                                   |

| ------------------ | --------------------------------------------------------- |

| `issue-opened`     | [![issue-opened][issue-opened]][issue-opened]             |

| `repo-forked`      | [![repo-forked][repo-forked]][repo-forked]                |

| `star`             | [![star][star]][star]                                     |

| `git-commit`       | [![git-commit][git-commit]][git-commit]                   |

| `repo`             | [![repo][repo]][repo]                                     |

| `git-pull-request` | [![git-pull-request][git-pull-request]][git-pull-request] |

| `heart`            | [![heart][heart]][heart]                                  |

| `mail`             | [![mail][mail]][mail]                                     |

| More Octicons      | [View all ⇨](https://primer.style/octicons)               |

[issue-opened]: https://custom-icon-badges.demolab.com/badge/Issue-red.svg?logo=issue-opened&logoColor=fff

[repo-forked]: https://custom-icon-badges.demolab.com/badge/Fork-orange.svg?logo=fork

[star]: https://custom-icon-badges.demolab.com/badge/Star-yellow.svg?logo=star

[git-commit]: https://custom-icon-badges.demolab.com/badge/Commit-green.svg?logo=git-commit&logoColor=fff

[repo]: https://custom-icon-badges.demolab.com/badge/Repo-blue.svg?logo=repo

[git-pull-request]: https://custom-icon-badges.demolab.com/badge/Pull%20Request-purple.svg?logo=pr

[heart]: https://custom-icon-badges.demolab.com/badge/Heart-D15E9B.svg?logo=heart

[mail]: https://custom-icon-badges.demolab.com/badge/Mail-E61B23.svg?logo=mail

### Feather Icons

All [250+ Feather Icons](https://feathericons.com/) are supported by Custom Icon Badges.

**Note:** To use Feather Icons, you must use add the query parameter `logoSource=feather` to the URL in addition to the `logo` parameter.

| Slug               | Example                                             |

| ------------------ | --------------------------------------------------- |

| `activity`         | [![activity][activity]][activity]                   |

| `alert-triangle`   | [![alert-triangle][alert-triangle]][alert-triangle] |

| `award`            | [![award][award]][award]                            |

| `bar-chart`        | [![bar-chart][bar-chart]][bar-chart]                |

| `box`              | [![box][box]][box]                                  |

| `camera`           | [![camera][camera]][camera]                         |

| `cast`             | [![cast][cast]][cast]                               |

| `command`          | [![command][command]][command]                      |

| `dollar-sign`      | [![dollar-sign][dollar-sign]][dollar-sign]          |

| `download-cloud`   | [![download-cloud][download-cloud]][download-cloud] |

| `upload-cloud`     | [![upload-cloud][upload-cloud]][upload-cloud]       |

| `tv`               | [![tv][tv]][tv]                                     |

| `youtube`          | [![youtube][youtube]][youtube]                      |

| More Feather Icons | [View all ⇨](https://feathericons.com/)             |

[activity]: https://custom-icon-badges.demolab.com/badge/activity-red.svg?logo=activity&logoSource=feather

[alert-triangle]: https://custom-icon-badges.demolab.com/badge/alert--triangle-orange.svg?logo=alert-triangle&logoSource=feather

[award]: https://custom-icon-badges.demolab.com/badge/award-yellow.svg?logo=award&logoSource=feather

[bar-chart]: https://custom-icon-badges.demolab.com/badge/bar--chart-green.svg?logo=bar-chart&logoSource=feather

[box]: https://custom-icon-badges.demolab.com/badge/box-blue.svg?logo=box&logoSource=feather

[camera]: https://custom-icon-badges.demolab.com/badge/camera-purple.svg?logo=camera&logoSource=feather

[cast]: https://custom-icon-badges.demolab.com/badge/cast-pink.svg?logo=cast&logoSource=feather&logoColor=black

[command]: https://custom-icon-badges.demolab.com/badge/command-brown.svg?logo=command&logoSource=feather

[dollar-sign]: https://custom-icon-badges.demolab.com/badge/dollar--sign-grey.svg?logo=dollar-sign&logoSource=feather

[download-cloud]: https://custom-icon-badges.demolab.com/badge/download--cloud-black.svg?logo=download-cloud&logoSource=feather

[upload-cloud]: https://custom-icon-badges.demolab.com/badge/upload--cloud-purple.svg?logo=upload-cloud&logoSource=feather

[tv]: https://custom-icon-badges.demolab.com/badge/tv-blue.svg?logo=tv&logoSource=feather

[youtube]: https://custom-icon-badges.demolab.com/badge/youtube-red.svg?logo=youtube&logoSource=feather

### Miscellaneous

|                                                  |                                               |                                         |                                            |

| ------------------------------------------------ | --------------------------------------------- | --------------------------------------- | ------------------------------------------ |

| [![ceylon][ceylon]][ceylon]                      | [![color-swatch][color-swatch]][color-swatch] | [![controller][controller]][controller] | [![issue][issue]][issue]                   |

| [![fire][fire]][fire]                            | [![flag][flag]][flag]                         | [![translate][translate]][translate]    | [![trending-up][trending-up]][trending-up] |

| [![trending-down][trending-down]][trending-down] | [![phone][phone]][phone]                      | [![pygame][pygame]][pygame]             | [![grey-pygame][grey-pygame]][grey-pygame] |

| Add your own!                                    | [![Upload Icon][uploadicon]][demo]            |                                         |                                            |

[ceylon]: https://custom-icon-badges.demolab.com/badge/ceylon-E39842.svg?logo=ceylon&logoColor=fff

[color-swatch]: https://custom-icon-badges.demolab.com/badge/color--swatch-green.svg?logo=color-swatch&logoColor=fff

[controller]: https://custom-icon-badges.demolab.com/badge/controller-purple.svg?logo=controller

[issue]: https://custom-icon-badges.demolab.com/badge/issue-orange.svg?logo=issue&logoColor=fff

[fire]: https://custom-icon-badges.demolab.com/badge/fire-red.svg?logo=fire&logoColor=fff

[flag]: https://custom-icon-badges.demolab.com/badge/flag-green.svg?logo=flag&logoColor=fff

[translate]: https://custom-icon-badges.demolab.com/badge/translate-blue.svg?logo=translate&logoColor=white

[trending-up]: https://custom-icon-badges.demolab.com/badge/trending--up-brightgreen.svg?logoColor=fff&logo=trending-up

[trending-down]: https://custom-icon-badges.demolab.com/badge/trending--down-red.svg?logoColor=fff&logo=trending-down

[phone]: https://custom-icon-badges.demolab.com/badge/phone-green.svg?logo=phone&logoColor=white

[pygame]: https://custom-icon-badges.demolab.com/badge/pygame-013243.svg?logo=pygame

[grey-pygame]: https://custom-icon-badges.demolab.com/badge/pygame-150458.svg?logo=grey-pygame

[uploadicon]: https://custom-icon-badges.demolab.com/badge/Upload%20Icon-blue.svg?logo=upload&logoColor=white

[demo]: https://custom-icon-badges.demolab.com

## ➕ 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: 

[![image](https://user-images.githubusercontent.com/20955511/128404656-30af9c39-39a4-4ac8-a4b0-2a077806a94c.png)](https://custom-icon-badges.demolab.com)

## 🚀 Example Usage

Click to get the URL!

[![stars][1]][1]

[![open issues][2]][2]

[![license][3]][3]

[![build][4]][4]

[![last commit][5]][5]

[![total contributions][26]][26]

[![code size][6]][6]

[![pr closed][7]][7]

[![tag][8]][8]

[![rating][9]][9]

[![github streak][25]][25]

[![followers][10]][10]

[![stars][11]][11]

[![fork][12]][12]

[![watch][13]][13]

[![downloads social][14]][14]

[![my repos][15]][15]

[![downloads][16]][16]

[![phone][17]][17]

[![email][18]][18]

[![location][19]][19]

[![open issue][20]][20]

[![discuss][21]][21]

[![install package][22]][22]

[![use template][23]][23]

[![github action][24]][24]

[1]: https://custom-icon-badges.demolab.com/github/stars/DenverCoder1/custom-icon-badges?logo=star

[2]: https://custom-icon-badges.demolab.com/github/issues-raw/DenverCoder1/custom-icon-badges?logo=issue

[3]: https://custom-icon-badges.demolab.com/github/license/denvercoder1/custom-icon-badges?logo=law

[4]: https://custom-icon-badges.demolab.com/github/actions/workflow/status/DenverCoder1/custom-icon-badges/ci.yml?branch=main&logo=check-circle-fill&logoColor=white

[5]: https://custom-icon-badges.demolab.com/github/last-commit/DenverCoder1/custom-icon-badges?logo=history&logoColor=white

[6]: https://custom-icon-badges.demolab.com/github/languages/code-size/DenverCoder1/custom-icon-badges?logo=file-code&logoColor=white

[7]: https://custom-icon-badges.demolab.com/github/issues-pr-closed/DenverCoder1/custom-icon-badges?color=purple&logo=git-pull-request&logoColor=white

[8]: https://custom-icon-badges.demolab.com/github/v/tag/DenverCoder1/custom-icon-badges?logo=tag&logoColor=white

[9]: https://custom-icon-badges.demolab.com/chrome-web-store/rating/ogffaloegjglncjfehdfplabnoondfjo?logo=thumbsup&logoColor=white

[10]: https://custom-icon-badges.demolab.com/github/followers/DenverCoder1?logo=person-add&style=social&logoColor=black

[11]: https://custom-icon-badges.demolab.com/github/stars/DenverCoder1/custom-icon-badges?logo=star&style=social&logoColor=black

[12]: https://custom-icon-badges.demolab.com/github/forks/DenverCoder1/custom-icon-badges?logo=fork&style=social&logoColor=black

[13]: https://custom-icon-badges.demolab.com/github/watchers/DenverCoder1/custom-icon-badges?logo=eye&style=social&logoColor=black

[14]: https://custom-icon-badges.demolab.com/npm/dw/react-bootstrap?logo=download&style=social&label=Download&logoColor=black

[15]: https://custom-icon-badges.demolab.com/badge/-My%20Repos-blue?style=for-the-badge&logoColor=white&logo=repo

[16]: https://custom-icon-badges.demolab.com/badge/-Download-F25278?style=for-the-badge&logo=download&logoColor=white

[17]: https://custom-icon-badges.demolab.com/badge/-123--456--7890-orange?style=for-the-badge&logo=phone&logoColor=white

[18]: https://custom-icon-badges.demolab.com/badge/[email protected]?style=for-the-badge&logo=mention&logoColor=white

[19]: https://custom-icon-badges.demolab.com/badge/Colorado-USA-purple?style=for-the-badge&logo=location&logoColor=white

[20]: https://custom-icon-badges.demolab.com/badge/-Open%20Issue-palegreen?style=for-the-badge&logoColor=black&logo=issue-opened

[21]: https://custom-icon-badges.demolab.com/badge/-Discuss-plum?style=for-the-badge&logo=comment-discussion&logoColor=black

[22]: https://custom-icon-badges.demolab.com/badge/-Install%20Package-gold?style=for-the-badge&logo=package&logoColor=black

[23]: https://custom-icon-badges.demolab.com/badge/-Use%20Template-teal?style=for-the-badge&logo=repo-template&logoColor=white

[24]: https://custom-icon-badges.demolab.com/badge/-Use%20GitHub%20Action-blue?style=for-the-badge&logo=workflow&logoColor=white

[25]: https://custom-icon-badges.demolab.com/badge/dynamic/json?logo=fire&logoColor=fff&color=orange&label=github%20streak&query=%24.currentStreak.length&suffix=%20days&url=https%3A%2F%2Fstreak-stats.demolab.com%2F%3Fuser%3DDenverCoder1%26type%3Djson

[26]: https://custom-icon-badges.demolab.com/badge/dynamic/json?logo=graph&logoColor=fff&color=blue&label=total%20contributions&query=%24.totalContributions&url=https%3A%2F%2Fstreak-stats.demolab.com%2F%3Fuser%3DDenverCoder1%26type%3Djson

## 🖥️ Using a Different Badge Host

By default, fetching a badge from Custom Icon Badges will use [`img.shields.io`](https://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:

- [`img.shields.io`](https://img.shields.io)

- [`staging.shields.io`](https://staging.shields.io)

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](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 

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](https://docs.atlas.mongodb.com/getting-started/) for more info on setting up a free Mongo Atlas database.

![image](https://user-images.githubusercontent.com/20955511/126066250-108fc119-4bc3-4ba0-9b07-0c7402c5790e.png)

4. Click **"Deploy App"** at the end of the form

5. Once the app is deployed, you can use `.herokuapp.com` in place of `custom-icon-badges.demolab.com`

## 💬 Questions?

Feel free to [open an issue](http://github.com/DenverCoder1/custom-icon-badges/issues/new/choose).

## 🤩 Support

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

[![YouTube](https://custom-icon-badges.demolab.com/badge/-Subscribe-red?style=for-the-badge&logo=video&logoColor=white)](https://www.youtube.com/channel/UCipSxT7a3rn81vGLw9lqRkg?sub_confirmation=1 "Subscribe to my YouTube channel")

[![Sponsor with Github](https://custom-icon-badges.demolab.com/badge/-Sponsor-ea4aaa?style=for-the-badge&logo=heart&logoColor=white)](https://github.com/sponsors/DenverCoder1 "Sponsor me on GitHub")

[![Buy me a coffee](https://custom-icon-badges.demolab.com/badge/-Buy_me_a_coffee-FF5E5B?style=for-the-badge&logo=kofi&logoColor=white)](https://ko-fi.com/jlawrence "Buy me a coffee")

## 👨‍💻 Technologies

[![MongoDB](https://custom-icon-badges.demolab.com/badge/-MongoDB-47A248?style=for-the-badge&logo=mongodb&logoColor=white)](https://www.mongodb.com/)

[![Express](https://custom-icon-badges.demolab.com/badge/-Express-000000?style=for-the-badge&logo=express&logoColor=white)](https://expressjs.com/)

[![React](https://custom-icon-badges.demolab.com/badge/-React-218AAB?style=for-the-badge&logo=react&logoColor=white)](https://reactjs.org/)

[![Node.js](https://custom-icon-badges.demolab.com/badge/-Node.js-339933?style=for-the-badge&logo=node.js&logoColor=white)](https://nodejs.org/)

![Uses Shields.io](https://custom-icon-badges.demolab.com/badge/-Uses_Shields.io-000000?style=for-the-badge&logo=shieldsiobadge&logoColor=white)

[![Made with TypeScript](https://img.shields.io/badge/-Made_with_TypeScript-3178C6?style=for-the-badge&logo=typescript&logoColor=white)](https://www.typescriptlang.org/)

[![Powered by Heroku](https://img.shields.io/badge/-Powered_by_Heroku-6567a5?style=for-the-badge&logo=heroku&logoColor=white)](https://heroku.com/)