使用场景
颜色与描边跟随预览参数实时变化,以下为常见界面中的渲染效果。
按钮内
输入框
导航
空状态
暂无内容
场景预览
桌面 / 浏览器 / 按钮 / 导航栏
手机桌面 · 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">
<!-- 内联 Myspace 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">
<!-- 内联 Myspace SVG -->
立即开始
</button>React 组件
内联引入
import { MyspaceIcon } from './icons';
function Nav() {
return <MyspaceIcon 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">
<!-- 内联 Myspace SVG -->
已完成
</span>输入框前缀
搜索框
<div class="flex items-center gap-2 rounded-lg border border-neutral-200 px-3 py-2 text-sm">
<!-- 内联 Myspace SVG -->
<input placeholder="搜索Myspace…" 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">
<!-- 内联 Myspace SVG -->
</span>
<p class="mt-3 text-sm font-medium">功能名称</p>
<p class="mt-1 text-xs text-neutral-500">功能的一句话说明。</p>
</div>动效图标
为 Myspace 添加 CSS 动效,导出的 SVG 内嵌样式,单文件即可播放,无需任何依赖。
描画
线条从无到有依次绘出,适合线性图标
.icon-677d3ce0ad6b9e03 { stroke-dasharray: 1; animation: svg-draw 1.2s forwards; }呼吸
透明度往复渐变,适合状态提示图标
.icon-677d3ce0ad6b9e03 { animation: svg-breathe 1.8s infinite; }旋转
匀速循环旋转,适合加载中场景
.icon-677d3ce0ad6b9e03 { animation: svg-spin 1.6s linear infinite; }用法示例
Myspace 在真实界面中的三种常见用法。
按钮内
16px · action 触发
导航项
18px · 列表选中态
暂无数据
空状态
40px · 引导提示
各尺寸下的 Myspace
24px 到 128px 六个常用尺寸的真实渲染,用于检查小尺寸下的可读性。
24px
32px
48px
64px
96px
128px
下载 Myspace 图标
SVG 矢量文件、PNG 位图(预设 16~512px 或自定义 16~1024px)、Favicon 包、App 图标包(iOS + Android)与矢量 PDF 一键导出;下载前可在下方「预览参数」改色,导出文件同步生效。
复制 Myspace 图标代码
Web、移动端、桌面端与小程序共 17 种格式;代码基于当前预览颜色生成,复制即用。
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0.1 0.1 399.8 60.613"><g fill="#231f20"><path d="M89.815 43.962h-9.767V2.105h9.767v5.978s5.437-7.005 12.93-7.005c8.906 0 12.553 7.443 12.553 7.443s4.5-7.443 14.005-7.443c11.067 0 14.924 7.625 14.924 17.073v25.811h-9.766v-23.02c0-6.81-2.293-11.161-8.371-11.161-6.29 0-9.07 4.805-9.07 11.161v23.02h-9.766V20.244c0-6.904-3.248-10.464-8.371-10.464-6.747 0-9.069 5.925-9.069 10.464v23.718zM145.623 2.105h10.596l10.464 28.829 8.76-28.829h10.333l-18.916 58.6h-9.855l5.456-16.92-16.838-41.68zM212.875 13.3l4.382-7.664S210.67.989 202.041.989c-8.981 0-15.239 6.07-15.239 12.619 0 15.494 21.956 10.457 21.956 18.872 0 3.24-2.967 3.985-5.88 3.985-6.425 0-13.103-5.086-13.103-5.086l-4.228 8.037s7.32 5.33 17.088 5.33c8.742 0 15.658-4.843 15.658-13.257 0-13.987-22.11-11.452-22.11-18.256 0-2.306 1.468-4.008 5.374-4.008 6.148 0 11.318 4.074 11.318 4.074zM246.95 1.068c-9.21 0-14.126 7.63-14.126 7.63V2.115h-9.767v58.598h9.767v-23.26s4.955 7.411 13.865 7.411c8.886 0 19.86-6.512 19.86-21.713 0-10.025-5.97-22.083-19.599-22.083zm-2.506 8.328c7.4 0 12.185 6.431 12.185 13.668 0 7.275-4.689 13.473-11.924 13.473-7.246 0-12.34-6.286-12.34-13.56 0-6.66 4.787-13.58 12.079-13.58zM290.53 1.068c9.21 0 14.126 7.63 14.126 7.63V2.115h9.767V43.96h-9.767v-6.509s-4.954 7.412-13.864 7.412c-8.886 0-19.86-6.512-19.86-21.713 0-10.025 5.97-22.083 19.598-22.083zm2.507 8.328c-7.4 0-12.185 6.431-12.185 13.668 0 7.275 4.689 13.473 11.924 13.473 7.246 0 12.34-6.286 12.34-13.56 0-6.66-4.788-13.58-12.079-13.58zM351.72 14.995l6.343-6.562s-5.828-7.4-16.825-7.4c-14.587 0-22.02 11.51-22.02 22.11 0 12.687 9.884 21.758 21.978 21.758 10.51 0 17.088-7.62 17.088-7.62l-6.033-5.947s-3.831 5.155-10.967 5.155c-8.047 0-12.553-6.863-12.553-13.566 0-7.498 5.934-13.477 12.332-13.477 7.021 0 10.658 5.55 10.658 5.55zM379.778 1.024c-12.8 0-20.71 10.368-20.71 22.127 0 11.085 7.337 21.713 21.887 21.713 9.553 0 13.652-3.984 17.223-7.456l-5.887-5.624c-.875.818-4.82 5.363-11.053 5.363-7.21 0-12.337-5.656-12.337-10.573h31v-4.055c0-11.762-7.493-21.495-20.123-21.495zm-.086 7.98c7.016 0 10.791 6.919 10.791 11.248h-21.626c0-4.11 3.6-11.249 10.835-11.249zM19.937 17.851a9.402 9.402 0 1 1-9.402-9.401 9.401 9.401 0 0 1 9.402 9.401zM44.634 15.094c0 5.807-4.707 10.515-10.515 10.515-5.807 0-10.515-4.708-10.515-10.515 0-5.808 4.708-10.515 10.515-10.515 5.808 0 10.515 4.707 10.515 10.515zM71.718 11.728c0 6.
…预览参数
调整颜色、描边或开启轮廓化,使用场景与用法示例实时跟随。
风格变体
细线 · 1.2px · 密集布局
常规 · 2px · 通用界面
加粗 · 3.5px · 大尺寸标题
关于 Myspace 图标
Myspace 是科技互联网、音乐分类下的矢量图标(SVG 格式),矢量特性意味着任意缩放不失真,适配网页、App、演示文稿与印刷物料。科技公司、开发者工具与互联网服务的品牌标识。
在本页点击「下载」即可保存 Myspace 的 SVG 矢量文件,或在下载面板中选择 PNG(16~512px)与 Favicon 包等导出方式;也可以直接复制 SVG 源码、Data URI 或 React/Vue 组件代码。
Myspace 的品牌标志与名称版权归其品牌方所有,本站内容仅供学习与设计识别参考,请勿用于商标注册或误导性用途;商用前请确认品牌官方的使用规范与授权要求。文件体积 2.97 KB,viewBox 为 0.1 0.1 399.8 60.613,共 1 个矢量图元。
常见问题
Myspace 图标是什么?
Myspace 是科技互联网、音乐分类下的矢量图标(SVG 格式),矢量特性意味着任意缩放不失真,适配网页、App、演示文稿与印刷物料。
如何下载 Myspace 图标?
在本页点击「下载 SVG」即可保存 Myspace 的矢量文件,或在下载面板中选择 PNG(16~512px)与 Favicon 包等导出方式;也可以直接复制 SVG 源码、Data URI 或 React/Vue 组件代码。
Myspace 图标可以商用吗?
Myspace 为品牌标志,版权归品牌方所有,本站内容仅供识别参考;商用前请先确认对应品牌的使用规范与授权要求。
如何修改 Myspace 图标的颜色?
在「预览参数」面板中调整颜色与描边宽度,使用场景与用法示例会实时跟随,确认效果后再复制或下载即可。
SVG 健康报告
同时含 width/height 与 viewBox,可仅保留 viewBox 以自适应容器
文件体积
2.97 KB
3,039 字节
viewBox
0.1 0.1 399.8 60.613
同时含 width/height 与 viewBox,可仅保留 viewBox 以自适应容器
图元总数
1
<path> ×1
风格
单色品牌
1 种品牌色 · 纯填充
相似图标
按名称与标签相似度排序。
同色系图标
品牌色 #231f20 的同色相色阶,点击复制色值;下方为品牌色同色相的其他图标。
| 色值 | RGB | HSL | CMYK | 色名 |
|---|---|---|---|---|
| 35, 31, 32 | 345°, 6%, 13% | 0, 11, 9, 86 | 品牌主色 · 深灰色 | |
| 226, 223, 223 | 0°, 5%, 88% | 0, 1, 1, 11 | 浅灰色 | |
| 198, 190, 192 | 345°, 7%, 76% | 0, 4, 3, 22 | 银色 | |
| 164, 152, 155 | 345°, 6%, 62% | 0, 7, 5, 36 | 灰色 |
图标信息摘要
Myspace 是一个科技互联网、音乐类别的单文件 SVG 矢量图标,文件体积 2.97 KB,协议为™ 品牌商标(版权归品牌方,仅供识别参考)。可在本站免费下载 Myspace的 SVG 源文件与 PNG 位图(16-512px),支持自定义颜色与描边宽度、一键生成 Favicon 包,并提供 React / Vue 组件代码与 Data URI 引用。

