SVG 图标

Hyper Fuel

还没有评分，抢首评

汽车

复制与下载

SVG 矢量格式 · 当前版本

使用场景

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

按钮内

输入框

搜索Hyper Fuel...

导航

Hyper Fuel

空状态

暂无内容

场景预览

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

手机桌面 · App 图标

9:41

Hyper Fuel

浏览器 · 标签页与站点

685f949f7be3fc0c.example

Hyper Fuel开始使用

操作按钮 · 主次层级

Hyper Fuel了解更多

底部导航 · Tab 栏

Hyper Fuel推荐收藏我的

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

React 组件

内联引入

react

import { HyperFuelIcon } from './icons';

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

输入框前缀

搜索框

搜索Hyper Fuel…

html

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

动效图标

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

描画

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

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

呼吸

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

.icon-685f949f7be3fc0c { animation: svg-breathe 1.8s infinite; }

旋转

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

.icon-685f949f7be3fc0c { animation: svg-spin 1.6s linear infinite; }

用法示例

Hyper Fuel 在真实界面中的三种常见用法。

继续下一步

按钮内
16px · action 触发

Hyper Fuel

导航项
18px · 列表选中态

暂无数据

空状态
40px · 引导提示

各尺寸下的 Hyper Fuel

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

24px

32px

48px

64px

96px

128px

下载 Hyper Fuel 图标

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

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

复制 Hyper Fuel 图标代码

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

svg

<svg clip-rule="evenodd" fill-rule="evenodd" image-rendering="optimizeQuality" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" viewBox="0 0 28137.18 8495.59" xmlns="http://www.w3.org/2000/svg"><path d="m4136.27 11.7h1752.33l-145.84 786.41h-1752.33zm3016.04 36.59h1360.41l-774.54 3596.41h-1360.42l295.16-1370.42h-1290.61l-311.89 1367.74h-1752.33l488.13-2140.65h3033.15zm1702.94-16.76 1136.4 2540.95-229.39 1060.47h1782.77l271.08-1028.97 1761.93-2593.47h-1334.48l-980.01 1417.48-656.81-1427.96zm5103.82-31.51-190.54 798.04 2837.69 20.24s230.61 141.75 210.56 334.12c-20.04 192.36-110.29 313.9-250.68 324l-140.38 10.1h-2807.58l-491.32 2146.41h1754.73l330.9-1417.43h1844.98s882.41-182.27 1072.92-951.73c190.51-769.45-371.04-1154.18-601.65-1194.69-230.6-40.52-3569.63-69.06-3569.63-69.06zm4928.35 14.99h4370.48l-156.57 828.1h-4370.5zm-659.86 2832.1h9.07l113.81-585.07 25.32-130.21 124.89-642.01h4398.77l-150.21 772.22h-2612.91l-85.54 585.07h2547.29l-152.2 829.18h-4370.5zm5547.83-2847.11-190.54 798.07 2837.7 20.24s230.6 141.73 210.55 334.11c-20.04 192.35-110.29 313.89-250.68 323.99l-140.38 10.11h-2807.58l-491.32 2146.4h1754.74l330.89-1417.43 1266.12 1424.66h1401.02l-1266.15-1424.66h443.99s882.41-182.25 1072.92-951.71c190.51-769.47-371.04-1154.2-601.65-1194.7-230.6-40.52-3569.63-69.08-3569.63-69.08zm-20678.51 4175.26h3428.85l-167.01 706.54h-3428.86zm11114.02-41.23h1332.2l-487.28 2066.16h2007.3l-169.33 718.08h-3339.5l656.62-2784.23zm-3932.31 1084.53h3372.31l-136.12 656.87h-1884.48l-84.26 364.86h1849.57l-167.02 735.01h-3344.02l394.03-1756.74zm215.26-1043.3h3428.85l-167.01 706.54h-3428.86zm-3723.25-34.33h1420.92c-129.27 567.6-249.97 1122.16-396.17 1686.71-106.79 412.31 69.52 445.31 450.1 449.3 486.55 5.07 478.03-270.58 553.01-663.35 89.49-469.19 200.84-939.89 301.4-1407.32h1102.99c-136.48 603.2-258.29 1226.33-409.28 1823.8-98.79 390.8-357.12 650.38-714.83 820.1-209.42 99.38-339.43 82.41-571.08 86.2-423.92 6.89-854.51 1.9-1279.91 3.24-302.28.97-496.78-34.02-708.5-271.34-219.44-246-157.49-491.71-108.74-788.03 95.85-582.47 260.09-1156.4 360.1-1739.32zm-3888.99 1077.63h3372.31l-143.67 694.46h-1884.48l-246.46 1062.28h-1491.72l282.34-1216.9z" fill="#2b2a29"/><path d="m3159.03 4254.51-129.55 548.05h3267.09l129.55-548.05zm11114.05-41.23-619.24 2625.74h3177.77l131.96-559.58h-2007.31l487.28-2066.16zm-3931.6 1084.52-358.46 1598.25h3182.87l130.99-576.51h-1849.93l120.87-
…

预览参数

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

颜色

风格变体

细线 · 1.2px · 密集布局

常规 · 2px · 通用界面

加粗 · 3.5px · 大尺寸标题

关于 Hyper Fuel 图标

Hyper Fuel 是汽车分类下的矢量图标（SVG 格式），矢量特性意味着任意缩放不失真，适配网页、App、演示文稿与印刷物料。汽车厂商与出行品牌的标识。

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

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

常见问题

Hyper Fuel 图标是什么？

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

如何下载 Hyper Fuel 图标？

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

Hyper Fuel 图标可以商用吗？

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

如何修改 Hyper Fuel 图标的颜色？

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

SVG 健康报告

100/100

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

文件体积

19.79 KB

20,262 字节

viewBox

0 0 28137.18 8495.59

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

图元总数

<path> ×6

风格

多彩

4 种品牌色 · 纯填充

提取色值#2b2a29#cb01ab#01d0f8#0034da

相似图标

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

73%

73%

71%

71%

70%

69%

68%

68%

Hyperion Communications

67%

66%

65%

64%

同色系图标

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

#f3f2f2#e1e0e0#c3c2c0#a09e9c#7d7a77#2b2a29#2a2928#151414

Hyper Fuel 品牌色详表
RGB	HSL	CMYK	色名
43, 42, 41	30°, 2%, 16%	0, 2, 5, 83	品牌主色 · 深灰色
225, 224, 224	0°, 2%, 88%	0, 0, 0, 12	浅灰色
195, 194, 192	40°, 2%, 76%	0, 1, 2, 24	银色
160, 158, 156	30°, 2%, 62%	0, 1, 2, 37	灰色

#999999

#a6a6a6

#212121

#aaa9aa

#828197

#929496

图标信息摘要

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