EZ Badges

Interactive Badge Builder

Experiment with different parameters and see your badge in real-time:

Text

Background Color

Text Color

Icon

Icon Color

Edge Style

Parameters

Parameter	Description	Default	Examples
`text`	Badge text content	`"Badge"`	`text=Hello%20World`
`bgColor`	Background color	`"white"`	`bgColor=blue`, `bgColor=#ff6b6b`
`icon`	Icon from library or URL	`null`	`icon=fontawesome-solid:star`, `icon=bootstrap:heart`, `icon=https://example.com/logo.svg`
`iconColor`	Icon color tint (works best with library icons)	`null`	`iconColor=red`
`textColor`	Text color	`"auto"`	`textColor=white`, `textColor=#333`
`edges`	Edge style	`"rounded"`	`edges=rounded`, `edges=square`, `edges=pill`

Supported Icon Libraries

You can use icons from popular libraries by specifying provider:icon-name format:

Provider	Format	Examples
FontAwesome Solid	`fontawesome-solid:icon`	`fontawesome-solid:star`, `fontawesome-solid:heart`
FontAwesome Regular	`fontawesome-regular:icon`	`fontawesome-regular:star`, `fontawesome-regular:heart`
FontAwesome Brands	`fontawesome-brands:icon`	`fontawesome-brands:github`, `fontawesome-brands:twitter`
Bootstrap Icons	`bootstrap:icon`	`bootstrap:star`, `bootstrap:heart`
Heroicons Outline	`heroicons-outline:icon`	`heroicons-outline:star`, `heroicons-outline:heart`
Heroicons Solid	`heroicons-solid:icon`	`heroicons-solid:star`, `heroicons-solid:heart`
Lucide	`lucide:icon`	`lucide:star`, `lucide:heart`
Tabler	`tabler:icon`	`tabler:star`, `tabler:heart`
Simple Icons	`simple-icons:icon`	`simple-icons:github`, `simple-icons:nodejs`

How It Works

The server automatically fetches icons from their respective CDNs, processes them for optimal quality, and embeds them directly into your badges:

Library Icons: Use fontawesome-solid:star or bootstrap:heart - full color customization support
Custom URLs: Use direct image URLs like https://example.com/icon.svg - iconColor may not work for all images
Color Customization: Add &iconColor=red to tint library icons (may not work with custom images)
Quality Processing: SVG icons preserve vector quality, raster images get enhanced with sharpening and optimization

FontAwesome

Bootstrap

Custom Icons

Supported Colors

You can use any of these color names or hex codes for background and text colors:

Basic Colors

black

white

Grays & Neutrals

grayLight

gray

grayDark

slate

charcoal

Blues

blue

lightBlue

skyBlue

teal

cyan

Greens

green

mint

seafoam

olive

emerald

Yellows & Oranges

yellow

amber

orange

peach

gold

Reds & Pinks

red

coral

salmon

pink

rose

Purples

purple

lavender

lilac

violet

indigo

Modern "Soft" Tones

sand

beige

ivory

blush

sage

dustyBlue

terracotta

Edge Styles

Rounded (Default)

https://badges.0xleo.dev/badge?text=Rounded&bgColor=blue&edges=rounded

Square

https://badges.0xleo.dev/badge?text=Square&bgColor=green&edges=square

Pill

https://badges.0xleo.dev/badge?text=Pill&bgColor=red&edges=pill

GitHub README Usage

Add badges to your README.md file. Toggle between code and preview:

# My Awesome Project

## Technology Stack
[![Node.js](https://badges.0xleo.dev/badge?text=Node.js&bgColor=green&icon=fontawesome-brands:node-js)](https://nodejs.org)
[![React](https://badges.0xleo.dev/badge?text=React&bgColor=#61dafb&icon=simple-icons:react)](https://reactjs.org)
[![TypeScript](https://badges.0xleo.dev/badge?text=TypeScript&bgColor=blue&edges=pill)](https://typescriptlang.org)

## Project Status
[![Build Status](https://badges.0xleo.dev/badge?text=Build%20Passing&bgColor=green&edges=pill&icon=bootstrap:check-circle)](https://github.com/your-repo/actions)
[![Version](https://badges.0xleo.dev/badge?text=v1.2.3&bgColor=blue&icon=heroicons-outline:tag)](https://github.com/your-repo/releases)
[![License](https://badges.0xleo.dev/badge?text=MIT&bgColor=orange&icon=bootstrap:file-earmark-text)](https://github.com/your-repo/blob/main/LICENSE)

## Social Links
[![GitHub](https://badges.0xleo.dev/badge?text=GitHub&bgColor=black&textColor=white&icon=fontawesome-brands:github)](https://github.com/your-repo)
[![Twitter](https://badges.0xleo.dev/badge?text=Twitter&bgColor=#1da1f2&textColor=white&icon=fontawesome-brands:twitter)](https://twitter.com/your-repo)
[![Discord](https://badges.0xleo.dev/badge?text=Discord&bgColor=#5865f2&icon=bootstrap:discord)](https://discord.gg/your-server)