google-workspace

图标库: SVG Logos
作者: Gil Barbara
许可: CC0 ↗

正在读取图标颜色…

预览尺寸 96px

使用场景

颜色与描边跟随预览参数实时变化，以下为常见界面中的渲染效果。

按钮内

输入框

搜索google-workspace...

导航

google-workspace

空状态

暂无内容

场景预览

桌面 / 浏览器 / 按钮 / 导航栏

手机桌面 · App 图标

9:41

google-workspace

浏览器 · 标签页与站点

7a2108e52279d189.example

google-workspace开始使用

操作按钮 · 主次层级

google-workspace了解更多

底部导航 · Tab 栏

google-workspace推荐收藏我的

UI 使用示例

真实组件上下文中的渲染效果，代码可直接复制。

导航项

导航菜单

html

<a href="#" class="flex items-center gap-2.5 rounded-lg px-3 py-2 text-sm text-neutral-700 hover:bg-neutral-100 dark:text-neutral-200 dark:hover:bg-neutral-800">
  <!-- 内联 google-workspace SVG -->
  <span>导航菜单</span>
</a>

主要按钮

立即开始

html

<button class="inline-flex items-center gap-2 rounded-lg bg-neutral-900 px-4 py-2 text-sm font-medium text-white dark:bg-neutral-100 dark:text-neutral-900">
  <!-- 内联 google-workspace SVG -->
  立即开始
</button>

React 组件

内联引入

react

import { googleworkspaceIcon } from './icons';

function Nav() {
  return <googleworkspaceIcon className="size-4" />;
}

状态徽标

已完成

html

<span class="inline-flex items-center gap-1.5 rounded-full bg-neutral-100 px-2.5 py-1 text-xs font-medium text-neutral-700">
  <!-- 内联 google-workspace SVG -->
  已完成
</span>

输入框前缀

搜索框

搜索google-workspace…

html

<div class="flex items-center gap-2 rounded-lg border border-neutral-200 px-3 py-2 text-sm">
  <!-- 内联 google-workspace SVG -->
  <input placeholder="搜索google-workspace…" class="w-full outline-none" />
</div>

功能卡片

功能名称

功能的一句话说明。

html

<div class="rounded-xl border border-neutral-200 p-4">
  <span class="flex size-9 items-center justify-center rounded-lg bg-neutral-900 text-white">
    <!-- 内联 google-workspace SVG -->
  </span>
  <p class="mt-3 text-sm font-medium">功能名称</p>
  <p class="mt-1 text-xs text-neutral-500">功能的一句话说明。</p>
</div>

动效图标

为 google-workspace 添加 CSS 动效，导出的 SVG 内嵌样式，单文件即可播放，无需任何依赖。

描画

线条从无到有依次绘出，适合线性图标

.icon-7a2108e52279d189 { stroke-dasharray: 1; animation: svg-draw 1.2s forwards; }

呼吸

透明度往复渐变，适合状态提示图标

.icon-7a2108e52279d189 { animation: svg-breathe 1.8s infinite; }

旋转

匀速循环旋转，适合加载中场景

.icon-7a2108e52279d189 { animation: svg-spin 1.6s linear infinite; }

用法示例

google-workspace 在真实界面中的三种常见用法。

继续下一步

按钮内
16px · action 触发

google-workspace

导航项
18px · 列表选中态

暂无数据

空状态
40px · 引导提示

各尺寸下的 google-workspace

24px 到 128px 六个常用尺寸的真实渲染，用于检查小尺寸下的可读性。

24px

32px

48px

64px

96px

128px

下载 google-workspace 图标

SVG 矢量文件、PNG 位图（预设 16~512px 或自定义 16~1024px）、Favicon 包、App 图标包（iOS + Android）与矢量 PDF 一键导出；下载前可在下方「预览参数」改色，导出文件同步生效。

按预览颜色导出自定义尺寸px（16~1024）

复制 google-workspace 图标代码

Web、移动端、桌面端与小程序共 17 种格式；代码基于当前预览颜色生成，复制即用。

svg

<svg viewBox="0 0 512 66" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M402.551 18.199q6.024 0 10.253 4.742q4.357 4.742 4.357 11.534q0 6.92-4.357 11.663q-4.23 4.742-10.253 4.742h-.128q-3.332 0-6.152-1.41t-4.229-3.845h-.256l.256 4.23v13.584h-5.767V19.096h5.51v4.357h.257q1.41-2.435 4.23-3.844q2.818-1.41 6.28-1.41m-32.68-.128q4.1 0 7.433 2.05q3.332 2.05 4.613 5.127l-5.126 2.178a6.54 6.54 0 0 0-2.82-3.076a9 9 0 0 0-4.485-1.025a7.43 7.43 0 0 0-4.101 1.025q-1.795 1.155-1.795 2.82q0 2.691 4.999 3.717l4.614 1.281q9.227 2.18 9.227 9.228q0 3.973-3.46 6.792t-8.972 2.692q-4.613 0-8.074-2.435a13.33 13.33 0 0 1-4.998-6.28l5.127-2.179q1.153 2.691 3.204 4.23a7.95 7.95 0 0 0 4.741 1.537q2.82 0 4.614-1.153q1.794-1.155 1.923-2.82q0-2.947-4.486-4.357l-5.383-1.282q-8.97-2.307-8.97-8.715q0-4.23 3.46-6.792q3.46-2.563 8.714-2.563m-81.126.128q6.92 0 11.278 4.614q4.486 4.613 4.486 11.662q0 7.178-4.486 11.79q-4.485 4.615-11.278 4.615q-6.792 0-11.406-4.614q-4.486-4.614-4.486-11.79q0-7.05 4.486-11.663t11.406-4.614m208.26 0q6.92 0 10.894 4.357T512 34.988v.64h-24.222q.128 4.486 2.947 7.306t6.921 2.691q5.511 0 8.715-5.51l5.126 2.562a15.4 15.4 0 0 1-5.767 6.024q-3.588 2.178-8.33 2.179q-6.793 0-11.15-4.614t-4.358-11.79q0-6.922 4.23-11.663q4.23-4.743 10.893-4.614m-30.63 0q4.742 0 8.202 2.307t5.255 6.536l-5.255 2.179q-2.434-5.768-8.587-5.768q-3.972 0-6.92 3.204q-2.82 3.204-2.82 7.818t2.82 7.946q2.948 3.204 6.92 3.204q6.28 0 8.844-5.767l5.254 2.179q-1.794 4.23-5.383 6.536q-3.588 2.307-8.33 2.307q-6.921 0-11.406-4.614q-4.486-4.742-4.486-11.79q0-7.05 4.486-11.663t11.406-4.614m-33.45 0q6.408 0 10.125 3.332t3.716 9.356v18.967h-5.51v-4.229h-.257q-3.588 5.255-9.612 5.255q-4.998 0-8.458-2.948t-3.46-7.562q0-4.74 3.588-7.561t9.74-2.82q5.127 0 8.459 1.795v-1.282q0-3.076-2.435-5.126a8.2 8.2 0 0 0-5.423-2.051h-.088q-4.87 0-7.69 4.101l-5.126-3.204q4.23-6.023 12.431-6.023M223.64 4.999l9.483 35.243h.257l9.74-29.22h5.383l9.74 29.22h.256l8.971-35.244h6.024l-12.047 44.856h-5.896L245.94 20.25h-.256l-9.74 29.605h-5.895L217.616 4.998zm99.836 13.2q2.435 0 4.23.769l-1.795 5.639q-1.025-.385-3.332-.385q-3.332 0-5.767 2.563t-2.435 6.152v16.917h-5.767V19.096h5.51v5.126h.257q.897-2.563 3.717-4.229t5.382-1.794m12.688-13.2V32.68l13.329-13.585h7.305v.256l-11.919 11.92l12.56 18.326v.256h-7.049l-9.484-14.482l-4.742 4.742v9.74h-5.767V4.998zm97.53 29.604q-3.46 0-5.895 1.666q-2.436 1.666-
…

预览参数

调整颜色、描边或开启轮廓化，使用场景与用法示例实时跟随。

颜色

风格变体

细线 · 1.2px · 密集布局

常规 · 2px · 通用界面

加粗 · 3.5px · 大尺寸标题

关于 google-workspace 图标

google-workspace 是通用分类下的矢量图标（SVG 格式），矢量特性意味着任意缩放不失真，适配网页、App、演示文稿与印刷物料。该品牌在所属行业的官方标识。

在本页点击「下载」即可保存 google-workspace 的 SVG 矢量文件，或在下载面板中选择 PNG（16~512px）与 Favicon 包等导出方式；也可以直接复制 SVG 源码、Data URI 或 React/Vue 组件代码。

google-workspace 的品牌标志与名称版权归其品牌方所有，本站内容仅供学习与设计识别参考，请勿用于商标注册或误导性用途；商用前请确认品牌官方的使用规范与授权要求。文件体积 4.79 KB，viewBox 为 0 0 512 66，共 7 个矢量图元。

常见问题

google-workspace 图标是什么？

google-workspace 是通用分类下的矢量图标（SVG 格式），矢量特性意味着任意缩放不失真，适配网页、App、演示文稿与印刷物料。

如何下载 google-workspace 图标？

在本页点击「下载 SVG」即可保存 google-workspace 的矢量文件，或在下载面板中选择 PNG（16~512px）与 Favicon 包等导出方式；也可以直接复制 SVG 源码、Data URI 或 React/Vue 组件代码。

google-workspace 图标可以商用吗？

google-workspace 为品牌标志，版权归品牌方所有，本站内容仅供识别参考；商用前请先确认对应品牌的使用规范与授权要求。

如何修改 google-workspace 图标的颜色？

在「预览参数」面板中调整颜色与描边宽度，使用场景与用法示例会实时跟随，确认效果后再复制或下载即可。

SVG 健康报告

100/100

同时含 width/height 与 viewBox，可仅保留 viewBox 以自适应容器

文件体积

4.79 KB

4,910 字节

viewBox

0 0 512 66

同时含 width/height 与 viewBox，可仅保留 viewBox 以自适应容器

图元总数

<path> ×7

风格

多彩

5 种品牌色 · 纯填充

提取色值#4285f4#ea4335#5f6368#fbbc04#34a853

同色系图标

品牌色 #4285f4 的同色相色阶，点击复制色值；下方为同分类中可搭配使用的图标。

#e7effe#c5dafc#8bb4f8#4889f4#0d5fe7#4285f4#0d5de1#0a45a8

google-workspace 品牌色详表
RGB	HSL	CMYK	色名
66, 133, 244	217°, 89%, 61%	73, 45, 0, 4	品牌主色 · 宝蓝色
197, 218, 252	217°, 90%, 88%	22, 13, 0, 1	浅灰色
139, 180, 248	217°, 89%, 76%	44, 27, 0, 3	天蓝色
72, 137, 244	217°, 89%, 62%	70, 44, 0, 4	矢车菊蓝

图标信息摘要

google-workspace 是一个通用类别的单文件 SVG 矢量图标，文件体积 4.79 KB，协议为™ 品牌商标（版权归品牌方，仅供识别参考）。可在本站免费下载 google-workspace的 SVG 源文件与 PNG 位图（16-512px），支持自定义颜色与描边宽度、一键生成 Favicon 包，并提供 React / Vue 组件代码与 Data URI 引用。

继续探索