logo google icon
logo-google from Framework7 Icons by Vladimir Kharlampidi · Outline · MIT Free for personal and commercial use.
- Name
- logo-google
- Set
- Framework7 Icons
- Style
- Outline
- Viewbox
- 56×56
- License
- MIT
The same icon in other sets
Related icons in Framework7 Icons
Use the logo google icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 56 56"><path fill="currentColor" fill-rule="evenodd" d="M28.458 5c6.167 0 11.346 2.2 15.368 5.804l.323.295l-6.62 6.464c-1.695-1.59-4.666-3.493-9.07-3.493c-6.204 0-11.47 4.093-13.372 9.749c-.47 1.46-.756 3.023-.756 4.64c0 1.615.287 3.18.782 4.639c1.877 5.656 7.142 9.748 13.345 9.748c3.347 0 5.928-.886 7.881-2.176l.251-.17l.307-.222c2.813-2.108 4.144-5.084 4.46-7.169l.03-.22h-12.93v-8.705h22.025c.339 1.46.495 2.867.495 4.795c0 7.142-2.554 13.163-6.985 17.255c-3.884 3.597-9.201 5.682-15.535 5.682c-9.031 0-16.85-5.102-20.772-12.57l-.184-.358l-.222-.457A23.45 23.45 0 0 1 5 28.458c0-3.6.827-7.01 2.28-10.073l.222-.457l.184-.357C11.608 10.1 19.426 5 28.458 5"/></svg>
React
import type { SVGProps } from "react";
export function F7LogoGoogle(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 56 56"><path fill="currentColor" fillRule="evenodd" d="M28.458 5c6.167 0 11.346 2.2 15.368 5.804l.323.295l-6.62 6.464c-1.695-1.59-4.666-3.493-9.07-3.493c-6.204 0-11.47 4.093-13.372 9.749c-.47 1.46-.756 3.023-.756 4.64c0 1.615.287 3.18.782 4.639c1.877 5.656 7.142 9.748 13.345 9.748c3.347 0 5.928-.886 7.881-2.176l.251-.17l.307-.222c2.813-2.108 4.144-5.084 4.46-7.169l.03-.22h-12.93v-8.705h22.025c.339 1.46.495 2.867.495 4.795c0 7.142-2.554 13.163-6.985 17.255c-3.884 3.597-9.201 5.682-15.535 5.682c-9.031 0-16.85-5.102-20.772-12.57l-.184-.358l-.222-.457A23.45 23.45 0 0 1 5 28.458c0-3.6.827-7.01 2.28-10.073l.222-.457l.184-.357C11.608 10.1 19.426 5 28.458 5"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 56 56"><path fill="currentColor" fill-rule="evenodd" d="M28.458 5c6.167 0 11.346 2.2 15.368 5.804l.323.295l-6.62 6.464c-1.695-1.59-4.666-3.493-9.07-3.493c-6.204 0-11.47 4.093-13.372 9.749c-.47 1.46-.756 3.023-.756 4.64c0 1.615.287 3.18.782 4.639c1.877 5.656 7.142 9.748 13.345 9.748c3.347 0 5.928-.886 7.881-2.176l.251-.17l.307-.222c2.813-2.108 4.144-5.084 4.46-7.169l.03-.22h-12.93v-8.705h22.025c.339 1.46.495 2.867.495 4.795c0 7.142-2.554 13.163-6.985 17.255c-3.884 3.597-9.201 5.682-15.535 5.682c-9.031 0-16.85-5.102-20.772-12.57l-.184-.358l-.222-.457A23.45 23.45 0 0 1 5 28.458c0-3.6.827-7.01 2.28-10.073l.222-.457l.184-.357C11.608 10.1 19.426 5 28.458 5"/></svg> </template>
CSS
.icon-logo-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%2056%2056%22%3E%3Cpath%20fill%3D%22currentColor%22%20fill-rule%3D%22evenodd%22%20d%3D%22M28.458%205c6.167%200%2011.346%202.2%2015.368%205.804l.323.295l-6.62%206.464c-1.695-1.59-4.666-3.493-9.07-3.493c-6.204%200-11.47%204.093-13.372%209.749c-.47%201.46-.756%203.023-.756%204.64c0%201.615.287%203.18.782%204.639c1.877%205.656%207.142%209.748%2013.345%209.748c3.347%200%205.928-.886%207.881-2.176l.251-.17l.307-.222c2.813-2.108%204.144-5.084%204.46-7.169l.03-.22h-12.93v-8.705h22.025c.339%201.46.495%202.867.495%204.795c0%207.142-2.554%2013.163-6.985%2017.255c-3.884%203.597-9.201%205.682-15.535%205.682c-9.031%200-16.85-5.102-20.772-12.57l-.184-.358l-.222-.457A23.45%2023.45%200%200%201%205%2028.458c0-3.6.827-7.01%202.28-10.073l.222-.457l.184-.357C11.608%2010.1%2019.426%205%2028.458%205%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%2056%2056%22%3E%3Cpath%20fill%3D%22currentColor%22%20fill-rule%3D%22evenodd%22%20d%3D%22M28.458%205c6.167%200%2011.346%202.2%2015.368%205.804l.323.295l-6.62%206.464c-1.695-1.59-4.666-3.493-9.07-3.493c-6.204%200-11.47%204.093-13.372%209.749c-.47%201.46-.756%203.023-.756%204.64c0%201.615.287%203.18.782%204.639c1.877%205.656%207.142%209.748%2013.345%209.748c3.347%200%205.928-.886%207.881-2.176l.251-.17l.307-.222c2.813-2.108%204.144-5.084%204.46-7.169l.03-.22h-12.93v-8.705h22.025c.339%201.46.495%202.867.495%204.795c0%207.142-2.554%2013.163-6.985%2017.255c-3.884%203.597-9.201%205.682-15.535%205.682c-9.031%200-16.85-5.102-20.772-12.57l-.184-.358l-.222-.457A23.45%2023.45%200%200%201%205%2028.458c0-3.6.827-7.01%202.28-10.073l.222-.457l.184-.357C11.608%2010.1%2019.426%205%2028.458%205%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/f7/logo-google.svg?color=%231a73e8&size=48
