Custom Badges

Overview

Custom Badges allow you to create stylish labels with built-in support for our premium logo set.

Badge vs Logo Icons: The badge endpoint on this page wraps icons inside a badge-style container. If you only need the raw icon as a transparent SVG, see the Logo Icons page.

Visual Examples

Badge Styles

Select a style to see the layout differences.

Icon-Text
Icon Only
Flat (Default)

![](https://icon.mzrdev.com/badge?icon=Globe&text=My%20Links&height=50)

![](https://icon.mzrdev.com/badge?icon=Vercel&style=icon)

style=icon modu ikonu kurumsal renkli bir rozet (badge) içine yerleştirir. Sadece ikonu almak için /icons/Vercel yolunu kullanın.

![](https://icon.mzrdev.com/badge?label=Status&message=Online&color=22c55e)

Advanced Customization

Fine-tune your badges with custom colors, sizing, and corner radius.

Custom Colors
Corner Radius

![](https://icon.mzrdev.com/badge?icon=React&text=Documentation&color=ffffff&textColor=000000)

![](https://icon.mzrdev.com/badge?icon=Discord&text=Join%20Us&radius=0&textColor=ffffff)

Dynamic badges for your GitHub activity.

Profile Views
Followers

![](https://icon.mzrdev.com/social?variant=profile-views&username=MZRCode)

![](https://icon.mzrdev.com/social?variant=github-followers&username=MZRCode)

Customization Options

Parameter	Description
`style`	`icon`, `icon-text`, or `flat` (default)
`icon`	Logo name (e.g., `React`, `TypeScript`)
`text` / `message`	The main text to display
`label`	The left-side label
`color`	Main background color (hex)
`labelColor`	Label background color (hex)
`radius`	Corner radius
`height`	Badge height (default 48)

Get Started

Core Components

Resources

Overview

Visual Examples

Badge Styles

Advanced Customization

Customization Options

​Overview

​Visual Examples

​Badge Styles

​Advanced Customization

​Social Stats

​Customization Options

Overview

Visual Examples

Badge Styles

Advanced Customization

Social Stats

Customization Options