Logos & Icons — shieldcn

Add an icon to any badge with the ?logo= query parameter. shieldcn resolves logos from several sources, picked by a small prefix convention.

Logo sources

Source	Syntax	Example
SimpleIcons (2,400+ brands)	bare slug	`?logo=react`
React Icons (40,000+)	`ri:` prefix	`?logo=ri:FaReact`
Lucide	`lu:` prefix	`?logo=lu:Check`
Twemoji (emoji)	`twemoji:` prefix or bare emoji	`?logo=twemoji:🚀`
Custom SVG	`data:` URI	`?logo=data:image/svg+xml;base64,…`
None	`false` / `none`	`?logo=false`

Single-color icons (SimpleIcons, React Icons, Lucide) are recolored to match the badge variant and respect ?logoColor=. Full-color sources (Twemoji, custom multi-color SVGs) keep their original colors.

Emoji (Twemoji)

Any emoji can be a badge logo, rendered as a crisp full-color Twemoji glyph. Three forms work:

![rocket](https://shieldcn.dev/badge/ship-it.svg?logo=twemoji:🚀)
![rocket by codepoint](https://shieldcn.dev/badge/ship-it.svg?logo=twemoji:1f680)
![rocket bare](https://shieldcn.dev/badge/ship-it.svg?logo=🚀)

twemoji:🚀 — explicit prefix with the emoji character.
twemoji:1f680 — explicit prefix with the hex codepoint (handy when pasting emoji is awkward, e.g. in YAML).
🚀 — a bare emoji is auto-detected as Twemoji.

GET/badge/:content.svg

Path Parameters

contentrequired

Static badge text, e.g. label-value or label-value-color

logo

An emoji, twemoji:<emoji>, or twemoji:<codepoint>

format

variant

size

theme

mode

logo

logoColor

label

flags

split

![badge](https://shieldcn.dev/badge/ship-it.png?logo=twemoji%3A%F0%9F%9A%80)

Examples

🚀 on a custom badge

Bare ❤️ auto-detected

🔥 by codepoint

☕ powered

ZWJ sequence 👨‍💻

Flag emoji 🇺🇸

Emoji logos compose with every variant, size, theme, mode, and split. Because emoji are inherently multi-color, ?logoColor= has no effect on them.

🎉 with an outline variant and the green theme.

![party badge](https://shieldcn.dev/badge/release-shipped.svg?logo=🎉&variant=outline&theme=green)

Brand icons (SimpleIcons)

The most common case — use a brand's slug directly. Browse the full set in the Gallery.

![react](https://shieldcn.dev/badge/built%20with-react.svg?logo=react)
![typescript](https://shieldcn.dev/badge/typed-strict.svg?logo=typescript&variant=branded)

?logo=react

?logo=typescript

?logo=bun

React Icons & Lucide

Reach 40,000+ icons via React Icons with the ri: prefix (use the exact component name), or Lucide with lu:.

![react icon](https://shieldcn.dev/badge/icon-react.svg?logo=ri:FaReact)
![lucide](https://shieldcn.dev/badge/check-passing.svg?logo=lu:Check)

?logo=ri:FaReact

?logo=lu:Check

Custom SVG

Pass your own icon as an inline data: URI (base64 or UTF-8 encoded SVG). The builder's logo uploader generates this for you.

![custom](https://shieldcn.dev/badge/custom-icon.svg?logo=data:image/svg+xml;base64,PHN2Zy4uLg==)

Logo color

For single-color icons, override the fill with ?logoColor= (hex without #):

![colored](https://shieldcn.dev/badge/built%20with-react.svg?logo=react&logoColor=ff0000)

logoColor does not apply to Twemoji or multi-color custom SVGs, which keep their original colors.

In the builder

Both the Badge Builder and Profile Generator include a logo picker and an SVG uploader under the logo control.