> ## Documentation Index
> Fetch the complete documentation index at: https://icons.mzrdev.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Custom Badges

> Create custom badges with icons and text.

## Overview

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

<Note>
  **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](/docs/components/logo-icons) page.
</Note>

## Visual Examples

### Badge Styles

Select a style to see the layout differences.

<Tabs>
  <Tab title="Icon-Text">
    ```markdown theme={null}
    ![](https://icon.mzrdev.com/badge?icon=Globe&text=My%20Links&height=50)
    ```

    <Frame>
      <img src="https://icon.mzrdev.com/badge?icon=Globe&text=My%20Links&height=50" alt="Icon-Text Badge" />
    </Frame>
  </Tab>

  <Tab title="Icon Only">
    ```markdown theme={null}
    ![](https://icon.mzrdev.com/badge?icon=Vercel&style=icon)
    ```

    <Frame>
      <img src="https://icon.mzrdev.com/badge?icon=Vercel&style=icon" alt="Icon Only Badge" />
    </Frame>

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

  <Tab title="Flat (Default)">
    ```markdown theme={null}
    ![](https://icon.mzrdev.com/badge?label=Status&message=Online&color=22c55e)
    ```

    <Frame>
      <img src="https://icon.mzrdev.com/badge?label=Status&message=Online&color=22c55e" alt="Standard Badge" />
    </Frame>
  </Tab>
</Tabs>

### Advanced Customization

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

<Tabs>
  <Tab title="Custom Colors">
    ```markdown theme={null}
    ![](https://icon.mzrdev.com/badge?icon=React&text=Documentation&color=ffffff&textColor=000000)
    ```

    <Frame>
      <img src="https://icon.mzrdev.com/badge?icon=React&text=Documentation&color=ffffff&textColor=000000" alt="Custom Colors" />
    </Frame>
  </Tab>

  <Tab title="Corner Radius">
    ```markdown theme={null}
    ![](https://icon.mzrdev.com/badge?icon=Discord&text=Join%20Us&radius=0&textColor=ffffff)
    ```

    <Frame>
      <img src="https://icon.mzrdev.com/badge?icon=Discord&text=Join%20Us&radius=0&textColor=ffffff" alt="Square Corners" />
    </Frame>
  </Tab>
</Tabs>

### Social Stats

Dynamic badges for your GitHub activity.

<Tabs>
  <Tab title="Profile Views">
    ```markdown theme={null}
    ![](https://icon.mzrdev.com/social?variant=profile-views&username=MZRCode)
    ```

    <Frame>
      <img src="https://icon.mzrdev.com/social?variant=profile-views&username=MZRCode" alt="Views" />
    </Frame>
  </Tab>

  <Tab title="Followers">
    ```markdown theme={null}
    ![](https://icon.mzrdev.com/social?variant=github-followers&username=MZRCode)
    ```

    <Frame>
      <img src="https://icon.mzrdev.com/social?variant=github-followers&username=MZRCode" alt="Followers" />
    </Frame>
  </Tab>
</Tabs>

## 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)                |