使用场景
颜色与描边跟随预览参数实时变化,以下为常见界面中的渲染效果。
按钮内
输入框
导航
空状态
暂无内容
场景预览
桌面 / 浏览器 / 按钮 / 导航栏
手机桌面 · 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">
<!-- 内联 Dynomax 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">
<!-- 内联 Dynomax SVG -->
立即开始
</button>React 组件
内联引入
import { DynomaxIcon } from './icons';
function Nav() {
return <DynomaxIcon 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">
<!-- 内联 Dynomax SVG -->
已完成
</span>输入框前缀
搜索框
<div class="flex items-center gap-2 rounded-lg border border-neutral-200 px-3 py-2 text-sm">
<!-- 内联 Dynomax SVG -->
<input placeholder="搜索Dynomax…" 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">
<!-- 内联 Dynomax SVG -->
</span>
<p class="mt-3 text-sm font-medium">功能名称</p>
<p class="mt-1 text-xs text-neutral-500">功能的一句话说明。</p>
</div>动效图标
为 Dynomax 添加 CSS 动效,导出的 SVG 内嵌样式,单文件即可播放,无需任何依赖。
描画
线条从无到有依次绘出,适合线性图标
.icon-7875daa2f79d9845 { stroke-dasharray: 1; animation: svg-draw 1.2s forwards; }呼吸
透明度往复渐变,适合状态提示图标
.icon-7875daa2f79d9845 { animation: svg-breathe 1.8s infinite; }旋转
匀速循环旋转,适合加载中场景
.icon-7875daa2f79d9845 { animation: svg-spin 1.6s linear infinite; }用法示例
Dynomax 在真实界面中的三种常见用法。
按钮内
16px · action 触发
导航项
18px · 列表选中态
暂无数据
空状态
40px · 引导提示
各尺寸下的 Dynomax
24px 到 128px 六个常用尺寸的真实渲染,用于检查小尺寸下的可读性。
24px
32px
48px
64px
96px
128px
下载 Dynomax 图标
SVG 矢量文件、PNG 位图(预设 16~512px 或自定义 16~1024px)、Favicon 包、App 图标包(iOS + Android)与矢量 PDF 一键导出;下载前可在下方「预览参数」改色,导出文件同步生效。
复制 Dynomax 图标代码
Web、移动端、桌面端与小程序共 17 种格式;代码基于当前预览颜色生成,复制即用。
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192.756 192.756"><g fill-rule="evenodd" clip-rule="evenodd"><path d="M173.871 95.728l7.141-13.245h-9.965l-3.986 5.771-3.154-5.771h-7.641l.832-10.337-25.244 24.911-2.656-14.573h-9.467l-3.486 7.764-3.156-7.764h-8.469l-2.326 9.757-.016.112c-.994-4.054-3.912-9.953-12.458-10.99-.617-.105-6.834-.977-11.771 4.893v-4.904H67.253v5.386l-5.576-5.386H46.838l-5.182 6.641-5.487-6.641H9.294v29.932h11.602c.483.021 5.598.143 9.509-3.676 2.521-2.461 3.94-5.965 4.245-10.434l1.382 1.727v12.383h11.292v-12.23l5.314-7.006v19.236h10.628V100.51l14.78 13.785v-7.424c1.868 2.488 5.333 5.297 11.459 5.297h.042c.096-.004 7.142-.396 10.919-6.803l-.332 5.604h8.801l2.492-11.338 4.816 11.338 5.148-11.338 2.822 11.338h9.135l3.305-5.277h7.227l-1.896 5.277h20.926l4.316-7.27 4.816 7.27h10.629l-8.8-15.241z"/><path d="M76.31 93.733c2.848-11.996 13.244-10.396 13.244-10.396 11.382 1.366 11.257 12.329 11.245 12.798-.303 13.162-10.653 14.004-11.312 14.041-8.589-.008-12.417-6.492-13.177-11.035v10.238L61.274 95.927v13.362h-6.643V86.123l-9.3 12.258v10.908h-7.307V98.201l-5.808-7.635.506 4.86c-.021 4.742-1.261 8.352-3.692 10.738-3.382 3.316-8.014 3.129-8.061 3.127h-.024c-.002-.002-.027-.002-.027-.002h-9.632V83.343h9.17c6.477.25 8.932 3.666 8.932 3.666l-2.067-3.666h7.908l6.47 7.831 6.111-7.831h13.061l8.374 8.089v-8.089h7.064v10.39h.001zM146.508 98.385h-5.278l12.379-19.762-7.101 19.762z" fill="#fff"/><path d="M89.008 89.456c-3.139 0-5.694 3.186-5.694 7.103 0 2.172.776 4.195 2.128 5.547 1.003 1.004 2.27 1.555 3.566 1.555s2.563-.551 3.566-1.555c1.353-1.352 2.128-3.375 2.128-5.547 0-2.174-.775-4.196-2.128-5.548-1.003-1.003-2.27-1.555-3.566-1.555z"/><path d="M89.008 101.668c-.979 0-1.713-.529-2.157-.973-.967-.965-1.544-2.514-1.544-4.137 0-1.625.577-3.172 1.544-4.139.443-.443 1.177-.972 2.157-.972s1.713.528 2.157.972c.967.966 1.544 2.514 1.544 4.139 0 2.817-1.661 5.11-3.701 5.11z" fill="#fff"/><path d="M18.594 90.248h-.997v11.991l.855.123c.123.018 3.026.408 5.068-1.363 1.231-1.068 1.861-2.646 1.879-4.688.035-.342.179-2.382-1.263-4.028-1.181-1.351-3.046-2.035-5.542-2.035z"/><path d="M23.417 96.102s-.008.066-.008.125c0 1.475-.399 2.57-1.186 3.258-.806.705-1.888.889-2.634.924v-8.115c1.37.136 2.392.564 3.033 1.286.955 1.071.797 2.507.795 2.522zM155.768 87.922l-1.993 18.766 5.979-10.96-3.986-7.806z" fill="#fff"/><path d="M123.715 74.636a21.372 21.372 0 0 0-2.207 4.46
…预览参数
调整颜色、描边或开启轮廓化,使用场景与用法示例实时跟随。
风格变体
细线 · 1.2px · 密集布局
常规 · 2px · 通用界面
加粗 · 3.5px · 大尺寸标题
关于 Dynomax 图标
Dynomax 是通用分类下的矢量图标(SVG 格式),矢量特性意味着任意缩放不失真,适配网页、App、演示文稿与印刷物料。该品牌在所属行业的官方标识。
在本页点击「下载」即可保存 Dynomax 的 SVG 矢量文件,或在下载面板中选择 PNG(16~512px)与 Favicon 包等导出方式;也可以直接复制 SVG 源码、Data URI 或 React/Vue 组件代码。
Dynomax 的品牌标志与名称版权归其品牌方所有,本站内容仅供学习与设计识别参考,请勿用于商标注册或误导性用途;商用前请确认品牌官方的使用规范与授权要求。文件体积 8.60 KB,viewBox 为 0 0 192.756 192.756,共 21 个矢量图元。
常见问题
Dynomax 图标是什么?
Dynomax 是通用分类下的矢量图标(SVG 格式),矢量特性意味着任意缩放不失真,适配网页、App、演示文稿与印刷物料。
如何下载 Dynomax 图标?
在本页点击「下载 SVG」即可保存 Dynomax 的矢量文件,或在下载面板中选择 PNG(16~512px)与 Favicon 包等导出方式;也可以直接复制 SVG 源码、Data URI 或 React/Vue 组件代码。
Dynomax 图标可以商用吗?
Dynomax 为品牌标志,版权归品牌方所有,本站内容仅供识别参考;商用前请先确认对应品牌的使用规范与授权要求。
如何修改 Dynomax 图标的颜色?
在「预览参数」面板中调整颜色与描边宽度,使用场景与用法示例会实时跟随,确认效果后再复制或下载即可。
SVG 健康报告
同时含 width/height 与 viewBox,可仅保留 viewBox 以自适应容器
文件体积
8.60 KB
8,805 字节
viewBox
0 0 192.756 192.756
同时含 width/height 与 viewBox,可仅保留 viewBox 以自适应容器
图元总数
21
<path> ×21
风格
单色轮廓
无显式填色,跟随容器 currentColor
相似图标
按名称与标签相似度排序。
Dynomax 的其他风格版本
同名图标的不同绘制风格,切换后预览与下载均使用所选版本。
图标信息摘要
Dynomax 是一个通用类别的单文件 SVG 矢量图标,文件体积 8.60 KB,协议为™ 品牌商标(版权归品牌方,仅供识别参考)。可在本站免费下载 Dynomax的 SVG 源文件与 PNG 位图(16-512px),支持自定义颜色与描边宽度、一键生成 Favicon 包,并提供 React / Vue 组件代码与 Data URI 引用。
继续探索
相关搜索
相关图标
暂无相关图标

