SVG 图标

Whole Foods

还没有评分，抢首评

零售农业食品

复制与下载

SVG 矢量格式 · 当前版本

使用场景

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

按钮内

输入框

搜索Whole Foods...

导航

Whole Foods

空状态

暂无内容

场景预览

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

手机桌面 · App 图标

9:41

Whole Foods

浏览器 · 标签页与站点

772a3bffee58cb76.example

Whole Foods开始使用

操作按钮 · 主次层级

Whole Foods了解更多

底部导航 · Tab 栏

Whole Foods推荐收藏我的

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

React 组件

内联引入

react

import { WholeFoodsIcon } from './icons';

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

输入框前缀

搜索框

搜索Whole Foods…

html

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

动效图标

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

描画

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

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

呼吸

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

.icon-772a3bffee58cb76 { animation: svg-breathe 1.8s infinite; }

旋转

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

.icon-772a3bffee58cb76 { animation: svg-spin 1.6s linear infinite; }

用法示例

Whole Foods 在真实界面中的三种常见用法。

继续下一步

按钮内
16px · action 触发

Whole Foods

导航项
18px · 列表选中态

暂无数据

空状态
40px · 引导提示

各尺寸下的 Whole Foods

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

24px

32px

48px

64px

96px

128px

下载 Whole Foods 图标

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

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

复制 Whole Foods 图标代码

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

svg

<svg viewBox="0 0 1164.375 796.2959999999999" xmlns="http://www.w3.org/2000/svg"><path d="M526.478 80.878c5.204 0 8.51-5.256 11.829-13.405 4.262-10.06 24.148-28.72 51.564-28.72 20.829 0 41.182 12.94 57.737 26.344 15.626 12.914 28.397 13.391 28.397 19.151 0 1.899-3.306 3.332-7.102 3.332-15.6 0-43.041-23.438-72.381-23.438-33.149 0-60.113 28.694-60.113 44.979 0 4.791 1.898 8.6 8.032 8.6 7.128 0 15.16-17.213 33.601-17.213 17.046 0 31.251 16.271 54.896 12.914 2.854-.478 3.771 3.835 1.872 4.791-47.303 26.796-97.446 52.171-97.446 136.898 0 65.085 36.43 127.794 116.856 127.794 83.784 0 123.997-54.561 123.997-127.794 0-63.187-38.315-121.557-89.905-121.557-1.898 0-3.771 0-5.682.465-3.319.943-6.173 3.797-6.173 8.123 0 5.256 1.446 6.715 4.752 9.078 33.136 23.478 44.513 46.451 44.513 110.102 0 44.991-18.479 94.955-64.878 94.955-50.144 0-71.439-53.785-71.439-102.096 0-56.032 14.192-82.363 49.24-108.668 37.811-28.733 82.79-42.137 82.79-68.456 0-12.914-13.714-15.315-22.715-15.78-8.058-.491-19.409-3.37-25.091-11.506C650.449 25.362 623.459 0 591.317 0c-45.908 0-72.898 48.813-72.898 67.009 0 7.193 1.408 13.869 8.059 13.869m458.151 71.852h7.245c2.182 0 5.075 2.196 5.798 5.502 1.085 2.919 1.446 4.752 1.446 14.295V336.35c0 9.866-.361 11.738-1.446 14.644-.723 2.569-3.254 4.765-5.798 4.765h-7.245c-5.05 0-9.053 4.404-9.053 9.904 0 8.058 4.003 10.615 16.297 10.615h142.063l6.909-.374c5.747-.349 7.568-1.808 10.099-8.046l10.512-24.535c2.17-5.127 2.919-8.445 2.919-10.266 0-5.14-3.629-8.795-9.427-8.795-4.726 0-6.534 1.446-10.86 8.02-7.258 10.653-14.127 16.155-22.496 17.601-6.173 1.111-15.6 1.485-33.679 1.485-19.228 0-26.434-.736-31.187-2.583-5.798-2.195-6.87-6.198-6.87-25.633v-57.918c0-8.058 1.072-11.726 3.254-13.198 1.834-1.071 4.365-1.446 14.851-1.446h28.281c9.44 0 14.101-4.39 14.101-12.849 0-8.794-3.603-12.061-14.101-12.061h-46.386v-46.941c0-19.409 2.195-21.966 22.095-21.966h24.291c22.818 0 29.688 2.557 36.972 13.185 2.531 3.318 3.965 5.475 4.326 6.237 1.446 1.46 3.306 2.919 5.088 3.641 1.059.736 2.518 1.137 3.965 1.137 5.476 0 9.802-4.054 9.802-8.445 0-1.085-.723-3.306-1.808-6.224l-10.499-27.118c-2.182-5.528-5.101-7.336-12.668-7.336H991.874c-12.294 0-16.672 2.57-16.672 10.615 0 5.487 4.378 10.265 9.427 10.265M967.97 501.593c11.209 13.198 14.45 15.381 48.891 39.554 20.649 14.683 30.451 22.716 38.405 31.549 7.619 8.781 11.596 17.575 11.596 27.48 0 19.396-15.935 32.594-39.49 32.594-20.62
…

预览参数

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

颜色

风格变体

细线 · 1.2px · 密集布局

常规 · 2px · 通用界面

加粗 · 3.5px · 大尺寸标题

关于 Whole Foods 图标

Whole Foods 是零售、农业食品分类下的矢量图标（SVG 格式），矢量特性意味着任意缩放不失真，适配网页、App、演示文稿与印刷物料。零售商超与电商平台品牌标识。

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

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

常见问题

Whole Foods 图标是什么？

Whole Foods 是零售、农业食品分类下的矢量图标（SVG 格式），矢量特性意味着任意缩放不失真，适配网页、App、演示文稿与印刷物料。

如何下载 Whole Foods 图标？

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

Whole Foods 图标可以商用吗？

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

如何修改 Whole Foods 图标的颜色？

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

SVG 健康报告

100/100

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

文件体积

14.03 KB

14,371 字节

viewBox

0 0 1164.375 796.2959999999999

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

图元总数

<path> ×1

风格

单色品牌

1 种品牌色 · 纯填充

提取色值#3f6f60

相似图标

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

同色系图标

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

#eff6f4#d8e9e4#b1d3c8#83b9a8#599c87#3f6f60#254139#0f1a17

Whole Foods 品牌色详表
RGB	HSL	CMYK	色名
63, 111, 96	161°, 28%, 34%	43, 0, 14, 56	品牌主色 · 炭黑色
216, 233, 228	162°, 28%, 88%	7, 0, 2, 9	浅灰色
177, 211, 200	161°, 28%, 76%	16, 0, 5, 17	银色
131, 185, 168	161°, 28%, 62%	29, 0, 9, 27	银色

Total Food Network

agriculture-food

#2fb457

图标信息摘要

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