滴落 · 管
dripping-tube
- 图标库
- Game Icons
- 作者
- GameIcons
正在读取图标颜色…
使用场景
颜色与描边跟随预览参数实时变化，以下为常见界面中的渲染效果。
按钮内
输入框
导航
空状态
暂无内容
场景预览
桌面 / 浏览器 / 按钮 / 导航栏
手机桌面 · App 图标
浏览器 · 标签页与站点
操作按钮 · 主次层级
底部导航 · Tab 栏
UI 使用示例
真实组件上下文中的渲染效果，代码可直接复制。
导航项
导航菜单
<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">
<!-- 内联 滴落 · 管 SVG -->
<span>导航菜单</span>
</a>主要按钮
立即开始
<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">
<!-- 内联 滴落 · 管 SVG -->
立即开始
</button>React 组件
内联引入
import { IconIcon } from './icons';
function Nav() {
return <IconIcon className="size-4" />;
}状态徽标
已完成
<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">
<!-- 内联 滴落 · 管 SVG -->
已完成
</span>输入框前缀
搜索框
<div class="flex items-center gap-2 rounded-lg border border-neutral-200 px-3 py-2 text-sm">
<!-- 内联 滴落 · 管 SVG -->
<input placeholder="搜索滴落 · 管…" class="w-full outline-none" />
</div>功能卡片
功能名称
功能名称
功能的一句话说明。
<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">
<!-- 内联 滴落 · 管 SVG -->
</span>
<p class="mt-3 text-sm font-medium">功能名称</p>
<p class="mt-1 text-xs text-neutral-500">功能的一句话说明。</p>
</div>动效图标
为 滴落 · 管 添加 CSS 动效，导出的 SVG 内嵌样式，单文件即可播放，无需任何依赖。
描画
线条从无到有依次绘出，适合线性图标
.icon-1a6b13f19f53f8f2 { stroke-dasharray: 1; animation: svg-draw 1.2s forwards; }呼吸
透明度往复渐变，适合状态提示图标
.icon-1a6b13f19f53f8f2 { animation: svg-breathe 1.8s infinite; }旋转
匀速循环旋转，适合加载中场景
.icon-1a6b13f19f53f8f2 { animation: svg-spin 1.6s linear infinite; }用法示例
滴落 · 管 在真实界面中的三种常见用法。
按钮内
16px · action 触发
导航项
18px · 列表选中态
暂无数据
空状态
40px · 引导提示
各尺寸下的 滴落 · 管
24px 到 128px 六个常用尺寸的真实渲染，用于检查小尺寸下的可读性。
24px
32px
48px
64px
96px
128px
下载 滴落 · 管 图标
SVG 矢量文件、PNG 位图（预设 16~512px 或自定义 16~1024px）、Favicon 包、App 图标包（iOS + Android）与矢量 PDF 一键导出；下载前可在下方「预览参数」改色，导出文件同步生效。
复制 滴落 · 管 图标代码
Web、移动端、桌面端与小程序共 17 种格式；代码基于当前预览颜色生成，复制即用。
<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M276.95 18.752c-17.61.005-29.2 5.172-33.776 13.1c-5.232 9.06-2.762 24.25 9.775 42.494c12.536 18.243 34.302 38.05 61.864 53.963c27.562 15.91 55.6 24.856 77.666 26.592c22.068 1.736 36.456-3.72 41.688-12.78c5.23-9.06 2.762-24.25-9.775-42.493s-34.303-38.05-61.866-53.964c-27.562-15.913-55.598-24.858-77.666-26.594a101 101 0 0 0-7.91-.32zm9.818 21.453c16.105.134 40.723 8.224 65.804 22.705c38.22 22.067 63.046 50.616 55.453 63.768s-44.732 5.925-82.95-16.14c-38.22-22.068-63.047-50.618-55.454-63.77c2.61-4.52 8.71-6.633 17.148-6.563zm-50.784 42.352L79.594 392.385c-10.137 17.762-10.692 36.284-4.504 51.6c6.224 15.41 18.583 27.613 33.222 35.6c14.64 7.99 31.752 11.89 48.39 9.743c16.64-2.145 32.87-10.827 43.554-27.033l.01-.018L388.914 173.33c-6.485-.61-13.232-1.71-20.172-3.29l-32.846 50.308c-.272-.25-.55-.5-.878-.77c-3.27-2.697-8.986-5.776-16.44-8.377c-14.908-5.2-36.63-8.684-60.63-8.684c-23.997 0-45.72 3.484-60.628 8.685a81 81 0 0 0-6.683 2.667l57.967-114.84c-4.098-4.665-7.81-9.377-11.055-14.097c-.542-.788-1.047-1.582-1.566-2.373zM415.03 184.553l-8.794 33.5c-7.48 28.495-19.135 51.737-29.22 71.646s-19.258 36.267-19.14 53.5c.217 31.9 26.61 57.75 58.634 57.505l-.008.002c32.01-.217 58.057-26.384 57.836-58.29c-.076-11.126-4-21.653-9.54-32.974c-.62-1.593-1.43-3.186-2.41-4.797c-2.39-4.645-4.986-9.447-7.656-14.505c-10.25-19.42-22.206-42.452-30.453-72.21zm-232.85 46.07c3.385 2.44 8.59 5.096 15.14 7.38c14.908 5.202 36.63 8.685 60.63 8.685c23.998 0 45.72-3.483 60.628-8.684a79 79 0 0 0 7.893-3.22l-16.365 25.068c-15.16 3.556-32.977 5.53-52.156 5.53c-25.762 0-49.088-3.553-66.788-9.728c-6.642-2.317-12.488-4.99-17.47-8.215l8.488-16.817zm233.242 19.498c.32.83.65 1.62.973 2.437c-1.073 34.75-13.116 59.906-8.944 75.015c4.384 15.93 20.963 25.358 36.974 20.852a30.15 30.15 0 0 0 11.226-5.83c.126 21.712-17.307 39.275-39.275 39.424h-.007c-21.97.167-39.654-17.217-39.8-38.944v-.002c-.067-9.577 7.017-24.98 17.12-44.927c6.888-13.598 14.798-29.615 21.735-48.024zm-191.04 29.74c9.492 0 17.186 7.697 17.186 17.19c0 9.49-7.694 17.184-17.185 17.184s-17.186-7.694-17.186-17.185c0-9.493 7.695-17.19 17.186-17.19zm-54.35 13.44c12.148 0 21.997 9.85 21.997 22s-9.85 21.997-22 21.997c-12.147 0-21.997-9.848-21.997-21.996c0-12.15 9.85-22 21.998-22zm22.007 57.81c13.287 0 24.058 10.775 24.058 24.064c0 13.287-10
…预览参数
调整颜色、描边或开启轮廓化，使用场景与用法示例实时跟随。
风格变体
细线 · 1.2px · 密集布局
常规 · 2px · 通用界面
加粗 · 3.5px · 大尺寸标题
关于 滴落 · 管 图标
滴落 · 管 是通用分类下的矢量图标（SVG 格式），矢量特性意味着任意缩放不失真，适配网页、App、演示文稿与印刷物料。该品牌在所属行业的官方标识。
在本页点击「下载」即可保存 滴落 · 管 的 SVG 矢量文件，或在下载面板中选择 PNG（16~512px）与 Favicon 包等导出方式；也可以直接复制 SVG 源码、Data URI 或 React/Vue 组件代码。
滴落 · 管 的品牌标志与名称版权归其品牌方所有，本站内容仅供学习与设计识别参考，请勿用于商标注册或误导性用途；商用前请确认品牌官方的使用规范与授权要求。文件体积 2.49 KB，viewBox 为 0 0 512 512，共 1 个矢量图元。
常见问题
滴落 · 管 图标是什么？
滴落 · 管 是通用分类下的矢量图标（SVG 格式），矢量特性意味着任意缩放不失真，适配网页、App、演示文稿与印刷物料。
如何下载 滴落 · 管 图标？
在本页点击「下载 SVG」即可保存 滴落 · 管 的矢量文件，或在下载面板中选择 PNG（16~512px）与 Favicon 包等导出方式；也可以直接复制 SVG 源码、Data URI 或 React/Vue 组件代码。
滴落 · 管 图标可以商用吗？
滴落 · 管 为品牌标志，版权归品牌方所有，本站内容仅供识别参考；商用前请先确认对应品牌的使用规范与授权要求。
如何修改 滴落 · 管 图标的颜色？
在「预览参数」面板中调整颜色与描边宽度，使用场景与用法示例会实时跟随，确认效果后再复制或下载即可。
SVG 健康报告
同时含 width/height 与 viewBox，可仅保留 viewBox 以自适应容器
文件体积
2.49 KB
2,554 字节
viewBox
0 0 512 512
同时含 width/height 与 viewBox，可仅保留 viewBox 以自适应容器
图元总数
1
<path> ×1
风格
单色轮廓
无显式填色，跟随容器 currentColor
图标信息摘要
滴落 · 管 是一个通用类别的单文件 SVG 矢量图标，文件体积 2.49 KB，协议为™ 品牌商标（版权归品牌方，仅供识别参考）。可在本站免费下载 滴落 · 管的 SVG 源文件与 PNG 位图（16-512px），支持自定义颜色与描边宽度、一键生成 Favicon 包，并提供 React / Vue 组件代码与 Data URI 引用。
