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

# Supported Icons

> Browse every supported icon from A to Z with preview images.

## Overview

This directory lists every icon currently available in `supported-icons.json`. Each item below uses the live `/icons/` endpoint for its preview image.

<div data-supported-icons-directory-nav>
  ## Jump To Letter

  [A](#a) · [B](#b) · [C](#c) · [D](#d) · [E](#e) · [F](#f) · [G](#g) · [H](#h) · [I](#i) · [J](#j) · [K](#k) · [L](#l) · [M](#m) · [N](#n) · [O](#o) · [P](#p) · [Q](#q) · [R](#r) · [S](#s) · [T](#t) · [U](#u) · [V](#v) · [W](#w) · [X](#x) · [Y](#y) · [Z](#z)
</div>

<div data-supported-icons-page className="not-prose my-6 space-y-4">
  <div className="rounded-2xl border border-slate-200 bg-white p-4 shadow-sm dark:border-slate-800 dark:bg-slate-950">
    <label htmlFor="supported-icons-search-input" className="mb-2 block text-sm font-medium text-slate-700 dark:text-slate-200">
      Search icons
    </label>

    <input id="supported-icons-search-input" data-supported-icons-input type="search" placeholder="Search by icon name, e.g. Docker, React, Vercel" className="w-full rounded-xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-900 outline-none transition focus:border-slate-400 focus:bg-white dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100 dark:focus:border-slate-500" />

    <p data-supported-icons-summary className="mt-3 text-sm text-slate-600 dark:text-slate-400">415 total icons</p>
    <p className="mt-1 text-xs text-slate-500 dark:text-slate-500">Press <code>Esc</code> to clear the current search.</p>
  </div>

  <div data-supported-icons-empty style={{ display: "none" }} className="rounded-2xl border border-dashed border-slate-300 bg-slate-50 px-4 py-4 text-sm text-slate-600 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-300">
    No icons matched your search. Try a shorter keyword or a different brand name.
  </div>

  <div data-supported-icons-results style={{ display: "none" }} className="space-y-3">
    <h2 className="text-2xl font-semibold text-slate-900 dark:text-slate-100">Search Results</h2>

    <div data-supported-icons-results-list className="space-y-3" />
  </div>
</div>

<div data-supported-icons-directory>
  ## A

  <div className="not-prose space-y-3" data-icon-group="A">
    <div data-icon-item data-icon-name="Ableton-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Ableton-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Ableton-Dark" alt="Ableton-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Ableton-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Ableton-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Ableton-Light" alt="Ableton-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="ActivityPub-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">ActivityPub-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/ActivityPub-Dark" alt="ActivityPub-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="ActivityPub-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">ActivityPub-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/ActivityPub-Light" alt="ActivityPub-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Actix-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Actix-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Actix-Dark" alt="Actix-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Actix-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Actix-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Actix-Light" alt="Actix-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Adonis" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Adonis</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Adonis" alt="Adonis" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="AiScript-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">AiScript-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/AiScript-Dark" alt="AiScript-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="AiScript-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">AiScript-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/AiScript-Light" alt="AiScript-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Alpine.js-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Alpine.js-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Alpine.js-Dark" alt="Alpine.js-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Alpine.js-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Alpine.js-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Alpine.js-Light" alt="Alpine.js-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Amazon_AWS-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Amazon\_AWS-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Amazon_AWS-Dark" alt="Amazon_AWS-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Amazon_AWS-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Amazon\_AWS-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Amazon_AWS-Light" alt="Amazon_AWS-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Anaconda-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Anaconda-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Anaconda-Dark" alt="Anaconda-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Anaconda-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Anaconda-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Anaconda-Light" alt="Anaconda-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="AndroidStudio-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">AndroidStudio-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/AndroidStudio-Dark" alt="AndroidStudio-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="AndroidStudio-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">AndroidStudio-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/AndroidStudio-Light" alt="AndroidStudio-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Angular-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Angular-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Angular-Dark" alt="Angular-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Angular-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Angular-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Angular-Light" alt="Angular-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Ansible" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Ansible</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Ansible" alt="Ansible" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Apollo" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Apollo</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Apollo" alt="Apollo" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Apple-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Apple-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Apple-Dark" alt="Apple-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Apple-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Apple-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Apple-Light" alt="Apple-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Appwrite" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Appwrite</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Appwrite" alt="Appwrite" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Arch-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Arch-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Arch-Dark" alt="Arch-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Arch-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Arch-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Arch-Light" alt="Arch-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Arduino" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Arduino</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Arduino" alt="Arduino" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Astro" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Astro</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Astro" alt="Astro" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Atom" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Atom</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Atom" alt="Atom" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Audition" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Audition</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Audition" alt="Audition" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="AutoCAD-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">AutoCAD-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/AutoCAD-Dark" alt="AutoCAD-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="AutoCAD-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">AutoCAD-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/AutoCAD-Light" alt="AutoCAD-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Azul" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Azul</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Azul" alt="Azul" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Azure-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Azure-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Azure-Dark" alt="Azure-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Azure-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Azure-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Azure-Light" alt="Azure-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>
  </div>

  ## B

  <div className="not-prose space-y-3" data-icon-group="B">
    <div data-icon-item data-icon-name="Babel" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Babel</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Babel" alt="Babel" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Bash-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Bash-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Bash-Dark" alt="Bash-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Bash-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Bash-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Bash-Light" alt="Bash-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Bevy-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Bevy-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Bevy-Dark" alt="Bevy-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Bevy-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Bevy-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Bevy-Light" alt="Bevy-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="BitBucket-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">BitBucket-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/BitBucket-Dark" alt="BitBucket-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="BitBucket-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">BitBucket-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/BitBucket-Light" alt="BitBucket-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Blender-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Blender-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Blender-Dark" alt="Blender-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Blender-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Blender-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Blender-Light" alt="Blender-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Bootstrap" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Bootstrap</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Bootstrap" alt="Bootstrap" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="BSD-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">BSD-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/BSD-Dark" alt="BSD-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="BSD-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">BSD-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/BSD-Light" alt="BSD-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Bun-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Bun-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Bun-Dark" alt="Bun-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Bun-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Bun-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Bun-Light" alt="Bun-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>
  </div>

  ## C

  <div className="not-prose space-y-3" data-icon-group="C">
    <div data-icon-item data-icon-name="C" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">C</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/C" alt="C" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Cassandra-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Cassandra-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Cassandra-Dark" alt="Cassandra-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Cassandra-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Cassandra-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Cassandra-Light" alt="Cassandra-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="CLion-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">CLion-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/CLion-Dark" alt="CLion-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="CLion-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">CLion-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/CLion-Light" alt="CLion-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Clojure-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Clojure-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Clojure-Dark" alt="Clojure-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Clojure-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Clojure-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Clojure-Light" alt="Clojure-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Cloudflare-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Cloudflare-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Cloudflare-Dark" alt="Cloudflare-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Cloudflare-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Cloudflare-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Cloudflare-Light" alt="Cloudflare-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="CMake-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">CMake-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/CMake-Dark" alt="CMake-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="CMake-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">CMake-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/CMake-Light" alt="CMake-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="CodePen-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">CodePen-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/CodePen-Dark" alt="CodePen-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="CodePen-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">CodePen-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/CodePen-Light" alt="CodePen-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="CoffeeScript-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">CoffeeScript-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/CoffeeScript-Dark" alt="CoffeeScript-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="CoffeeScript-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">CoffeeScript-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/CoffeeScript-Light" alt="CoffeeScript-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="CPP" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">CPP</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/CPP" alt="CPP" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Crystal-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Crystal-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Crystal-Dark" alt="Crystal-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Crystal-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Crystal-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Crystal-Light" alt="Crystal-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="CS" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">CS</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/CS" alt="CS" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="CSS" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">CSS</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/CSS" alt="CSS" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Cypress-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Cypress-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Cypress-Dark" alt="Cypress-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Cypress-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Cypress-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Cypress-Light" alt="Cypress-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>
  </div>

  ## D

  <div className="not-prose space-y-3" data-icon-group="D">
    <div data-icon-item data-icon-name="D3-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">D3-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/D3-Dark" alt="D3-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="D3-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">D3-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/D3-Light" alt="D3-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Dart-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Dart-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Dart-Dark" alt="Dart-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Dart-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Dart-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Dart-Light" alt="Dart-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Debian-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Debian-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Debian-Dark" alt="Debian-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Debian-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Debian-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Debian-Light" alt="Debian-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="DENO-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">DENO-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/DENO-Dark" alt="DENO-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="DENO-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">DENO-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/DENO-Light" alt="DENO-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="DevTo-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">DevTo-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/DevTo-Dark" alt="DevTo-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="DevTo-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">DevTo-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/DevTo-Light" alt="DevTo-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Discord" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Discord</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Discord" alt="Discord" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Discord.js-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Discord.js-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Discord.js-Dark" alt="Discord.js-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Discord.js-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Discord.js-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Discord.js-Light" alt="Discord.js-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Discord_Bots" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Discord\_Bots</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Discord_Bots" alt="Discord_Bots" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Django" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Django</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Django" alt="Django" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Docker" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Docker</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Docker" alt="Docker" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="DotNet" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">DotNet</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/DotNet" alt="DotNet" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="DynamoDB-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">DynamoDB-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/DynamoDB-Dark" alt="DynamoDB-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="DynamoDB-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">DynamoDB-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/DynamoDB-Light" alt="DynamoDB-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>
  </div>

  ## E

  <div className="not-prose space-y-3" data-icon-group="E">
    <div data-icon-item data-icon-name="Eclipse-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Eclipse-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Eclipse-Dark" alt="Eclipse-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Eclipse-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Eclipse-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Eclipse-Light" alt="Eclipse-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Elasticsearch-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Elasticsearch-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Elasticsearch-Dark" alt="Elasticsearch-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Elasticsearch-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Elasticsearch-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Elasticsearch-Light" alt="Elasticsearch-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Electron" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Electron</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Electron" alt="Electron" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Elixir-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Elixir-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Elixir-Dark" alt="Elixir-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Elixir-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Elixir-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Elixir-Light" alt="Elixir-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Elysia-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Elysia-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Elysia-Dark" alt="Elysia-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Elysia-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Elysia-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Elysia-Light" alt="Elysia-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Emacs" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Emacs</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Emacs" alt="Emacs" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Ember" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Ember</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Ember" alt="Ember" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Emotion-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Emotion-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Emotion-Dark" alt="Emotion-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Emotion-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Emotion-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Emotion-Light" alt="Emotion-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Express.js-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Express.js-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Express.js-Dark" alt="Express.js-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Express.js-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Express.js-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Express.js-Light" alt="Express.js-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>
  </div>

  ## F

  <div className="not-prose space-y-3" data-icon-group="F">
    <div data-icon-item data-icon-name="FastAPI" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">FastAPI</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/FastAPI" alt="FastAPI" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Fediverse-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Fediverse-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Fediverse-Dark" alt="Fediverse-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Fediverse-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Fediverse-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Fediverse-Light" alt="Fediverse-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Figma-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Figma-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Figma-Dark" alt="Figma-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Figma-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Figma-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Figma-Light" alt="Figma-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Firebase-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Firebase-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Firebase-Dark" alt="Firebase-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Firebase-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Firebase-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Firebase-Light" alt="Firebase-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Flask-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Flask-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Flask-Dark" alt="Flask-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Flask-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Flask-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Flask-Light" alt="Flask-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Flutter-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Flutter-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Flutter-Dark" alt="Flutter-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Flutter-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Flutter-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Flutter-Light" alt="Flutter-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Forth" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Forth</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Forth" alt="Forth" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Fortran" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Fortran</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Fortran" alt="Fortran" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>
  </div>

  ## G

  <div className="not-prose space-y-3" data-icon-group="G">
    <div data-icon-item data-icon-name="GameMaker_Studio" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">GameMaker\_Studio</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/GameMaker_Studio" alt="GameMaker_Studio" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Gatsby" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Gatsby</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Gatsby" alt="Gatsby" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="GCP-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">GCP-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/GCP-Dark" alt="GCP-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="GCP-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">GCP-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/GCP-Light" alt="GCP-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Gherkin-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Gherkin-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Gherkin-Dark" alt="Gherkin-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Gherkin-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Gherkin-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Gherkin-Light" alt="Gherkin-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Git" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Git</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Git" alt="Git" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="GitHub_Actions-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">GitHub\_Actions-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/GitHub_Actions-Dark" alt="GitHub_Actions-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="GitHub_Actions-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">GitHub\_Actions-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/GitHub_Actions-Light" alt="GitHub_Actions-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="GitHub-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">GitHub-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/GitHub-Dark" alt="GitHub-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="GitHub-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">GitHub-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/GitHub-Light" alt="GitHub-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="GitLab-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">GitLab-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/GitLab-Dark" alt="GitLab-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="GitLab-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">GitLab-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/GitLab-Light" alt="GitLab-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Gmail-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Gmail-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Gmail-Dark" alt="Gmail-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Gmail-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Gmail-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Gmail-Light" alt="Gmail-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Globe-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Globe-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Globe-Dark" alt="Globe-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Globe-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Globe-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Globe-Light" alt="Globe-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Godot-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Godot-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Godot-Dark" alt="Godot-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Godot-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Godot-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Godot-Light" alt="Godot-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="GoLang" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">GoLang</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/GoLang" alt="GoLang" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Gradle-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Gradle-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Gradle-Dark" alt="Gradle-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Gradle-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Gradle-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Gradle-Light" alt="Gradle-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Grafana-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Grafana-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Grafana-Dark" alt="Grafana-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Grafana-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Grafana-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Grafana-Light" alt="Grafana-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="GraphQL-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">GraphQL-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/GraphQL-Dark" alt="GraphQL-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="GraphQL-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">GraphQL-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/GraphQL-Light" alt="GraphQL-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="GTK-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">GTK-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/GTK-Dark" alt="GTK-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="GTK-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">GTK-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/GTK-Light" alt="GTK-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Gulp" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Gulp</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Gulp" alt="Gulp" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>
  </div>

  ## H

  <div className="not-prose space-y-3" data-icon-group="H">
    <div data-icon-item data-icon-name="Haskell-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Haskell-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Haskell-Dark" alt="Haskell-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Haskell-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Haskell-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Haskell-Light" alt="Haskell-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Haxe-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Haxe-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Haxe-Dark" alt="Haxe-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Haxe-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Haxe-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Haxe-Light" alt="Haxe-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="HaxeFlixel-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">HaxeFlixel-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/HaxeFlixel-Dark" alt="HaxeFlixel-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="HaxeFlixel-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">HaxeFlixel-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/HaxeFlixel-Light" alt="HaxeFlixel-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Heroku" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Heroku</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Heroku" alt="Heroku" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Hibernate-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Hibernate-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Hibernate-Dark" alt="Hibernate-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Hibernate-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Hibernate-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Hibernate-Light" alt="Hibernate-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="HTML" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">HTML</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/HTML" alt="HTML" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Htmx-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Htmx-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Htmx-Dark" alt="Htmx-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Htmx-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Htmx-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Htmx-Light" alt="Htmx-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>
  </div>

  ## I

  <div className="not-prose space-y-3" data-icon-group="I">
    <div data-icon-item data-icon-name="Idea-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Idea-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Idea-Dark" alt="Idea-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Idea-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Idea-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Idea-Light" alt="Idea-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Illustrator" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Illustrator</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Illustrator" alt="Illustrator" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Instagram" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Instagram</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Instagram" alt="Instagram" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="IPFS-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">IPFS-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/IPFS-Dark" alt="IPFS-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="IPFS-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">IPFS-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/IPFS-Light" alt="IPFS-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>
  </div>

  ## J

  <div className="not-prose space-y-3" data-icon-group="J">
    <div data-icon-item data-icon-name="Java-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Java-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Java-Dark" alt="Java-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Java-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Java-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Java-Light" alt="Java-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="JavaScript" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">JavaScript</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/JavaScript" alt="JavaScript" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Jenkins-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Jenkins-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Jenkins-Dark" alt="Jenkins-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Jenkins-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Jenkins-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Jenkins-Light" alt="Jenkins-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Jest" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Jest</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Jest" alt="Jest" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="JQuery" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">JQuery</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/JQuery" alt="JQuery" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Julia-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Julia-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Julia-Dark" alt="Julia-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Julia-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Julia-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Julia-Light" alt="Julia-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>
  </div>

  ## K

  <div className="not-prose space-y-3" data-icon-group="K">
    <div data-icon-item data-icon-name="Kafka" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Kafka</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Kafka" alt="Kafka" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Kali-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Kali-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Kali-Dark" alt="Kali-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Kali-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Kali-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Kali-Light" alt="Kali-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Kotlin-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Kotlin-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Kotlin-Dark" alt="Kotlin-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Kotlin-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Kotlin-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Kotlin-Light" alt="Kotlin-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Ktor-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Ktor-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Ktor-Dark" alt="Ktor-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Ktor-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Ktor-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Ktor-Light" alt="Ktor-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Kubernetes" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Kubernetes</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Kubernetes" alt="Kubernetes" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>
  </div>

  ## L

  <div className="not-prose space-y-3" data-icon-group="L">
    <div data-icon-item data-icon-name="Laravel-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Laravel-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Laravel-Dark" alt="Laravel-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Laravel-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Laravel-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Laravel-Light" alt="Laravel-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="LaTeX-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">LaTeX-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/LaTeX-Dark" alt="LaTeX-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="LaTeX-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">LaTeX-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/LaTeX-Light" alt="LaTeX-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Less-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Less-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Less-Dark" alt="Less-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Less-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Less-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Less-Light" alt="Less-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="LinkedIn" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">LinkedIn</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/LinkedIn" alt="LinkedIn" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Linux-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Linux-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Linux-Dark" alt="Linux-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Linux-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Linux-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Linux-Light" alt="Linux-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Lit-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Lit-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Lit-Dark" alt="Lit-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Lit-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Lit-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Lit-Light" alt="Lit-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Lua-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Lua-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Lua-Dark" alt="Lua-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Lua-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Lua-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Lua-Light" alt="Lua-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>
  </div>

  ## M

  <div className="not-prose space-y-3" data-icon-group="M">
    <div data-icon-item data-icon-name="Markdown-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Markdown-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Markdown-Dark" alt="Markdown-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Markdown-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Markdown-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Markdown-Light" alt="Markdown-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Mastodon-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Mastodon-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Mastodon-Dark" alt="Mastodon-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Mastodon-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Mastodon-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Mastodon-Light" alt="Mastodon-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Material_UI-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Material\_UI-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Material_UI-Dark" alt="Material_UI-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Material_UI-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Material\_UI-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Material_UI-Light" alt="Material_UI-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Matlab-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Matlab-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Matlab-Dark" alt="Matlab-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Matlab-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Matlab-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Matlab-Light" alt="Matlab-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Maven-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Maven-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Maven-Dark" alt="Maven-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Maven-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Maven-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Maven-Light" alt="Maven-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Mint-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Mint-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Mint-Dark" alt="Mint-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Mint-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Mint-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Mint-Light" alt="Mint-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Misskey-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Misskey-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Misskey-Dark" alt="Misskey-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Misskey-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Misskey-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Misskey-Light" alt="Misskey-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="MongoDB" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">MongoDB</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/MongoDB" alt="MongoDB" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="MySQL-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">MySQL-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/MySQL-Dark" alt="MySQL-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="MySQL-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">MySQL-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/MySQL-Light" alt="MySQL-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>
  </div>

  ## N

  <div className="not-prose space-y-3" data-icon-group="N">
    <div data-icon-item data-icon-name="Neovim-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Neovim-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Neovim-Dark" alt="Neovim-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Neovim-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Neovim-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Neovim-Light" alt="Neovim-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="NestJS-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">NestJS-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/NestJS-Dark" alt="NestJS-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="NestJS-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">NestJS-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/NestJS-Light" alt="NestJS-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Netlify-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Netlify-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Netlify-Dark" alt="Netlify-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Netlify-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Netlify-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Netlify-Light" alt="Netlify-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Next.js-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Next.js-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Next.js-Dark" alt="Next.js-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Next.js-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Next.js-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Next.js-Light" alt="Next.js-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Nginx" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Nginx</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Nginx" alt="Nginx" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Nim-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Nim-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Nim-Dark" alt="Nim-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Nim-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Nim-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Nim-Light" alt="Nim-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Nix-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Nix-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Nix-Dark" alt="Nix-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Nix-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Nix-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Nix-Light" alt="Nix-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Node.js-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Node.js-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Node.js-Dark" alt="Node.js-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Node.js-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Node.js-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Node.js-Light" alt="Node.js-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Notion-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Notion-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Notion-Dark" alt="Notion-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Notion-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Notion-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Notion-Light" alt="Notion-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="NPM-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">NPM-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/NPM-Dark" alt="NPM-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="NPM-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">NPM-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/NPM-Light" alt="NPM-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="NuxtJS-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">NuxtJS-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/NuxtJS-Dark" alt="NuxtJS-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="NuxtJS-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">NuxtJS-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/NuxtJS-Light" alt="NuxtJS-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>
  </div>

  ## O

  <div className="not-prose space-y-3" data-icon-group="O">
    <div data-icon-item data-icon-name="Obsidian-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Obsidian-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Obsidian-Dark" alt="Obsidian-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Obsidian-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Obsidian-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Obsidian-Light" alt="Obsidian-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="OCaml" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">OCaml</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/OCaml" alt="OCaml" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Octave-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Octave-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Octave-Dark" alt="Octave-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Octave-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Octave-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Octave-Light" alt="Octave-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="OpenCV-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">OpenCV-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/OpenCV-Dark" alt="OpenCV-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="OpenCV-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">OpenCV-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/OpenCV-Light" alt="OpenCV-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="OpenShift" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">OpenShift</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/OpenShift" alt="OpenShift" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="OpenStack-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">OpenStack-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/OpenStack-Dark" alt="OpenStack-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="OpenStack-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">OpenStack-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/OpenStack-Light" alt="OpenStack-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>
  </div>

  ## P

  <div className="not-prose space-y-3" data-icon-group="P">
    <div data-icon-item data-icon-name="p5.js" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">p5.js</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/p5.js" alt="p5.js" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Perl" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Perl</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Perl" alt="Perl" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Photoshop" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Photoshop</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Photoshop" alt="Photoshop" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="PHP-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">PHP-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/PHP-Dark" alt="PHP-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="PHP-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">PHP-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/PHP-Light" alt="PHP-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="PhpStorm-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">PhpStorm-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/PhpStorm-Dark" alt="PhpStorm-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="PhpStorm-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">PhpStorm-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/PhpStorm-Light" alt="PhpStorm-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Pinia-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Pinia-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Pinia-Dark" alt="Pinia-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Pinia-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Pinia-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Pinia-Light" alt="Pinia-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Pkl-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Pkl-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Pkl-Dark" alt="Pkl-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Pkl-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Pkl-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Pkl-Light" alt="Pkl-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Plan9-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Plan9-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Plan9-Dark" alt="Plan9-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Plan9-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Plan9-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Plan9-Light" alt="Plan9-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="PlanetScale-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">PlanetScale-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/PlanetScale-Dark" alt="PlanetScale-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="PlanetScale-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">PlanetScale-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/PlanetScale-Light" alt="PlanetScale-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="PNPM-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">PNPM-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/PNPM-Dark" alt="PNPM-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="PNPM-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">PNPM-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/PNPM-Light" alt="PNPM-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="PostgreSQL-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">PostgreSQL-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/PostgreSQL-Dark" alt="PostgreSQL-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="PostgreSQL-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">PostgreSQL-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/PostgreSQL-Light" alt="PostgreSQL-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Postman" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Postman</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Postman" alt="Postman" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Powershell-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Powershell-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Powershell-Dark" alt="Powershell-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Powershell-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Powershell-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Powershell-Light" alt="Powershell-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Premiere" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Premiere</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Premiere" alt="Premiere" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Prisma" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Prisma</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Prisma" alt="Prisma" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Processing-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Processing-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Processing-Dark" alt="Processing-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Processing-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Processing-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Processing-Light" alt="Processing-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Prometheus" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Prometheus</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Prometheus" alt="Prometheus" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Pug-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Pug-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Pug-Dark" alt="Pug-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Pug-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Pug-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Pug-Light" alt="Pug-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="PyCharm-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">PyCharm-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/PyCharm-Dark" alt="PyCharm-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="PyCharm-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">PyCharm-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/PyCharm-Light" alt="PyCharm-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Python-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Python-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Python-Dark" alt="Python-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Python-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Python-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Python-Light" alt="Python-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="PyTorch-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">PyTorch-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/PyTorch-Dark" alt="PyTorch-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="PyTorch-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">PyTorch-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/PyTorch-Light" alt="PyTorch-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Profile_Views-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Profile\_Views-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Profile_Views-Dark" alt="Profile_Views-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Profile_Views-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Profile\_Views-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Profile_Views-Light" alt="Profile_Views-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>
  </div>

  ## Q

  <div className="not-prose space-y-3" data-icon-group="Q">
    <div data-icon-item data-icon-name="QT-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">QT-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/QT-Dark" alt="QT-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="QT-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">QT-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/QT-Light" alt="QT-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>
  </div>

  ## R

  <div className="not-prose space-y-3" data-icon-group="R">
    <div data-icon-item data-icon-name="R-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">R-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/R-Dark" alt="R-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="R-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">R-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/R-Light" alt="R-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="RabbitMQ-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">RabbitMQ-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/RabbitMQ-Dark" alt="RabbitMQ-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="RabbitMQ-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">RabbitMQ-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/RabbitMQ-Light" alt="RabbitMQ-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Rails" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Rails</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Rails" alt="Rails" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="RaspberryPi-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">RaspberryPi-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/RaspberryPi-Dark" alt="RaspberryPi-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="RaspberryPi-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">RaspberryPi-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/RaspberryPi-Light" alt="RaspberryPi-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="React-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">React-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/React-Dark" alt="React-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="React-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">React-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/React-Light" alt="React-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="ReactiveX-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">ReactiveX-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/ReactiveX-Dark" alt="ReactiveX-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="ReactiveX-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">ReactiveX-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/ReactiveX-Light" alt="ReactiveX-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="RedHat-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">RedHat-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/RedHat-Dark" alt="RedHat-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="RedHat-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">RedHat-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/RedHat-Light" alt="RedHat-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Redis-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Redis-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Redis-Dark" alt="Redis-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Redis-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Redis-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Redis-Light" alt="Redis-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Redux" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Redux</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Redux" alt="Redux" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Regex-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Regex-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Regex-Dark" alt="Regex-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Regex-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Regex-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Regex-Light" alt="Regex-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Remix-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Remix-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Remix-Dark" alt="Remix-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Remix-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Remix-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Remix-Light" alt="Remix-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Replit-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Replit-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Replit-Dark" alt="Replit-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Replit-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Replit-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Replit-Light" alt="Replit-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Rider-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Rider-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Rider-Dark" alt="Rider-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Rider-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Rider-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Rider-Light" alt="Rider-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Roblox_Studio-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Roblox\_Studio-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Roblox_Studio-Dark" alt="Roblox_Studio-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Roblox_Studio-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Roblox\_Studio-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Roblox_Studio-Light" alt="Roblox_Studio-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Rocket" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Rocket</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Rocket" alt="Rocket" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Rollup.js-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Rollup.js-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Rollup.js-Dark" alt="Rollup.js-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Rollup.js-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Rollup.js-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Rollup.js-Light" alt="Rollup.js-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="ROS-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">ROS-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/ROS-Dark" alt="ROS-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="ROS-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">ROS-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/ROS-Light" alt="ROS-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Ruby" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Ruby</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Ruby" alt="Ruby" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Rust" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Rust</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Rust" alt="Rust" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>
  </div>

  ## S

  <div className="not-prose space-y-3" data-icon-group="S">
    <div data-icon-item data-icon-name="Sass" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Sass</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Sass" alt="Sass" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Scala-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Scala-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Scala-Dark" alt="Scala-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Scala-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Scala-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Scala-Light" alt="Scala-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Scikit-learn-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Scikit-learn-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Scikit-learn-Dark" alt="Scikit-learn-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Scikit-learn-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Scikit-learn-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Scikit-learn-Light" alt="Scikit-learn-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Selenium" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Selenium</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Selenium" alt="Selenium" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Sentry" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Sentry</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Sentry" alt="Sentry" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Sequelize-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Sequelize-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Sequelize-Dark" alt="Sequelize-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Sequelize-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Sequelize-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Sequelize-Light" alt="Sequelize-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Sketchup-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Sketchup-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Sketchup-Dark" alt="Sketchup-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Sketchup-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Sketchup-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Sketchup-Light" alt="Sketchup-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Solidity" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Solidity</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Solidity" alt="Solidity" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="SolidJS-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">SolidJS-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/SolidJS-Dark" alt="SolidJS-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="SolidJS-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">SolidJS-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/SolidJS-Light" alt="SolidJS-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Spotify-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Spotify-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Spotify-Dark" alt="Spotify-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Spotify-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Spotify-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Spotify-Light" alt="Spotify-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Spring-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Spring-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Spring-Dark" alt="Spring-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Spring-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Spring-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Spring-Light" alt="Spring-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="SQLite-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">SQLite-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/SQLite-Dark" alt="SQLite-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="SQLite-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">SQLite-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/SQLite-Light" alt="SQLite-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Stack_Overflow-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Stack\_Overflow-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Stack_Overflow-Dark" alt="Stack_Overflow-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Stack_Overflow-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Stack\_Overflow-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Stack_Overflow-Light" alt="Stack_Overflow-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Styled_Components" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Styled\_Components</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Styled_Components" alt="Styled_Components" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Sublime-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Sublime-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Sublime-Dark" alt="Sublime-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Sublime-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Sublime-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Sublime-Light" alt="Sublime-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Supabase-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Supabase-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Supabase-Dark" alt="Supabase-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Supabase-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Supabase-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Supabase-Light" alt="Supabase-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Svelte" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Svelte</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Svelte" alt="Svelte" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="SVG-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">SVG-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/SVG-Dark" alt="SVG-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="SVG-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">SVG-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/SVG-Light" alt="SVG-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Swift" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Swift</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Swift" alt="Swift" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Symfony-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Symfony-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Symfony-Dark" alt="Symfony-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Symfony-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Symfony-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Symfony-Light" alt="Symfony-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>
  </div>

  ## T

  <div className="not-prose space-y-3" data-icon-group="T">
    <div data-icon-item data-icon-name="TailwindCSS-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">TailwindCSS-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/TailwindCSS-Dark" alt="TailwindCSS-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="TailwindCSS-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">TailwindCSS-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/TailwindCSS-Light" alt="TailwindCSS-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Tauri-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Tauri-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Tauri-Dark" alt="Tauri-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Tauri-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Tauri-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Tauri-Light" alt="Tauri-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="TensorFlow-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">TensorFlow-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/TensorFlow-Dark" alt="TensorFlow-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="TensorFlow-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">TensorFlow-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/TensorFlow-Light" alt="TensorFlow-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Terraform-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Terraform-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Terraform-Dark" alt="Terraform-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Terraform-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Terraform-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Terraform-Light" alt="Terraform-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Three.js-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Three.js-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Three.js-Dark" alt="Three.js-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Three.js-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Three.js-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Three.js-Light" alt="Three.js-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Twitter" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Twitter</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Twitter" alt="Twitter" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="TypeScript" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">TypeScript</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/TypeScript" alt="TypeScript" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>
  </div>

  ## U

  <div className="not-prose space-y-3" data-icon-group="U">
    <div data-icon-item data-icon-name="Ubuntu-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Ubuntu-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Ubuntu-Dark" alt="Ubuntu-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Ubuntu-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Ubuntu-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Ubuntu-Light" alt="Ubuntu-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Unity-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Unity-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Unity-Dark" alt="Unity-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Unity-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Unity-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Unity-Light" alt="Unity-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Unreal_Engine" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Unreal\_Engine</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Unreal_Engine" alt="Unreal_Engine" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>
  </div>

  ## V

  <div className="not-prose space-y-3" data-icon-group="V">
    <div data-icon-item data-icon-name="V-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">V-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/V-Dark" alt="V-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="V-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">V-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/V-Light" alt="V-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Vala" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Vala</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Vala" alt="Vala" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Vercel-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Vercel-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Vercel-Dark" alt="Vercel-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Vercel-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Vercel-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Vercel-Light" alt="Vercel-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Verilog" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Verilog</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Verilog" alt="Verilog" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="VIM-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">VIM-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/VIM-Dark" alt="VIM-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="VIM-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">VIM-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/VIM-Light" alt="VIM-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Visual_Studio-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Visual\_Studio-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Visual_Studio-Dark" alt="Visual_Studio-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Visual_Studio-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Visual\_Studio-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Visual_Studio-Light" alt="Visual_Studio-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Vite-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Vite-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Vite-Dark" alt="Vite-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Vite-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Vite-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Vite-Light" alt="Vite-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Vitest-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Vitest-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Vitest-Dark" alt="Vitest-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Vitest-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Vitest-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Vitest-Light" alt="Vitest-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="VSCode-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">VSCode-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/VSCode-Dark" alt="VSCode-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="VSCode-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">VSCode-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/VSCode-Light" alt="VSCode-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="VSCodium-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">VSCodium-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/VSCodium-Dark" alt="VSCodium-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="VSCodium-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">VSCodium-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/VSCodium-Light" alt="VSCodium-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Vue.js-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Vue.js-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Vue.js-Dark" alt="Vue.js-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Vue.js-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Vue.js-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Vue.js-Light" alt="Vue.js-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Vuetify-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Vuetify-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Vuetify-Dark" alt="Vuetify-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Vuetify-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Vuetify-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Vuetify-Light" alt="Vuetify-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>
  </div>

  ## W

  <div className="not-prose space-y-3" data-icon-group="W">
    <div data-icon-item data-icon-name="WebAssembly" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">WebAssembly</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/WebAssembly" alt="WebAssembly" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="WebAssembly-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">WebAssembly-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/WebAssembly-Dark" alt="WebAssembly-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="WebAssembly-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">WebAssembly-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/WebAssembly-Light" alt="WebAssembly-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Webflow" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Webflow</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Webflow" alt="Webflow" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Webpack-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Webpack-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Webpack-Dark" alt="Webpack-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Webpack-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Webpack-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Webpack-Light" alt="Webpack-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="WebStorm-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">WebStorm-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/WebStorm-Dark" alt="WebStorm-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="WebStorm-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">WebStorm-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/WebStorm-Light" alt="WebStorm-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Windi_CSS-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Windi\_CSS-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Windi_CSS-Dark" alt="Windi_CSS-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Windi_CSS-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Windi\_CSS-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Windi_CSS-Light" alt="Windi_CSS-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Windows-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Windows-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Windows-Dark" alt="Windows-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Windows-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Windows-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Windows-Light" alt="Windows-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Wordpress" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Wordpress</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Wordpress" alt="Wordpress" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Workers-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Workers-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Workers-Dark" alt="Workers-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Workers-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Workers-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Workers-Light" alt="Workers-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>
  </div>

  ## X

  <div className="not-prose space-y-3" data-icon-group="X">
    <div data-icon-item data-icon-name="X" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">X</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/X" alt="X" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="X-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">X-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/X-Dark" alt="X-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="X-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">X-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/X-Light" alt="X-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="XD" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">XD</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/XD" alt="XD" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>
  </div>

  ## Y

  <div className="not-prose space-y-3" data-icon-group="Y">
    <div data-icon-item data-icon-name="YouTube" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">YouTube</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/YouTube" alt="YouTube" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="YouTube-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">YouTube-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/YouTube-Dark" alt="YouTube-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="YouTube-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">YouTube-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/YouTube-Light" alt="YouTube-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Yarn-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Yarn-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Yarn-Dark" alt="Yarn-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Yarn-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Yarn-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Yarn-Light" alt="Yarn-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Yew-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Yew-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Yew-Dark" alt="Yew-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Yew-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Yew-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Yew-Light" alt="Yew-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>
  </div>

  ## Z

  <div className="not-prose space-y-3" data-icon-group="Z">
    <div data-icon-item data-icon-name="Zig-Dark" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Zig-Dark</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Zig-Dark" alt="Zig-Dark" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>

    <div data-icon-item data-icon-name="Zig-Light" className="flex items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
      <code className="text-sm sm:text-base">Zig-Light</code>

      <div className="flex h-[46px] w-[112px] shrink-0 items-center justify-end overflow-hidden rounded-xl border border-slate-200 bg-slate-50 px-2.5 dark:border-slate-800 dark:bg-slate-900">
        <img src="https://icon.mzrdev.com/icons/Zig-Light" alt="Zig-Light" loading="lazy" decoding="async" style={{ maxHeight: '34px', maxWidth: '88px', width: 'auto', height: 'auto' }} />
      </div>
    </div>
  </div>
</div>