找找图标

音乐 · 便签 SVG 图标

withicons-coquettemusic-note

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

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

下载 音乐 · 便签 图标

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

px

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

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

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

预览颜色
音乐 · 便签 图标 浅色背景预览浅色背景
音乐 · 便签 图标 深色背景预览深色背景
音乐 · 便签 图标 灰底融入预览灰底融入

在真实界面里长这样

继续按钮内 · 主操作
搜索音乐 · 便签…输入框 · 前缀图标
音乐 · 便签导航菜单 · 选中态
暂无内容空状态 · 引导提示
9:41音乐 · 便签 App 图标音乐 · 便签music-2list-music手机桌面 · App 图标
音乐 · 便签withicons-coquette.design/icons/music-note浏览器 · 标签页与站点图标

各尺寸下的可读性

音乐 · 便签 图标 24px 渲染24px音乐 · 便签 图标 32px 渲染32px音乐 · 便签 图标 48px 渲染48px音乐 · 便签 图标 64px 渲染64px音乐 · 便签 图标 96px 渲染96px音乐 · 便签 图标 128px 渲染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="#a8345c" fill-opacity=".2" d="m14.15 4.5l-.01 8.1c-1.87-.17-2.71.45-3.14 2.31c-2.3-3.66-6.66.77-3.6 3.01l1 .74L10.76 20c.49.28.99.67 1.44.99c.57-.32.69-.96 1.08-1.49l1.52-2.05c.68.19 1.64-.05 1.65-.95c.01-2.79.03-5.57.05-8.36l.91.76l.7.8c.72.82-.01 2.31.99 2.88c1.13.65 1.89-.56 1.75-1.58l-.15-1c-.28-1.99-2.35-3.14-3.6-4.39c-.57-.57-.5-1.29-.98-1.81c-.61-.68-1.96-.28-1.97.7" class="wm-shadow"/><path fill="#7e2443" d="M13.85 3.7v11.9c0 1.53 2.29 1.45 2.3.1V7.5c0-.27-.01.03.05-.16l.91.76c.54.45.96 1.1 1.09 1.8c.1.54-.08 1.15.3 1.61c.44.54 1.2.57 1.7.11c.4-.36.37-.93.35-1.42c-.08-1.4-.72-2.78-1.79-3.7l-1.64-1.4c-.18-.16-.38-.32-.52-.52l-.32-.48c-.17-.38-.15-.83-.48-1.12c-.67-.59-1.94-.29-1.95.72" class="wm-k"/><path fill="#f8bccb" d="M14.49 3.8v11.7c0 .77 1.02.79 1.02.1V7.4c0-.4.58-.98.99-.64l1.11.94c.62.53 1.07 1.3 1.22 2.1l.08 1.1c.04.28.43.53.69.36c.38-.25.33-.64.3-1.06a4.67 4.67 0 0 0-1.6-3.25l-1.6-1.37c-.39-.33-.76-.72-.98-1.18c-.14-.27-.12-.67-.31-.9c-.3-.35-.92-.2-.92.3" class="wm-k"/><path fill="#ec8da6" fill-opacity=".62" d="M15.8 6.3c-.24.13-.58.25-.58.6l-.01 8.3c0 .43-.35.43-.66.5l-.01.1c.35.35.96.5.97-.2c.01-2.02-1.41-6.49.33-8.8c.29-.06.5-.2.76.03l.8.69l.1-.02c-.57-.5-.98-1.04-1.7-1.2m3.4 1.71l-.04.09c.2.48.84 2.3.24 2.69c-.34.23-.05.02-.43.11l-.03.1l.16.2c.15.13.33.12.5.06c.63-.23.21-1.86.07-2.26z" class="wm-k"/><path fill="#ffe4eb" fill-opacity=".41" d="m14.8 3.51l-.16.29v11.4l.06.11l.11-.11l.01-8.3c0-.79 1.1-1.33 1.7-.8l1.16 1c1.05.91 1.22 2.11 1.41 3.4l.11-.1c.26-.41-.26-1.87-.47-2.3c-.91-1.87-3.09-2.34-3.93-4.59" class="wm-k"/><path fill="#fff" fill-opacity=".95" d="M14.79 3.9v11.5l.06.2l.15.08l.13-.08l.06-.2v-11l.08-.3c.01-.44-.13-.24-.27-.5c-.08.11-.21.12-.21.3m4.41 5.88c-.02.37.01.64 0 1.02l.2.2c.06-.07.12-.13.18-.2c-.05-.38-.15-.63-.17-1l-.11-.08z" class="wm-shine"/><path fill="#7e2443" d="M10.7 14.11c-.46-.73-1.17-1.42-2.1-1.4c-2.02.03-3.3 2.2-1.99 3.89c.39.5.94.94 1.49 1.26l2.36 1.34l.64.42l.6.5c.51.36.86-.74.96-.92l.32-.5l1.56-2.1c.61-.84 1.17-1.93.96-3c-.3-1.56-2.15-2.28-3.5-1.6c-.84.43-1.11 1.27-1.3 2.11" class="wm-k"/><path fill="#d7385f" d="m8.4 17.29l2.4 1.36l1 .71l.1-.09c.57-.88-.3.22.58-.97L14 16.25c.84-1.14 1.57-3.02-.2-3.74c-.93-.39-2.04.1-2.33 1.09c-.12.43-.1 1.07-.67 1.16c-.56.09-.7-.48-1-.81c-.59-.66-1.58-.8-2.3-.27c-1.61 1.19-.46 2.84.9 3.61" class="wm-k"/><path fill="#7e2443" fill-opacity=".34" d="M14.5 13c.01 2.3-1.91 3.91-3.1 5.76l-1-.71L8 16.69l-.9-.66l-.04.07c1.08 1.26 2.32 1.56 3.74 2.55l1 .71c.21-.33.45-.74.68-1.06l1.55-2.1c.74-1 1.18-2.1.47-3.2" class="wm-k"/><path fill="#ec8da6" fill-opacity=".28" d="M11.3 18.08c.13-.17 4.29-4.5 2-5.42c-.59-.24-1.36.13-1.57.74c-.2.56-.18 1.4-.93 1.51c-1.77.28-1.71-2.2-3.2-1.11c-.16.12-.48.38-.54.6c-.41 1.67 3.54 3.22 4.24 3.68" class="wm-k"/><path fill="#fff" fill-opacity=".8" d="m10.38 15.1l-.05.1l.17.34c.44.47 1.29.43 1.56-.24c.23-.59.19-1.15.74-1.56c.63-.46.83-.15 1.4-.16c.09 0 .1-.16.18-.18c-.12-.15-.23-.31-.38-.44c-.61-.51-1.62-.31-2.03.34c-.75 1.16-.01 1.64-1.59 1.8m-2.98.8l.13-.1c.32-1.03.87-1.47 1.97-1.28l.14-.12c-.01-.07-.03-.15-.04-.22c-.42-.32-.83-.65-1.4-.49c-.93.26-1.65 1.48-.8 2.21" class="wm-shine"/><path fill="#d9a45b" d="m19.8 13.1l-.3 1.2l-1.2.3l1.2.3l.3 1.2l.3-1.2l1.2-.3l-1.2-.3z" class="wm-deco"/></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="#a8345c" fill-opacity=".2" d="m14.15 4.5l-.01 8.1c-1.87-.17-2.71.45-3.14 2.31c-2.3-3.66-6.66.77-3.6 3.01l1 .74L10.76 20c.49.28.99.67 1.44.99c.57-.32.69-.96 1.08-1.49l1.52-2.05c.68.19 1.64-.05 1.65-.95c.01-2.79.03-5.57.05-8.36l.91.76l.7.8c.72.82-.01 2.31.99 2.88c1.13.65 1.89-.56 1.75-1.58l-.15-1c-.28-1.99-2.35-3.14-3.6-4.39c-.57-.57-.5-1.29-.98-1.81c-.61-.68-1.96-.28-1.97.7" class="wm-shadow"/><path fill="#7e2443" d="M13.85 3.7v11.9c0 1.53 2.29 1.45 2.3.1V7.5c0-.27-.01.03.05-.16l.91.76c.54.45.96 1.1 1.09 1.8c.1.54-.08 1.15.3 1.61c.44.54 1.2.57 1.7.11c.4-.36.37-.93.35-1.42c-.08-1.4-.72-2.78-1.79-3.7l-1.64-1.4c-.18-.16-.38-.32-.52-.52l-.32-.48c-.17-.38-.15-.83-.48-1.12c-.67-.59-1.94-.29-1.95.72" class="wm-k"/><path fill="#f8bccb" d="M14.49 3.8v11.7c0 .77 1.02.79 1.02.1V7.4c0-.4.58-.98.99-.64l1.11.94c.62.53 1.07 1.3 1.22 2.1l.08 1.1c.04.28.43.53.69.36c.38-.25.33-.64.3-1.06a4.67 4.67 0 0 0-1.6-3.25l-1.6-1.37c-.39-.33-.76-.72-.98-1.18c-.14-.27-.12-.67-.31-.9c-.3-.35-.92-.2-.92.3" class="wm-k"/><path fill="#ec8da6" fill-opacity=".62" d="M15.8 6.3c-.24.13-.58.25-.58.6l-.01 8.3c0 .43-.35.43-.66.5l-.01.1c.35.35.96.5.97-.2c.01-2.02-1.41-6.49.33-8.8c.29-.06.5-.2.76.03l.8.69l.1-.02c-.57-.5-.98-1.04-1.7-1.2m3.4 1.71l-.04.09c.2.48.84 2.3.24 2.69c-.34.23-.05.02-.43.11l-.03.1l.16.2c.15.13.33.12.5.06c.63-.23.21-1.86.07-2.26z" class="wm-k"/><path fill="#ffe4eb" fill-opacity=".41" d="m14.8 3.51l-.16.29v11.4l.06.11l.11-.11l.01-8.3c0-.79 1.1-1.33 1.7-.8l1.16 1c1.05.91 1.22 2.11 1.41 3.4l.11-.1c.26-.41-.26-1.87-.47-2.3c-.91-1.87-3.09-2.34-3.93-4.59" class="wm-k"/><path fill="#fff" fill-opacity=".95" d="M14.79 3.9v11.5l.06.2l.15.08l.13-.08l.06-.2v-11l.08-.3c.01-.44-.13-.24-.27-.5c-.08.11-.21.12-.21.3m4.41 5.88c-.02.37.01.64 0 1.02l.2.2c.06-.07.12-.13.18-.2c-.05-.38-.15-.63-.17-1l-.11-.08z" class="wm-shine"/><path fill="#7e2443" d="M10.7 14.11c-.46-.73-1.17-1.42-2.1-1.4c-2.02.03-3.3 2.2-1.99 3.89c.39.5.94.94 1.49 1.26l2.36 1.34l.64.42l.6.5c.51.36.86-.74.96-.92l.32-.5l1.56-2.1c.61-.84 1.17-1.93.96-3c-.3-1.56-2.15-2.28-3.5-1.6c-.84.43-1.11 1.27-1.3 2.11" class="wm-k"/><path fill="#d7385f" d="m8.4 17.29l2.4 1.36l1 .71l.1-.09c.57-.88-.3.22.58-.97L14 16.25c.84-1.14 1.57-3.02-.2-3.74c-.93-.39-2.04.1-2.33 1.09c-.12.43-.1 1.07-.67 1.16c-.56.09-.7-.48-1-.81c-.59-.66-1.58-.8-2.3-.27c-1.61 1.19-.46 2.84.9 3.61" class="wm-k"/><path fill="#7e2443" fill-opacity=".34" d="M14.5 13c.01 2.3-1.91 3.91-3.1 5.76l-1-.71L8 16.69l-.9-.66l-.04.07c1.08 1.26 2.32 1.56 3.74 2.55l1 .71c.21-.33.45-.74.68-1.06l1.55-2.1c.74-1 1.18-2.1.47-3.2" class="wm-k"/><path fill="#ec8da6" fill-opacity=".28" d="M11.3 18.08c.13-.17 4.29-4.5 2-5.42c-.59-.24-1.36.13-1.57.74c-.2.56-.18 1.4-.93 1.51c-1.77.28-1.71-2.2-3.2-1.11c-.16.12-.48.38-.54.6c-.41 1.67 3.54 3.22 4.24 3.68" class="wm-k"/><path fill="#fff" fill-opacity=".8" d="m10.38 15.1l-.05.1l.17.34c.44.47 1.29.43 1.56-.24c.23-.59.19-1.15.74-1.56c.63-.46.83-.15 1.4-.16c.09 0 .1-.16.18-.18c-.12-.15-.23-.31-.38-.44c-.61-.51-1.62-.31-2.03.34c-.75 1.16-.01 1.64-1.59 1.8m-2.98.8l.13-.1c.32-1.03.87-1.47 1.97-1.28l.14-.12c-.01-.07-.03-.15-.04-.22c-.42-.32-.83-.65-1.4-.49c-.93.26-1.65 1.48-.8 2.21" class="wm-shine"/><path fill="#d9a45b" d="m19.8 13.1l-.3 1.2l-1.2.3l1.2.3l.3 1.2l.3-1.2l1.2-.3l-1.2-.3z" class="wm-deco"/></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="#a8345c" fill-opacity=".2" d="m14.15 4.5l-.01 8.1c-1.87-.17-2.71.45-3.14 2.31c-2.3-3.66-6.66.77-3.6 3.01l1 .74L10.76 20c.49.28.99.67 1.44.99c.57-.32.69-.96 1.08-1.49l1.52-2.05c.68.19 1.64-.05 1.65-.95c.01-2.79.03-5.57.05-8.36l.91.76l.7.8c.72.82-.01 2.31.99 2.88c1.13.65 1.89-.56 1.75-1.58l-.15-1c-.28-1.99-2.35-3.14-3.6-4.39c-.57-.57-.5-1.29-.98-1.81c-.61-.68-1.96-.28-1.97.7" class="wm-shadow"/><path fill="#7e2443" d="M13.85 3.7v11.9c0 1.53 2.29 1.45 2.3.1V7.5c0-.27-.01.03.05-.16l.91.76c.54.45.96 1.1 1.09 1.8c.1.54-.08 1.15.3 1.61c.44.54 1.2.57 1.7.11c.4-.36.37-.93.35-1.42c-.08-1.4-.72-2.78-1.79-3.7l-1.64-1.4c-.18-.16-.38-.32-.52-.52l-.32-.48c-.17-.38-.15-.83-.48-1.12c-.67-.59-1.94-.29-1.95.72" class="wm-k"/><path fill="#f8bccb" d="M14.49 3.8v11.7c0 .77 1.02.79 1.02.1V7.4c0-.4.58-.98.99-.64l1.11.94c.62.53 1.07 1.3 1.22 2.1l.08 1.1c.04.28.43.53.69.36c.38-.25.33-.64.3-1.06a4.67 4.67 0 0 0-1.6-3.25l-1.6-1.37c-.39-.33-.76-.72-.98-1.18c-.14-.27-.12-.67-.31-.9c-.3-.35-.92-.2-.92.3" class="wm-k"/><path fill="#ec8da6" fill-opacity=".62" d="M15.8 6.3c-.24.13-.58.25-.58.6l-.01 8.3c0 .43-.35.43-.66.5l-.01.1c.35.35.96.5.97-.2c.01-2.02-1.41-6.49.33-8.8c.29-.06.5-.2.76.03l.8.69l.1-.02c-.57-.5-.98-1.04-1.7-1.2m3.4 1.71l-.04.09c.2.48.84 2.3.24 2.69c-.34.23-.05.02-.43.11l-.03.1l.16.2c.15.13.33.12.5.06c.63-.23.21-1.86.07-2.26z" class="wm-k"/><path fill="#ffe4eb" fill-opacity=".41" d="m14.8 3.51l-.16.29v11.4l.06.11l.11-.11l.01-8.3c0-.79 1.1-1.33 1.7-.8l1.16 1c1.05.91 1.22 2.11 1.41 3.4l.11-.1c.26-.41-.26-1.87-.47-2.3c-.91-1.87-3.09-2.34-3.93-4.59" class="wm-k"/><path fill="#fff" fill-opacity=".95" d="M14.79 3.9v11.5l.06.2l.15.08l.13-.08l.06-.2v-11l.08-.3c.01-.44-.13-.24-.27-.5c-.08.11-.21.12-.21.3m4.41 5.88c-.02.37.01.64 0 1.02l.2.2c.06-.07.12-.13.18-.2c-.05-.38-.15-.63-.17-1l-.11-.08z" class="wm-shine"/><path fill="#7e2443" d="M10.7 14.11c-.46-.73-1.17-1.42-2.1-1.4c-2.02.03-3.3 2.2-1.99 3.89c.39.5.94.94 1.49 1.26l2.36 1.34l.64.42l.6.5c.51.36.86-.74.96-.92l.32-.5l1.56-2.1c.61-.84 1.17-1.93.96-3c-.3-1.56-2.15-2.28-3.5-1.6c-.84.43-1.11 1.27-1.3 2.11" class="wm-k"/><path fill="#d7385f" d="m8.4 17.29l2.4 1.36l1 .71l.1-.09c.57-.88-.3.22.58-.97L14 16.25c.84-1.14 1.57-3.02-.2-3.74c-.93-.39-2.04.1-2.33 1.09c-.12.43-.1 1.07-.67 1.16c-.56.09-.7-.48-1-.81c-.59-.66-1.58-.8-2.3-.27c-1.61 1.19-.46 2.84.9 3.61" class="wm-k"/><path fill="#7e2443" fill-opacity=".34" d="M14.5 13c.01 2.3-1.91 3.91-3.1 5.76l-1-.71L8 16.69l-.9-.66l-.04.07c1.08 1.26 2.32 1.56 3.74 2.55l1 .71c.21-.33.45-.74.68-1.06l1.55-2.1c.74-1 1.18-2.1.47-3.2" class="wm-k"/><path fill="#ec8da6" fill-opacity=".28" d="M11.3 18.08c.13-.17 4.29-4.5 2-5.42c-.59-.24-1.36.13-1.57.74c-.2.56-.18 1.4-.93 1.51c-1.77.28-1.71-2.2-3.2-1.11c-.16.12-.48.38-.54.6c-.41 1.67 3.54 3.22 4.24 3.68" class="wm-k"/><path fill="#fff" fill-opacity=".8" d="m10.38 15.1l-.05.1l.17.34c.44.47 1.29.43 1.56-.24c.23-.59.19-1.15.74-1.56c.63-.46.83-.15 1.4-.16c.09 0 .1-.16.18-.18c-.12-.15-.23-.31-.38-.44c-.61-.51-1.62-.31-2.03.34c-.75 1.16-.01 1.64-1.59 1.8m-2.98.8l.13-.1c.32-1.03.87-1.47 1.97-1.28l.14-.12c-.01-.07-.03-.15-.04-.22c-.42-.32-.83-.65-1.4-.49c-.93.26-1.65 1.48-.8 2.21" class="wm-shine"/><path fill="#d9a45b" d="m19.8 13.1l-.3 1.2l-1.2.3l1.2.3l.3 1.2l.3-1.2l1.2-.3l-1.2-.3z" class="wm-deco"/></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%23a8345c%22%20fill-opacity%3D%22.2%22%20d%3D%22m14.15%204.5l-.01%208.1c-1.87-.17-2.71.45-3.14%202.31c-2.3-3.66-6.66.77-3.6%203.01l1%20.74L10.76%2020c.49.28.99.67%201.44.99c.57-.32.69-.96%201.08-1.49l1.52-2.05c.68.19%201.64-.05%201.65-.95c.01-2.79.03-5.57.05-8.36l.91.76l.7.8c.72.82-.01%202.31.99%202.88c1.13.65%201.89-.56%201.75-1.58l-.15-1c-.28-1.99-2.35-3.14-3.6-4.39c-.57-.57-.5-1.29-.98-1.81c-.61-.68-1.96-.28-1.97.7%22%20class%3D%22wm-shadow%22%2F%3E%3Cpath%20fill%3D%22%237e2443%22%20d%3D%22M13.85%203.7v11.9c0%201.53%202.29%201.45%202.3.1V7.5c0-.27-.01.03.05-.16l.91.76c.54.45.96%201.1%201.09%201.8c.1.54-.08%201.15.3%201.61c.44.54%201.2.57%201.7.11c.4-.36.37-.93.35-1.42c-.08-1.4-.72-2.78-1.79-3.7l-1.64-1.4c-.18-.16-.38-.32-.52-.52l-.32-.48c-.17-.38-.15-.83-.48-1.12c-.67-.59-1.94-.29-1.95.72%22%20class%3D%22wm-k%22%2F%3E%3Cpath%20fill%3D%22%23f8bccb%22%20d%3D%22M14.49%203.8v11.7c0%20.77%201.02.79%201.02.1V7.4c0-.4.58-.98.99-.64l1.11.94c.62.53%201.07%201.3%201.22%202.1l.08%201.1c.04.28.43.53.69.36c.38-.25.33-.64.3-1.06a4.67%204.67%200%200%200-1.6-3.25l-1.6-1.37c-.39-.33-.76-.72-.98-1.18c-.14-.27-.12-.67-.31-.9c-.3-.35-.92-.2-.92.3%22%20class%3D%22wm-k%22%2F%3E%3Cpath%20fill%3D%22%23ec8da6%22%20fill-opacity%3D%22.62%22%20d%3D%22M15.8%206.3c-.24.13-.58.25-.58.6l-.01%208.3c0%20.43-.35.43-.66.5l-.01.1c.35.35.96.5.97-.2c.01-2.02-1.41-6.49.33-8.8c.29-.06.5-.2.76.03l.8.69l.1-.02c-.57-.5-.98-1.04-1.7-1.2m3.4%201.71l-.04.09c.2.48.84%202.3.24%202.69c-.34.23-.05.02-.43.11l-.03.1l.16.2c.15.13.33.12.5.06c.63-.23.21-1.86.07-2.26z%22%20class%3D%22wm-k%22%2F%3E%3Cpath%20fill%3D%22%23ffe4eb%22%20fill-opacity%3D%22.41%22%20d%3D%22m14.8%203.51l-.16.29v11.4l.06.11l.11-.11l.01-8.3c0-.79%201.1-1.33%201.7-.8l1.16%201c1.05.91%201.22%202.11%201.41%203.4l.11-.1c.26-.41-.26-1.87-.47-2.3c-.91-1.87-3.09-2.34-3.93-4.59%22%20class%3D%22wm-k%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20fill-opacity%3D%22.95%22%20d%3D%22M14.79%203.9v11.5l.06.2l.15.08l.13-.08l.06-.2v-11l.08-.3c.01-.44-.13-.24-.27-.5c-.08.11-.21.12-.21.3m4.41%205.88c-.02.37.01.64%200%201.02l.2.2c.06-.07.12-.13.18-.2c-.05-.38-.15-.63-.17-1l-.11-.08z%22%20class%3D%22wm-shine%22%2F%3E%3Cpath%20fill%3D%22%237e2443%22%20d%3D%22M10.7%2014.11c-.46-.73-1.17-1.42-2.1-1.4c-2.02.03-3.3%202.2-1.99%203.89c.39.5.94.94%201.49%201.26l2.36%201.34l.64.42l.6.5c.51.36.86-.74.96-.92l.32-.5l1.56-2.1c.61-.84%201.17-1.93.96-3c-.3-1.56-2.15-2.28-3.5-1.6c-.84.43-1.11%201.27-1.3%202.11%22%20class%3D%22wm-k%22%2F%3E%3Cpath%20fill%3D%22%23d7385f%22%20d%3D%22m8.4%2017.29l2.4%201.36l1%20.71l.1-.09c.57-.88-.3.22.58-.97L14%2016.25c.84-1.14%201.57-3.02-.2-3.74c-.93-.39-2.04.1-2.33%201.09c-.12.43-.1%201.07-.67%201.16c-.56.09-.7-.48-1-.81c-.59-.66-1.58-.8-2.3-.27c-1.61%201.19-.46%202.84.9%203.61%22%20class%3D%22wm-k%22%2F%3E%3Cpath%20fill%3D%22%237e2443%22%20fill-opacity%3D%22.34%22%20d%3D%22M14.5%2013c.01%202.3-1.91%203.91-3.1%205.76l-1-.71L8%2016.69l-.9-.66l-.04.07c1.08%201.26%202.32%201.56%203.74%202.55l1%20.71c.21-.33.45-.74.68-1.06l1.55-2.1c.74-1%201.18-2.1.47-3.2%22%20class%3D%22wm-k%22%2F%3E%3Cpath%20fill%3D%22%23ec8da6%22%20fill-opacity%3D%22.28%22%20d%3D%22M11.3%2018.08c.13-.17%204.29-4.5%202-5.42c-.59-.24-1.36.13-1.57.74c-.2.56-.18%201.4-.93%201.51c-1.77.28-1.71-2.2-3.2-1.11c-.16.12-.48.38-.54.6c-.41%201.67%203.54%203.22%204.24%203.68%22%20class%3D%22wm-k%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20fill-opacity%3D%22.8%22%20d%3D%22m10.38%2015.1l-.05.1l.17.34c.44.47%201.29.43%201.56-.24c.23-.59.19-1.15.74-1.56c.63-.46.83-.15%201.4-.16c.09%200%20.1-.16.18-.18c-.12-.15-.23-.31-.38-.44c-.61-.51-1.62-.31-2.03.34c-.75%201.16-.01%201.64-1.59%201.8m-2.98.8l.13-.1c.32-1.03.87-1.47%201.97-1.28l.14-.12c-.01-.07-.03-.15-.04-.22c-.42-.32-.83-.65-1.4-.49c-.93.26-1.65%201.48-.8%202.21%22%20class%3D%22wm-shine%22%2F%3E%3Cpath%20fill%3D%22%23d9a45b%22%20d%3D%22m19.8%2013.1l-.3%201.2l-1.2.3l1.2.3l.3%201.2l.3-1.2l1.2-.3l-1.2-.3z%22%20class%3D%22wm-deco%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%23a8345c%22%20fill-opacity%3D%22.2%22%20d%3D%22m14.15%204.5l-.01%208.1c-1.87-.17-2.71.45-3.14%202.31c-2.3-3.66-6.66.77-3.6%203.01l1%20.74L10.76%2020c.49.28.99.67%201.44.99c.57-.32.69-.96%201.08-1.49l1.52-2.05c.68.19%201.64-.05%201.65-.95c.01-2.79.03-5.57.05-8.36l.91.76l.7.8c.72.82-.01%202.31.99%202.88c1.13.65%201.89-.56%201.75-1.58l-.15-1c-.28-1.99-2.35-3.14-3.6-4.39c-.57-.57-.5-1.29-.98-1.81c-.61-.68-1.96-.28-1.97.7%22%20class%3D%22wm-shadow%22%2F%3E%3Cpath%20fill%3D%22%237e2443%22%20d%3D%22M13.85%203.7v11.9c0%201.53%202.29%201.45%202.3.1V7.5c0-.27-.01.03.05-.16l.91.76c.54.45.96%201.1%201.09%201.8c.1.54-.08%201.15.3%201.61c.44.54%201.2.57%201.7.11c.4-.36.37-.93.35-1.42c-.08-1.4-.72-2.78-1.79-3.7l-1.64-1.4c-.18-.16-.38-.32-.52-.52l-.32-.48c-.17-.38-.15-.83-.48-1.12c-.67-.59-1.94-.29-1.95.72%22%20class%3D%22wm-k%22%2F%3E%3Cpath%20fill%3D%22%23f8bccb%22%20d%3D%22M14.49%203.8v11.7c0%20.77%201.02.79%201.02.1V7.4c0-.4.58-.98.99-.64l1.11.94c.62.53%201.07%201.3%201.22%202.1l.08%201.1c.04.28.43.53.69.36c.38-.25.33-.64.3-1.06a4.67%204.67%200%200%200-1.6-3.25l-1.6-1.37c-.39-.33-.76-.72-.98-1.18c-.14-.27-.12-.67-.31-.9c-.3-.35-.92-.2-.92.3%22%20class%3D%22wm-k%22%2F%3E%3Cpath%20fill%3D%22%23ec8da6%22%20fill-opacity%3D%22.62%22%20d%3D%22M15.8%206.3c-.24.13-.58.25-.58.6l-.01%208.3c0%20.43-.35.43-.66.5l-.01.1c.35.35.96.5.97-.2c.01-2.02-1.41-6.49.33-8.8c.29-.06.5-.2.76.03l.8.69l.1-.02c-.57-.5-.98-1.04-1.7-1.2m3.4%201.71l-.04.09c.2.48.84%202.3.24%202.69c-.34.23-.05.02-.43.11l-.03.1l.16.2c.15.13.33.12.5.06c.63-.23.21-1.86.07-2.26z%22%20class%3D%22wm-k%22%2F%3E%3Cpath%20fill%3D%22%23ffe4eb%22%20fill-opacity%3D%22.41%22%20d%3D%22m14.8%203.51l-.16.29v11.4l.06.11l.11-.11l.01-8.3c0-.79%201.1-1.33%201.7-.8l1.16%201c1.05.91%201.22%202.11%201.41%203.4l.11-.1c.26-.41-.26-1.87-.47-2.3c-.91-1.87-3.09-2.34-3.93-4.59%22%20class%3D%22wm-k%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20fill-opacity%3D%22.95%22%20d%3D%22M14.79%203.9v11.5l.06.2l.15.08l.13-.08l.06-.2v-11l.08-.3c.01-.44-.13-.24-.27-.5c-.08.11-.21.12-.21.3m4.41%205.88c-.02.37.01.64%200%201.02l.2.2c.06-.07.12-.13.18-.2c-.05-.38-.15-.63-.17-1l-.11-.08z%22%20class%3D%22wm-shine%22%2F%3E%3Cpath%20fill%3D%22%237e2443%22%20d%3D%22M10.7%2014.11c-.46-.73-1.17-1.42-2.1-1.4c-2.02.03-3.3%202.2-1.99%203.89c.39.5.94.94%201.49%201.26l2.36%201.34l.64.42l.6.5c.51.36.86-.74.96-.92l.32-.5l1.56-2.1c.61-.84%201.17-1.93.96-3c-.3-1.56-2.15-2.28-3.5-1.6c-.84.43-1.11%201.27-1.3%202.11%22%20class%3D%22wm-k%22%2F%3E%3Cpath%20fill%3D%22%23d7385f%22%20d%3D%22m8.4%2017.29l2.4%201.36l1%20.71l.1-.09c.57-.88-.3.22.58-.97L14%2016.25c.84-1.14%201.57-3.02-.2-3.74c-.93-.39-2.04.1-2.33%201.09c-.12.43-.1%201.07-.67%201.16c-.56.09-.7-.48-1-.81c-.59-.66-1.58-.8-2.3-.27c-1.61%201.19-.46%202.84.9%203.61%22%20class%3D%22wm-k%22%2F%3E%3Cpath%20fill%3D%22%237e2443%22%20fill-opacity%3D%22.34%22%20d%3D%22M14.5%2013c.01%202.3-1.91%203.91-3.1%205.76l-1-.71L8%2016.69l-.9-.66l-.04.07c1.08%201.26%202.32%201.56%203.74%202.55l1%20.71c.21-.33.45-.74.68-1.06l1.55-2.1c.74-1%201.18-2.1.47-3.2%22%20class%3D%22wm-k%22%2F%3E%3Cpath%20fill%3D%22%23ec8da6%22%20fill-opacity%3D%22.28%22%20d%3D%22M11.3%2018.08c.13-.17%204.29-4.5%202-5.42c-.59-.24-1.36.13-1.57.74c-.2.56-.18%201.4-.93%201.51c-1.77.28-1.71-2.2-3.2-1.11c-.16.12-.48.38-.54.6c-.41%201.67%203.54%203.22%204.24%203.68%22%20class%3D%22wm-k%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20fill-opacity%3D%22.8%22%20d%3D%22m10.38%2015.1l-.05.1l.17.34c.44.47%201.29.43%201.56-.24c.23-.59.19-1.15.74-1.56c.63-.46.83-.15%201.4-.16c.09%200%20.1-.16.18-.18c-.12-.15-.23-.31-.38-.44c-.61-.51-1.62-.31-2.03.34c-.75%201.16-.01%201.64-1.59%201.8m-2.98.8l.13-.1c.32-1.03.87-1.47%201.97-1.28l.14-.12c-.01-.07-.03-.15-.04-.22c-.42-.32-.83-.65-1.4-.49c-.93.26-1.65%201.48-.8%202.21%22%20class%3D%22wm-shine%22%2F%3E%3Cpath%20fill%3D%22%23d9a45b%22%20d%3D%22m19.8%2013.1l-.3%201.2l-1.2.3l1.2.3l.3%201.2l.3-1.2l1.2-.3l-1.2-.3z%22%20class%3D%22wm-deco%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

给 音乐 · 便签 加一点动效

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

music-note 呼吸动效演示

呼吸

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

css呼吸动效样式
.icon-music-note {
  animation: icon-breathe 1.8s ease-in-out infinite;
}

@keyframes icon-breathe {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
music-note 旋转动效演示

旋转

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

css旋转动效样式
.icon-music-note {
  animation: icon-spin 1.6s linear infinite;
}

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

SVG 健康报告

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

文件体积

3.29 KB

3,373 字节

viewBox

0 0 24 24

矢量坐标系

图元总数

12

<path> ×12

风格

多色填充

填充跟随容器颜色

同时含 width/height 与 viewBox:可以只保留 viewBox,让图标跟随容器自适应缩放。 文件体积 3.29 KB(3,373 字节),图元 12 个,风格为多色填充。

常见问题

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

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

它是 with icons Coquette(withicons-coquette)开源图标集中的 music-note 图标,多色填充,viewBox 为 0 0 24 24,文件仅 3.29 KB,矢量格式可无损缩放到任意尺寸。

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

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

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

该图标采用 MIT(MIT) 开源协议,通常允许在遵守协议的前提下免费使用,常见要求是保留作者版权声明。商用前建议阅读协议原文确认。

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

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

with icons Coquette 中的相近图标

music-2
list-music