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

# Logo Icons

> Display your tech stack with beautiful, high-quality logos.

## Overview

Logo Icons provides access to over 400 professionally designed tech logos. You can use them individually or as stylish badges.

## Visual Examples

### Dark vs Light Variants

Select a variant to see how it matches your background.

<Tabs>
  <Tab title="Dark Variant">
    ```markdown theme={null}
    ![](https://icon.mzrdev.com/icons/React-Dark)
    ```

    <div className="flex flex-row items-center justify-center gap-6 border border-slate-200 dark:border-slate-800 rounded-xl">
      <img src="https://icon.mzrdev.com/icons/React-Dark" width="128" alt="React Dark" />
    </div>
  </Tab>

  <Tab title="Light Variant">
    ```markdown theme={null}
    ![](https://icon.mzrdev.com/icons/React-Light)
    ```

    <div className="flex flex-row items-center justify-center gap-6 border border-slate-200 dark:border-slate-800 rounded-xl">
      <img src="https://icon.mzrdev.com/icons/React-Light" width="128" alt="React Light" />
    </div>
  </Tab>
</Tabs>

### Icon Badges

Wrap logos in a styled badge with custom colors.

<Tabs>
  <Tab title="TypeScript">
    ```markdown theme={null}
    ![](https://icon.mzrdev.com/badge?icon=TypeScript&color=3178c6)
    ```

    <div className="flex justify-center border border-slate-200 dark:border-slate-800 rounded-xl">
      <img src="https://icon.mzrdev.com/badge?icon=TypeScript&color=3178c6" alt="TS Badge" />
    </div>
  </Tab>

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

    <div className="flex justify-center border border-slate-200 dark:border-slate-800 rounded-xl">
      <img src="https://icon.mzrdev.com/badge?icon=JavaScript" alt="JS Badge" />
    </div>
  </Tab>
</Tabs>

## Usage

### Individual Logos

Use the `/icons/` path followed by the icon name to get the raw SVG.

<CardGroup cols={2}>
  <Card title="🌙 Raw Logo (Dark)">
    ```text theme={null}
    https://icon.mzrdev.com/icons/Python-Dark
    ```

    <div className="mt-4 flex justify-center">
      <img src="https://icon.mzrdev.com/icons/Python-Dark" width="128" alt="Python" />
    </div>
  </Card>

  <Card title="☀️ Raw Logo (Light)">
    ```text theme={null}
    https://icon.mzrdev.com/icons/Python-Light
    ```

    <div className="mt-4 flex justify-center">
      <img src="https://icon.mzrdev.com/icons/Python-Light" width="128" alt="Python" />
    </div>
  </Card>
</CardGroup>

### Logo Badges

Use the `/badge` endpoint with `style=icon` to generate standard logo badges.

<CardGroup cols={2}>
  <Card title="🎨 Custom Color">
    ```text theme={null}
    https://icon.mzrdev.com/badge?icon=Vercel&style=icon&color=000000
    ```

    <div className="mt-4 flex justify-center">
      <img src="https://icon.mzrdev.com/badge?icon=Vercel&style=icon&color=000000" alt="Vercel" />
    </div>
  </Card>

  <Card title="🏷️ Icon-Text Badge">
    ```text theme={null}
    https://icon.mzrdev.com/badge?icon=React&text=My%20Links
    ```

    <div className="mt-4 flex justify-center">
      <img src="https://icon.mzrdev.com/badge?icon=React&text=My%20Links" alt="React" />
    </div>
  </Card>
</CardGroup>

## Supported Icons

Browse the full directory on the dedicated [Supported Icons](/docs/supported-icons) page. It groups every icon from A to Z and shows a live preview for each entry.

<CardGroup cols={1}>
  <Card title="Open Supported Icons Directory" icon="search" href="/docs/supported-icons">
    Explore the full A-Z index with preview images for every supported icon.
  </Card>
</CardGroup>