google icon

google from Mage Icons by MageIcons · Outline · Apache-2.0 Free for personal and commercial use.

Name
google
Set
Mage Icons
Style
Outline
Viewbox
24×24
License
Apache 2.0

The same icon 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 LogosgoogleMaterial Icon ThemegoogleMaterial Design Iconsgoogle-fillMingCute IcongoogleMyna UI Icons

Use the google icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21.999 12.044a9.8 9.8 0 0 1-1.323 5.002a9.8 9.8 0 0 1-3.682 3.628a9.97 9.97 0 0 1-4.951 1.348a10 10 0 0 1-4.972-1.36a10.03 10.03 0 0 1-3.64-3.656A10 10 0 0 1 2 12.044c0-1.758.465-3.485 1.345-5.006a10.03 10.03 0 0 1 3.64-3.656a10 10 0 0 1 4.971-1.36c2.407.01 4.73.886 6.545 2.47a.657.657 0 0 1 0 .96l-1.852 1.856a.656.656 0 0 1-.872 0a6.04 6.04 0 0 0-3.734-1.413a6.04 6.04 0 0 0-5.264 3.053a6.14 6.14 0 0 0-.872 3.096a6.1 6.1 0 0 0 .829 3.042a6.04 6.04 0 0 0 5.306 3.01a6.06 6.06 0 0 0 3.036-.82a6.25 6.25 0 0 0 2.605-3.075h-4.564a.645.645 0 0 1-.646-.658v-2.578a.636.636 0 0 1 .646-.647h8.148a.645.645 0 0 1 .646.539q.096.59.086 1.187"/></svg>

React

import type { SVGProps } from "react";

export function MageGoogle(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21.999 12.044a9.8 9.8 0 0 1-1.323 5.002a9.8 9.8 0 0 1-3.682 3.628a9.97 9.97 0 0 1-4.951 1.348a10 10 0 0 1-4.972-1.36a10.03 10.03 0 0 1-3.64-3.656A10 10 0 0 1 2 12.044c0-1.758.465-3.485 1.345-5.006a10.03 10.03 0 0 1 3.64-3.656a10 10 0 0 1 4.971-1.36c2.407.01 4.73.886 6.545 2.47a.657.657 0 0 1 0 .96l-1.852 1.856a.656.656 0 0 1-.872 0a6.04 6.04 0 0 0-3.734-1.413a6.04 6.04 0 0 0-5.264 3.053a6.14 6.14 0 0 0-.872 3.096a6.1 6.1 0 0 0 .829 3.042a6.04 6.04 0 0 0 5.306 3.01a6.06 6.06 0 0 0 3.036-.82a6.25 6.25 0 0 0 2.605-3.075h-4.564a.645.645 0 0 1-.646-.658v-2.578a.636.636 0 0 1 .646-.647h8.148a.645.645 0 0 1 .646.539q.096.59.086 1.187"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21.999 12.044a9.8 9.8 0 0 1-1.323 5.002a9.8 9.8 0 0 1-3.682 3.628a9.97 9.97 0 0 1-4.951 1.348a10 10 0 0 1-4.972-1.36a10.03 10.03 0 0 1-3.64-3.656A10 10 0 0 1 2 12.044c0-1.758.465-3.485 1.345-5.006a10.03 10.03 0 0 1 3.64-3.656a10 10 0 0 1 4.971-1.36c2.407.01 4.73.886 6.545 2.47a.657.657 0 0 1 0 .96l-1.852 1.856a.656.656 0 0 1-.872 0a6.04 6.04 0 0 0-3.734-1.413a6.04 6.04 0 0 0-5.264 3.053a6.14 6.14 0 0 0-.872 3.096a6.1 6.1 0 0 0 .829 3.042a6.04 6.04 0 0 0 5.306 3.01a6.06 6.06 0 0 0 3.036-.82a6.25 6.25 0 0 0 2.605-3.075h-4.564a.645.645 0 0 1-.646-.658v-2.578a.636.636 0 0 1 .646-.647h8.148a.645.645 0 0 1 .646.539q.096.59.086 1.187"/></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%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M21.999%2012.044a9.8%209.8%200%200%201-1.323%205.002a9.8%209.8%200%200%201-3.682%203.628a9.97%209.97%200%200%201-4.951%201.348a10%2010%200%200%201-4.972-1.36a10.03%2010.03%200%200%201-3.64-3.656A10%2010%200%200%201%202%2012.044c0-1.758.465-3.485%201.345-5.006a10.03%2010.03%200%200%201%203.64-3.656a10%2010%200%200%201%204.971-1.36c2.407.01%204.73.886%206.545%202.47a.657.657%200%200%201%200%20.96l-1.852%201.856a.656.656%200%200%201-.872%200a6.04%206.04%200%200%200-3.734-1.413a6.04%206.04%200%200%200-5.264%203.053a6.14%206.14%200%200%200-.872%203.096a6.1%206.1%200%200%200%20.829%203.042a6.04%206.04%200%200%200%205.306%203.01a6.06%206.06%200%200%200%203.036-.82a6.25%206.25%200%200%200%202.605-3.075h-4.564a.645.645%200%200%201-.646-.658v-2.578a.636.636%200%200%201%20.646-.647h8.148a.645.645%200%200%201%20.646.539q.096.59.086%201.187%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%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M21.999%2012.044a9.8%209.8%200%200%201-1.323%205.002a9.8%209.8%200%200%201-3.682%203.628a9.97%209.97%200%200%201-4.951%201.348a10%2010%200%200%201-4.972-1.36a10.03%2010.03%200%200%201-3.64-3.656A10%2010%200%200%201%202%2012.044c0-1.758.465-3.485%201.345-5.006a10.03%2010.03%200%200%201%203.64-3.656a10%2010%200%200%201%204.971-1.36c2.407.01%204.73.886%206.545%202.47a.657.657%200%200%201%200%20.96l-1.852%201.856a.656.656%200%200%201-.872%200a6.04%206.04%200%200%200-3.734-1.413a6.04%206.04%200%200%200-5.264%203.053a6.14%206.14%200%200%200-.872%203.096a6.1%206.1%200%200%200%20.829%203.042a6.04%206.04%200%200%200%205.306%203.01a6.06%206.06%200%200%200%203.036-.82a6.25%206.25%200%200%200%202.605-3.075h-4.564a.645.645%200%200%201-.646-.658v-2.578a.636.636%200%200%201%20.646-.647h8.148a.645.645%200%200%201%20.646.539q.096.59.086%201.187%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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