# Modal Logo

> Modal logo with icon variant and dark/light modes

A shadcn/ui block from the [@elements](https://www.tryelements.dev) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/elements/modal-logo).

- Page, with a live preview: https://shadcn.exchange/r/elements/modal-logo
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/elements/modal-logo-light-733b7313b497878c.png
- Registry item: https://www.tryelements.dev/r/modal-logo.json
- Categories: logo, brand
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://www.tryelements.dev/r/modal-logo.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Notes from the registry

Modal logo with icon variant and dark/light modes. Uses official brand assets.

## Files

### `registry/default/blocks/logos/modal-logo/components/logos/modal.tsx`

```tsx
interface LogoProps {
  className?: string;
  variant?: "icon";
  mode?: "dark" | "light";
}

export function ModalLogo({
  className,
  variant = "icon",
  mode = "dark",
}: LogoProps) {
  return (
    <svg
      role="img"
      viewBox="0 0 368 192"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      className={className}
    >
      <title>Modal</title>
      <defs>
        <linearGradient
          id="modal-paint0"
          x1="155.803"
          y1="80"
          x2="101.003"
          y2="-14.93"
          gradientUnits="userSpaceOnUse"
        >
          <stop stopColor="#BFF9B4" />
          <stop offset="1" stopColor="#80EE64" />
        </linearGradient>
        <linearGradient
          id="modal-paint1"
          x1="8.62251"
          y1="174.93"
          x2="100.072"
          y2="16.54"
          gradientUnits="userSpaceOnUse"
        >
          <stop stopColor="#80EE64" />
          <stop offset="0.18" stopColor="#7BEB63" />
          <stop offset="0.36" stopColor="#6FE562" />
          <stop offset="0.55" stopColor="#5ADA60" />
          <stop offset="0.74" stopColor="#3DCA5D" />
          <stop offset="0.93" stopColor="#18B759" />
          <stop offset="1" stopColor="#09AF58" />
        </linearGradient>
        <linearGradient
          id="modal-paint2"
          x1="340.243"
          y1="143.46"
          x2="248.793"
          y2="-14.93"
          gradientUnits="userSpaceOnUse"
        >
          <stop stopColor="#BFF9B4" />
          <stop offset="1" stopColor="#80EE64" />
        </linearGradient>
        <linearGradient
          id="modal-paint3"
          x1="284.822"
          y1="175.47"
          x2="193.372"
          y2="17.0701"
          gradientUnits="userSpaceOnUse"
        >
          <stop stopColor="#80EE64" />
          <stop offset="0.18" stopColor="#7BEB63" />
          <stop offset="0.36" stopColor="#6FE562" />
          <stop offset="0.55" stopColor="#5ADA60" />
          <stop offset="0.74" stopColor="#3DCA5D" />
          <stop offset="0.93" stopColor="#18B759" />
          <stop offset="1" stopColor="#09AF58" />
        </linearGradient>
      </defs>
      <path
        d="M148.873 4L183.513 64L111.922 188C110.492 190.47 107.853 192 104.993 192H40.3325C38.9025 192 37.5325 191.62 36.3325 190.93C35.1325 190.24 34.1226 189.24 33.4026 188L1.0725 132C-0.3575 129.53 -0.3575 126.48 1.0725 124L70.3625 4C71.0725 2.76 72.0925 1.76001 73.2925 1.07001C74.4925 0.380007 75.8625 0 77.2925 0H141.952C144.812 0 147.453 1.53 148.883 4H148.873Z"
        fill="#62DE61"
      />
      <path
        d="M365.963 124L296.672 4C295.962 2.76 294.943 1.76001 293.743 1.07001C292.543 0.380007 291.173 0 289.743 0H225.083C222.223 0 219.583 1.53 218.153 4L183.513 64L255.103 188C256.533 190.47 259.173 192 262.033 192H326.693C328.122 192 329.492 191.62 330.693 190.93C331.893 190.24 332.902 189.24 333.622 188L365.953 132C367.383 129.53 367.383 126.48 365.953 124H365.963Z"
        fill="#62DE61"
      />
      <path
        d="M109.623 64H183.523L148.883 4C147.453 1.53 144.813 0 141.953 0H77.2925C75.8625 0 74.4925 0.380007 73.2925 1.07001L109.623 64Z"
        fill="url(#modal-paint0)"
      />
      <path
        d="M109.623 64L73.2925 1.07001C72.0925 1.76001 71.0825 2.76 70.3625 4L1.0725 124C-0.3575 126.48 -0.3575 129.52 1.0725 132L33.4026 188C34.1126 189.24 35.1325 190.24 36.3325 190.93L109.613 64H109.623Z"
        fill="url(#modal-paint1)"
      />
      <path
        d="M183.513 64H109.613L36.3325 190.93C37.5325 191.62 38.9025 192 40.3325 192H104.993C107.853 192 110.492 190.47 111.922 188L183.513 64Z"
        fill="#09AF58"
      />
      <path
        d="M365.963 132C366.673 130.76 367.033 129.38 367.033 128H294.372L258.042 190.93C259.242 191.62 260.612 192 262.042 192H326.703C329.563 192 332.202 190.47 333.632 188L365.963 132Z"
        fill="#09AF58"
      />
      <path
        d="M225.083 0C223.653 0 222.283 0.380007 221.083 1.07001L294.362 128H367.023C367.023 126.62 366.663 125.24 365.953 124L296.672 4C295.242 1.53 292.603 0 289.743 0H225.073H225.083Z"
        fill="url(#modal-paint2)"
      />
      <path
        d="M258.033 190.93L294.362 128L221.083 1.07001C219.883 1.76001 218.873 2.76 218.153 4L183.513 64L255.103 188C255.813 189.24 256.833 190.24 258.033 190.93Z"
        fill="url(#modal-paint3)"
      />
    </svg>
  );
}
```