gboard icon
gboard from Material Symbols by Google · Regular · Apache-2.0 Free for personal and commercial use.
- Name
- gboard
- Set
- Material Symbols
- Style
- Regular
- Viewbox
- 24×24
- License
- Apache 2.0
Use the gboard icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M5 16v-2h2v2Zm3 3v-2h8v2Zm9-3v-2h2v2ZM4 22q-.825 0-1.412-.587Q2 20.825 2 20V10q0-.825.588-1.413Q3.175 8 4 8h2V3q0-.425.287-.713Q6.575 2 7 2h10q.425 0 .712.287Q18 2.575 18 3v5h2q.825 0 1.413.587Q22 9.175 22 10v10q0 .825-.587 1.413Q20.825 22 20 22Zm8-7.95l4.5-3.75V3.5h-9v6.8ZM4 20h16V10h-2v.525q0 .125-.125.475H19v2h-2v-1.175L14.4 14H16v2h-2v-1.65l-1 .825V16h-2v-.85l-1-.825V16H8v-2h1.6L7 11.825V13H5v-2h1.125q-.05-.125-.088-.238Q6 10.65 6 10.525V10H4Zm8.1-9q-1.275 0-2.162-.85Q9.05 9.3 9.05 8q0-1.3.888-2.15Q10.825 5 12.1 5q1.05 0 1.575.4q.525.4.6.5l-.75.725q-.3-.35-.662-.475q-.363-.125-.788-.125q-.825 0-1.375.55T10.15 8q0 .875.563 1.412q.562.538 1.387.538q.425 0 1-.25t.75-1.075h-1.8V7.7h2.825q.05.125.063.25q.012.125.012.275q0 1.35-.825 2.062Q13.3 11 12.1 11Z"/></svg>
React
import type { SVGProps } from "react";
export function MaterialSymbolsGboard(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="M5 16v-2h2v2Zm3 3v-2h8v2Zm9-3v-2h2v2ZM4 22q-.825 0-1.412-.587Q2 20.825 2 20V10q0-.825.588-1.413Q3.175 8 4 8h2V3q0-.425.287-.713Q6.575 2 7 2h10q.425 0 .712.287Q18 2.575 18 3v5h2q.825 0 1.413.587Q22 9.175 22 10v10q0 .825-.587 1.413Q20.825 22 20 22Zm8-7.95l4.5-3.75V3.5h-9v6.8ZM4 20h16V10h-2v.525q0 .125-.125.475H19v2h-2v-1.175L14.4 14H16v2h-2v-1.65l-1 .825V16h-2v-.85l-1-.825V16H8v-2h1.6L7 11.825V13H5v-2h1.125q-.05-.125-.088-.238Q6 10.65 6 10.525V10H4Zm8.1-9q-1.275 0-2.162-.85Q9.05 9.3 9.05 8q0-1.3.888-2.15Q10.825 5 12.1 5q1.05 0 1.575.4q.525.4.6.5l-.75.725q-.3-.35-.662-.475q-.363-.125-.788-.125q-.825 0-1.375.55T10.15 8q0 .875.563 1.412q.562.538 1.387.538q.425 0 1-.25t.75-1.075h-1.8V7.7h2.825q.05.125.063.25q.012.125.012.275q0 1.35-.825 2.062Q13.3 11 12.1 11Z"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M5 16v-2h2v2Zm3 3v-2h8v2Zm9-3v-2h2v2ZM4 22q-.825 0-1.412-.587Q2 20.825 2 20V10q0-.825.588-1.413Q3.175 8 4 8h2V3q0-.425.287-.713Q6.575 2 7 2h10q.425 0 .712.287Q18 2.575 18 3v5h2q.825 0 1.413.587Q22 9.175 22 10v10q0 .825-.587 1.413Q20.825 22 20 22Zm8-7.95l4.5-3.75V3.5h-9v6.8ZM4 20h16V10h-2v.525q0 .125-.125.475H19v2h-2v-1.175L14.4 14H16v2h-2v-1.65l-1 .825V16h-2v-.85l-1-.825V16H8v-2h1.6L7 11.825V13H5v-2h1.125q-.05-.125-.088-.238Q6 10.65 6 10.525V10H4Zm8.1-9q-1.275 0-2.162-.85Q9.05 9.3 9.05 8q0-1.3.888-2.15Q10.825 5 12.1 5q1.05 0 1.575.4q.525.4.6.5l-.75.725q-.3-.35-.662-.475q-.363-.125-.788-.125q-.825 0-1.375.55T10.15 8q0 .875.563 1.412q.562.538 1.387.538q.425 0 1-.25t.75-1.075h-1.8V7.7h2.825q.05.125.063.25q.012.125.012.275q0 1.35-.825 2.062Q13.3 11 12.1 11Z"/></svg> </template>
CSS
.icon-gboard {
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%22M5%2016v-2h2v2Zm3%203v-2h8v2Zm9-3v-2h2v2ZM4%2022q-.825%200-1.412-.587Q2%2020.825%202%2020V10q0-.825.588-1.413Q3.175%208%204%208h2V3q0-.425.287-.713Q6.575%202%207%202h10q.425%200%20.712.287Q18%202.575%2018%203v5h2q.825%200%201.413.587Q22%209.175%2022%2010v10q0%20.825-.587%201.413Q20.825%2022%2020%2022Zm8-7.95l4.5-3.75V3.5h-9v6.8ZM4%2020h16V10h-2v.525q0%20.125-.125.475H19v2h-2v-1.175L14.4%2014H16v2h-2v-1.65l-1%20.825V16h-2v-.85l-1-.825V16H8v-2h1.6L7%2011.825V13H5v-2h1.125q-.05-.125-.088-.238Q6%2010.65%206%2010.525V10H4Zm8.1-9q-1.275%200-2.162-.85Q9.05%209.3%209.05%208q0-1.3.888-2.15Q10.825%205%2012.1%205q1.05%200%201.575.4q.525.4.6.5l-.75.725q-.3-.35-.662-.475q-.363-.125-.788-.125q-.825%200-1.375.55T10.15%208q0%20.875.563%201.412q.562.538%201.387.538q.425%200%201-.25t.75-1.075h-1.8V7.7h2.825q.05.125.063.25q.012.125.012.275q0%201.35-.825%202.062Q13.3%2011%2012.1%2011Z%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%22M5%2016v-2h2v2Zm3%203v-2h8v2Zm9-3v-2h2v2ZM4%2022q-.825%200-1.412-.587Q2%2020.825%202%2020V10q0-.825.588-1.413Q3.175%208%204%208h2V3q0-.425.287-.713Q6.575%202%207%202h10q.425%200%20.712.287Q18%202.575%2018%203v5h2q.825%200%201.413.587Q22%209.175%2022%2010v10q0%20.825-.587%201.413Q20.825%2022%2020%2022Zm8-7.95l4.5-3.75V3.5h-9v6.8ZM4%2020h16V10h-2v.525q0%20.125-.125.475H19v2h-2v-1.175L14.4%2014H16v2h-2v-1.65l-1%20.825V16h-2v-.85l-1-.825V16H8v-2h1.6L7%2011.825V13H5v-2h1.125q-.05-.125-.088-.238Q6%2010.65%206%2010.525V10H4Zm8.1-9q-1.275%200-2.162-.85Q9.05%209.3%209.05%208q0-1.3.888-2.15Q10.825%205%2012.1%205q1.05%200%201.575.4q.525.4.6.5l-.75.725q-.3-.35-.662-.475q-.363-.125-.788-.125q-.825%200-1.375.55T10.15%208q0%20.875.563%201.412q.562.538%201.387.538q.425%200%201-.25t.75-1.075h-1.8V7.7h2.825q.05.125.063.25q.012.125.012.275q0%201.35-.825%202.062Q13.3%2011%2012.1%2011Z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/material-symbols/gboard.svg?color=%231a73e8&size=48
