跳到主要内容
网站首页

图标库

← Arcticons
Tank

Tank

tank

图标库
Arcticons
作者
Arcticons Contributors

正在读取图标颜色…

使用场景

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

按钮内

输入框

搜索Tank...

导航

Tank

空状态

暂无内容

场景预览

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

手机桌面 · App 图标

9:41
Tank

浏览器 · 标签页与站点

ba280ef8cdde4065.example
Tank开始使用

操作按钮 · 主次层级

Tank
了解更多

底部导航 · Tab 栏

Tank
推荐收藏我的

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

React 组件

内联引入

react
import { TankIcon } from './icons';

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

输入框前缀

搜索框

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

动效图标

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

描画

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

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

呼吸

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

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

旋转

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

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

用法示例

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

继续下一步

按钮内
16px · action 触发

Tank

导航项
18px · 列表选中态

暂无数据

空状态
40px · 引导提示

各尺寸下的 Tank

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

24px

32px

48px

64px

96px

128px

下载 Tank 图标

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

按预览颜色导出px(16~1024)

复制 Tank 图标代码

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

svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M20.986 21.885h1.379M5.796 33.113c0 .603.124 1.164.509 1.634c.046.369.145.715.425.844c.068.318.188.632.509.8c-.02.39.154.735.523.841c.019.36.212.545.45.687c.015.372.258.681.587.865l.148.335h4.26l-.148-.335c-.328-.184-.571-.493-.586-.865c-.238-.142-.432-.328-.45-.687c-.37-.106-.543-.452-.524-.84c-.32-.17-.44-.483-.509-.801c-.28-.129-.379-.475-.425-.844c-.385-.47-.509-1.03-.509-1.634"/><path d="m13.1 39.114l11.892-2.52c.366-.077.648-.607.593-1.175M7.927 33.022c.162 2.181 1.463 4.218 2.738 6.022m15.138-5.578c-.16.656-.174 1.265.12 1.776c-.049.4-.033.777.238.917c-.011.346.036.687.34.87c-.124.423-.027.798.345.914c-.074.39.087.592.308.746c-.083.405.099.74.407.94l.072.365h4.63l-.072-.365c-.308-.2-.49-.535-.407-.94c-.221-.154-.382-.356-.307-.746c-.373-.116-.47-.491-.346-.913c-.304-.184-.35-.525-.34-.87c-.27-.14-.287-.517-.238-.918c-.294-.51-.28-1.12-.12-1.776"/><path d="m32.24 39.984l8.624-3.223l1.311-3.869l.1-2.424m-14.296 2.921c.184 3.047.945 4.637 1.994 6.513m4.683-9.218l.072 1.552l1.384-.22l.006-.682l.529-.108l-.015-.877m.798.039l.071 1.552l1.384-.22l.006-.682l.529-.108l-.014-.877M12.605 28.51c-1.83.109-2.287 2.754-2.537 4.543l-5.568-.08c.33-1.343.516-4.515 2.764-4.5z"/><path d="M30.536 33.363c.094-1.871.353-4.585 1.86-4.715l10.675-.62l.429 3.13l-2.553-1.439l-6.515.743z"/><path d="M32.397 28.648L26.02 28.6c-1.134-.01-1.567 3.17-1.74 4.82l6.256-.058m-19.692 1.67c4.955.085 9.911.253 14.867.418M12.95 33.671h2.577m4.446.217h2.578"/><path d="m30.584 28.635l2.1-6.153l3.173.096l5.726 3.725l.061 1.807m-8.961-5.628l-20.99.16L8.9 28.484m4.146-.68h13.507M12.097 21.81a.767.767 0 0 1-1.535 0a.767.767 0 1 1 1.535 0m-.762.765l.045 1.916m21.014-2.851a.767.767 0 1 1-1.534 0a.767.767 0 0 1 1.534 0m-.762.766l-.268 1.917m-.014 2.879l1.342 1.361m.276-1.413l1.342 1.362m.173-1.395l1.315 1.334m.164-1.429l1.323 1.342m.294-1.394l1.283 1.303m.215-1.388l1.282 1.3m.181-1.385l1.283 1.301m-23.285-6.539l-.299.87m12.79-9.36l.24 1.409l2.197-.334l-.175-1.463zm.053.315l-5.91-.684m5.925 3.765v-2.995M17.55 19.992c-.08.617.061 1.18.715 1.574l5.819-.064c-1.046-1.269-.5-3.028.561-3.146c-.237-.4-.687-.616-1.236-.566l-3.78.348c-.822.074-1.246.155-1.513.397"/><path d="m24.681 18.333l.694.35l-1.391 2.753m-4.498-1.031c.35.056.664-.379.644-.964c-.013-.372-.1
…

预览参数

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

风格变体

细线 · 1.2px · 密集布局

常规 · 2px · 通用界面

加粗 · 3.5px · 大尺寸标题

关于 Tank 图标

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

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

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

常见问题

Tank 图标是什么?

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

如何下载 Tank 图标?

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

Tank 图标可以商用吗?

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

如何修改 Tank 图标的颜色?

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

SVG 健康报告

100/100

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

文件体积

2.73 KB

2,796 字节

viewBox

0 0 48 48

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

图元总数

8

<path> ×8

风格

单色轮廓

纯描边线性风格,当前色由 stroke 继承

图标信息摘要

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

继续探索

相关搜索

暂无推荐

Command Palette

Search for a command to run...