google logo
google-brand-color from LobeHub AI Icons by LobeHub · Brand color · MIT Free for personal and commercial use.
- Name
- google-brand-color
- Set
- LobeHub AI Icons
- Style
- Brand color
- Viewbox
- 77×24
- License
- MIT
3 other variants in LobeHub AI Icons
The same logo in other sets
All google icons →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 Icon ThemegoogleMaterial Design Iconsgoogle-fillMingCute Icon
Use the google logo
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 77 24"><path fill="#4285f4" d="M19.947 8.482H11.43v2.536h6.041c-.298 3.557-3.247 5.074-6.03 5.074-3.562 0-6.67-2.812-6.67-6.753 0-3.839 2.963-6.795 6.677-6.795 2.866 0 4.555 1.833 4.555 1.833l1.77-1.84S15.5 0 11.357 0C6.081 0 2 4.468 2 9.294c0 4.729 3.84 9.34 9.491 9.34 4.972 0 8.61-3.417 8.61-8.47 0-1.067-.154-1.683-.154-1.683"/><path fill="#eb4335" d="M26.96 8.997c1.719 0 3.347 1.395 3.347 3.642 0 2.199-1.621 3.633-3.355 3.633-1.905 0-3.408-1.53-3.408-3.65 0-2.075 1.485-3.625 3.416-3.625zm-.035-2.352c-3.495 0-6 2.742-6 5.94 0 3.245 2.43 6.038 6.041 6.038 3.27 0 5.948-2.508 5.948-5.968 0-3.967-3.116-6.01-5.989-6.01z"/><path fill="#fbbc05" d="M40.01 8.997c1.718 0 3.347 1.395 3.347 3.642 0 2.199-1.622 3.633-3.356 3.633-1.904 0-3.407-1.53-3.407-3.65 0-2.075 1.484-3.625 3.415-3.625zm-.035-2.352c-3.496 0-6 2.742-6 5.94 0 3.245 2.43 6.038 6.04 6.038 3.27 0 5.949-2.508 5.949-5.968 0-3.967-3.116-6.01-5.99-6.01z"/><path fill="#4285f4" d="M53.006 9c1.573 0 3.188 1.347 3.188 3.648 0 2.34-1.611 3.629-3.222 3.629-1.71 0-3.302-1.394-3.302-3.607 0-2.299 1.652-3.67 3.336-3.67zm-.232-2.349c-3.208 0-5.73 2.82-5.73 5.984 0 3.605 2.924 5.996 5.675 5.996 1.7 0 2.605-.678 3.273-1.455v1.18c0 2.067-1.25 3.304-3.137 3.304-1.824 0-2.738-1.36-3.056-2.132l-2.293.962c.813 1.726 2.451 3.527 5.368 3.527 3.19 0 5.62-2.016 5.62-6.244V7.012h-2.502v1.014c-.77-.832-1.821-1.375-3.218-1.375z"/><path fill="#eb4335" d="M69.725 8.94c1.09 0 1.875.582 2.209 1.28l-5.345 2.241c-.23-1.735 1.408-3.52 3.136-3.52zm-.104-2.303c-3.026 0-5.567 2.416-5.567 5.981 0 3.772 2.832 6.01 5.858 6.01 2.525 0 4.075-1.387 5-2.629l-2.063-1.377c-.536.833-1.43 1.648-2.925 1.648-1.678 0-2.45-.922-2.927-1.815L75 11.123l-.415-.976c-.774-1.913-2.577-3.51-4.964-3.51z"/><path fill="#34a853" d="M60.239 18.272h2.628V.62H60.24z"/></svg>
React
import type { SVGProps } from "react";
export function LobehubGoogleBrandColor(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 77 24"><path fill="#4285f4" d="M19.947 8.482H11.43v2.536h6.041c-.298 3.557-3.247 5.074-6.03 5.074-3.562 0-6.67-2.812-6.67-6.753 0-3.839 2.963-6.795 6.677-6.795 2.866 0 4.555 1.833 4.555 1.833l1.77-1.84S15.5 0 11.357 0C6.081 0 2 4.468 2 9.294c0 4.729 3.84 9.34 9.491 9.34 4.972 0 8.61-3.417 8.61-8.47 0-1.067-.154-1.683-.154-1.683"/><path fill="#eb4335" d="M26.96 8.997c1.719 0 3.347 1.395 3.347 3.642 0 2.199-1.621 3.633-3.355 3.633-1.905 0-3.408-1.53-3.408-3.65 0-2.075 1.485-3.625 3.416-3.625zm-.035-2.352c-3.495 0-6 2.742-6 5.94 0 3.245 2.43 6.038 6.041 6.038 3.27 0 5.948-2.508 5.948-5.968 0-3.967-3.116-6.01-5.989-6.01z"/><path fill="#fbbc05" d="M40.01 8.997c1.718 0 3.347 1.395 3.347 3.642 0 2.199-1.622 3.633-3.356 3.633-1.904 0-3.407-1.53-3.407-3.65 0-2.075 1.484-3.625 3.415-3.625zm-.035-2.352c-3.496 0-6 2.742-6 5.94 0 3.245 2.43 6.038 6.04 6.038 3.27 0 5.949-2.508 5.949-5.968 0-3.967-3.116-6.01-5.99-6.01z"/><path fill="#4285f4" d="M53.006 9c1.573 0 3.188 1.347 3.188 3.648 0 2.34-1.611 3.629-3.222 3.629-1.71 0-3.302-1.394-3.302-3.607 0-2.299 1.652-3.67 3.336-3.67zm-.232-2.349c-3.208 0-5.73 2.82-5.73 5.984 0 3.605 2.924 5.996 5.675 5.996 1.7 0 2.605-.678 3.273-1.455v1.18c0 2.067-1.25 3.304-3.137 3.304-1.824 0-2.738-1.36-3.056-2.132l-2.293.962c.813 1.726 2.451 3.527 5.368 3.527 3.19 0 5.62-2.016 5.62-6.244V7.012h-2.502v1.014c-.77-.832-1.821-1.375-3.218-1.375z"/><path fill="#eb4335" d="M69.725 8.94c1.09 0 1.875.582 2.209 1.28l-5.345 2.241c-.23-1.735 1.408-3.52 3.136-3.52zm-.104-2.303c-3.026 0-5.567 2.416-5.567 5.981 0 3.772 2.832 6.01 5.858 6.01 2.525 0 4.075-1.387 5-2.629l-2.063-1.377c-.536.833-1.43 1.648-2.925 1.648-1.678 0-2.45-.922-2.927-1.815L75 11.123l-.415-.976c-.774-1.913-2.577-3.51-4.964-3.51z"/><path fill="#34a853" d="M60.239 18.272h2.628V.62H60.24z"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 77 24"><path fill="#4285f4" d="M19.947 8.482H11.43v2.536h6.041c-.298 3.557-3.247 5.074-6.03 5.074-3.562 0-6.67-2.812-6.67-6.753 0-3.839 2.963-6.795 6.677-6.795 2.866 0 4.555 1.833 4.555 1.833l1.77-1.84S15.5 0 11.357 0C6.081 0 2 4.468 2 9.294c0 4.729 3.84 9.34 9.491 9.34 4.972 0 8.61-3.417 8.61-8.47 0-1.067-.154-1.683-.154-1.683"/><path fill="#eb4335" d="M26.96 8.997c1.719 0 3.347 1.395 3.347 3.642 0 2.199-1.621 3.633-3.355 3.633-1.905 0-3.408-1.53-3.408-3.65 0-2.075 1.485-3.625 3.416-3.625zm-.035-2.352c-3.495 0-6 2.742-6 5.94 0 3.245 2.43 6.038 6.041 6.038 3.27 0 5.948-2.508 5.948-5.968 0-3.967-3.116-6.01-5.989-6.01z"/><path fill="#fbbc05" d="M40.01 8.997c1.718 0 3.347 1.395 3.347 3.642 0 2.199-1.622 3.633-3.356 3.633-1.904 0-3.407-1.53-3.407-3.65 0-2.075 1.484-3.625 3.415-3.625zm-.035-2.352c-3.496 0-6 2.742-6 5.94 0 3.245 2.43 6.038 6.04 6.038 3.27 0 5.949-2.508 5.949-5.968 0-3.967-3.116-6.01-5.99-6.01z"/><path fill="#4285f4" d="M53.006 9c1.573 0 3.188 1.347 3.188 3.648 0 2.34-1.611 3.629-3.222 3.629-1.71 0-3.302-1.394-3.302-3.607 0-2.299 1.652-3.67 3.336-3.67zm-.232-2.349c-3.208 0-5.73 2.82-5.73 5.984 0 3.605 2.924 5.996 5.675 5.996 1.7 0 2.605-.678 3.273-1.455v1.18c0 2.067-1.25 3.304-3.137 3.304-1.824 0-2.738-1.36-3.056-2.132l-2.293.962c.813 1.726 2.451 3.527 5.368 3.527 3.19 0 5.62-2.016 5.62-6.244V7.012h-2.502v1.014c-.77-.832-1.821-1.375-3.218-1.375z"/><path fill="#eb4335" d="M69.725 8.94c1.09 0 1.875.582 2.209 1.28l-5.345 2.241c-.23-1.735 1.408-3.52 3.136-3.52zm-.104-2.303c-3.026 0-5.567 2.416-5.567 5.981 0 3.772 2.832 6.01 5.858 6.01 2.525 0 4.075-1.387 5-2.629l-2.063-1.377c-.536.833-1.43 1.648-2.925 1.648-1.678 0-2.45-.922-2.927-1.815L75 11.123l-.415-.976c-.774-1.913-2.577-3.51-4.964-3.51z"/><path fill="#34a853" d="M60.239 18.272h2.628V.62H60.24z"/></svg> </template>
CSS
.icon-google-brand-color {
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%2077%2024%22%3E%3Cpath%20fill%3D%22%234285f4%22%20d%3D%22M19.947%208.482H11.43v2.536h6.041c-.298%203.557-3.247%205.074-6.03%205.074-3.562%200-6.67-2.812-6.67-6.753%200-3.839%202.963-6.795%206.677-6.795%202.866%200%204.555%201.833%204.555%201.833l1.77-1.84S15.5%200%2011.357%200C6.081%200%202%204.468%202%209.294c0%204.729%203.84%209.34%209.491%209.34%204.972%200%208.61-3.417%208.61-8.47%200-1.067-.154-1.683-.154-1.683%22%2F%3E%3Cpath%20fill%3D%22%23eb4335%22%20d%3D%22M26.96%208.997c1.719%200%203.347%201.395%203.347%203.642%200%202.199-1.621%203.633-3.355%203.633-1.905%200-3.408-1.53-3.408-3.65%200-2.075%201.485-3.625%203.416-3.625zm-.035-2.352c-3.495%200-6%202.742-6%205.94%200%203.245%202.43%206.038%206.041%206.038%203.27%200%205.948-2.508%205.948-5.968%200-3.967-3.116-6.01-5.989-6.01z%22%2F%3E%3Cpath%20fill%3D%22%23fbbc05%22%20d%3D%22M40.01%208.997c1.718%200%203.347%201.395%203.347%203.642%200%202.199-1.622%203.633-3.356%203.633-1.904%200-3.407-1.53-3.407-3.65%200-2.075%201.484-3.625%203.415-3.625zm-.035-2.352c-3.496%200-6%202.742-6%205.94%200%203.245%202.43%206.038%206.04%206.038%203.27%200%205.949-2.508%205.949-5.968%200-3.967-3.116-6.01-5.99-6.01z%22%2F%3E%3Cpath%20fill%3D%22%234285f4%22%20d%3D%22M53.006%209c1.573%200%203.188%201.347%203.188%203.648%200%202.34-1.611%203.629-3.222%203.629-1.71%200-3.302-1.394-3.302-3.607%200-2.299%201.652-3.67%203.336-3.67zm-.232-2.349c-3.208%200-5.73%202.82-5.73%205.984%200%203.605%202.924%205.996%205.675%205.996%201.7%200%202.605-.678%203.273-1.455v1.18c0%202.067-1.25%203.304-3.137%203.304-1.824%200-2.738-1.36-3.056-2.132l-2.293.962c.813%201.726%202.451%203.527%205.368%203.527%203.19%200%205.62-2.016%205.62-6.244V7.012h-2.502v1.014c-.77-.832-1.821-1.375-3.218-1.375z%22%2F%3E%3Cpath%20fill%3D%22%23eb4335%22%20d%3D%22M69.725%208.94c1.09%200%201.875.582%202.209%201.28l-5.345%202.241c-.23-1.735%201.408-3.52%203.136-3.52zm-.104-2.303c-3.026%200-5.567%202.416-5.567%205.981%200%203.772%202.832%206.01%205.858%206.01%202.525%200%204.075-1.387%205-2.629l-2.063-1.377c-.536.833-1.43%201.648-2.925%201.648-1.678%200-2.45-.922-2.927-1.815L75%2011.123l-.415-.976c-.774-1.913-2.577-3.51-4.964-3.51z%22%2F%3E%3Cpath%20fill%3D%22%2334a853%22%20d%3D%22M60.239%2018.272h2.628V.62H60.24z%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%2077%2024%22%3E%3Cpath%20fill%3D%22%234285f4%22%20d%3D%22M19.947%208.482H11.43v2.536h6.041c-.298%203.557-3.247%205.074-6.03%205.074-3.562%200-6.67-2.812-6.67-6.753%200-3.839%202.963-6.795%206.677-6.795%202.866%200%204.555%201.833%204.555%201.833l1.77-1.84S15.5%200%2011.357%200C6.081%200%202%204.468%202%209.294c0%204.729%203.84%209.34%209.491%209.34%204.972%200%208.61-3.417%208.61-8.47%200-1.067-.154-1.683-.154-1.683%22%2F%3E%3Cpath%20fill%3D%22%23eb4335%22%20d%3D%22M26.96%208.997c1.719%200%203.347%201.395%203.347%203.642%200%202.199-1.621%203.633-3.355%203.633-1.905%200-3.408-1.53-3.408-3.65%200-2.075%201.485-3.625%203.416-3.625zm-.035-2.352c-3.495%200-6%202.742-6%205.94%200%203.245%202.43%206.038%206.041%206.038%203.27%200%205.948-2.508%205.948-5.968%200-3.967-3.116-6.01-5.989-6.01z%22%2F%3E%3Cpath%20fill%3D%22%23fbbc05%22%20d%3D%22M40.01%208.997c1.718%200%203.347%201.395%203.347%203.642%200%202.199-1.622%203.633-3.356%203.633-1.904%200-3.407-1.53-3.407-3.65%200-2.075%201.484-3.625%203.415-3.625zm-.035-2.352c-3.496%200-6%202.742-6%205.94%200%203.245%202.43%206.038%206.04%206.038%203.27%200%205.949-2.508%205.949-5.968%200-3.967-3.116-6.01-5.99-6.01z%22%2F%3E%3Cpath%20fill%3D%22%234285f4%22%20d%3D%22M53.006%209c1.573%200%203.188%201.347%203.188%203.648%200%202.34-1.611%203.629-3.222%203.629-1.71%200-3.302-1.394-3.302-3.607%200-2.299%201.652-3.67%203.336-3.67zm-.232-2.349c-3.208%200-5.73%202.82-5.73%205.984%200%203.605%202.924%205.996%205.675%205.996%201.7%200%202.605-.678%203.273-1.455v1.18c0%202.067-1.25%203.304-3.137%203.304-1.824%200-2.738-1.36-3.056-2.132l-2.293.962c.813%201.726%202.451%203.527%205.368%203.527%203.19%200%205.62-2.016%205.62-6.244V7.012h-2.502v1.014c-.77-.832-1.821-1.375-3.218-1.375z%22%2F%3E%3Cpath%20fill%3D%22%23eb4335%22%20d%3D%22M69.725%208.94c1.09%200%201.875.582%202.209%201.28l-5.345%202.241c-.23-1.735%201.408-3.52%203.136-3.52zm-.104-2.303c-3.026%200-5.567%202.416-5.567%205.981%200%203.772%202.832%206.01%205.858%206.01%202.525%200%204.075-1.387%205-2.629l-2.063-1.377c-.536.833-1.43%201.648-2.925%201.648-1.678%200-2.45-.922-2.927-1.815L75%2011.123l-.415-.976c-.774-1.913-2.577-3.51-4.964-3.51z%22%2F%3E%3Cpath%20fill%3D%22%2334a853%22%20d%3D%22M60.239%2018.272h2.628V.62H60.24z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/lobehub/google-brand-color.svg?color=%231a73e8&size=48
