音乐 · 便签 SVG 图标

Q: 音乐 · 便签 图标可以商用吗？

withicons-gothicmusic-note

来自 with icons Gothic 开源图标集，矢量 SVG 可无损缩放到任意尺寸，支持在线改色、复制 React/Vue/HTML 代码。

图标 ID: withicons-gothic:music-note
中文名: 音乐 · 便签
所属集合: with icons Gothic
集合规模: 1,000 枚
基础网格: 24px
色彩: 多色
开源协议: MIT
作者: Evergrow

下载音乐 · 便签图标

SVG 矢量源文件，或 PNG 按 16~512 预设与 16~1024 自定义尺寸导出，任意尺寸边缘锐利。

iOS / Android 全套尺寸 · 素材包生成器用 AI 生成类似风格的图标

PNG 由矢量源实时渲染，任意尺寸边缘锐利无锯齿；下载与预览均免费，无需注册。

音乐 · 便签的预览与使用场景

切换预览颜色后，下方三底色、真实界面场景与各尺寸渲染会实时跟随。

预览颜色

浅色背景

深色背景

灰底融入

在真实界面里长这样

继续按钮内 · 主操作

搜索音乐 · 便签…输入框 · 前缀图标

音乐 · 便签导航菜单 · 选中态

暂无内容空状态 · 引导提示

9:41

音乐 · 便签

music-2

list-music手机桌面 · App 图标

音乐 · 便签withicons-gothic.design/icons/music-note浏览器 · 标签页与站点图标

各尺寸下的可读性

24px

32px

48px

64px

96px

128px

复制音乐 · 便签图标代码

内联 SVG、React、Vue 与 CSS mask 四种主流引用方式，代码基于当前源文件生成，复制即用。

svgSVG 源码（内联 HTML）

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none"><path fill="#140f18" fill-opacity=".2" d="M14.7 4.3v10.1c-.3-.1-1-.4-1.4-.4l-1-.2l-1.3.1l-1.1.3l-1.2.5l-.9.7c-1.3 1-1.7 3.5-.6 4.8l.6.7c.4.5 1.4 1.1 2.1 1.2l1 .3l1.1.1c.4 0 1.5-.2 1.9-.3l.9-.4l.8-.5l.7-.7c2-2 1.3-10.9 1.3-11.9c.4.3 1 .9 1 1.6l.1 1.3c.2 1.3 2.7 1.2 2.8-.1v-1l-.1-1l-.4-1.1l-.5-.8l-.7-.8L18 5c-.5-.6-.5-1.5-1.2-1.9c-.8-.5-2.1.1-2.1 1.2" class="wm-shadow"/><path fill="#221a26" d="m14.19 3.5l-.01 13.13c0 1.61 2.27 1.89 2.78.37l.06-.62V8.13c0-.09.1-.22.1-.26c.37.36.74.75.91 1.27c.18.56.05 1.13.22 1.68c.22.74 1.01 1.13 1.73.95c1.99-.51.78-4.11-.1-5.1l-.64-.72l-1.36-1.27c-.28-.26-.61-.62-.76-.99c-.16-.4-.2-.8-.53-1.1c-.83-.77-2.4-.32-2.4.91" class="wm-k"/><path fill="#c79a38" d="m14.61 3.5l-.01 13c0 1.3 1.78 1.5 1.98.25c.53-3.23.04-6.68.05-9.89c.62.47 1.23 1.03 1.61 1.71c.2.36.32.78.35 1.18c.04.61-.02 1.44.76 1.61c.3.08.63.02.88-.19c.39-.33.4-.82.37-1.29c-.08-1.35-.59-2.64-1.6-3.57l-1.42-1.33c-.32-.3-.63-.66-.82-1.07s-.21-.85-.6-1.14c-.56-.41-1.55 0-1.55.73" class="wm-k"/><path fill="#140f18" fill-opacity=".16" d="M15.9 2.7c.2.6.4 1 .9 1.4c-.4-1.1-.1-.8-.9-1.4m0 3.4l-.1 9.9c0 .3-.2.4-.3.6l-.8.3c.3.4-.2.1.3.5c.7.6 1.6-.1 1.6-.9V6.9c0-.3-.7-.8-.7-.8m3.1.2c.7 1.5 1.8 3.7-.3 4.5c.5.7-.5-.3.4.4c2.2.9 1.6-2.6.9-3.5l-.5-.8z" class="wm-k"/><path fill="#140f18" fill-opacity=".45" d="M16.2 2.9V3c.1.4.3.7.5 1.1c-.1-.4-.2-.9-.5-1.2m.1 3.6l-.1 9.9c0 .7-.8.8-1.3.8c.6.6 1.7.5 1.7-.6V6.9c0-.2-.2-.3-.3-.4m3.3.6c.1.2.2.5.3.8l.2.9c.4 1.3.1 2.2-1.3 2.2c.8.7 1.9.4 1.8-.7v-.9c-.1-.9-.5-1.6-1-2.3" class="wm-k"/><path fill="#fff6de" fill-opacity=".9" d="M14.6 3.5v13c0 .4.1.5.3.8V3.8c0-.8.8-1 1.4-.9c-.7-.4-1.7-.4-1.7.6m3.8 5.1c0 .3.2.7.2 1v1c0 .3.1.2.3.4c-.1-.8-.1-1.6-.5-2.4" class="wm-k"/><path fill="#fff6de" fill-opacity=".9" d="M15.01 3.63L15 12.25l.03.13l.1.06c.04-.03.08-.06.12-.1l.02-8.59c0-.43.47-.45.75-.51l-.16-.17c-.4-.2-.85.11-.85.56" class="wm-shine"/><path fill="#221a26" d="m12.63 13.2l-.88-.11c-.48-.05-1.03.01-1.5.1c-3.2.56-5.59 3.81-3.2 6.69c.38.46.88.84 1.4 1.11c.64.34 1.33.57 2.05.66c2.07.27 4.42-.42 5.61-2.24c1.74-2.69-.59-5.86-3.48-6.21" class="wm-k"/><path fill="#c79a38" d="M10.27 13.61c-2.68.31-4.86 3.23-3.14 5.69c1.52 2.18 4.82 2.5 7.04 1.31c.47-.25.91-.59 1.26-1c2.21-2.62-.14-5.58-3.05-6.03c-.36-.05-.92-.11-1.25-.07z" class="wm-k"/><path fill="#140f18" fill-opacity=".16" d="M15 14.8c.2.6.5 1.3.4 2c-.2 2.5-3.1 3.8-5.4 3.6c-.9-.1-1.6-.4-2.4-.8l-.1.1l.7.7l.9.4l.9.3l.9.2h1l.8-.2l1-.2l.8-.5l.7-.5l.5-.7c.5-.5.7-1.6.6-2.2l-.3-.9c-.1-.5-.6-.9-1-1.3" class="wm-k"/><path fill="#140f18" fill-opacity=".45" d="M15.5 15.3c.2.6.5 1.3.4 2c-.1 1.5-1.5 3-3 3.3l-.9.2c-.3.1-1.2.1-1.5.1l-.9-.1l-.8-.3l-.6-.3h-.1l.6.4l.8.4l.9.2c.3.1 1.2.1 1.5.1l.9-.2c2.1-.3 3.9-2.4 3.4-4.5c-.1-.5-.4-.9-.7-1.3" class="wm-k"/><path fill="#fff6de" fill-opacity=".9" d="M7 19.1c-.1-.6-.3-1.3-.2-2c.5-2.4 3.5-3.8 5.8-3.3l.9.2c.3.1.5.2.8.3l-.9-.5l-1-.2l-1-.1c-2.3-.2-5.2 1.7-4.9 4.3c.1.4.3.8.5 1.3" class="wm-k"/><path fill="#fff6de" fill-opacity=".9" d="m7.38 18.91l.02-.14c-.18-.55-.31-1.05-.19-1.64c.4-2.09 2.86-3.12 4.79-2.96c.77.06 1.29.28 2.01.48l.12-.02c-1.49-.78-3.18-.98-4.77-.34c-1.9.76-3.18 2.7-1.98 4.62" class="wm-shine"/><path fill="#221a26" d="M10.77 14.49c-2.08.24-4.41 2.22-2.81 4.36c1.32 1.75 4.14 1.89 5.92.84c1.56-.91 2.02-2.83.61-4.12c-.99-.91-2.4-1.23-3.72-1.08" class="wm-k"/><path fill="#b3163b" d="M10.77 14.74c-1.83.2-3.99 1.9-2.68 3.86c1.04 1.55 3.5 1.86 5.11 1.16c1.63-.71 2.67-2.49 1.18-3.95c-.95-.93-2.33-1.2-3.61-1.07" class="wm-k"/><path fill="#140f18" fill-opacity=".3" d="m10 14.9l-.8.3c-1.9.8-1.9 3.5-.1 4.3l.8.4c2 .8 6.2-.7 5-3.4c-.2-.4-.6-.8-.9-1l-.9-.5l-1-.3c-.6-.1-1.6 0-2.1.2m.8.6h1c1.1-.1 3.1 1 2.4 2.4c-.8 1.9-3.9 1.8-5.2.6c-1.4-1.3.4-3 1.8-3" class="wm-k"/><path fill="#fff6de" fill-opacity=".24" d="m10.4 15.4l-.8.2c-1.1.4-1.8 1.8-1 2.8c.4.5.7.6 1.3.9l.3-.1l3.3-3.3c-.5-.3-.8-.5-1.4-.6h-.8z" class="wm-k"/><path fill="#fff6de" fill-opacity=".24" d="M10.4 15.7c-1 .3-1.7.8-1.7 1.8l1.7-1.7z" class="wm-k"/><path fill="#fff6de" fill-opacity=".75" d="M8.5 18.28c-.02-.32-.07-.71.02-1.05c.26-1.04 1.62-1.7 2.61-1.75l.87-.04l.08-.07l-.02-.09c-.39-.04-.78-.09-1.18-.05c-1.26.14-3.09 1.11-2.59 2.65z" class="wm-shine"/></g></svg>

reactReact 组件（TSX）

export function MusicNoteIcon(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="1em"
      height="1em"
      viewBox="0 0 24 24"
      fill="currentColor"
      {...props}
      dangerouslySetInnerHTML={{ __html: `<g fill="none"><path fill="#140f18" fill-opacity=".2" d="M14.7 4.3v10.1c-.3-.1-1-.4-1.4-.4l-1-.2l-1.3.1l-1.1.3l-1.2.5l-.9.7c-1.3 1-1.7 3.5-.6 4.8l.6.7c.4.5 1.4 1.1 2.1 1.2l1 .3l1.1.1c.4 0 1.5-.2 1.9-.3l.9-.4l.8-.5l.7-.7c2-2 1.3-10.9 1.3-11.9c.4.3 1 .9 1 1.6l.1 1.3c.2 1.3 2.7 1.2 2.8-.1v-1l-.1-1l-.4-1.1l-.5-.8l-.7-.8L18 5c-.5-.6-.5-1.5-1.2-1.9c-.8-.5-2.1.1-2.1 1.2" class="wm-shadow"/><path fill="#221a26" d="m14.19 3.5l-.01 13.13c0 1.61 2.27 1.89 2.78.37l.06-.62V8.13c0-.09.1-.22.1-.26c.37.36.74.75.91 1.27c.18.56.05 1.13.22 1.68c.22.74 1.01 1.13 1.73.95c1.99-.51.78-4.11-.1-5.1l-.64-.72l-1.36-1.27c-.28-.26-.61-.62-.76-.99c-.16-.4-.2-.8-.53-1.1c-.83-.77-2.4-.32-2.4.91" class="wm-k"/><path fill="#c79a38" d="m14.61 3.5l-.01 13c0 1.3 1.78 1.5 1.98.25c.53-3.23.04-6.68.05-9.89c.62.47 1.23 1.03 1.61 1.71c.2.36.32.78.35 1.18c.04.61-.02 1.44.76 1.61c.3.08.63.02.88-.19c.39-.33.4-.82.37-1.29c-.08-1.35-.59-2.64-1.6-3.57l-1.42-1.33c-.32-.3-.63-.66-.82-1.07s-.21-.85-.6-1.14c-.56-.41-1.55 0-1.55.73" class="wm-k"/><path fill="#140f18" fill-opacity=".16" d="M15.9 2.7c.2.6.4 1 .9 1.4c-.4-1.1-.1-.8-.9-1.4m0 3.4l-.1 9.9c0 .3-.2.4-.3.6l-.8.3c.3.4-.2.1.3.5c.7.6 1.6-.1 1.6-.9V6.9c0-.3-.7-.8-.7-.8m3.1.2c.7 1.5 1.8 3.7-.3 4.5c.5.7-.5-.3.4.4c2.2.9 1.6-2.6.9-3.5l-.5-.8z" class="wm-k"/><path fill="#140f18" fill-opacity=".45" d="M16.2 2.9V3c.1.4.3.7.5 1.1c-.1-.4-.2-.9-.5-1.2m.1 3.6l-.1 9.9c0 .7-.8.8-1.3.8c.6.6 1.7.5 1.7-.6V6.9c0-.2-.2-.3-.3-.4m3.3.6c.1.2.2.5.3.8l.2.9c.4 1.3.1 2.2-1.3 2.2c.8.7 1.9.4 1.8-.7v-.9c-.1-.9-.5-1.6-1-2.3" class="wm-k"/><path fill="#fff6de" fill-opacity=".9" d="M14.6 3.5v13c0 .4.1.5.3.8V3.8c0-.8.8-1 1.4-.9c-.7-.4-1.7-.4-1.7.6m3.8 5.1c0 .3.2.7.2 1v1c0 .3.1.2.3.4c-.1-.8-.1-1.6-.5-2.4" class="wm-k"/><path fill="#fff6de" fill-opacity=".9" d="M15.01 3.63L15 12.25l.03.13l.1.06c.04-.03.08-.06.12-.1l.02-8.59c0-.43.47-.45.75-.51l-.16-.17c-.4-.2-.85.11-.85.56" class="wm-shine"/><path fill="#221a26" d="m12.63 13.2l-.88-.11c-.48-.05-1.03.01-1.5.1c-3.2.56-5.59 3.81-3.2 6.69c.38.46.88.84 1.4 1.11c.64.34 1.33.57 2.05.66c2.07.27 4.42-.42 5.61-2.24c1.74-2.69-.59-5.86-3.48-6.21" class="wm-k"/><path fill="#c79a38" d="M10.27 13.61c-2.68.31-4.86 3.23-3.14 5.69c1.52 2.18 4.82 2.5 7.04 1.31c.47-.25.91-.59 1.26-1c2.21-2.62-.14-5.58-3.05-6.03c-.36-.05-.92-.11-1.25-.07z" class="wm-k"/><path fill="#140f18" fill-opacity=".16" d="M15 14.8c.2.6.5 1.3.4 2c-.2 2.5-3.1 3.8-5.4 3.6c-.9-.1-1.6-.4-2.4-.8l-.1.1l.7.7l.9.4l.9.3l.9.2h1l.8-.2l1-.2l.8-.5l.7-.5l.5-.7c.5-.5.7-1.6.6-2.2l-.3-.9c-.1-.5-.6-.9-1-1.3" class="wm-k"/><path fill="#140f18" fill-opacity=".45" d="M15.5 15.3c.2.6.5 1.3.4 2c-.1 1.5-1.5 3-3 3.3l-.9.2c-.3.1-1.2.1-1.5.1l-.9-.1l-.8-.3l-.6-.3h-.1l.6.4l.8.4l.9.2c.3.1 1.2.1 1.5.1l.9-.2c2.1-.3 3.9-2.4 3.4-4.5c-.1-.5-.4-.9-.7-1.3" class="wm-k"/><path fill="#fff6de" fill-opacity=".9" d="M7 19.1c-.1-.6-.3-1.3-.2-2c.5-2.4 3.5-3.8 5.8-3.3l.9.2c.3.1.5.2.8.3l-.9-.5l-1-.2l-1-.1c-2.3-.2-5.2 1.7-4.9 4.3c.1.4.3.8.5 1.3" class="wm-k"/><path fill="#fff6de" fill-opacity=".9" d="m7.38 18.91l.02-.14c-.18-.55-.31-1.05-.19-1.64c.4-2.09 2.86-3.12 4.79-2.96c.77.06 1.29.28 2.01.48l.12-.02c-1.49-.78-3.18-.98-4.77-.34c-1.9.76-3.18 2.7-1.98 4.62" class="wm-shine"/><path fill="#221a26" d="M10.77 14.49c-2.08.24-4.41 2.22-2.81 4.36c1.32 1.75 4.14 1.89 5.92.84c1.56-.91 2.02-2.83.61-4.12c-.99-.91-2.4-1.23-3.72-1.08" class="wm-k"/><path fill="#b3163b" d="M10.77 14.74c-1.83.2-3.99 1.9-2.68 3.86c1.04 1.55 3.5 1.86 5.11 1.16c1.63-.71 2.67-2.49 1.18-3.95c-.95-.93-2.33-1.2-3.61-1.07" class="wm-k"/><path fill="#140f18" fill-opacity=".3" d="m10 14.9l-.8.3c-1.9.8-1.9 3.5-.1 4.3l.8.4c2 .8 6.2-.7 5-3.4c-.2-.4-.6-.8-.9-1l-.9-.5l-1-.3c-.6-.1-1.6 0-2.1.2m.8.6h1c1.1-.1 3.1 1 2.4 2.4c-.8 1.9-3.9 1.8-5.2.6c-1.4-1.3.4-3 1.8-3" class="wm-k"/><path fill="#fff6de" fill-opacity=".24" d="m10.4 15.4l-.8.2c-1.1.4-1.8 1.8-1 2.8c.4.5.7.6 1.3.9l.3-.1l3.3-3.3c-.5-.3-.8-.5-1.4-.6h-.8z" class="wm-k"/><path fill="#fff6de" fill-opacity=".24" d="M10.4 15.7c-1 .3-1.7.8-1.7 1.8l1.7-1.7z" class="wm-k"/><path fill="#fff6de" fill-opacity=".75" d="M8.5 18.28c-.02-.32-.07-.71.02-1.05c.26-1.04 1.62-1.7 2.61-1.75l.87-.04l.08-.07l-.02-.09c-.39-.04-.78-.09-1.18-.05c-1.26.14-3.09 1.11-2.59 2.65z" class="wm-shine"/></g>` }}
    />
  );
}

vueVue 3 组件

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor" v-html="body"></svg>
</template>

<script setup>
const body = `<g fill="none"><path fill="#140f18" fill-opacity=".2" d="M14.7 4.3v10.1c-.3-.1-1-.4-1.4-.4l-1-.2l-1.3.1l-1.1.3l-1.2.5l-.9.7c-1.3 1-1.7 3.5-.6 4.8l.6.7c.4.5 1.4 1.1 2.1 1.2l1 .3l1.1.1c.4 0 1.5-.2 1.9-.3l.9-.4l.8-.5l.7-.7c2-2 1.3-10.9 1.3-11.9c.4.3 1 .9 1 1.6l.1 1.3c.2 1.3 2.7 1.2 2.8-.1v-1l-.1-1l-.4-1.1l-.5-.8l-.7-.8L18 5c-.5-.6-.5-1.5-1.2-1.9c-.8-.5-2.1.1-2.1 1.2" class="wm-shadow"/><path fill="#221a26" d="m14.19 3.5l-.01 13.13c0 1.61 2.27 1.89 2.78.37l.06-.62V8.13c0-.09.1-.22.1-.26c.37.36.74.75.91 1.27c.18.56.05 1.13.22 1.68c.22.74 1.01 1.13 1.73.95c1.99-.51.78-4.11-.1-5.1l-.64-.72l-1.36-1.27c-.28-.26-.61-.62-.76-.99c-.16-.4-.2-.8-.53-1.1c-.83-.77-2.4-.32-2.4.91" class="wm-k"/><path fill="#c79a38" d="m14.61 3.5l-.01 13c0 1.3 1.78 1.5 1.98.25c.53-3.23.04-6.68.05-9.89c.62.47 1.23 1.03 1.61 1.71c.2.36.32.78.35 1.18c.04.61-.02 1.44.76 1.61c.3.08.63.02.88-.19c.39-.33.4-.82.37-1.29c-.08-1.35-.59-2.64-1.6-3.57l-1.42-1.33c-.32-.3-.63-.66-.82-1.07s-.21-.85-.6-1.14c-.56-.41-1.55 0-1.55.73" class="wm-k"/><path fill="#140f18" fill-opacity=".16" d="M15.9 2.7c.2.6.4 1 .9 1.4c-.4-1.1-.1-.8-.9-1.4m0 3.4l-.1 9.9c0 .3-.2.4-.3.6l-.8.3c.3.4-.2.1.3.5c.7.6 1.6-.1 1.6-.9V6.9c0-.3-.7-.8-.7-.8m3.1.2c.7 1.5 1.8 3.7-.3 4.5c.5.7-.5-.3.4.4c2.2.9 1.6-2.6.9-3.5l-.5-.8z" class="wm-k"/><path fill="#140f18" fill-opacity=".45" d="M16.2 2.9V3c.1.4.3.7.5 1.1c-.1-.4-.2-.9-.5-1.2m.1 3.6l-.1 9.9c0 .7-.8.8-1.3.8c.6.6 1.7.5 1.7-.6V6.9c0-.2-.2-.3-.3-.4m3.3.6c.1.2.2.5.3.8l.2.9c.4 1.3.1 2.2-1.3 2.2c.8.7 1.9.4 1.8-.7v-.9c-.1-.9-.5-1.6-1-2.3" class="wm-k"/><path fill="#fff6de" fill-opacity=".9" d="M14.6 3.5v13c0 .4.1.5.3.8V3.8c0-.8.8-1 1.4-.9c-.7-.4-1.7-.4-1.7.6m3.8 5.1c0 .3.2.7.2 1v1c0 .3.1.2.3.4c-.1-.8-.1-1.6-.5-2.4" class="wm-k"/><path fill="#fff6de" fill-opacity=".9" d="M15.01 3.63L15 12.25l.03.13l.1.06c.04-.03.08-.06.12-.1l.02-8.59c0-.43.47-.45.75-.51l-.16-.17c-.4-.2-.85.11-.85.56" class="wm-shine"/><path fill="#221a26" d="m12.63 13.2l-.88-.11c-.48-.05-1.03.01-1.5.1c-3.2.56-5.59 3.81-3.2 6.69c.38.46.88.84 1.4 1.11c.64.34 1.33.57 2.05.66c2.07.27 4.42-.42 5.61-2.24c1.74-2.69-.59-5.86-3.48-6.21" class="wm-k"/><path fill="#c79a38" d="M10.27 13.61c-2.68.31-4.86 3.23-3.14 5.69c1.52 2.18 4.82 2.5 7.04 1.31c.47-.25.91-.59 1.26-1c2.21-2.62-.14-5.58-3.05-6.03c-.36-.05-.92-.11-1.25-.07z" class="wm-k"/><path fill="#140f18" fill-opacity=".16" d="M15 14.8c.2.6.5 1.3.4 2c-.2 2.5-3.1 3.8-5.4 3.6c-.9-.1-1.6-.4-2.4-.8l-.1.1l.7.7l.9.4l.9.3l.9.2h1l.8-.2l1-.2l.8-.5l.7-.5l.5-.7c.5-.5.7-1.6.6-2.2l-.3-.9c-.1-.5-.6-.9-1-1.3" class="wm-k"/><path fill="#140f18" fill-opacity=".45" d="M15.5 15.3c.2.6.5 1.3.4 2c-.1 1.5-1.5 3-3 3.3l-.9.2c-.3.1-1.2.1-1.5.1l-.9-.1l-.8-.3l-.6-.3h-.1l.6.4l.8.4l.9.2c.3.1 1.2.1 1.5.1l.9-.2c2.1-.3 3.9-2.4 3.4-4.5c-.1-.5-.4-.9-.7-1.3" class="wm-k"/><path fill="#fff6de" fill-opacity=".9" d="M7 19.1c-.1-.6-.3-1.3-.2-2c.5-2.4 3.5-3.8 5.8-3.3l.9.2c.3.1.5.2.8.3l-.9-.5l-1-.2l-1-.1c-2.3-.2-5.2 1.7-4.9 4.3c.1.4.3.8.5 1.3" class="wm-k"/><path fill="#fff6de" fill-opacity=".9" d="m7.38 18.91l.02-.14c-.18-.55-.31-1.05-.19-1.64c.4-2.09 2.86-3.12 4.79-2.96c.77.06 1.29.28 2.01.48l.12-.02c-1.49-.78-3.18-.98-4.77-.34c-1.9.76-3.18 2.7-1.98 4.62" class="wm-shine"/><path fill="#221a26" d="M10.77 14.49c-2.08.24-4.41 2.22-2.81 4.36c1.32 1.75 4.14 1.89 5.92.84c1.56-.91 2.02-2.83.61-4.12c-.99-.91-2.4-1.23-3.72-1.08" class="wm-k"/><path fill="#b3163b" d="M10.77 14.74c-1.83.2-3.99 1.9-2.68 3.86c1.04 1.55 3.5 1.86 5.11 1.16c1.63-.71 2.67-2.49 1.18-3.95c-.95-.93-2.33-1.2-3.61-1.07" class="wm-k"/><path fill="#140f18" fill-opacity=".3" d="m10 14.9l-.8.3c-1.9.8-1.9 3.5-.1 4.3l.8.4c2 .8 6.2-.7 5-3.4c-.2-.4-.6-.8-.9-1l-.9-.5l-1-.3c-.6-.1-1.6 0-2.1.2m.8.6h1c1.1-.1 3.1 1 2.4 2.4c-.8 1.9-3.9 1.8-5.2.6c-1.4-1.3.4-3 1.8-3" class="wm-k"/><path fill="#fff6de" fill-opacity=".24" d="m10.4 15.4l-.8.2c-1.1.4-1.8 1.8-1 2.8c.4.5.7.6 1.3.9l.3-.1l3.3-3.3c-.5-.3-.8-.5-1.4-.6h-.8z" class="wm-k"/><path fill="#fff6de" fill-opacity=".24" d="M10.4 15.7c-1 .3-1.7.8-1.7 1.8l1.7-1.7z" class="wm-k"/><path fill="#fff6de" fill-opacity=".75" d="M8.5 18.28c-.02-.32-.07-.71.02-1.05c.26-1.04 1.62-1.7 2.61-1.75l.87-.04l.08-.07l-.02-.09c-.39-.04-.78-.09-1.18-.05c-1.26.14-3.09 1.11-2.59 2.65z" class="wm-shine"/></g>`;
</script>

cssCSS mask（随 currentColor 改色）

.music-note {
  width: 1em;
  height: 1em;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cg%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22%23140f18%22%20fill-opacity%3D%22.2%22%20d%3D%22M14.7%204.3v10.1c-.3-.1-1-.4-1.4-.4l-1-.2l-1.3.1l-1.1.3l-1.2.5l-.9.7c-1.3%201-1.7%203.5-.6%204.8l.6.7c.4.5%201.4%201.1%202.1%201.2l1%20.3l1.1.1c.4%200%201.5-.2%201.9-.3l.9-.4l.8-.5l.7-.7c2-2%201.3-10.9%201.3-11.9c.4.3%201%20.9%201%201.6l.1%201.3c.2%201.3%202.7%201.2%202.8-.1v-1l-.1-1l-.4-1.1l-.5-.8l-.7-.8L18%205c-.5-.6-.5-1.5-1.2-1.9c-.8-.5-2.1.1-2.1%201.2%22%20class%3D%22wm-shadow%22%2F%3E%3Cpath%20fill%3D%22%23221a26%22%20d%3D%22m14.19%203.5l-.01%2013.13c0%201.61%202.27%201.89%202.78.37l.06-.62V8.13c0-.09.1-.22.1-.26c.37.36.74.75.91%201.27c.18.56.05%201.13.22%201.68c.22.74%201.01%201.13%201.73.95c1.99-.51.78-4.11-.1-5.1l-.64-.72l-1.36-1.27c-.28-.26-.61-.62-.76-.99c-.16-.4-.2-.8-.53-1.1c-.83-.77-2.4-.32-2.4.91%22%20class%3D%22wm-k%22%2F%3E%3Cpath%20fill%3D%22%23c79a38%22%20d%3D%22m14.61%203.5l-.01%2013c0%201.3%201.78%201.5%201.98.25c.53-3.23.04-6.68.05-9.89c.62.47%201.23%201.03%201.61%201.71c.2.36.32.78.35%201.18c.04.61-.02%201.44.76%201.61c.3.08.63.02.88-.19c.39-.33.4-.82.37-1.29c-.08-1.35-.59-2.64-1.6-3.57l-1.42-1.33c-.32-.3-.63-.66-.82-1.07s-.21-.85-.6-1.14c-.56-.41-1.55%200-1.55.73%22%20class%3D%22wm-k%22%2F%3E%3Cpath%20fill%3D%22%23140f18%22%20fill-opacity%3D%22.16%22%20d%3D%22M15.9%202.7c.2.6.4%201%20.9%201.4c-.4-1.1-.1-.8-.9-1.4m0%203.4l-.1%209.9c0%20.3-.2.4-.3.6l-.8.3c.3.4-.2.1.3.5c.7.6%201.6-.1%201.6-.9V6.9c0-.3-.7-.8-.7-.8m3.1.2c.7%201.5%201.8%203.7-.3%204.5c.5.7-.5-.3.4.4c2.2.9%201.6-2.6.9-3.5l-.5-.8z%22%20class%3D%22wm-k%22%2F%3E%3Cpath%20fill%3D%22%23140f18%22%20fill-opacity%3D%22.45%22%20d%3D%22M16.2%202.9V3c.1.4.3.7.5%201.1c-.1-.4-.2-.9-.5-1.2m.1%203.6l-.1%209.9c0%20.7-.8.8-1.3.8c.6.6%201.7.5%201.7-.6V6.9c0-.2-.2-.3-.3-.4m3.3.6c.1.2.2.5.3.8l.2.9c.4%201.3.1%202.2-1.3%202.2c.8.7%201.9.4%201.8-.7v-.9c-.1-.9-.5-1.6-1-2.3%22%20class%3D%22wm-k%22%2F%3E%3Cpath%20fill%3D%22%23fff6de%22%20fill-opacity%3D%22.9%22%20d%3D%22M14.6%203.5v13c0%20.4.1.5.3.8V3.8c0-.8.8-1%201.4-.9c-.7-.4-1.7-.4-1.7.6m3.8%205.1c0%20.3.2.7.2%201v1c0%20.3.1.2.3.4c-.1-.8-.1-1.6-.5-2.4%22%20class%3D%22wm-k%22%2F%3E%3Cpath%20fill%3D%22%23fff6de%22%20fill-opacity%3D%22.9%22%20d%3D%22M15.01%203.63L15%2012.25l.03.13l.1.06c.04-.03.08-.06.12-.1l.02-8.59c0-.43.47-.45.75-.51l-.16-.17c-.4-.2-.85.11-.85.56%22%20class%3D%22wm-shine%22%2F%3E%3Cpath%20fill%3D%22%23221a26%22%20d%3D%22m12.63%2013.2l-.88-.11c-.48-.05-1.03.01-1.5.1c-3.2.56-5.59%203.81-3.2%206.69c.38.46.88.84%201.4%201.11c.64.34%201.33.57%202.05.66c2.07.27%204.42-.42%205.61-2.24c1.74-2.69-.59-5.86-3.48-6.21%22%20class%3D%22wm-k%22%2F%3E%3Cpath%20fill%3D%22%23c79a38%22%20d%3D%22M10.27%2013.61c-2.68.31-4.86%203.23-3.14%205.69c1.52%202.18%204.82%202.5%207.04%201.31c.47-.25.91-.59%201.26-1c2.21-2.62-.14-5.58-3.05-6.03c-.36-.05-.92-.11-1.25-.07z%22%20class%3D%22wm-k%22%2F%3E%3Cpath%20fill%3D%22%23140f18%22%20fill-opacity%3D%22.16%22%20d%3D%22M15%2014.8c.2.6.5%201.3.4%202c-.2%202.5-3.1%203.8-5.4%203.6c-.9-.1-1.6-.4-2.4-.8l-.1.1l.7.7l.9.4l.9.3l.9.2h1l.8-.2l1-.2l.8-.5l.7-.5l.5-.7c.5-.5.7-1.6.6-2.2l-.3-.9c-.1-.5-.6-.9-1-1.3%22%20class%3D%22wm-k%22%2F%3E%3Cpath%20fill%3D%22%23140f18%22%20fill-opacity%3D%22.45%22%20d%3D%22M15.5%2015.3c.2.6.5%201.3.4%202c-.1%201.5-1.5%203-3%203.3l-.9.2c-.3.1-1.2.1-1.5.1l-.9-.1l-.8-.3l-.6-.3h-.1l.6.4l.8.4l.9.2c.3.1%201.2.1%201.5.1l.9-.2c2.1-.3%203.9-2.4%203.4-4.5c-.1-.5-.4-.9-.7-1.3%22%20class%3D%22wm-k%22%2F%3E%3Cpath%20fill%3D%22%23fff6de%22%20fill-opacity%3D%22.9%22%20d%3D%22M7%2019.1c-.1-.6-.3-1.3-.2-2c.5-2.4%203.5-3.8%205.8-3.3l.9.2c.3.1.5.2.8.3l-.9-.5l-1-.2l-1-.1c-2.3-.2-5.2%201.7-4.9%204.3c.1.4.3.8.5%201.3%22%20class%3D%22wm-k%22%2F%3E%3Cpath%20fill%3D%22%23fff6de%22%20fill-opacity%3D%22.9%22%20d%3D%22m7.38%2018.91l.02-.14c-.18-.55-.31-1.05-.19-1.64c.4-2.09%202.86-3.12%204.79-2.96c.77.06%201.29.28%202.01.48l.12-.02c-1.49-.78-3.18-.98-4.77-.34c-1.9.76-3.18%202.7-1.98%204.62%22%20class%3D%22wm-shine%22%2F%3E%3Cpath%20fill%3D%22%23221a26%22%20d%3D%22M10.77%2014.49c-2.08.24-4.41%202.22-2.81%204.36c1.32%201.75%204.14%201.89%205.92.84c1.56-.91%202.02-2.83.61-4.12c-.99-.91-2.4-1.23-3.72-1.08%22%20class%3D%22wm-k%22%2F%3E%3Cpath%20fill%3D%22%23b3163b%22%20d%3D%22M10.77%2014.74c-1.83.2-3.99%201.9-2.68%203.86c1.04%201.55%203.5%201.86%205.11%201.16c1.63-.71%202.67-2.49%201.18-3.95c-.95-.93-2.33-1.2-3.61-1.07%22%20class%3D%22wm-k%22%2F%3E%3Cpath%20fill%3D%22%23140f18%22%20fill-opacity%3D%22.3%22%20d%3D%22m10%2014.9l-.8.3c-1.9.8-1.9%203.5-.1%204.3l.8.4c2%20.8%206.2-.7%205-3.4c-.2-.4-.6-.8-.9-1l-.9-.5l-1-.3c-.6-.1-1.6%200-2.1.2m.8.6h1c1.1-.1%203.1%201%202.4%202.4c-.8%201.9-3.9%201.8-5.2.6c-1.4-1.3.4-3%201.8-3%22%20class%3D%22wm-k%22%2F%3E%3Cpath%20fill%3D%22%23fff6de%22%20fill-opacity%3D%22.24%22%20d%3D%22m10.4%2015.4l-.8.2c-1.1.4-1.8%201.8-1%202.8c.4.5.7.6%201.3.9l.3-.1l3.3-3.3c-.5-.3-.8-.5-1.4-.6h-.8z%22%20class%3D%22wm-k%22%2F%3E%3Cpath%20fill%3D%22%23fff6de%22%20fill-opacity%3D%22.24%22%20d%3D%22M10.4%2015.7c-1%20.3-1.7.8-1.7%201.8l1.7-1.7z%22%20class%3D%22wm-k%22%2F%3E%3Cpath%20fill%3D%22%23fff6de%22%20fill-opacity%3D%22.75%22%20d%3D%22M8.5%2018.28c-.02-.32-.07-.71.02-1.05c.26-1.04%201.62-1.7%202.61-1.75l.87-.04l.08-.07l-.02-.09c-.39-.04-.78-.09-1.18-.05c-1.26.14-3.09%201.11-2.59%202.65z%22%20class%3D%22wm-shine%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cg%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22%23140f18%22%20fill-opacity%3D%22.2%22%20d%3D%22M14.7%204.3v10.1c-.3-.1-1-.4-1.4-.4l-1-.2l-1.3.1l-1.1.3l-1.2.5l-.9.7c-1.3%201-1.7%203.5-.6%204.8l.6.7c.4.5%201.4%201.1%202.1%201.2l1%20.3l1.1.1c.4%200%201.5-.2%201.9-.3l.9-.4l.8-.5l.7-.7c2-2%201.3-10.9%201.3-11.9c.4.3%201%20.9%201%201.6l.1%201.3c.2%201.3%202.7%201.2%202.8-.1v-1l-.1-1l-.4-1.1l-.5-.8l-.7-.8L18%205c-.5-.6-.5-1.5-1.2-1.9c-.8-.5-2.1.1-2.1%201.2%22%20class%3D%22wm-shadow%22%2F%3E%3Cpath%20fill%3D%22%23221a26%22%20d%3D%22m14.19%203.5l-.01%2013.13c0%201.61%202.27%201.89%202.78.37l.06-.62V8.13c0-.09.1-.22.1-.26c.37.36.74.75.91%201.27c.18.56.05%201.13.22%201.68c.22.74%201.01%201.13%201.73.95c1.99-.51.78-4.11-.1-5.1l-.64-.72l-1.36-1.27c-.28-.26-.61-.62-.76-.99c-.16-.4-.2-.8-.53-1.1c-.83-.77-2.4-.32-2.4.91%22%20class%3D%22wm-k%22%2F%3E%3Cpath%20fill%3D%22%23c79a38%22%20d%3D%22m14.61%203.5l-.01%2013c0%201.3%201.78%201.5%201.98.25c.53-3.23.04-6.68.05-9.89c.62.47%201.23%201.03%201.61%201.71c.2.36.32.78.35%201.18c.04.61-.02%201.44.76%201.61c.3.08.63.02.88-.19c.39-.33.4-.82.37-1.29c-.08-1.35-.59-2.64-1.6-3.57l-1.42-1.33c-.32-.3-.63-.66-.82-1.07s-.21-.85-.6-1.14c-.56-.41-1.55%200-1.55.73%22%20class%3D%22wm-k%22%2F%3E%3Cpath%20fill%3D%22%23140f18%22%20fill-opacity%3D%22.16%22%20d%3D%22M15.9%202.7c.2.6.4%201%20.9%201.4c-.4-1.1-.1-.8-.9-1.4m0%203.4l-.1%209.9c0%20.3-.2.4-.3.6l-.8.3c.3.4-.2.1.3.5c.7.6%201.6-.1%201.6-.9V6.9c0-.3-.7-.8-.7-.8m3.1.2c.7%201.5%201.8%203.7-.3%204.5c.5.7-.5-.3.4.4c2.2.9%201.6-2.6.9-3.5l-.5-.8z%22%20class%3D%22wm-k%22%2F%3E%3Cpath%20fill%3D%22%23140f18%22%20fill-opacity%3D%22.45%22%20d%3D%22M16.2%202.9V3c.1.4.3.7.5%201.1c-.1-.4-.2-.9-.5-1.2m.1%203.6l-.1%209.9c0%20.7-.8.8-1.3.8c.6.6%201.7.5%201.7-.6V6.9c0-.2-.2-.3-.3-.4m3.3.6c.1.2.2.5.3.8l.2.9c.4%201.3.1%202.2-1.3%202.2c.8.7%201.9.4%201.8-.7v-.9c-.1-.9-.5-1.6-1-2.3%22%20class%3D%22wm-k%22%2F%3E%3Cpath%20fill%3D%22%23fff6de%22%20fill-opacity%3D%22.9%22%20d%3D%22M14.6%203.5v13c0%20.4.1.5.3.8V3.8c0-.8.8-1%201.4-.9c-.7-.4-1.7-.4-1.7.6m3.8%205.1c0%20.3.2.7.2%201v1c0%20.3.1.2.3.4c-.1-.8-.1-1.6-.5-2.4%22%20class%3D%22wm-k%22%2F%3E%3Cpath%20fill%3D%22%23fff6de%22%20fill-opacity%3D%22.9%22%20d%3D%22M15.01%203.63L15%2012.25l.03.13l.1.06c.04-.03.08-.06.12-.1l.02-8.59c0-.43.47-.45.75-.51l-.16-.17c-.4-.2-.85.11-.85.56%22%20class%3D%22wm-shine%22%2F%3E%3Cpath%20fill%3D%22%23221a26%22%20d%3D%22m12.63%2013.2l-.88-.11c-.48-.05-1.03.01-1.5.1c-3.2.56-5.59%203.81-3.2%206.69c.38.46.88.84%201.4%201.11c.64.34%201.33.57%202.05.66c2.07.27%204.42-.42%205.61-2.24c1.74-2.69-.59-5.86-3.48-6.21%22%20class%3D%22wm-k%22%2F%3E%3Cpath%20fill%3D%22%23c79a38%22%20d%3D%22M10.27%2013.61c-2.68.31-4.86%203.23-3.14%205.69c1.52%202.18%204.82%202.5%207.04%201.31c.47-.25.91-.59%201.26-1c2.21-2.62-.14-5.58-3.05-6.03c-.36-.05-.92-.11-1.25-.07z%22%20class%3D%22wm-k%22%2F%3E%3Cpath%20fill%3D%22%23140f18%22%20fill-opacity%3D%22.16%22%20d%3D%22M15%2014.8c.2.6.5%201.3.4%202c-.2%202.5-3.1%203.8-5.4%203.6c-.9-.1-1.6-.4-2.4-.8l-.1.1l.7.7l.9.4l.9.3l.9.2h1l.8-.2l1-.2l.8-.5l.7-.5l.5-.7c.5-.5.7-1.6.6-2.2l-.3-.9c-.1-.5-.6-.9-1-1.3%22%20class%3D%22wm-k%22%2F%3E%3Cpath%20fill%3D%22%23140f18%22%20fill-opacity%3D%22.45%22%20d%3D%22M15.5%2015.3c.2.6.5%201.3.4%202c-.1%201.5-1.5%203-3%203.3l-.9.2c-.3.1-1.2.1-1.5.1l-.9-.1l-.8-.3l-.6-.3h-.1l.6.4l.8.4l.9.2c.3.1%201.2.1%201.5.1l.9-.2c2.1-.3%203.9-2.4%203.4-4.5c-.1-.5-.4-.9-.7-1.3%22%20class%3D%22wm-k%22%2F%3E%3Cpath%20fill%3D%22%23fff6de%22%20fill-opacity%3D%22.9%22%20d%3D%22M7%2019.1c-.1-.6-.3-1.3-.2-2c.5-2.4%203.5-3.8%205.8-3.3l.9.2c.3.1.5.2.8.3l-.9-.5l-1-.2l-1-.1c-2.3-.2-5.2%201.7-4.9%204.3c.1.4.3.8.5%201.3%22%20class%3D%22wm-k%22%2F%3E%3Cpath%20fill%3D%22%23fff6de%22%20fill-opacity%3D%22.9%22%20d%3D%22m7.38%2018.91l.02-.14c-.18-.55-.31-1.05-.19-1.64c.4-2.09%202.86-3.12%204.79-2.96c.77.06%201.29.28%202.01.48l.12-.02c-1.49-.78-3.18-.98-4.77-.34c-1.9.76-3.18%202.7-1.98%204.62%22%20class%3D%22wm-shine%22%2F%3E%3Cpath%20fill%3D%22%23221a26%22%20d%3D%22M10.77%2014.49c-2.08.24-4.41%202.22-2.81%204.36c1.32%201.75%204.14%201.89%205.92.84c1.56-.91%202.02-2.83.61-4.12c-.99-.91-2.4-1.23-3.72-1.08%22%20class%3D%22wm-k%22%2F%3E%3Cpath%20fill%3D%22%23b3163b%22%20d%3D%22M10.77%2014.74c-1.83.2-3.99%201.9-2.68%203.86c1.04%201.55%203.5%201.86%205.11%201.16c1.63-.71%202.67-2.49%201.18-3.95c-.95-.93-2.33-1.2-3.61-1.07%22%20class%3D%22wm-k%22%2F%3E%3Cpath%20fill%3D%22%23140f18%22%20fill-opacity%3D%22.3%22%20d%3D%22m10%2014.9l-.8.3c-1.9.8-1.9%203.5-.1%204.3l.8.4c2%20.8%206.2-.7%205-3.4c-.2-.4-.6-.8-.9-1l-.9-.5l-1-.3c-.6-.1-1.6%200-2.1.2m.8.6h1c1.1-.1%203.1%201%202.4%202.4c-.8%201.9-3.9%201.8-5.2.6c-1.4-1.3.4-3%201.8-3%22%20class%3D%22wm-k%22%2F%3E%3Cpath%20fill%3D%22%23fff6de%22%20fill-opacity%3D%22.24%22%20d%3D%22m10.4%2015.4l-.8.2c-1.1.4-1.8%201.8-1%202.8c.4.5.7.6%201.3.9l.3-.1l3.3-3.3c-.5-.3-.8-.5-1.4-.6h-.8z%22%20class%3D%22wm-k%22%2F%3E%3Cpath%20fill%3D%22%23fff6de%22%20fill-opacity%3D%22.24%22%20d%3D%22M10.4%2015.7c-1%20.3-1.7.8-1.7%201.8l1.7-1.7z%22%20class%3D%22wm-k%22%2F%3E%3Cpath%20fill%3D%22%23fff6de%22%20fill-opacity%3D%22.75%22%20d%3D%22M8.5%2018.28c-.02-.32-.07-.71.02-1.05c.26-1.04%201.62-1.7%202.61-1.75l.87-.04l.08-.07l-.02-.09c-.39-.04-.78-.09-1.18-.05c-1.26.14-3.09%201.11-2.59%202.65z%22%20class%3D%22wm-shine%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

给音乐 · 便签加一点动效

单文件 CSS 即可播放，无需任何依赖；描画动效仅对描边类图标生效。

呼吸

透明度往复渐变，适合状态提示与在线指示。

css呼吸动效样式

.icon-music-note {
  animation: icon-breathe 1.8s ease-in-out infinite;
}

@keyframes icon-breathe {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

旋转

匀速循环旋转，适合加载中场景。

css旋转动效样式

.icon-music-note {
  animation: icon-spin 1.6s linear infinite;
}

@keyframes icon-spin {
  to { transform: rotate(360deg); }
}

SVG 健康报告

对源文件的客观技术指标，供工程侧评估引用方式。

文件体积

4.17 KB

4,273 字节

viewBox

0 0 24 24

矢量坐标系

图元总数

<path> ×19

风格

多色填充

填充跟随容器颜色

同时含 width/height 与 viewBox：可以只保留 viewBox，让图标跟随容器自适应缩放。文件体积 4.17 KB（4,273 字节），图元 19 个，风格为多色填充。

常见问题

关于音乐 · 便签图标的下载、商用与改色。

音乐 · 便签图标是什么？▾

它是 with icons Gothic（withicons-gothic）开源图标集中的 music-note 图标，多色填充，viewBox 为 0 0 24 24，文件仅 4.17 KB，矢量格式可无损缩放到任意尺寸。

如何下载音乐 · 便签图标？▾

点击「下载与导出」中的 SVG 源文件按钮保存矢量文件；也可以按 512 / 256 / 128 / 64 / 32 / 16px 预设导出 PNG，或在输入框填 16~1024 之间的任意尺寸。需要 iOS、Android 全套尺寸时，用素材包生成器一键打包。

音乐 · 便签图标可以商用吗？▾

如何修改音乐 · 便签图标的颜色？▾

在「预览与场景」的色板中切换颜色，三底色与全部场景会实时跟随；点击任一相近图标可打开预览弹层，复制对应颜色的 SVG 源码或 PNG。也可以复制 SVG 源码后自行修改 fill 值。

音乐 · 便签 SVG 图标

下载 音乐 · 便签 图标

音乐 · 便签 的预览与使用场景