quay logo

quay from SVG Logos by Gil Barbara · Color · CC0-1.0 Free for personal and commercial use.

Name
quay
Set
SVG Logos
Style
Color
Viewbox
256×236
License
CC0

Use the quay logo

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 236"><path fill="#40b4e5" d="m200.134 0l55.555 117.514l-55.555 117.518h-47.295l55.555-117.518L152.84 0zM110.08 99.836l20.056-38.092l-2.29-8.868L102.847 0H55.552l48.647 102.898zm17.766 74.433l-17.333-39.034l-6.314-3.101l-48.647 102.898h47.295l25-52.88z"/><path fill="#003764" d="M152.842 235.032L97.287 117.514L152.842 0h47.295l-55.555 117.514l55.555 117.518zm-97.287 0L0 117.514L55.555 0h47.296L47.295 117.514l55.556 117.518z"/></svg>

React

import type { SVGProps } from "react";

export function LogosQuay(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 236"><path fill="#40b4e5" d="m200.134 0l55.555 117.514l-55.555 117.518h-47.295l55.555-117.518L152.84 0zM110.08 99.836l20.056-38.092l-2.29-8.868L102.847 0H55.552l48.647 102.898zm17.766 74.433l-17.333-39.034l-6.314-3.101l-48.647 102.898h47.295l25-52.88z"/><path fill="#003764" d="M152.842 235.032L97.287 117.514L152.842 0h47.295l-55.555 117.514l55.555 117.518zm-97.287 0L0 117.514L55.555 0h47.296L47.295 117.514l55.556 117.518z"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 236"><path fill="#40b4e5" d="m200.134 0l55.555 117.514l-55.555 117.518h-47.295l55.555-117.518L152.84 0zM110.08 99.836l20.056-38.092l-2.29-8.868L102.847 0H55.552l48.647 102.898zm17.766 74.433l-17.333-39.034l-6.314-3.101l-48.647 102.898h47.295l25-52.88z"/><path fill="#003764" d="M152.842 235.032L97.287 117.514L152.842 0h47.295l-55.555 117.514l55.555 117.518zm-97.287 0L0 117.514L55.555 0h47.296L47.295 117.514l55.556 117.518z"/></svg>
</template>

CSS

.icon-quay {
  width: 24px;
  height: 24px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%20256%20236%22%3E%3Cpath%20fill%3D%22%2340b4e5%22%20d%3D%22m200.134%200l55.555%20117.514l-55.555%20117.518h-47.295l55.555-117.518L152.84%200zM110.08%2099.836l20.056-38.092l-2.29-8.868L102.847%200H55.552l48.647%20102.898zm17.766%2074.433l-17.333-39.034l-6.314-3.101l-48.647%20102.898h47.295l25-52.88z%22%2F%3E%3Cpath%20fill%3D%22%23003764%22%20d%3D%22M152.842%20235.032L97.287%20117.514L152.842%200h47.295l-55.555%20117.514l55.555%20117.518zm-97.287%200L0%20117.514L55.555%200h47.296L47.295%20117.514l55.556%20117.518z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%20256%20236%22%3E%3Cpath%20fill%3D%22%2340b4e5%22%20d%3D%22m200.134%200l55.555%20117.514l-55.555%20117.518h-47.295l55.555-117.518L152.84%200zM110.08%2099.836l20.056-38.092l-2.29-8.868L102.847%200H55.552l48.647%20102.898zm17.766%2074.433l-17.333-39.034l-6.314-3.101l-48.647%20102.898h47.295l25-52.88z%22%2F%3E%3Cpath%20fill%3D%22%23003764%22%20d%3D%22M152.842%20235.032L97.287%20117.514L152.842%200h47.295l-55.555%20117.514l55.555%20117.518zm-97.287%200L0%20117.514L55.555%200h47.296L47.295%20117.514l55.556%20117.518z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/logos/quay.svg?color=%231a73e8&size=48