google gmail logo
google-gmail from SVG Logos by Gil Barbara · Color · CC0-1.0 Free for personal and commercial use.
- Name
- google-gmail
- Set
- SVG Logos
- Style
- Color
- Viewbox
- 256×204
- License
- CC0
Related icons in SVG Logos
google-2014google-360suitegoogle-admobgoogle-adsgoogle-adsensegoogle-adwordsgoogle-aistudiogoogle-aistudio-darkgoogle-analyticsgoogle-bardgoogle-bard-icongoogle-calendargoogle-calendar-2020google-cloudgoogle-cloud-functionsgoogle-cloud-platformgoogle-cloud-rungoogle-currentsgoogle-data-studiogoogle-developersgoogle-developers-icongoogle-domainsgoogle-domains-icongoogle-drive
Use the google gmail logo
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 204"><defs><linearGradient id="SVGHzDbHcwG" x1="165" x2="165" y1="44" y2="166" gradientUnits="userSpaceOnUse"><stop stop-color="#60d673"/><stop offset=".17" stop-color="#42c868"/><stop offset=".39" stop-color="#0ebc5f"/><stop offset=".62" stop-color="#00a9bb"/><stop offset=".86" stop-color="#3c90ff"/><stop offset="1" stop-color="#3186ff"/></linearGradient><linearGradient id="SVG41ATXboZ" x1="8" x2="184" y1="46.13" y2="46.13" gradientUnits="userSpaceOnUse"><stop offset=".08" stop-color="#ff63a0"/><stop offset=".3" stop-color="#fc413d"/><stop offset=".5" stop-color="#fc413d"/><stop offset=".65" stop-color="#fc413d"/><stop offset=".72" stop-color="#fc5c30"/><stop offset=".86" stop-color="#feb10c"/><stop offset=".91" stop-color="#fec700"/><stop offset=".96" stop-color="#ffdb0f"/></linearGradient></defs><path fill="url(#SVGHzDbHcwG)" d="M146 44h38v110c0 6.627-5.373 12-12 12h-20a6 6 0 0 1-6-6z" transform="translate(-11.636 -37.818)scale(1.45454)"/><path fill="#fc413d" d="M55.273 26.182H0v160c0 9.638 7.816 17.454 17.455 17.454h29.09a8.727 8.727 0 0 0 8.728-8.728z"/><path fill="url(#SVG41ATXboZ)" d="M39.226 30.456c-8.033-6.752-20.018-5.714-26.77 2.319c-6.752 8.032-5.714 20.017 2.319 26.77l76.078 63.949a8 8 0 0 0 10.295 0l76.078-63.95c8.032-6.752 9.07-18.737 2.318-26.77c-6.752-8.032-18.737-9.07-26.769-2.318L96 78.18z" transform="translate(-11.636 -37.818)scale(1.45454)"/></svg>
React
import type { SVGProps } from "react";
export function LogosGoogleGmail(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 204"><defs><linearGradient id="SVGHzDbHcwG" x1="165" x2="165" y1="44" y2="166" gradientUnits="userSpaceOnUse"><stop stopColor="#60d673"/><stop offset=".17" stopColor="#42c868"/><stop offset=".39" stopColor="#0ebc5f"/><stop offset=".62" stopColor="#00a9bb"/><stop offset=".86" stopColor="#3c90ff"/><stop offset="1" stopColor="#3186ff"/></linearGradient><linearGradient id="SVG41ATXboZ" x1="8" x2="184" y1="46.13" y2="46.13" gradientUnits="userSpaceOnUse"><stop offset=".08" stopColor="#ff63a0"/><stop offset=".3" stopColor="#fc413d"/><stop offset=".5" stopColor="#fc413d"/><stop offset=".65" stopColor="#fc413d"/><stop offset=".72" stopColor="#fc5c30"/><stop offset=".86" stopColor="#feb10c"/><stop offset=".91" stopColor="#fec700"/><stop offset=".96" stopColor="#ffdb0f"/></linearGradient></defs><path fill="url(#SVGHzDbHcwG)" d="M146 44h38v110c0 6.627-5.373 12-12 12h-20a6 6 0 0 1-6-6z" transform="translate(-11.636 -37.818)scale(1.45454)"/><path fill="#fc413d" d="M55.273 26.182H0v160c0 9.638 7.816 17.454 17.455 17.454h29.09a8.727 8.727 0 0 0 8.728-8.728z"/><path fill="url(#SVG41ATXboZ)" d="M39.226 30.456c-8.033-6.752-20.018-5.714-26.77 2.319c-6.752 8.032-5.714 20.017 2.319 26.77l76.078 63.949a8 8 0 0 0 10.295 0l76.078-63.95c8.032-6.752 9.07-18.737 2.318-26.77c-6.752-8.032-18.737-9.07-26.769-2.318L96 78.18z" transform="translate(-11.636 -37.818)scale(1.45454)"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 204"><defs><linearGradient id="SVGHzDbHcwG" x1="165" x2="165" y1="44" y2="166" gradientUnits="userSpaceOnUse"><stop stop-color="#60d673"/><stop offset=".17" stop-color="#42c868"/><stop offset=".39" stop-color="#0ebc5f"/><stop offset=".62" stop-color="#00a9bb"/><stop offset=".86" stop-color="#3c90ff"/><stop offset="1" stop-color="#3186ff"/></linearGradient><linearGradient id="SVG41ATXboZ" x1="8" x2="184" y1="46.13" y2="46.13" gradientUnits="userSpaceOnUse"><stop offset=".08" stop-color="#ff63a0"/><stop offset=".3" stop-color="#fc413d"/><stop offset=".5" stop-color="#fc413d"/><stop offset=".65" stop-color="#fc413d"/><stop offset=".72" stop-color="#fc5c30"/><stop offset=".86" stop-color="#feb10c"/><stop offset=".91" stop-color="#fec700"/><stop offset=".96" stop-color="#ffdb0f"/></linearGradient></defs><path fill="url(#SVGHzDbHcwG)" d="M146 44h38v110c0 6.627-5.373 12-12 12h-20a6 6 0 0 1-6-6z" transform="translate(-11.636 -37.818)scale(1.45454)"/><path fill="#fc413d" d="M55.273 26.182H0v160c0 9.638 7.816 17.454 17.455 17.454h29.09a8.727 8.727 0 0 0 8.728-8.728z"/><path fill="url(#SVG41ATXboZ)" d="M39.226 30.456c-8.033-6.752-20.018-5.714-26.77 2.319c-6.752 8.032-5.714 20.017 2.319 26.77l76.078 63.949a8 8 0 0 0 10.295 0l76.078-63.95c8.032-6.752 9.07-18.737 2.318-26.77c-6.752-8.032-18.737-9.07-26.769-2.318L96 78.18z" transform="translate(-11.636 -37.818)scale(1.45454)"/></svg> </template>
CSS
.icon-google-gmail {
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%20256%20204%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22SVGHzDbHcwG%22%20x1%3D%22165%22%20x2%3D%22165%22%20y1%3D%2244%22%20y2%3D%22166%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%2360d673%22%2F%3E%3Cstop%20offset%3D%22.17%22%20stop-color%3D%22%2342c868%22%2F%3E%3Cstop%20offset%3D%22.39%22%20stop-color%3D%22%230ebc5f%22%2F%3E%3Cstop%20offset%3D%22.62%22%20stop-color%3D%22%2300a9bb%22%2F%3E%3Cstop%20offset%3D%22.86%22%20stop-color%3D%22%233c90ff%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%233186ff%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVG41ATXboZ%22%20x1%3D%228%22%20x2%3D%22184%22%20y1%3D%2246.13%22%20y2%3D%2246.13%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%22.08%22%20stop-color%3D%22%23ff63a0%22%2F%3E%3Cstop%20offset%3D%22.3%22%20stop-color%3D%22%23fc413d%22%2F%3E%3Cstop%20offset%3D%22.5%22%20stop-color%3D%22%23fc413d%22%2F%3E%3Cstop%20offset%3D%22.65%22%20stop-color%3D%22%23fc413d%22%2F%3E%3Cstop%20offset%3D%22.72%22%20stop-color%3D%22%23fc5c30%22%2F%3E%3Cstop%20offset%3D%22.86%22%20stop-color%3D%22%23feb10c%22%2F%3E%3Cstop%20offset%3D%22.91%22%20stop-color%3D%22%23fec700%22%2F%3E%3Cstop%20offset%3D%22.96%22%20stop-color%3D%22%23ffdb0f%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpath%20fill%3D%22url(%23SVGHzDbHcwG)%22%20d%3D%22M146%2044h38v110c0%206.627-5.373%2012-12%2012h-20a6%206%200%200%201-6-6z%22%20transform%3D%22translate(-11.636%20-37.818)scale(1.45454)%22%2F%3E%3Cpath%20fill%3D%22%23fc413d%22%20d%3D%22M55.273%2026.182H0v160c0%209.638%207.816%2017.454%2017.455%2017.454h29.09a8.727%208.727%200%200%200%208.728-8.728z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVG41ATXboZ)%22%20d%3D%22M39.226%2030.456c-8.033-6.752-20.018-5.714-26.77%202.319c-6.752%208.032-5.714%2020.017%202.319%2026.77l76.078%2063.949a8%208%200%200%200%2010.295%200l76.078-63.95c8.032-6.752%209.07-18.737%202.318-26.77c-6.752-8.032-18.737-9.07-26.769-2.318L96%2078.18z%22%20transform%3D%22translate(-11.636%20-37.818)scale(1.45454)%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%20256%20204%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22SVGHzDbHcwG%22%20x1%3D%22165%22%20x2%3D%22165%22%20y1%3D%2244%22%20y2%3D%22166%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%2360d673%22%2F%3E%3Cstop%20offset%3D%22.17%22%20stop-color%3D%22%2342c868%22%2F%3E%3Cstop%20offset%3D%22.39%22%20stop-color%3D%22%230ebc5f%22%2F%3E%3Cstop%20offset%3D%22.62%22%20stop-color%3D%22%2300a9bb%22%2F%3E%3Cstop%20offset%3D%22.86%22%20stop-color%3D%22%233c90ff%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%233186ff%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVG41ATXboZ%22%20x1%3D%228%22%20x2%3D%22184%22%20y1%3D%2246.13%22%20y2%3D%2246.13%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%22.08%22%20stop-color%3D%22%23ff63a0%22%2F%3E%3Cstop%20offset%3D%22.3%22%20stop-color%3D%22%23fc413d%22%2F%3E%3Cstop%20offset%3D%22.5%22%20stop-color%3D%22%23fc413d%22%2F%3E%3Cstop%20offset%3D%22.65%22%20stop-color%3D%22%23fc413d%22%2F%3E%3Cstop%20offset%3D%22.72%22%20stop-color%3D%22%23fc5c30%22%2F%3E%3Cstop%20offset%3D%22.86%22%20stop-color%3D%22%23feb10c%22%2F%3E%3Cstop%20offset%3D%22.91%22%20stop-color%3D%22%23fec700%22%2F%3E%3Cstop%20offset%3D%22.96%22%20stop-color%3D%22%23ffdb0f%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpath%20fill%3D%22url(%23SVGHzDbHcwG)%22%20d%3D%22M146%2044h38v110c0%206.627-5.373%2012-12%2012h-20a6%206%200%200%201-6-6z%22%20transform%3D%22translate(-11.636%20-37.818)scale(1.45454)%22%2F%3E%3Cpath%20fill%3D%22%23fc413d%22%20d%3D%22M55.273%2026.182H0v160c0%209.638%207.816%2017.454%2017.455%2017.454h29.09a8.727%208.727%200%200%200%208.728-8.728z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVG41ATXboZ)%22%20d%3D%22M39.226%2030.456c-8.033-6.752-20.018-5.714-26.77%202.319c-6.752%208.032-5.714%2020.017%202.319%2026.77l76.078%2063.949a8%208%200%200%200%2010.295%200l76.078-63.95c8.032-6.752%209.07-18.737%202.318-26.77c-6.752-8.032-18.737-9.07-26.769-2.318L96%2078.18z%22%20transform%3D%22translate(-11.636%20-37.818)scale(1.45454)%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/logos/google-gmail.svg?color=%231a73e8&size=48
