使用场景
颜色与描边跟随预览参数实时变化,以下为常见界面中的渲染效果。
按钮内
输入框
导航
空状态
暂无内容
场景预览
桌面 / 浏览器 / 按钮 / 导航栏
手机桌面 · 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">
<!-- 内联 ZenMux 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">
<!-- 内联 ZenMux SVG -->
立即开始
</button>React 组件
内联引入
import { ZenMuxIcon } from './icons';
function Nav() {
return <ZenMuxIcon 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">
<!-- 内联 ZenMux SVG -->
已完成
</span>输入框前缀
搜索框
<div class="flex items-center gap-2 rounded-lg border border-neutral-200 px-3 py-2 text-sm">
<!-- 内联 ZenMux SVG -->
<input placeholder="搜索ZenMux…" 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">
<!-- 内联 ZenMux SVG -->
</span>
<p class="mt-3 text-sm font-medium">功能名称</p>
<p class="mt-1 text-xs text-neutral-500">功能的一句话说明。</p>
</div>动效图标
为 ZenMux 添加 CSS 动效,导出的 SVG 内嵌样式,单文件即可播放,无需任何依赖。
描画
线条从无到有依次绘出,适合线性图标
.icon-7ff9d8681249701a { stroke-dasharray: 1; animation: svg-draw 1.2s forwards; }呼吸
透明度往复渐变,适合状态提示图标
.icon-7ff9d8681249701a { animation: svg-breathe 1.8s infinite; }旋转
匀速循环旋转,适合加载中场景
.icon-7ff9d8681249701a { animation: svg-spin 1.6s linear infinite; }用法示例
ZenMux 在真实界面中的三种常见用法。
按钮内
16px · action 触发
导航项
18px · 列表选中态
暂无数据
空状态
40px · 引导提示
各尺寸下的 ZenMux
24px 到 128px 六个常用尺寸的真实渲染,用于检查小尺寸下的可读性。
24px
32px
48px
64px
96px
128px
下载 ZenMux 图标
SVG 矢量文件、PNG 位图(预设 16~512px 或自定义 16~1024px)、Favicon 包、App 图标包(iOS + Android)与矢量 PDF 一键导出;下载前可在下方「预览参数」改色,导出文件同步生效。
复制 ZenMux 图标代码
Web、移动端、桌面端与小程序共 17 种格式;代码基于当前预览颜色生成,复制即用。
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" fill-rule="evenodd">
<title>ZenMux</title>
<path clip-rule="evenodd"
d="M76.5655 12.5465C83.6841 12.273 98.0909 13.2144 109.616 23.5631C119.071 32.0522 122.328 47.7904 120.125 59.9938C118.105 71.1802 113.346 80.3327 115.21 88.8073C117.074 97.2819 121.818 101.46 125.854 103.215C129.752 104.909 133.52 104.401 132.803 107.621C132.085 110.841 127.21 112.028 123.65 112.028C121.698 112.028 115.795 111.519 113.176 109.824C110.081 107.821 109.391 106.026 108.213 104.583C108.013 104.338 107.66 104.509 107.707 104.821C108.244 108.371 109.724 114.394 112.125 118.13C114.068 121.152 114.871 123.356 119.322 127.085C123.774 130.813 125.853 134.203 121.525 136.604C117.68 138.736 109.322 134.373 104.407 128.977C99.9829 124.12 96.9028 118.129 95.6846 114.231C95.0335 112.147 94.3811 108.562 93.7296 105.63C93.644 105.244 93.116 105.306 93.1046 105.701C92.8883 113.164 91.7152 120.291 90.0001 127.932C88.7652 133.433 85.7626 140.135 83.0508 144.203C79.7442 149.163 74.8354 150.711 71.1866 149.355C68.2684 148.27 70.3392 144.582 71.1866 141.389C72.034 138.197 73.7294 131.519 74.8712 124.203C75.9046 117.581 76.1781 111.026 75.7178 104.815C75.6893 104.436 75.1073 104.378 74.9893 104.739C74.0382 107.652 72.2455 112.481 70.9376 115.418C68.2097 121.543 66.1909 124.231 60.5977 130.672C55.5676 136.464 41.1004 144.655 39.2422 136.604C38.7338 134.401 41.3978 133.436 43.8546 131.519C47.5476 128.638 50.6336 123.525 53.5596 117.282C56.1869 111.676 57.5223 106.253 57.7266 102.791C57.746 102.457 57.3268 102.331 57.1387 102.607C55.9225 104.391 54.1317 106.805 52.1592 108.807C48.8643 112.152 45.2098 115.595 40.9717 117.282C34.1576 119.994 27.2089 118.129 27.7169 113.215C28.1415 109.109 32.725 109.959 38.4307 103.734C44.0239 97.6323 45.8876 92.8857 46.2266 87.6315C46.4975 83.428 42.3854 73.4513 40.295 68.9879C36.9616 61.8693 34.4984 41.666 44.5323 28.6491C57.0743 12.3784 72.1582 12.7159 76.5655 12.5465ZM57.0001 40.9997C52.3335 40.9997 50.0002 44.5815 50.0001 48.9997C50.0001 53.4179 52.5927 56.9997 57.0001 56.9997C61.4074 56.9996 64.0001 53.4179 64.0001 48.9997C63.9999 44.5816 61.6666 40.9997 57.0001 40.9997ZM95.0001 40.9997C90.3335 40.9997 88.0002 44.5815 88.0001 48.9997C88.0001 53.4179 90.5927 56.9997 95.0001 56.9997C99.4074 56.9996 102 53.4179 102 48.9997C102 44.5816 99.6666 40.9997 95.0001 40.9997Z"
…预览参数
调整颜色、描边或开启轮廓化,使用场景与用法示例实时跟随。
风格变体
细线 · 1.2px · 密集布局
常规 · 2px · 通用界面
加粗 · 3.5px · 大尺寸标题
关于 ZenMux 图标
ZenMux 是AI、软件SaaS分类下的矢量图标(SVG 格式),矢量特性意味着任意缩放不失真,适配网页、App、演示文稿与印刷物料。主流 AI 公司与机器学习平台的品牌标识。
在本页点击「下载」即可保存 ZenMux 的 SVG 矢量文件,或在下载面板中选择 PNG(16~512px)与 Favicon 包等导出方式;也可以直接复制 SVG 源码、Data URI 或 React/Vue 组件代码。 了解 ZenMux 更多信息可访问官方网站。
ZenMux 的品牌标志与名称版权归其品牌方所有,本站内容仅供学习与设计识别参考,请勿用于商标注册或误导性用途;商用前请确认品牌官方的使用规范与授权要求(参见品牌官网)。文件体积 2.38 KB,viewBox 为 0 0 24 24,共 1 个矢量图元。
常见问题
ZenMux 图标是什么?
ZenMux 是AI、软件SaaS分类下的矢量图标(SVG 格式),矢量特性意味着任意缩放不失真,适配网页、App、演示文稿与印刷物料。
如何下载 ZenMux 图标?
在本页点击「下载 SVG」即可保存 ZenMux 的矢量文件,或在下载面板中选择 PNG(16~512px)与 Favicon 包等导出方式;也可以直接复制 SVG 源码、Data URI 或 React/Vue 组件代码。
ZenMux 图标可以商用吗?
ZenMux 为品牌标志,版权归品牌方所有,本站内容仅供识别参考;商用前请先确认对应品牌的使用规范与授权要求。
如何修改 ZenMux 图标的颜色?
在「预览参数」面板中调整颜色与描边宽度,使用场景与用法示例会实时跟随,确认效果后再复制或下载即可。
SVG 健康报告
文件结构良好,未检测到问题
文件体积
2.38 KB
2,434 字节
viewBox
0 0 24 24
缩放适配正常
图元总数
1
<path> ×1
风格
单色轮廓
无显式填色,跟随容器 currentColor
相似图标
按名称与标签相似度排序。
图标信息摘要
ZenMux 是一个AI、软件SaaS类别的单文件 SVG 矢量图标,文件体积 2.38 KB,协议为™ 品牌商标(版权归品牌方,仅供识别参考)。可在本站免费下载 ZenMux的 SVG 源文件与 PNG 位图(16-512px),支持自定义颜色与描边宽度、一键生成 Favicon 包,并提供 React / Vue 组件代码与 Data URI 引用。 详情参见ZenMux 官网。

