google logo

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

Name
google
Set
Material Icon Theme
Style
Color
Viewbox
16×16
License
MIT

The same logo in other sets

google-fillAkar Iconsgoogle-outlinedAnt Design IconsgoogleBootstrap IconsgoogleBoxicons BrandsgoogleCoreUI BrandsgoogleDevicongoogle-fillEva IconsgoogleFont Awesome 6 BrandsgoogleFont Awesome Brandsgoogle-solidFlowbite Iconsgooglecss.gggoogleHuge IconsgoogleIconParkgoogleIconPark OutlinegoogleIconPark SolidgoogleIconPark TwoTonegoogleIconoirgoogleJam IconsgoogleLine AwesomegoogleSVG LogosgoogleMage IconsgoogleMaterial Design Iconsgoogle-fillMingCute IcongoogleMyna UI Icons

Use the google logo

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16"><g fill="none" fill-rule="evenodd" clip-rule="evenodd"><path fill="#f44336" d="M7.209 1.061c.725-.081 1.154-.081 1.933 0a6.57 6.57 0 0 1 3.65 1.82a100 100 0 0 0-1.986 1.93q-1.876-1.59-4.188-.734q-1.696.78-2.362 2.528a78 78 0 0 1-2.148-1.658a.26.26 0 0 0-.16-.027q1.683-3.245 5.26-3.86" opacity=".987"/><path fill="#ffc107" d="M1.946 4.92q.085-.013.161.027a78 78 0 0 0 2.148 1.658A7.6 7.6 0 0 0 4.04 7.99q.037.678.215 1.331L2 11.116Q.527 8.038 1.946 4.92" opacity=".997"/><path fill="#448aff" d="M12.685 13.29a26 26 0 0 0-2.202-1.74q1.15-.812 1.396-2.228H8.122V6.713q3.25-.027 6.497.055q.616 3.345-1.423 6.032a7 7 0 0 1-.51.49" opacity=".999"/><path fill="#43a047" d="M4.255 9.322q1.23 3.057 4.51 2.854a3.94 3.94 0 0 0 1.718-.626q1.148.812 2.202 1.74a6.62 6.62 0 0 1-4.027 1.684a6.4 6.4 0 0 1-1.02 0Q3.82 14.524 2 11.116z" opacity=".993"/></g></svg>

React

import type { SVGProps } from "react";

export function MaterialIconThemeGoogle(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16"><g fill="none" fillRule="evenodd" clipRule="evenodd"><path fill="#f44336" d="M7.209 1.061c.725-.081 1.154-.081 1.933 0a6.57 6.57 0 0 1 3.65 1.82a100 100 0 0 0-1.986 1.93q-1.876-1.59-4.188-.734q-1.696.78-2.362 2.528a78 78 0 0 1-2.148-1.658a.26.26 0 0 0-.16-.027q1.683-3.245 5.26-3.86" opacity=".987"/><path fill="#ffc107" d="M1.946 4.92q.085-.013.161.027a78 78 0 0 0 2.148 1.658A7.6 7.6 0 0 0 4.04 7.99q.037.678.215 1.331L2 11.116Q.527 8.038 1.946 4.92" opacity=".997"/><path fill="#448aff" d="M12.685 13.29a26 26 0 0 0-2.202-1.74q1.15-.812 1.396-2.228H8.122V6.713q3.25-.027 6.497.055q.616 3.345-1.423 6.032a7 7 0 0 1-.51.49" opacity=".999"/><path fill="#43a047" d="M4.255 9.322q1.23 3.057 4.51 2.854a3.94 3.94 0 0 0 1.718-.626q1.148.812 2.202 1.74a6.62 6.62 0 0 1-4.027 1.684a6.4 6.4 0 0 1-1.02 0Q3.82 14.524 2 11.116z" opacity=".993"/></g></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16"><g fill="none" fill-rule="evenodd" clip-rule="evenodd"><path fill="#f44336" d="M7.209 1.061c.725-.081 1.154-.081 1.933 0a6.57 6.57 0 0 1 3.65 1.82a100 100 0 0 0-1.986 1.93q-1.876-1.59-4.188-.734q-1.696.78-2.362 2.528a78 78 0 0 1-2.148-1.658a.26.26 0 0 0-.16-.027q1.683-3.245 5.26-3.86" opacity=".987"/><path fill="#ffc107" d="M1.946 4.92q.085-.013.161.027a78 78 0 0 0 2.148 1.658A7.6 7.6 0 0 0 4.04 7.99q.037.678.215 1.331L2 11.116Q.527 8.038 1.946 4.92" opacity=".997"/><path fill="#448aff" d="M12.685 13.29a26 26 0 0 0-2.202-1.74q1.15-.812 1.396-2.228H8.122V6.713q3.25-.027 6.497.055q.616 3.345-1.423 6.032a7 7 0 0 1-.51.49" opacity=".999"/><path fill="#43a047" d="M4.255 9.322q1.23 3.057 4.51 2.854a3.94 3.94 0 0 0 1.718-.626q1.148.812 2.202 1.74a6.62 6.62 0 0 1-4.027 1.684a6.4 6.4 0 0 1-1.02 0Q3.82 14.524 2 11.116z" opacity=".993"/></g></svg>
</template>

CSS

.icon-google {
  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%2016%2016%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%3E%3Cpath%20fill%3D%22%23f44336%22%20d%3D%22M7.209%201.061c.725-.081%201.154-.081%201.933%200a6.57%206.57%200%200%201%203.65%201.82a100%20100%200%200%200-1.986%201.93q-1.876-1.59-4.188-.734q-1.696.78-2.362%202.528a78%2078%200%200%201-2.148-1.658a.26.26%200%200%200-.16-.027q1.683-3.245%205.26-3.86%22%20opacity%3D%22.987%22%2F%3E%3Cpath%20fill%3D%22%23ffc107%22%20d%3D%22M1.946%204.92q.085-.013.161.027a78%2078%200%200%200%202.148%201.658A7.6%207.6%200%200%200%204.04%207.99q.037.678.215%201.331L2%2011.116Q.527%208.038%201.946%204.92%22%20opacity%3D%22.997%22%2F%3E%3Cpath%20fill%3D%22%23448aff%22%20d%3D%22M12.685%2013.29a26%2026%200%200%200-2.202-1.74q1.15-.812%201.396-2.228H8.122V6.713q3.25-.027%206.497.055q.616%203.345-1.423%206.032a7%207%200%200%201-.51.49%22%20opacity%3D%22.999%22%2F%3E%3Cpath%20fill%3D%22%2343a047%22%20d%3D%22M4.255%209.322q1.23%203.057%204.51%202.854a3.94%203.94%200%200%200%201.718-.626q1.148.812%202.202%201.74a6.62%206.62%200%200%201-4.027%201.684a6.4%206.4%200%200%201-1.02%200Q3.82%2014.524%202%2011.116z%22%20opacity%3D%22.993%22%2F%3E%3C%2Fg%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%2016%2016%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%3E%3Cpath%20fill%3D%22%23f44336%22%20d%3D%22M7.209%201.061c.725-.081%201.154-.081%201.933%200a6.57%206.57%200%200%201%203.65%201.82a100%20100%200%200%200-1.986%201.93q-1.876-1.59-4.188-.734q-1.696.78-2.362%202.528a78%2078%200%200%201-2.148-1.658a.26.26%200%200%200-.16-.027q1.683-3.245%205.26-3.86%22%20opacity%3D%22.987%22%2F%3E%3Cpath%20fill%3D%22%23ffc107%22%20d%3D%22M1.946%204.92q.085-.013.161.027a78%2078%200%200%200%202.148%201.658A7.6%207.6%200%200%200%204.04%207.99q.037.678.215%201.331L2%2011.116Q.527%208.038%201.946%204.92%22%20opacity%3D%22.997%22%2F%3E%3Cpath%20fill%3D%22%23448aff%22%20d%3D%22M12.685%2013.29a26%2026%200%200%200-2.202-1.74q1.15-.812%201.396-2.228H8.122V6.713q3.25-.027%206.497.055q.616%203.345-1.423%206.032a7%207%200%200%201-.51.49%22%20opacity%3D%22.999%22%2F%3E%3Cpath%20fill%3D%22%2343a047%22%20d%3D%22M4.255%209.322q1.23%203.057%204.51%202.854a3.94%203.94%200%200%200%201.718-.626q1.148.812%202.202%201.74a6.62%206.62%200%200%201-4.027%201.684a6.4%206.4%200%200%201-1.02%200Q3.82%2014.524%202%2011.116z%22%20opacity%3D%22.993%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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