dragonfly
Custom Brand Icons
Dragonfly
dragonfly
- 图标库
- Game Icons
- 作者
- Game Icons Contributors
- 许可
- CC BY 3.0
正在读取图标颜色…
使用场景
颜色与描边跟随预览参数实时变化，以下为常见界面中的渲染效果。
按钮内
输入框
搜索Dragonfly...
导航
Dragonfly
空状态
暂无内容
场景预览
桌面 / 浏览器 / 按钮 / 导航栏
手机桌面 · App 图标
9:41
Dragonfly
浏览器 · 标签页与站点
8256c683585aba0f.example
Dragonfly开始使用
操作按钮 · 主次层级
Dragonfly了解更多
底部导航 · Tab 栏
Dragonfly推荐收藏我的
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">
<!-- 内联 Dragonfly 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">
<!-- 内联 Dragonfly SVG -->
立即开始
</button>React 组件
内联引入
react
import { DragonflyIcon } from './icons';
function Nav() {
return <DragonflyIcon 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">
<!-- 内联 Dragonfly SVG -->
已完成
</span>输入框前缀
搜索框
搜索Dragonfly…
html
<div class="flex items-center gap-2 rounded-lg border border-neutral-200 px-3 py-2 text-sm">
<!-- 内联 Dragonfly SVG -->
<input placeholder="搜索Dragonfly…" 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">
<!-- 内联 Dragonfly SVG -->
</span>
<p class="mt-3 text-sm font-medium">功能名称</p>
<p class="mt-1 text-xs text-neutral-500">功能的一句话说明。</p>
</div>动效图标
为 Dragonfly 添加 CSS 动效，导出的 SVG 内嵌样式，单文件即可播放，无需任何依赖。
描画
线条从无到有依次绘出，适合线性图标
.icon-8256c683585aba0f { stroke-dasharray: 1; animation: svg-draw 1.2s forwards; }呼吸
透明度往复渐变，适合状态提示图标
.icon-8256c683585aba0f { animation: svg-breathe 1.8s infinite; }旋转
匀速循环旋转，适合加载中场景
.icon-8256c683585aba0f { animation: svg-spin 1.6s linear infinite; }用法示例
Dragonfly 在真实界面中的三种常见用法。
继续下一步
按钮内
16px · action 触发
Dragonfly
导航项
18px · 列表选中态
暂无数据
空状态
40px · 引导提示
各尺寸下的 Dragonfly
24px 到 128px 六个常用尺寸的真实渲染，用于检查小尺寸下的可读性。
24px
32px
48px
64px
96px
128px
下载 Dragonfly 图标
SVG 矢量文件、PNG 位图（预设 16~512px 或自定义 16~1024px）、Favicon 包、App 图标包（iOS + Android）与矢量 PDF 一键导出；下载前可在下方「预览参数」改色，导出文件同步生效。
按预览颜色导出px（16~1024）
复制 Dragonfly 图标代码
Web、移动端、桌面端与小程序共 17 种格式；代码基于当前预览颜色生成，复制即用。
svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M131.613 21.576a36 36 0 0 0-1.998.05a34 34 0 0 0-4.52.55c-11.974 2.296-21.052 13.1-23.2 26.908c-1.396 8.968-.708 19.472 2.136 31.824a105 105 0 0 0-7.227-2.967c-7.13-2.6-14-4.21-20.438-4.467s-12.443.842-17.84 3.662c-10.794 5.64-16.044 18.626-14.44 32.8c1.602 14.17 8.625 30.916 21.837 51.21C85.398 191.062 114.3 228.23 144.48 253.7c14.917 12.59 30.117 22.445 45.584 26.738c-.845-6.264-.584-12.854.627-19.44c-10.287-3.848-22.168-11.46-34.16-21.58c-27.774-23.44-56.247-59.745-74.946-88.47c-12.245-18.808-17.856-33.625-18.93-43.116s.955-12.268 4.528-14.135s11.803-2.362 23.216 1.8c6.458 2.357 13.792 6.067 21.65 11.18c11.93 32.113 30.72 71.88 53.518 102.02c9.756 12.898 20.218 24.092 31.672 32.06c2.543-5.522 5.687-10.984 9.403-16.294c-8.655-6.367-17.628-15.747-26.17-27.04c-14.347-18.968-27.52-43.103-38.09-66.32c32.386 29.372 52.07 54.056 72.23 83.198a123 123 0 0 1 13.552-13.241c-22.464-32.146-45.464-60.11-85.05-94.265c-5.26-4.537-10.46-8.602-15.573-12.21c-6.9-19.66-8.5-34.132-7.18-42.628c1.36-8.733 3.763-10.564 8.255-11.426c4.493-.86 13.276 1.01 23.797 7.91c10.52 6.9 22.59 18.372 34.285 34.187c30.384 41.094 45.308 71.17 59.217 106.19c5.643-3.123 11.385-5.618 17.12-7.444c-14.292-35.772-30.187-67.765-61.31-109.857c-12.76-17.26-26.134-30.224-39.062-38.704c-10.605-6.955-21.034-11.202-31.05-11.236zM292.355 122.99a22.1 22.1 0 0 0-15.687 6.498c-8.665 8.665-8.665 22.715 0 31.38c4.917 4.918 11.566 7.04 17.982 6.378c-4.65 11.852-2.165 25.768 7.47 35.404c9.343 9.343 22.71 11.97 34.316 7.885c-.43 6.184 1.71 12.515 6.437 17.242c8.665 8.666 22.714 8.665 31.38 0c8.664-8.665 8.664-22.715 0-31.38c-4.767-4.766-11.16-6.905-17.392-6.428c3.984-11.56 1.338-24.823-7.95-34.11c-6.5-6.5-14.947-9.75-23.394-9.75c-3.78 0-7.56.657-11.164 1.958c.86-6.598-1.238-13.51-6.307-18.58a22.12 22.12 0 0 0-15.69-6.498zm-15.388 74.147a58 58 0 0 0-2.574.5c-13.036 2.85-28.087 11.024-41.024 23.96c-12.937 12.938-21.11 27.99-23.96 41.026c-2.175 9.95-1.36 18.227 1.922 24.367c-46.51 35.78-149.555 119.44-185.19 139.307c-14.113 46.802-2.547 79.386 57.16 57.16c18.846-36.327 105.196-141.11 141.325-185.81c5.487 1.66 12.187 1.78 19.898.093c13.036-2.85 28.087-11.024 41.024-23.96c12.935-12.938 21.108-27.99 23.958-41.026c.304-1.394.537-2.747.726-4.074a51.3 51.3 0 0 1-21.328-12.815a51.3 51.3 0 0 1-11.94-18.728zm48.976 46.455c-1.79 5.75-4.26
…预览参数
调整颜色、描边或开启轮廓化，使用场景与用法示例实时跟随。
风格变体
细线 · 1.2px · 密集布局
常规 · 2px · 通用界面
加粗 · 3.5px · 大尺寸标题
关于 Dragonfly 图标
Dragonfly 是通用分类下的矢量图标（SVG 格式），矢量特性意味着任意缩放不失真，适配网页、App、演示文稿与印刷物料。该品牌在所属行业的官方标识。
在本页点击「下载」即可保存 Dragonfly 的 SVG 矢量文件，或在下载面板中选择 PNG（16~512px）与 Favicon 包等导出方式；也可以直接复制 SVG 源码、Data URI 或 React/Vue 组件代码。
Dragonfly 的品牌标志与名称版权归其品牌方所有，本站内容仅供学习与设计识别参考，请勿用于商标注册或误导性用途；商用前请确认品牌官方的使用规范与授权要求。文件体积 3.68 KB，viewBox 为 0 0 512 512，共 1 个矢量图元。
常见问题
Dragonfly 图标是什么？
Dragonfly 是通用分类下的矢量图标（SVG 格式），矢量特性意味着任意缩放不失真，适配网页、App、演示文稿与印刷物料。
如何下载 Dragonfly 图标？
在本页点击「下载 SVG」即可保存 Dragonfly 的矢量文件，或在下载面板中选择 PNG（16~512px）与 Favicon 包等导出方式；也可以直接复制 SVG 源码、Data URI 或 React/Vue 组件代码。
Dragonfly 图标可以商用吗？
Dragonfly 为品牌标志，版权归品牌方所有，本站内容仅供识别参考；商用前请先确认对应品牌的使用规范与授权要求。
如何修改 Dragonfly 图标的颜色？
在「预览参数」面板中调整颜色与描边宽度，使用场景与用法示例会实时跟随，确认效果后再复制或下载即可。
SVG 健康报告
100/100
同时含 width/height 与 viewBox，可仅保留 viewBox 以自适应容器
文件体积
3.68 KB
3,764 字节
viewBox
0 0 512 512
同时含 width/height 与 viewBox，可仅保留 viewBox 以自适应容器
图元总数
1
<path> ×1
风格
单色轮廓
无显式填色，跟随容器 currentColor
图标信息摘要
Dragonfly 是一个通用类别的单文件 SVG 矢量图标，文件体积 3.68 KB，协议为™ 品牌商标（版权归品牌方，仅供识别参考）。可在本站免费下载 Dragonfly的 SVG 源文件与 PNG 位图（16-512px），支持自定义颜色与描边宽度、一键生成 Favicon 包，并提供 React / Vue 组件代码与 Data URI 引用。
继续探索
相关搜索
暂无推荐
Dragonfly 在其他图标库
同名不同风格的版本，点击查看与下载
已显示全部 24 项
