gcp logo

gcp from Material Icon Theme by Material Extensions · Color · MIT Free for personal and commercial use.

Name
gcp
Set
Material Icon Theme
Style
Color
Viewbox
300×300
License
MIT

The same logo in other sets

gcpCatppuccin Iconsgcp-darkSkill Icons

Use the gcp logo

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 300 300"><path fill="#f44336" d="M184.351 103.816h7.786l22.191-22.191l1.09-9.421a99.743 99.743 0 0 0-162.266 48.664a12.07 12.07 0 0 1 7.786-.467l44.382-7.32s2.258-3.737 3.426-3.503a55.36 55.36 0 0 1 75.76-5.762z"/><path fill="#448aff" d="M245.94 120.868a100 100 0 0 0-30.132-48.587l-31.146 31.146a55.36 55.36 0 0 1 20.323 43.914v5.529a27.72 27.72 0 1 1 0 55.438h-55.439l-5.528 5.606v33.248l5.528 5.528h55.439a72.101 72.101 0 0 0 40.956-131.822z"/><path fill="#43a047" d="M94.03 252.379h55.438v-44.382H94.03a27.6 27.6 0 0 1-11.446-2.492l-7.786 2.414l-22.347 22.19l-1.947 7.787a71.7 71.7 0 0 0 43.526 14.483"/><path fill="#ffc107" d="M94.03 108.41a72.101 72.101 0 0 0-43.526 129.252l32.158-32.157a27.72 27.72 0 1 1 36.673-36.673l32.158-32.158A72.02 72.02 0 0 0 94.03 108.41"/></svg>

React

import type { SVGProps } from "react";

export function MaterialIconThemeGcp(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 300 300"><path fill="#f44336" d="M184.351 103.816h7.786l22.191-22.191l1.09-9.421a99.743 99.743 0 0 0-162.266 48.664a12.07 12.07 0 0 1 7.786-.467l44.382-7.32s2.258-3.737 3.426-3.503a55.36 55.36 0 0 1 75.76-5.762z"/><path fill="#448aff" d="M245.94 120.868a100 100 0 0 0-30.132-48.587l-31.146 31.146a55.36 55.36 0 0 1 20.323 43.914v5.529a27.72 27.72 0 1 1 0 55.438h-55.439l-5.528 5.606v33.248l5.528 5.528h55.439a72.101 72.101 0 0 0 40.956-131.822z"/><path fill="#43a047" d="M94.03 252.379h55.438v-44.382H94.03a27.6 27.6 0 0 1-11.446-2.492l-7.786 2.414l-22.347 22.19l-1.947 7.787a71.7 71.7 0 0 0 43.526 14.483"/><path fill="#ffc107" d="M94.03 108.41a72.101 72.101 0 0 0-43.526 129.252l32.158-32.157a27.72 27.72 0 1 1 36.673-36.673l32.158-32.158A72.02 72.02 0 0 0 94.03 108.41"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 300 300"><path fill="#f44336" d="M184.351 103.816h7.786l22.191-22.191l1.09-9.421a99.743 99.743 0 0 0-162.266 48.664a12.07 12.07 0 0 1 7.786-.467l44.382-7.32s2.258-3.737 3.426-3.503a55.36 55.36 0 0 1 75.76-5.762z"/><path fill="#448aff" d="M245.94 120.868a100 100 0 0 0-30.132-48.587l-31.146 31.146a55.36 55.36 0 0 1 20.323 43.914v5.529a27.72 27.72 0 1 1 0 55.438h-55.439l-5.528 5.606v33.248l5.528 5.528h55.439a72.101 72.101 0 0 0 40.956-131.822z"/><path fill="#43a047" d="M94.03 252.379h55.438v-44.382H94.03a27.6 27.6 0 0 1-11.446-2.492l-7.786 2.414l-22.347 22.19l-1.947 7.787a71.7 71.7 0 0 0 43.526 14.483"/><path fill="#ffc107" d="M94.03 108.41a72.101 72.101 0 0 0-43.526 129.252l32.158-32.157a27.72 27.72 0 1 1 36.673-36.673l32.158-32.158A72.02 72.02 0 0 0 94.03 108.41"/></svg>
</template>

CSS

.icon-gcp {
  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%20300%20300%22%3E%3Cpath%20fill%3D%22%23f44336%22%20d%3D%22M184.351%20103.816h7.786l22.191-22.191l1.09-9.421a99.743%2099.743%200%200%200-162.266%2048.664a12.07%2012.07%200%200%201%207.786-.467l44.382-7.32s2.258-3.737%203.426-3.503a55.36%2055.36%200%200%201%2075.76-5.762z%22%2F%3E%3Cpath%20fill%3D%22%23448aff%22%20d%3D%22M245.94%20120.868a100%20100%200%200%200-30.132-48.587l-31.146%2031.146a55.36%2055.36%200%200%201%2020.323%2043.914v5.529a27.72%2027.72%200%201%201%200%2055.438h-55.439l-5.528%205.606v33.248l5.528%205.528h55.439a72.101%2072.101%200%200%200%2040.956-131.822z%22%2F%3E%3Cpath%20fill%3D%22%2343a047%22%20d%3D%22M94.03%20252.379h55.438v-44.382H94.03a27.6%2027.6%200%200%201-11.446-2.492l-7.786%202.414l-22.347%2022.19l-1.947%207.787a71.7%2071.7%200%200%200%2043.526%2014.483%22%2F%3E%3Cpath%20fill%3D%22%23ffc107%22%20d%3D%22M94.03%20108.41a72.101%2072.101%200%200%200-43.526%20129.252l32.158-32.157a27.72%2027.72%200%201%201%2036.673-36.673l32.158-32.158A72.02%2072.02%200%200%200%2094.03%20108.41%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%20300%20300%22%3E%3Cpath%20fill%3D%22%23f44336%22%20d%3D%22M184.351%20103.816h7.786l22.191-22.191l1.09-9.421a99.743%2099.743%200%200%200-162.266%2048.664a12.07%2012.07%200%200%201%207.786-.467l44.382-7.32s2.258-3.737%203.426-3.503a55.36%2055.36%200%200%201%2075.76-5.762z%22%2F%3E%3Cpath%20fill%3D%22%23448aff%22%20d%3D%22M245.94%20120.868a100%20100%200%200%200-30.132-48.587l-31.146%2031.146a55.36%2055.36%200%200%201%2020.323%2043.914v5.529a27.72%2027.72%200%201%201%200%2055.438h-55.439l-5.528%205.606v33.248l5.528%205.528h55.439a72.101%2072.101%200%200%200%2040.956-131.822z%22%2F%3E%3Cpath%20fill%3D%22%2343a047%22%20d%3D%22M94.03%20252.379h55.438v-44.382H94.03a27.6%2027.6%200%200%201-11.446-2.492l-7.786%202.414l-22.347%2022.19l-1.947%207.787a71.7%2071.7%200%200%200%2043.526%2014.483%22%2F%3E%3Cpath%20fill%3D%22%23ffc107%22%20d%3D%22M94.03%20108.41a72.101%2072.101%200%200%200-43.526%20129.252l32.158-32.157a27.72%2027.72%200%201%201%2036.673-36.673l32.158-32.158A72.02%2072.02%200%200%200%2094.03%20108.41%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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