SVG 图标

Cafe Gaudi

还没有评分，抢首评

咖啡茶饮

复制与下载

SVG 矢量格式 · 当前版本

使用场景

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

按钮内

输入框

搜索Cafe Gaudi...

导航

Cafe Gaudi

空状态

暂无内容

场景预览

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

手机桌面 · App 图标

9:41

Cafe Gaudi

浏览器 · 标签页与站点

8539df9f542b9e8f.example

Cafe Gaudi开始使用

操作按钮 · 主次层级

Cafe Gaudi了解更多

底部导航 · Tab 栏

Cafe Gaudi推荐收藏我的

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">
  <!-- 内联 Cafe Gaudi 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">
  <!-- 内联 Cafe Gaudi SVG -->
  立即开始
</button>

React 组件

内联引入

react

import { CafeGaudiIcon } from './icons';

function Nav() {
  return <CafeGaudiIcon 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">
  <!-- 内联 Cafe Gaudi SVG -->
  已完成
</span>

输入框前缀

搜索框

搜索Cafe Gaudi…

html

<div class="flex items-center gap-2 rounded-lg border border-neutral-200 px-3 py-2 text-sm">
  <!-- 内联 Cafe Gaudi SVG -->
  <input placeholder="搜索Cafe Gaudi…" 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">
    <!-- 内联 Cafe Gaudi SVG -->
  </span>
  <p class="mt-3 text-sm font-medium">功能名称</p>
  <p class="mt-1 text-xs text-neutral-500">功能的一句话说明。</p>
</div>

动效图标

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

描画

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

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

呼吸

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

.icon-8539df9f542b9e8f { animation: svg-breathe 1.8s infinite; }

旋转

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

.icon-8539df9f542b9e8f { animation: svg-spin 1.6s linear infinite; }

用法示例

Cafe Gaudi 在真实界面中的三种常见用法。

继续下一步

按钮内
16px · action 触发

Cafe Gaudi

导航项
18px · 列表选中态

暂无数据

空状态
40px · 引导提示

各尺寸下的 Cafe Gaudi

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

24px

32px

48px

64px

96px

128px

下载 Cafe Gaudi 图标

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

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

复制 Cafe Gaudi 图标代码

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

svg

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192.756 192.756"><g fill-rule="evenodd" clip-rule="evenodd"><path fill="#cc2229" d="M63.44 30.446h72.175v112.468H63.44V30.446z"/><path fill="#cc2229" d="M135.615 70.478v72.436h-16.332l.131-6.292-2.086-2.608-5.25-1.565-9.682-.782-28.752 4.694-8.639-3.912-.521-22.232 67.741-40.554 3.39.815z"/><path fill="#cc2229" d="M118.598 142.914H63.44v-10.073l8.379 4.824 31.392-4.955h8.607l5.51 1.564 2.086 2.609.26 3.683-1.076 2.348z"/><path d="M94.312 121.235c0-1.174 2.999-1.5 2.999-1.5s7.205-1.597 5.705-3.129c-1.5-.326-4.955.781-5.705 1.173-.75 0-2.673 0-2.673-1.499.848-.75 3.097-1.924 7.271-3.423 1.107-.424 1.531-1.5-.393-1.5-1.531.326-7.627 2.999-8.736 2.575-.75-.326-.391-1.499 1.108-4.107 0-.815 0-2.673-1.5-1.564 0 0-1.858 4.597-3.032 4.597-.75-.424-1.174-3.032-2.25-2.25-.75 1.499 1.076 2.575-.75 4.499-.75 0-4.629-.326-7.205-2.249 8.704-8.443 15.387-9.063 25.362-13.301 8.377-2.706 11.801-6.455 12.91-6.455 1.172.75 0 7.954.748 9.454 3.098 3.098 9.129 3.847 13.725 7.629 0 0 1.826 1.173 1.076-.751l-3.422-2.705s-.328-1.5 1.172-1.5c0 0 1.924.425 3.424.425.357 0 3.031-.425 2.281-1.174-.75-.75-5.379-.424-6.129-.75 0 0 .424-1.174 2.674-1.5 0 0 .75-.75 0-1.174-1.924-.424-3.75 1.924-4.922 1.924-1.109-.424-1.5-3.097-2.283-2.673-.75 0 0 1.173 0 1.173s-3.748-.848-4.498-1.923c0-.424.326-9.91 3-11.084 0 0 10.627-9.128 12.158-15.224 0 0 1.5-1.858.326-3.423 0 0 .848-7.954-2.25-9.128-4.529-1.858-8.736 3.097-8.736 3.097s-2.998 0-2.998 2.673c0 0-6.455 10.954-10.301 12.551-3.783.326-9.455-1.923-9.781-2.347 0-.326.326-1.826 1.076-2.673.424-.326 1.924 0 4.174 1.173.424.424 1.531 0 1.172-.75-.424-.75-3.096-1.174-3.096-2.674.424-.749 3.846-1.499 4.955-1.923.424-.359.75-1.532-.326-1.532-1.533-.326-4.629 1.956-5.705.782-.424-.358-.75-.782.326-2.608.424-1.174-.326-2.347-1.5-1.597-1.076.848-.326 3.097-1.857 3.847-1.174 0-1.924-1.923-3.098-1.923-.326 0-2.576.424-1.076 1.5.75.424 3 .782 1.5 5.379 0 1.5-1.924 6.096.359 6.455 1.141.391 7.596 2.25 7.596 2.25-14.833-.424-26.048-.815-37.588 10.725 0 0 2.347-3.847 3.097-4.629.326-.75 3.781-2.999 3.357-3.749-2.282-1.173-6.78 5.281-7.204 5.281-1.858-2.282 3.847-4.531 3.097-5.705-1.597-1.5-4.955 4.173-6.455 4.597-.75-.75 2.25-2.673 1.5-3.097-.75 0-5.672 1.174-7.204 12.225.358 3.781 3.781 5.705 3.781 8.704-4.466 8.965-14.018 23.472-2.673 32.013 14.148 9.616 37.522-7.89 54.538-4.532 6.455 2.674 1.631 9.878 
…

预览参数

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

颜色

风格变体

细线 · 1.2px · 密集布局

常规 · 2px · 通用界面

加粗 · 3.5px · 大尺寸标题

关于 Cafe Gaudi 图标

Cafe Gaudi 是咖啡茶饮分类下的矢量图标（SVG 格式），矢量特性意味着任意缩放不失真，适配网页、App、演示文稿与印刷物料。咖啡与茶饮连锁品牌的标识。

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

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

常见问题

Cafe Gaudi 图标是什么？

Cafe Gaudi 是咖啡茶饮分类下的矢量图标（SVG 格式），矢量特性意味着任意缩放不失真，适配网页、App、演示文稿与印刷物料。

如何下载 Cafe Gaudi 图标？

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

Cafe Gaudi 图标可以商用吗？

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

如何修改 Cafe Gaudi 图标的颜色？

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

SVG 健康报告

100/100

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

文件体积

6.92 KB

7,084 字节

viewBox

0 0 192.756 192.756

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

图元总数

<path> ×7

风格

多彩

3 种品牌色 · 纯填充

提取色值#cc2229#00acec#f2ca30

相似图标

按名称与标签相似度排序。

51%

48%

48%

46%

46%

44%

44%

43%

43%

43%

42%

42%

同色系图标

品牌色 #cc2229 的同色相色阶，点击复制色值；下方为品牌色同色相的其他图标。

#fbe9ea#f6cbcc#ee969a#e3595f#d2232a#cc2229#8f181d#5a0f12

Cafe Gaudi 品牌色详表
RGB	HSL	CMYK	色名
204, 34, 41	358°, 71%, 47%	0, 83, 80, 20	品牌主色 · 棕色
246, 203, 204	359°, 70%, 88%	0, 17, 17, 4	粉红色
238, 150, 154	357°, 72%, 76%	0, 37, 35, 7	热粉色
227, 89, 95	357°, 71%, 62%	0, 61, 58, 11	驼色

#cc2229

#cc2229

#b25853

图标信息摘要

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