MCPcopy Index your code
hub / github.com/DenverCoder1/custom-icon-badges

github.com/DenverCoder1/custom-icon-badges @v0.12.1

Chat with this repo
repository ↗ · DeepWiki ↗ · release v0.12.1 ↗ · + Follow
42 symbols 90 edges 19 files 22 documented · 52%
What it actually does AI analysis from the code graph — generated when you open this
loading…
README

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.demolab.com

  3. Use any available slug as the logo query parameter or upload your own.

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

Preview:

img

  1. 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 are already supported by shields.io.

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

Octicons

All 250+ Octicons from GitHub are supported by Custom Icon Badges.

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

Feather Icons

All 250+ Feather Icons 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
alert-triangle alert-triangle
award award
bar-chart bar-chart
box box
camera camera
cast cast
command command
dollar-sign dollar-sign
download-cloud download-cloud
upload-cloud upload-cloud
tv tv
youtube youtube
More Feather Icons View all ⇨

Miscellaneous

ceylon color-swatch controller issue
fire flag translate trending-up
trending-down phone pygame grey-pygame
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.demolab.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:

  • [`i

Core symbols most depended-on inside this repo

getIcon
called by 4
server/services/icons/OcticonsService.ts
normalizeColor
called by 3
server/services/logoColor.ts
fetchUrl
called by 3
server/services/fetchBadges.ts
buildQueryString
called by 2
server/services/fetchBadges.ts
fetchBadgeFromRequest
called by 2
server/services/fetchBadges.ts
fetchErrorBadge
called by 2
server/services/fetchBadges.ts
isHexColor
called by 1
server/services/logoColor.ts
setLogoColor
called by 1
server/services/logoColor.ts

Shape

Function 18
Class 17
Method 7

Languages

TypeScript100%

Modules by API surface

server/services/fetchBadges.ts12 symbols
server/services/icons/iconDatabase.ts5 symbols
server/services/logoColor.ts3 symbols
server/services/icons/OcticonsService.ts3 symbols
server/services/icons/FeatherIconsService.ts3 symbols
server/controllers/controller.ts3 symbols
client/src/UploadForm.tsx3 symbols
server/services/icons/IconsService.ts2 symbols
client/src/TextBox.tsx2 symbols
client/src/FileUpload.tsx2 symbols
client/src/BadgePreview.tsx2 symbols
client/src/GitHubButtons.tsx1 symbols

Datastores touched

(mongodb)Database · 1 repos

For agents

$ claude mcp add custom-icon-badges \
  -- python -m otcore.mcp_server <graph>

⬇ download graph artifact