音乐 · 便签 SVG 图标

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

withicons-skeuomusic-note

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

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

下载音乐 · 便签图标

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

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

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

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

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

预览颜色

浅色背景

深色背景

灰底融入

在真实界面里长这样

继续按钮内 · 主操作

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

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

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

9:41

音乐 · 便签

music-2

list-music手机桌面 · App 图标

音乐 · 便签withicons-skeuo.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="#15110d" fill-opacity=".1" d="m11.5 2.5l-.7.4l-.4.9v10l-1.6-.3h-.9l-1.1.2l-.9.4l-1 .7l-.7.8l-.5.9l-.3 1v1.8l.4 1.1l.5.9l1.4 1.3l1.8.7l1.8-.1l1.5-.5l1.4-1.2l.7-1.4l.3-1.7l.1-10.8L15.2 9l1 .9l.5.9l.3 1.7l.4.5l.7.3h.7l.6-.5l.3-.6V11l-.3-1.2L18.3 8L17 6.7l-3.1-2.3l-1.2-1.6l-.6-.3z" class="wm-shadow"/><path fill="#15110d" fill-opacity=".16" d="m11.2 2.4l-.6.4l-.2.6v10.5l-1-.4l-.9-.2l-1.2.1l-1 .3l-1 .5l-.8.8l-.7 1l-.3 1.1v1.7l.3 1l.5.9l.5.6l.8.7l.8.4l.9.2H9l1.5-.6l1.2-1l.8-1.4l.3-1.6V6.8l2.3 1.5l1 1l.6.9l.2 1.6l.4.6l.6.3l.6-.1l.5-.3l.3-.6l-.1-1.1l-.2-1.1l-.5-.9l-.7-1l-1.2-1.1l-3-2.2l-.5-.6l-.5-.9l-.3-.3l-.5-.2z" class="wm-shadow"/><path fill="#ee6a4d" stroke="#000" stroke-linejoin="round" stroke-opacity=".42" stroke-width=".36" d="m11.5 1.9l-.4.08l-.35.22l-.23.3l-.12.4v10.6l-.1.02l-.6-.29l-.5-.17l-.8-.14l-.6-.01l-.6.06l-.9.26l-1 .55l-.5.42l-.37.4l-.57.9l-.27.7l-.1.4l-.09.9l.07.8l.26.9l.29.6l.58.8l.6.55l.9.54l.8.27l.7.12l.9-.01l.6-.1l.5-.16l.66-.31l.64-.43l.67-.67l.35-.5l.39-.8l.18-.6l.11-1V6.1h.12l2.38 1.69l.96.91l.34.47l.27.53l.18.7l.09.9l.14.3l.22.24l.25.16l.25.08l.3.02l.3-.08l.44-.32l.16-.25l.08-.25l-.05-1.1l-.28-1.1l-.37-.8l-.54-.8l-.64-.7l-.7-.61l-2.4-1.7l-.7-.56l-.57-.63l-.41-.8l-.22-.25l-.3-.17z"/><path fill="#15110d" fill-opacity=".16" d="M12.4 5.6V17l-.1 1l-.2.6l-.4.8l-.3.5l-.7.7l-1 .6l-.8.3l-.6.1l-1.2-.1l-1.2-.3l-.9-.6l-1-1l.3.6l.5.6l.8.6l.8.4l.9.2l.8.1l.9-.1l.9-.3l.6-.3l.7-.6l.7-.8l.4-.9l.2-.6l.1-1V6.1h.1l2.4 1.7L16.3 9l-.4-.8l-1-.9l-2.4-1.7zm6.5 3.9l-.1.2l.1 1l-.1.3l-.2.3l-.4.2l-.4.1l-.4-.1l-.4-.2l.2.4l.3.3l.4.1h.4l.4-.3l.3-.3l.1-.3v-.6z"/><path fill="#15110d" fill-opacity=".11" d="M12.1 4.7v11.4l-.3 1.6l-.7 1.3l-.7.7l-1 .6l-1.4.4l-1.2-.1l-1.2-.3l-1.3-.9l-.7-.9l.2.9l.8 1.2l1 .8l.8.4l.9.2l.8.1l.9-.1l.9-.3l1.3-.9l.7-.8l.4-.9l.3-1.6V6.1l2.5 1.7L16.3 9L16 7.9l-.8-1l-1.2-1zm6.5 3.9v1.2l-.3.5l-.5.4l-.9-.1l.2 1l.3.3l.4.2h.5l.3-.2l.5-.7l-.1-1.1z"/><path fill="#15110d" fill-opacity=".07" d="M11.6 3.5v11.4l-.1 1l-.6 1.4l-.7.9l-.8.6l-.8.4l-1.1.3H6.4l-1-.3l-.8-.4l-1.1-.9l.3 1.4l.8 1.3l1 .8l1.3.6l1.6.1l1.1-.3l.7-.3l1.3-1.1l.7-1.3l.3-1.6V6.1l3.3 2.3l-.2-1.3L15 6l-1.4-1.2zm6.5 4.3v.8l-.3.6l-.5.3h-.7l.4 2l.4.4l.5.2l.5-.1l.4-.2l.2-.3l.1-.5l-.1-.9l-.2-1z"/><path fill="#fff" fill-opacity=".3" d="m11.4 2.7l-.2.1V12l.6-.2l.1-5.8l.1-.4l.5-.2l.3-.1l.3.2L15 6.8l1.2 1l.5.5l.6.9l.2.7l.1.8l.1.1l.6-.1v-.5l-.3-1l-.4-.8l-.5-.7l-1.1-1l-3.1-2.3l-.7-.8l-.4-.8l-.2-.1z" class="wm-shine"/><path fill="#fff" fill-opacity=".85" d="m11.4 2.8l-.1.2v6l.1-5.6l.1-.2h.2l.1.1v-.1l-.2-.4zm.6.7v.1l.2.5l.7.7l1.4 1.1l.2-.1v-.1l-1.7-1.3z" class="wm-shine"/><path fill="#fff" fill-opacity=".7" d="m11.5 1.9l-.4.1l-.3.2l-.3.3l-.1.4v10.6L8.9 13l-1.1-.1l-1.2.2l-1.2.6l-1 .9l-.6 1l-.3 1.2l-.1.7l.1.4l.2-1.3l.5-1.2l.7-.8l1-.7l.8-.4l1.2-.2l1.1.1l1.5.5v-.3l-.1-.1V3.4l.2-.5l.2-.2l.2-.2l.4-.2l.6.1l.6.4v.1l-.2-.5l-.2-.2l-.3-.2zM12.7 3v.1l.2.5l.6.6l3.1 2.3l.7.6l.6.7l.7 1l-.4-.9l-1-1.2l-.7-.6l-2.8-2l-.6-.6z"/></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="#15110d" fill-opacity=".1" d="m11.5 2.5l-.7.4l-.4.9v10l-1.6-.3h-.9l-1.1.2l-.9.4l-1 .7l-.7.8l-.5.9l-.3 1v1.8l.4 1.1l.5.9l1.4 1.3l1.8.7l1.8-.1l1.5-.5l1.4-1.2l.7-1.4l.3-1.7l.1-10.8L15.2 9l1 .9l.5.9l.3 1.7l.4.5l.7.3h.7l.6-.5l.3-.6V11l-.3-1.2L18.3 8L17 6.7l-3.1-2.3l-1.2-1.6l-.6-.3z" class="wm-shadow"/><path fill="#15110d" fill-opacity=".16" d="m11.2 2.4l-.6.4l-.2.6v10.5l-1-.4l-.9-.2l-1.2.1l-1 .3l-1 .5l-.8.8l-.7 1l-.3 1.1v1.7l.3 1l.5.9l.5.6l.8.7l.8.4l.9.2H9l1.5-.6l1.2-1l.8-1.4l.3-1.6V6.8l2.3 1.5l1 1l.6.9l.2 1.6l.4.6l.6.3l.6-.1l.5-.3l.3-.6l-.1-1.1l-.2-1.1l-.5-.9l-.7-1l-1.2-1.1l-3-2.2l-.5-.6l-.5-.9l-.3-.3l-.5-.2z" class="wm-shadow"/><path fill="#ee6a4d" stroke="#000" stroke-linejoin="round" stroke-opacity=".42" stroke-width=".36" d="m11.5 1.9l-.4.08l-.35.22l-.23.3l-.12.4v10.6l-.1.02l-.6-.29l-.5-.17l-.8-.14l-.6-.01l-.6.06l-.9.26l-1 .55l-.5.42l-.37.4l-.57.9l-.27.7l-.1.4l-.09.9l.07.8l.26.9l.29.6l.58.8l.6.55l.9.54l.8.27l.7.12l.9-.01l.6-.1l.5-.16l.66-.31l.64-.43l.67-.67l.35-.5l.39-.8l.18-.6l.11-1V6.1h.12l2.38 1.69l.96.91l.34.47l.27.53l.18.7l.09.9l.14.3l.22.24l.25.16l.25.08l.3.02l.3-.08l.44-.32l.16-.25l.08-.25l-.05-1.1l-.28-1.1l-.37-.8l-.54-.8l-.64-.7l-.7-.61l-2.4-1.7l-.7-.56l-.57-.63l-.41-.8l-.22-.25l-.3-.17z"/><path fill="#15110d" fill-opacity=".16" d="M12.4 5.6V17l-.1 1l-.2.6l-.4.8l-.3.5l-.7.7l-1 .6l-.8.3l-.6.1l-1.2-.1l-1.2-.3l-.9-.6l-1-1l.3.6l.5.6l.8.6l.8.4l.9.2l.8.1l.9-.1l.9-.3l.6-.3l.7-.6l.7-.8l.4-.9l.2-.6l.1-1V6.1h.1l2.4 1.7L16.3 9l-.4-.8l-1-.9l-2.4-1.7zm6.5 3.9l-.1.2l.1 1l-.1.3l-.2.3l-.4.2l-.4.1l-.4-.1l-.4-.2l.2.4l.3.3l.4.1h.4l.4-.3l.3-.3l.1-.3v-.6z"/><path fill="#15110d" fill-opacity=".11" d="M12.1 4.7v11.4l-.3 1.6l-.7 1.3l-.7.7l-1 .6l-1.4.4l-1.2-.1l-1.2-.3l-1.3-.9l-.7-.9l.2.9l.8 1.2l1 .8l.8.4l.9.2l.8.1l.9-.1l.9-.3l1.3-.9l.7-.8l.4-.9l.3-1.6V6.1l2.5 1.7L16.3 9L16 7.9l-.8-1l-1.2-1zm6.5 3.9v1.2l-.3.5l-.5.4l-.9-.1l.2 1l.3.3l.4.2h.5l.3-.2l.5-.7l-.1-1.1z"/><path fill="#15110d" fill-opacity=".07" d="M11.6 3.5v11.4l-.1 1l-.6 1.4l-.7.9l-.8.6l-.8.4l-1.1.3H6.4l-1-.3l-.8-.4l-1.1-.9l.3 1.4l.8 1.3l1 .8l1.3.6l1.6.1l1.1-.3l.7-.3l1.3-1.1l.7-1.3l.3-1.6V6.1l3.3 2.3l-.2-1.3L15 6l-1.4-1.2zm6.5 4.3v.8l-.3.6l-.5.3h-.7l.4 2l.4.4l.5.2l.5-.1l.4-.2l.2-.3l.1-.5l-.1-.9l-.2-1z"/><path fill="#fff" fill-opacity=".3" d="m11.4 2.7l-.2.1V12l.6-.2l.1-5.8l.1-.4l.5-.2l.3-.1l.3.2L15 6.8l1.2 1l.5.5l.6.9l.2.7l.1.8l.1.1l.6-.1v-.5l-.3-1l-.4-.8l-.5-.7l-1.1-1l-3.1-2.3l-.7-.8l-.4-.8l-.2-.1z" class="wm-shine"/><path fill="#fff" fill-opacity=".85" d="m11.4 2.8l-.1.2v6l.1-5.6l.1-.2h.2l.1.1v-.1l-.2-.4zm.6.7v.1l.2.5l.7.7l1.4 1.1l.2-.1v-.1l-1.7-1.3z" class="wm-shine"/><path fill="#fff" fill-opacity=".7" d="m11.5 1.9l-.4.1l-.3.2l-.3.3l-.1.4v10.6L8.9 13l-1.1-.1l-1.2.2l-1.2.6l-1 .9l-.6 1l-.3 1.2l-.1.7l.1.4l.2-1.3l.5-1.2l.7-.8l1-.7l.8-.4l1.2-.2l1.1.1l1.5.5v-.3l-.1-.1V3.4l.2-.5l.2-.2l.2-.2l.4-.2l.6.1l.6.4v.1l-.2-.5l-.2-.2l-.3-.2zM12.7 3v.1l.2.5l.6.6l3.1 2.3l.7.6l.6.7l.7 1l-.4-.9l-1-1.2l-.7-.6l-2.8-2l-.6-.6z"/></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="#15110d" fill-opacity=".1" d="m11.5 2.5l-.7.4l-.4.9v10l-1.6-.3h-.9l-1.1.2l-.9.4l-1 .7l-.7.8l-.5.9l-.3 1v1.8l.4 1.1l.5.9l1.4 1.3l1.8.7l1.8-.1l1.5-.5l1.4-1.2l.7-1.4l.3-1.7l.1-10.8L15.2 9l1 .9l.5.9l.3 1.7l.4.5l.7.3h.7l.6-.5l.3-.6V11l-.3-1.2L18.3 8L17 6.7l-3.1-2.3l-1.2-1.6l-.6-.3z" class="wm-shadow"/><path fill="#15110d" fill-opacity=".16" d="m11.2 2.4l-.6.4l-.2.6v10.5l-1-.4l-.9-.2l-1.2.1l-1 .3l-1 .5l-.8.8l-.7 1l-.3 1.1v1.7l.3 1l.5.9l.5.6l.8.7l.8.4l.9.2H9l1.5-.6l1.2-1l.8-1.4l.3-1.6V6.8l2.3 1.5l1 1l.6.9l.2 1.6l.4.6l.6.3l.6-.1l.5-.3l.3-.6l-.1-1.1l-.2-1.1l-.5-.9l-.7-1l-1.2-1.1l-3-2.2l-.5-.6l-.5-.9l-.3-.3l-.5-.2z" class="wm-shadow"/><path fill="#ee6a4d" stroke="#000" stroke-linejoin="round" stroke-opacity=".42" stroke-width=".36" d="m11.5 1.9l-.4.08l-.35.22l-.23.3l-.12.4v10.6l-.1.02l-.6-.29l-.5-.17l-.8-.14l-.6-.01l-.6.06l-.9.26l-1 .55l-.5.42l-.37.4l-.57.9l-.27.7l-.1.4l-.09.9l.07.8l.26.9l.29.6l.58.8l.6.55l.9.54l.8.27l.7.12l.9-.01l.6-.1l.5-.16l.66-.31l.64-.43l.67-.67l.35-.5l.39-.8l.18-.6l.11-1V6.1h.12l2.38 1.69l.96.91l.34.47l.27.53l.18.7l.09.9l.14.3l.22.24l.25.16l.25.08l.3.02l.3-.08l.44-.32l.16-.25l.08-.25l-.05-1.1l-.28-1.1l-.37-.8l-.54-.8l-.64-.7l-.7-.61l-2.4-1.7l-.7-.56l-.57-.63l-.41-.8l-.22-.25l-.3-.17z"/><path fill="#15110d" fill-opacity=".16" d="M12.4 5.6V17l-.1 1l-.2.6l-.4.8l-.3.5l-.7.7l-1 .6l-.8.3l-.6.1l-1.2-.1l-1.2-.3l-.9-.6l-1-1l.3.6l.5.6l.8.6l.8.4l.9.2l.8.1l.9-.1l.9-.3l.6-.3l.7-.6l.7-.8l.4-.9l.2-.6l.1-1V6.1h.1l2.4 1.7L16.3 9l-.4-.8l-1-.9l-2.4-1.7zm6.5 3.9l-.1.2l.1 1l-.1.3l-.2.3l-.4.2l-.4.1l-.4-.1l-.4-.2l.2.4l.3.3l.4.1h.4l.4-.3l.3-.3l.1-.3v-.6z"/><path fill="#15110d" fill-opacity=".11" d="M12.1 4.7v11.4l-.3 1.6l-.7 1.3l-.7.7l-1 .6l-1.4.4l-1.2-.1l-1.2-.3l-1.3-.9l-.7-.9l.2.9l.8 1.2l1 .8l.8.4l.9.2l.8.1l.9-.1l.9-.3l1.3-.9l.7-.8l.4-.9l.3-1.6V6.1l2.5 1.7L16.3 9L16 7.9l-.8-1l-1.2-1zm6.5 3.9v1.2l-.3.5l-.5.4l-.9-.1l.2 1l.3.3l.4.2h.5l.3-.2l.5-.7l-.1-1.1z"/><path fill="#15110d" fill-opacity=".07" d="M11.6 3.5v11.4l-.1 1l-.6 1.4l-.7.9l-.8.6l-.8.4l-1.1.3H6.4l-1-.3l-.8-.4l-1.1-.9l.3 1.4l.8 1.3l1 .8l1.3.6l1.6.1l1.1-.3l.7-.3l1.3-1.1l.7-1.3l.3-1.6V6.1l3.3 2.3l-.2-1.3L15 6l-1.4-1.2zm6.5 4.3v.8l-.3.6l-.5.3h-.7l.4 2l.4.4l.5.2l.5-.1l.4-.2l.2-.3l.1-.5l-.1-.9l-.2-1z"/><path fill="#fff" fill-opacity=".3" d="m11.4 2.7l-.2.1V12l.6-.2l.1-5.8l.1-.4l.5-.2l.3-.1l.3.2L15 6.8l1.2 1l.5.5l.6.9l.2.7l.1.8l.1.1l.6-.1v-.5l-.3-1l-.4-.8l-.5-.7l-1.1-1l-3.1-2.3l-.7-.8l-.4-.8l-.2-.1z" class="wm-shine"/><path fill="#fff" fill-opacity=".85" d="m11.4 2.8l-.1.2v6l.1-5.6l.1-.2h.2l.1.1v-.1l-.2-.4zm.6.7v.1l.2.5l.7.7l1.4 1.1l.2-.1v-.1l-1.7-1.3z" class="wm-shine"/><path fill="#fff" fill-opacity=".7" d="m11.5 1.9l-.4.1l-.3.2l-.3.3l-.1.4v10.6L8.9 13l-1.1-.1l-1.2.2l-1.2.6l-1 .9l-.6 1l-.3 1.2l-.1.7l.1.4l.2-1.3l.5-1.2l.7-.8l1-.7l.8-.4l1.2-.2l1.1.1l1.5.5v-.3l-.1-.1V3.4l.2-.5l.2-.2l.2-.2l.4-.2l.6.1l.6.4v.1l-.2-.5l-.2-.2l-.3-.2zM12.7 3v.1l.2.5l.6.6l3.1 2.3l.7.6l.6.7l.7 1l-.4-.9l-1-1.2l-.7-.6l-2.8-2l-.6-.6z"/></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%2315110d%22%20fill-opacity%3D%22.1%22%20d%3D%22m11.5%202.5l-.7.4l-.4.9v10l-1.6-.3h-.9l-1.1.2l-.9.4l-1%20.7l-.7.8l-.5.9l-.3%201v1.8l.4%201.1l.5.9l1.4%201.3l1.8.7l1.8-.1l1.5-.5l1.4-1.2l.7-1.4l.3-1.7l.1-10.8L15.2%209l1%20.9l.5.9l.3%201.7l.4.5l.7.3h.7l.6-.5l.3-.6V11l-.3-1.2L18.3%208L17%206.7l-3.1-2.3l-1.2-1.6l-.6-.3z%22%20class%3D%22wm-shadow%22%2F%3E%3Cpath%20fill%3D%22%2315110d%22%20fill-opacity%3D%22.16%22%20d%3D%22m11.2%202.4l-.6.4l-.2.6v10.5l-1-.4l-.9-.2l-1.2.1l-1%20.3l-1%20.5l-.8.8l-.7%201l-.3%201.1v1.7l.3%201l.5.9l.5.6l.8.7l.8.4l.9.2H9l1.5-.6l1.2-1l.8-1.4l.3-1.6V6.8l2.3%201.5l1%201l.6.9l.2%201.6l.4.6l.6.3l.6-.1l.5-.3l.3-.6l-.1-1.1l-.2-1.1l-.5-.9l-.7-1l-1.2-1.1l-3-2.2l-.5-.6l-.5-.9l-.3-.3l-.5-.2z%22%20class%3D%22wm-shadow%22%2F%3E%3Cpath%20fill%3D%22%23ee6a4d%22%20stroke%3D%22%23000%22%20stroke-linejoin%3D%22round%22%20stroke-opacity%3D%22.42%22%20stroke-width%3D%22.36%22%20d%3D%22m11.5%201.9l-.4.08l-.35.22l-.23.3l-.12.4v10.6l-.1.02l-.6-.29l-.5-.17l-.8-.14l-.6-.01l-.6.06l-.9.26l-1%20.55l-.5.42l-.37.4l-.57.9l-.27.7l-.1.4l-.09.9l.07.8l.26.9l.29.6l.58.8l.6.55l.9.54l.8.27l.7.12l.9-.01l.6-.1l.5-.16l.66-.31l.64-.43l.67-.67l.35-.5l.39-.8l.18-.6l.11-1V6.1h.12l2.38%201.69l.96.91l.34.47l.27.53l.18.7l.09.9l.14.3l.22.24l.25.16l.25.08l.3.02l.3-.08l.44-.32l.16-.25l.08-.25l-.05-1.1l-.28-1.1l-.37-.8l-.54-.8l-.64-.7l-.7-.61l-2.4-1.7l-.7-.56l-.57-.63l-.41-.8l-.22-.25l-.3-.17z%22%2F%3E%3Cpath%20fill%3D%22%2315110d%22%20fill-opacity%3D%22.16%22%20d%3D%22M12.4%205.6V17l-.1%201l-.2.6l-.4.8l-.3.5l-.7.7l-1%20.6l-.8.3l-.6.1l-1.2-.1l-1.2-.3l-.9-.6l-1-1l.3.6l.5.6l.8.6l.8.4l.9.2l.8.1l.9-.1l.9-.3l.6-.3l.7-.6l.7-.8l.4-.9l.2-.6l.1-1V6.1h.1l2.4%201.7L16.3%209l-.4-.8l-1-.9l-2.4-1.7zm6.5%203.9l-.1.2l.1%201l-.1.3l-.2.3l-.4.2l-.4.1l-.4-.1l-.4-.2l.2.4l.3.3l.4.1h.4l.4-.3l.3-.3l.1-.3v-.6z%22%2F%3E%3Cpath%20fill%3D%22%2315110d%22%20fill-opacity%3D%22.11%22%20d%3D%22M12.1%204.7v11.4l-.3%201.6l-.7%201.3l-.7.7l-1%20.6l-1.4.4l-1.2-.1l-1.2-.3l-1.3-.9l-.7-.9l.2.9l.8%201.2l1%20.8l.8.4l.9.2l.8.1l.9-.1l.9-.3l1.3-.9l.7-.8l.4-.9l.3-1.6V6.1l2.5%201.7L16.3%209L16%207.9l-.8-1l-1.2-1zm6.5%203.9v1.2l-.3.5l-.5.4l-.9-.1l.2%201l.3.3l.4.2h.5l.3-.2l.5-.7l-.1-1.1z%22%2F%3E%3Cpath%20fill%3D%22%2315110d%22%20fill-opacity%3D%22.07%22%20d%3D%22M11.6%203.5v11.4l-.1%201l-.6%201.4l-.7.9l-.8.6l-.8.4l-1.1.3H6.4l-1-.3l-.8-.4l-1.1-.9l.3%201.4l.8%201.3l1%20.8l1.3.6l1.6.1l1.1-.3l.7-.3l1.3-1.1l.7-1.3l.3-1.6V6.1l3.3%202.3l-.2-1.3L15%206l-1.4-1.2zm6.5%204.3v.8l-.3.6l-.5.3h-.7l.4%202l.4.4l.5.2l.5-.1l.4-.2l.2-.3l.1-.5l-.1-.9l-.2-1z%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20fill-opacity%3D%22.3%22%20d%3D%22m11.4%202.7l-.2.1V12l.6-.2l.1-5.8l.1-.4l.5-.2l.3-.1l.3.2L15%206.8l1.2%201l.5.5l.6.9l.2.7l.1.8l.1.1l.6-.1v-.5l-.3-1l-.4-.8l-.5-.7l-1.1-1l-3.1-2.3l-.7-.8l-.4-.8l-.2-.1z%22%20class%3D%22wm-shine%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20fill-opacity%3D%22.85%22%20d%3D%22m11.4%202.8l-.1.2v6l.1-5.6l.1-.2h.2l.1.1v-.1l-.2-.4zm.6.7v.1l.2.5l.7.7l1.4%201.1l.2-.1v-.1l-1.7-1.3z%22%20class%3D%22wm-shine%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20fill-opacity%3D%22.7%22%20d%3D%22m11.5%201.9l-.4.1l-.3.2l-.3.3l-.1.4v10.6L8.9%2013l-1.1-.1l-1.2.2l-1.2.6l-1%20.9l-.6%201l-.3%201.2l-.1.7l.1.4l.2-1.3l.5-1.2l.7-.8l1-.7l.8-.4l1.2-.2l1.1.1l1.5.5v-.3l-.1-.1V3.4l.2-.5l.2-.2l.2-.2l.4-.2l.6.1l.6.4v.1l-.2-.5l-.2-.2l-.3-.2zM12.7%203v.1l.2.5l.6.6l3.1%202.3l.7.6l.6.7l.7%201l-.4-.9l-1-1.2l-.7-.6l-2.8-2l-.6-.6z%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%2315110d%22%20fill-opacity%3D%22.1%22%20d%3D%22m11.5%202.5l-.7.4l-.4.9v10l-1.6-.3h-.9l-1.1.2l-.9.4l-1%20.7l-.7.8l-.5.9l-.3%201v1.8l.4%201.1l.5.9l1.4%201.3l1.8.7l1.8-.1l1.5-.5l1.4-1.2l.7-1.4l.3-1.7l.1-10.8L15.2%209l1%20.9l.5.9l.3%201.7l.4.5l.7.3h.7l.6-.5l.3-.6V11l-.3-1.2L18.3%208L17%206.7l-3.1-2.3l-1.2-1.6l-.6-.3z%22%20class%3D%22wm-shadow%22%2F%3E%3Cpath%20fill%3D%22%2315110d%22%20fill-opacity%3D%22.16%22%20d%3D%22m11.2%202.4l-.6.4l-.2.6v10.5l-1-.4l-.9-.2l-1.2.1l-1%20.3l-1%20.5l-.8.8l-.7%201l-.3%201.1v1.7l.3%201l.5.9l.5.6l.8.7l.8.4l.9.2H9l1.5-.6l1.2-1l.8-1.4l.3-1.6V6.8l2.3%201.5l1%201l.6.9l.2%201.6l.4.6l.6.3l.6-.1l.5-.3l.3-.6l-.1-1.1l-.2-1.1l-.5-.9l-.7-1l-1.2-1.1l-3-2.2l-.5-.6l-.5-.9l-.3-.3l-.5-.2z%22%20class%3D%22wm-shadow%22%2F%3E%3Cpath%20fill%3D%22%23ee6a4d%22%20stroke%3D%22%23000%22%20stroke-linejoin%3D%22round%22%20stroke-opacity%3D%22.42%22%20stroke-width%3D%22.36%22%20d%3D%22m11.5%201.9l-.4.08l-.35.22l-.23.3l-.12.4v10.6l-.1.02l-.6-.29l-.5-.17l-.8-.14l-.6-.01l-.6.06l-.9.26l-1%20.55l-.5.42l-.37.4l-.57.9l-.27.7l-.1.4l-.09.9l.07.8l.26.9l.29.6l.58.8l.6.55l.9.54l.8.27l.7.12l.9-.01l.6-.1l.5-.16l.66-.31l.64-.43l.67-.67l.35-.5l.39-.8l.18-.6l.11-1V6.1h.12l2.38%201.69l.96.91l.34.47l.27.53l.18.7l.09.9l.14.3l.22.24l.25.16l.25.08l.3.02l.3-.08l.44-.32l.16-.25l.08-.25l-.05-1.1l-.28-1.1l-.37-.8l-.54-.8l-.64-.7l-.7-.61l-2.4-1.7l-.7-.56l-.57-.63l-.41-.8l-.22-.25l-.3-.17z%22%2F%3E%3Cpath%20fill%3D%22%2315110d%22%20fill-opacity%3D%22.16%22%20d%3D%22M12.4%205.6V17l-.1%201l-.2.6l-.4.8l-.3.5l-.7.7l-1%20.6l-.8.3l-.6.1l-1.2-.1l-1.2-.3l-.9-.6l-1-1l.3.6l.5.6l.8.6l.8.4l.9.2l.8.1l.9-.1l.9-.3l.6-.3l.7-.6l.7-.8l.4-.9l.2-.6l.1-1V6.1h.1l2.4%201.7L16.3%209l-.4-.8l-1-.9l-2.4-1.7zm6.5%203.9l-.1.2l.1%201l-.1.3l-.2.3l-.4.2l-.4.1l-.4-.1l-.4-.2l.2.4l.3.3l.4.1h.4l.4-.3l.3-.3l.1-.3v-.6z%22%2F%3E%3Cpath%20fill%3D%22%2315110d%22%20fill-opacity%3D%22.11%22%20d%3D%22M12.1%204.7v11.4l-.3%201.6l-.7%201.3l-.7.7l-1%20.6l-1.4.4l-1.2-.1l-1.2-.3l-1.3-.9l-.7-.9l.2.9l.8%201.2l1%20.8l.8.4l.9.2l.8.1l.9-.1l.9-.3l1.3-.9l.7-.8l.4-.9l.3-1.6V6.1l2.5%201.7L16.3%209L16%207.9l-.8-1l-1.2-1zm6.5%203.9v1.2l-.3.5l-.5.4l-.9-.1l.2%201l.3.3l.4.2h.5l.3-.2l.5-.7l-.1-1.1z%22%2F%3E%3Cpath%20fill%3D%22%2315110d%22%20fill-opacity%3D%22.07%22%20d%3D%22M11.6%203.5v11.4l-.1%201l-.6%201.4l-.7.9l-.8.6l-.8.4l-1.1.3H6.4l-1-.3l-.8-.4l-1.1-.9l.3%201.4l.8%201.3l1%20.8l1.3.6l1.6.1l1.1-.3l.7-.3l1.3-1.1l.7-1.3l.3-1.6V6.1l3.3%202.3l-.2-1.3L15%206l-1.4-1.2zm6.5%204.3v.8l-.3.6l-.5.3h-.7l.4%202l.4.4l.5.2l.5-.1l.4-.2l.2-.3l.1-.5l-.1-.9l-.2-1z%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20fill-opacity%3D%22.3%22%20d%3D%22m11.4%202.7l-.2.1V12l.6-.2l.1-5.8l.1-.4l.5-.2l.3-.1l.3.2L15%206.8l1.2%201l.5.5l.6.9l.2.7l.1.8l.1.1l.6-.1v-.5l-.3-1l-.4-.8l-.5-.7l-1.1-1l-3.1-2.3l-.7-.8l-.4-.8l-.2-.1z%22%20class%3D%22wm-shine%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20fill-opacity%3D%22.85%22%20d%3D%22m11.4%202.8l-.1.2v6l.1-5.6l.1-.2h.2l.1.1v-.1l-.2-.4zm.6.7v.1l.2.5l.7.7l1.4%201.1l.2-.1v-.1l-1.7-1.3z%22%20class%3D%22wm-shine%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20fill-opacity%3D%22.7%22%20d%3D%22m11.5%201.9l-.4.1l-.3.2l-.3.3l-.1.4v10.6L8.9%2013l-1.1-.1l-1.2.2l-1.2.6l-1%20.9l-.6%201l-.3%201.2l-.1.7l.1.4l.2-1.3l.5-1.2l.7-.8l1-.7l.8-.4l1.2-.2l1.1.1l1.5.5v-.3l-.1-.1V3.4l.2-.5l.2-.2l.2-.2l.4-.2l.6.1l.6.4v.1l-.2-.5l-.2-.2l-.3-.2zM12.7%203v.1l.2.5l.6.6l3.1%202.3l.7.6l.6.7l.7%201l-.4-.9l-1-1.2l-.7-.6l-2.8-2l-.6-.6z%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); }
}

描画

线条从无到有依次绘出，适合线性图标与首屏引导。

css描画动效样式

.icon-music-note path {
  stroke-dasharray: 120;
  animation: icon-draw 1.2s ease forwards;
}

@keyframes icon-draw {
  from { stroke-dashoffset: 120; }
  to { stroke-dashoffset: 0; }
}

SVG 健康报告

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

文件体积

2.95 KB

3,023 字节

viewBox

0 0 24 24

矢量坐标系

图元总数

<path> ×9

风格

多色填充

描边可随字号加粗

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

常见问题

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

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

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

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

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

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

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

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

音乐 · 便签 SVG 图标

下载 音乐 · 便签 图标

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