音乐 · 便签 SVG 图标
withicons-luxemusic-note
来自 with icons Luxe 开源图标集,矢量 SVG 可无损缩放到任意尺寸,支持在线改色、复制 React/Vue/HTML 代码。
- 图标 ID
- withicons-luxe:music-note
- 中文名
- 音乐 · 便签
- 所属集合
- with icons Luxe
- 集合规模
- 1,000 枚
- 基础网格
- 24px
- 色彩
- 多色
- 开源协议
- MIT
- 作者
- Evergrow
withicons-luxemusic-note
来自 with icons Luxe 开源图标集,矢量 SVG 可无损缩放到任意尺寸,支持在线改色、复制 React/Vue/HTML 代码。
SVG 矢量源文件,或 PNG 按 16~512 预设与 16~1024 自定义尺寸导出,任意尺寸边缘锐利。
PNG 由矢量源实时渲染,任意尺寸边缘锐利无锯齿;下载与预览均免费,无需注册。
切换预览颜色后,下方三底色、真实界面场景与各尺寸渲染会实时跟随。
内联 SVG、React、Vue 与 CSS mask 四种主流引用方式,代码基于当前源文件生成,复制即用。
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none"><path fill="#0a0b26" fill-opacity=".2" d="m10.6 4.5l-.1 9.2c-.3-.1-.7-.3-1.1-.3l-.9-.1l-.9.2c-1.2.1-2.6 1.3-3 2.5l-.2.9c-.2.5-.2 1.1 0 1.6l.2.9c.1.5.6 1.1 1 1.4l.7.6c.4.3 1 .5 1.5.6l.9.1c1.8.1 4-1.7 4.2-3.5l.1-.9l.1-9.8c1 .5 2.5 1.5 3 2.6c.4.8.1 1.8.8 2.3c.3.2.7.3 1 .2c1.3-.2 1.1-2.1.7-3l-.4-.8l-.7-1c-.9-1.3-2.6-1.9-3.8-3c-.5-.4-.7-1.3-1.3-1.6c-.7-.4-1.8 0-1.8.9" class="wm-shadow"/><path fill="#16206e" d="m9.95 12.3l-.06.06c-.79-.27-1.54-.5-2.39-.41c-2.32.26-3.98 2.34-3.81 4.65c.07.99.52 2.07 1.06 2.9c2.31 3.53 7.87 1.94 7.87-2.3l.01-9.8l.07-.21c.89.59 2.48 1.54 3 2.45c.16.27.1.66.14.96c.06.4.39 1.15.65 1.47c.41.51 1.23.53 1.68.05c.59-.64.27-1.86.05-2.61c-.53-1.77-1.73-3.11-3.2-4.18l-1.48-1.02l-.66-.54l-.43-.47l-.42-.78c-.53-.98-1.99-.39-2.05.58z"/><path fill="#2039b4" d="m9.95 12.3l-.06.06c-1.13-.38-2.2-.6-3.38-.18c-2.51.88-3.59 3.99-2.2 6.25c2.23 3.64 7.91 2.03 7.91-2.23l.01-9.8l.07-.21c1.11.74 2.49 1.51 3.16 2.7c.4.72.23 1.75.67 2.23c.5.53 1.38.43 1.77-.17c.38-.59.13-1.53-.05-2.15c-.72-2.41-2.98-3.36-4.76-4.84c-.25-.21-.5-.44-.68-.72c-.45-.64-.54-1.43-1.61-1.17c-1.09.27-.82 1.71-.82 2.53z"/><path fill="#0a0b26" fill-opacity=".34" d="M11.8 2.3c.1.3.2.6.5.8c-.1-.3-.2-.6-.5-.8m.1 3.5l-.1.2v9.8l-.1.9l-.2.7l-.4.8l-.6.7l-.8.6l-.9.4l-.9.2c-1 .1-1.9-.4-2.7-.7c.5.5 1.2.9 1.9 1l.9.1l.8-.1l.9-.3l.5-.3l.7-.5l.6-.7l.4-.8l.2-.7l.1-.9V9.1c0-1 0-1.9.1-2.9l1.5 1zm5 1.3c.4 1.2 1.9 4.3-.8 3.9c1.1 1.4 2.3-.2 1.9-1.6l-.2-.9c-.2-.5-.5-1-.9-1.4"/><path fill="#fff" fill-opacity=".075" d="M10.2 2.9V12c0 .3-.2.7-.6.6l-1-.4c-.7-.2-1.8-.1-2.4.3l-.8.5l-.6.6c-1.5 1.4-1.1 4.5.7 5.5l.7.4c.4.3 1 .3 1.4.3c2.2.1 4-1.6 4-3.8V6.1c0-.2.1-.3.2-.4c.2-.1.4-.2.6 0L14.3 7l.8.8c.5.4.8 1.1.9 1.7l.1.9c.1.8 1.7.6 1.3-1l-.2-.9l-.4-.8l-.6-.8c-.9-1.3-2.7-1.8-3.8-3l-.5-.6c-.4-.4-.6-1.5-1.4-.9c-.1.1-.3.3-.3.5"/><path fill="#fff" fill-opacity=".075" d="m10.1 12.4l-.2.2l-1.1-.4l-1-.1l-.9.1c-.6.1-1.3.5-1.7 1l-.6.7c-.4.4-.7 1.2-.6 1.7c1.2.6 2.7 1 4 .9l1.1-.1l1-.1l1-.3l.9-.4V9c0-.9-.2-2.2.2-3l.3.1l1.3.9c.8.6 1.6 1.3 2 2.2c.3.6.1 1.3.6 1.9l.1-.1l.4-1l.2-1.1l.1-1l-.1-.3l-.5-.7c-1-1.2-2.5-1.9-3.6-2.8c-.7-.6-.9-1.3-1.3-1.7c-.4-.3-1-.2-1.3.1c-.4.5-.2 2.1-.2 2.8z"/><path fill="#fff" fill-opacity=".075" d="M10.6 2.4c-.7.6-.4 1.7-.4 2.6v4.8c0 .8-.1 1.7 0 2.5c.7-.3 1.4-.7 1.8-1.3c.1-1.6-.1-3.3.1-4.9l.1-.1h.2l1 .7h.1c-.1-1.3-.7-2.9-1.9-3.7l-.7-.5zM6.3 12.5l.7.2l1 .1l1-.1l.6-.2c-1-.5-2.3-.5-3.3 0"/><path fill="#fff" fill-opacity=".42" d="m9.95 12.3l-.06.06c-.92-.31-1.8-.56-2.8-.35c-2.99.64-4.2 3.79-2.78 6.4c-.23-.94-.54-1.67-.37-2.71c.34-2.16 2.38-3.74 4.56-3.56c.56.05 1.07.24 1.59.42l.06-.06l.03-7.4c0-.85-.3-2.46.74-2.81c.25-.08.55-.06.78-.08c-.67-.31-1.48-.13-1.69.67L9.98 4.1zm5.64-3.31c.05.25.14.54.19.81c.06.41.06.75.23 1.12l.04-.12l-.09-.9c-.03-.32-.21-.63-.37-.91"/><path fill="#9cc2ff" fill-opacity=".75" d="m12.1 5.99l-.07.21V16c0 2.02-1.47 3.76-3.42 4.19c-.5.1-1 .08-1.51.05c-.03.03-.05.05-.08.07c.42.06.82.12 1.25.09c2.17-.14 3.89-2.05 3.89-4.2V6.4l.07-.29zm5.7 2.89c-.03 1.4.44 2.18-1.28 2.44c.35.1.66.13.98-.06c.83-.5.46-1.64.3-2.38"/><path fill="#fff" fill-opacity=".16" d="M10.3 3.1v9.3c0 .2-.3.3-.4.3l-.6-.2c-.6-.2-1.3-.3-2-.2c-2.3.4-3.9 2.9-3.1 5.1h.1c.1-1.6 1.2-3.4 2.9-3.7l.8-.1c.8-.2 1.9.5 2.3.4c.2 0 .3-.3.3-.5V4.4c0-.7.7-.8 1.3-.6c.4.5.6 1.1 1.1 1.5c1.1 1 2.5 1.6 3.4 2.6l.8.9l.2-.2c-.5-1.7-2.1-2.7-3.5-3.7L12.7 4l-.6-.6c-.4-.4-.5-1.5-1.4-.9c-.2.1-.4.4-.4.6" class="wm-shine"/><path fill="#fff" fill-opacity=".92" d="M10.4 3.12v9.08c-.01.24-.14.57-.42.61c-.32.04-.7-.24-1-.32c-.55-.15-1.13-.17-1.7-.08c-2.72.44-4.1 3.78-2.46 5.99c-.01-.03.04-.07.03-.1c-.14-.45-.36-.82-.42-1.3c-.22-1.78.8-3.41 2.43-4.09c.83-.35 1.8-.33 2.64-.05c.22.07.46.25.7.25c.32 0 .49-.33.5-.61V3.37c0-.5.57-.61.92-.67c-.09-.07-.14-.16-.26-.2c-.43-.16-.96.14-.96.62" class="wm-shine"/></g></svg>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="#0a0b26" fill-opacity=".2" d="m10.6 4.5l-.1 9.2c-.3-.1-.7-.3-1.1-.3l-.9-.1l-.9.2c-1.2.1-2.6 1.3-3 2.5l-.2.9c-.2.5-.2 1.1 0 1.6l.2.9c.1.5.6 1.1 1 1.4l.7.6c.4.3 1 .5 1.5.6l.9.1c1.8.1 4-1.7 4.2-3.5l.1-.9l.1-9.8c1 .5 2.5 1.5 3 2.6c.4.8.1 1.8.8 2.3c.3.2.7.3 1 .2c1.3-.2 1.1-2.1.7-3l-.4-.8l-.7-1c-.9-1.3-2.6-1.9-3.8-3c-.5-.4-.7-1.3-1.3-1.6c-.7-.4-1.8 0-1.8.9" class="wm-shadow"/><path fill="#16206e" d="m9.95 12.3l-.06.06c-.79-.27-1.54-.5-2.39-.41c-2.32.26-3.98 2.34-3.81 4.65c.07.99.52 2.07 1.06 2.9c2.31 3.53 7.87 1.94 7.87-2.3l.01-9.8l.07-.21c.89.59 2.48 1.54 3 2.45c.16.27.1.66.14.96c.06.4.39 1.15.65 1.47c.41.51 1.23.53 1.68.05c.59-.64.27-1.86.05-2.61c-.53-1.77-1.73-3.11-3.2-4.18l-1.48-1.02l-.66-.54l-.43-.47l-.42-.78c-.53-.98-1.99-.39-2.05.58z"/><path fill="#2039b4" d="m9.95 12.3l-.06.06c-1.13-.38-2.2-.6-3.38-.18c-2.51.88-3.59 3.99-2.2 6.25c2.23 3.64 7.91 2.03 7.91-2.23l.01-9.8l.07-.21c1.11.74 2.49 1.51 3.16 2.7c.4.72.23 1.75.67 2.23c.5.53 1.38.43 1.77-.17c.38-.59.13-1.53-.05-2.15c-.72-2.41-2.98-3.36-4.76-4.84c-.25-.21-.5-.44-.68-.72c-.45-.64-.54-1.43-1.61-1.17c-1.09.27-.82 1.71-.82 2.53z"/><path fill="#0a0b26" fill-opacity=".34" d="M11.8 2.3c.1.3.2.6.5.8c-.1-.3-.2-.6-.5-.8m.1 3.5l-.1.2v9.8l-.1.9l-.2.7l-.4.8l-.6.7l-.8.6l-.9.4l-.9.2c-1 .1-1.9-.4-2.7-.7c.5.5 1.2.9 1.9 1l.9.1l.8-.1l.9-.3l.5-.3l.7-.5l.6-.7l.4-.8l.2-.7l.1-.9V9.1c0-1 0-1.9.1-2.9l1.5 1zm5 1.3c.4 1.2 1.9 4.3-.8 3.9c1.1 1.4 2.3-.2 1.9-1.6l-.2-.9c-.2-.5-.5-1-.9-1.4"/><path fill="#fff" fill-opacity=".075" d="M10.2 2.9V12c0 .3-.2.7-.6.6l-1-.4c-.7-.2-1.8-.1-2.4.3l-.8.5l-.6.6c-1.5 1.4-1.1 4.5.7 5.5l.7.4c.4.3 1 .3 1.4.3c2.2.1 4-1.6 4-3.8V6.1c0-.2.1-.3.2-.4c.2-.1.4-.2.6 0L14.3 7l.8.8c.5.4.8 1.1.9 1.7l.1.9c.1.8 1.7.6 1.3-1l-.2-.9l-.4-.8l-.6-.8c-.9-1.3-2.7-1.8-3.8-3l-.5-.6c-.4-.4-.6-1.5-1.4-.9c-.1.1-.3.3-.3.5"/><path fill="#fff" fill-opacity=".075" d="m10.1 12.4l-.2.2l-1.1-.4l-1-.1l-.9.1c-.6.1-1.3.5-1.7 1l-.6.7c-.4.4-.7 1.2-.6 1.7c1.2.6 2.7 1 4 .9l1.1-.1l1-.1l1-.3l.9-.4V9c0-.9-.2-2.2.2-3l.3.1l1.3.9c.8.6 1.6 1.3 2 2.2c.3.6.1 1.3.6 1.9l.1-.1l.4-1l.2-1.1l.1-1l-.1-.3l-.5-.7c-1-1.2-2.5-1.9-3.6-2.8c-.7-.6-.9-1.3-1.3-1.7c-.4-.3-1-.2-1.3.1c-.4.5-.2 2.1-.2 2.8z"/><path fill="#fff" fill-opacity=".075" d="M10.6 2.4c-.7.6-.4 1.7-.4 2.6v4.8c0 .8-.1 1.7 0 2.5c.7-.3 1.4-.7 1.8-1.3c.1-1.6-.1-3.3.1-4.9l.1-.1h.2l1 .7h.1c-.1-1.3-.7-2.9-1.9-3.7l-.7-.5zM6.3 12.5l.7.2l1 .1l1-.1l.6-.2c-1-.5-2.3-.5-3.3 0"/><path fill="#fff" fill-opacity=".42" d="m9.95 12.3l-.06.06c-.92-.31-1.8-.56-2.8-.35c-2.99.64-4.2 3.79-2.78 6.4c-.23-.94-.54-1.67-.37-2.71c.34-2.16 2.38-3.74 4.56-3.56c.56.05 1.07.24 1.59.42l.06-.06l.03-7.4c0-.85-.3-2.46.74-2.81c.25-.08.55-.06.78-.08c-.67-.31-1.48-.13-1.69.67L9.98 4.1zm5.64-3.31c.05.25.14.54.19.81c.06.41.06.75.23 1.12l.04-.12l-.09-.9c-.03-.32-.21-.63-.37-.91"/><path fill="#9cc2ff" fill-opacity=".75" d="m12.1 5.99l-.07.21V16c0 2.02-1.47 3.76-3.42 4.19c-.5.1-1 .08-1.51.05c-.03.03-.05.05-.08.07c.42.06.82.12 1.25.09c2.17-.14 3.89-2.05 3.89-4.2V6.4l.07-.29zm5.7 2.89c-.03 1.4.44 2.18-1.28 2.44c.35.1.66.13.98-.06c.83-.5.46-1.64.3-2.38"/><path fill="#fff" fill-opacity=".16" d="M10.3 3.1v9.3c0 .2-.3.3-.4.3l-.6-.2c-.6-.2-1.3-.3-2-.2c-2.3.4-3.9 2.9-3.1 5.1h.1c.1-1.6 1.2-3.4 2.9-3.7l.8-.1c.8-.2 1.9.5 2.3.4c.2 0 .3-.3.3-.5V4.4c0-.7.7-.8 1.3-.6c.4.5.6 1.1 1.1 1.5c1.1 1 2.5 1.6 3.4 2.6l.8.9l.2-.2c-.5-1.7-2.1-2.7-3.5-3.7L12.7 4l-.6-.6c-.4-.4-.5-1.5-1.4-.9c-.2.1-.4.4-.4.6" class="wm-shine"/><path fill="#fff" fill-opacity=".92" d="M10.4 3.12v9.08c-.01.24-.14.57-.42.61c-.32.04-.7-.24-1-.32c-.55-.15-1.13-.17-1.7-.08c-2.72.44-4.1 3.78-2.46 5.99c-.01-.03.04-.07.03-.1c-.14-.45-.36-.82-.42-1.3c-.22-1.78.8-3.41 2.43-4.09c.83-.35 1.8-.33 2.64-.05c.22.07.46.25.7.25c.32 0 .49-.33.5-.61V3.37c0-.5.57-.61.92-.67c-.09-.07-.14-.16-.26-.2c-.43-.16-.96.14-.96.62" class="wm-shine"/></g>` }}
/>
);
}<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="#0a0b26" fill-opacity=".2" d="m10.6 4.5l-.1 9.2c-.3-.1-.7-.3-1.1-.3l-.9-.1l-.9.2c-1.2.1-2.6 1.3-3 2.5l-.2.9c-.2.5-.2 1.1 0 1.6l.2.9c.1.5.6 1.1 1 1.4l.7.6c.4.3 1 .5 1.5.6l.9.1c1.8.1 4-1.7 4.2-3.5l.1-.9l.1-9.8c1 .5 2.5 1.5 3 2.6c.4.8.1 1.8.8 2.3c.3.2.7.3 1 .2c1.3-.2 1.1-2.1.7-3l-.4-.8l-.7-1c-.9-1.3-2.6-1.9-3.8-3c-.5-.4-.7-1.3-1.3-1.6c-.7-.4-1.8 0-1.8.9" class="wm-shadow"/><path fill="#16206e" d="m9.95 12.3l-.06.06c-.79-.27-1.54-.5-2.39-.41c-2.32.26-3.98 2.34-3.81 4.65c.07.99.52 2.07 1.06 2.9c2.31 3.53 7.87 1.94 7.87-2.3l.01-9.8l.07-.21c.89.59 2.48 1.54 3 2.45c.16.27.1.66.14.96c.06.4.39 1.15.65 1.47c.41.51 1.23.53 1.68.05c.59-.64.27-1.86.05-2.61c-.53-1.77-1.73-3.11-3.2-4.18l-1.48-1.02l-.66-.54l-.43-.47l-.42-.78c-.53-.98-1.99-.39-2.05.58z"/><path fill="#2039b4" d="m9.95 12.3l-.06.06c-1.13-.38-2.2-.6-3.38-.18c-2.51.88-3.59 3.99-2.2 6.25c2.23 3.64 7.91 2.03 7.91-2.23l.01-9.8l.07-.21c1.11.74 2.49 1.51 3.16 2.7c.4.72.23 1.75.67 2.23c.5.53 1.38.43 1.77-.17c.38-.59.13-1.53-.05-2.15c-.72-2.41-2.98-3.36-4.76-4.84c-.25-.21-.5-.44-.68-.72c-.45-.64-.54-1.43-1.61-1.17c-1.09.27-.82 1.71-.82 2.53z"/><path fill="#0a0b26" fill-opacity=".34" d="M11.8 2.3c.1.3.2.6.5.8c-.1-.3-.2-.6-.5-.8m.1 3.5l-.1.2v9.8l-.1.9l-.2.7l-.4.8l-.6.7l-.8.6l-.9.4l-.9.2c-1 .1-1.9-.4-2.7-.7c.5.5 1.2.9 1.9 1l.9.1l.8-.1l.9-.3l.5-.3l.7-.5l.6-.7l.4-.8l.2-.7l.1-.9V9.1c0-1 0-1.9.1-2.9l1.5 1zm5 1.3c.4 1.2 1.9 4.3-.8 3.9c1.1 1.4 2.3-.2 1.9-1.6l-.2-.9c-.2-.5-.5-1-.9-1.4"/><path fill="#fff" fill-opacity=".075" d="M10.2 2.9V12c0 .3-.2.7-.6.6l-1-.4c-.7-.2-1.8-.1-2.4.3l-.8.5l-.6.6c-1.5 1.4-1.1 4.5.7 5.5l.7.4c.4.3 1 .3 1.4.3c2.2.1 4-1.6 4-3.8V6.1c0-.2.1-.3.2-.4c.2-.1.4-.2.6 0L14.3 7l.8.8c.5.4.8 1.1.9 1.7l.1.9c.1.8 1.7.6 1.3-1l-.2-.9l-.4-.8l-.6-.8c-.9-1.3-2.7-1.8-3.8-3l-.5-.6c-.4-.4-.6-1.5-1.4-.9c-.1.1-.3.3-.3.5"/><path fill="#fff" fill-opacity=".075" d="m10.1 12.4l-.2.2l-1.1-.4l-1-.1l-.9.1c-.6.1-1.3.5-1.7 1l-.6.7c-.4.4-.7 1.2-.6 1.7c1.2.6 2.7 1 4 .9l1.1-.1l1-.1l1-.3l.9-.4V9c0-.9-.2-2.2.2-3l.3.1l1.3.9c.8.6 1.6 1.3 2 2.2c.3.6.1 1.3.6 1.9l.1-.1l.4-1l.2-1.1l.1-1l-.1-.3l-.5-.7c-1-1.2-2.5-1.9-3.6-2.8c-.7-.6-.9-1.3-1.3-1.7c-.4-.3-1-.2-1.3.1c-.4.5-.2 2.1-.2 2.8z"/><path fill="#fff" fill-opacity=".075" d="M10.6 2.4c-.7.6-.4 1.7-.4 2.6v4.8c0 .8-.1 1.7 0 2.5c.7-.3 1.4-.7 1.8-1.3c.1-1.6-.1-3.3.1-4.9l.1-.1h.2l1 .7h.1c-.1-1.3-.7-2.9-1.9-3.7l-.7-.5zM6.3 12.5l.7.2l1 .1l1-.1l.6-.2c-1-.5-2.3-.5-3.3 0"/><path fill="#fff" fill-opacity=".42" d="m9.95 12.3l-.06.06c-.92-.31-1.8-.56-2.8-.35c-2.99.64-4.2 3.79-2.78 6.4c-.23-.94-.54-1.67-.37-2.71c.34-2.16 2.38-3.74 4.56-3.56c.56.05 1.07.24 1.59.42l.06-.06l.03-7.4c0-.85-.3-2.46.74-2.81c.25-.08.55-.06.78-.08c-.67-.31-1.48-.13-1.69.67L9.98 4.1zm5.64-3.31c.05.25.14.54.19.81c.06.41.06.75.23 1.12l.04-.12l-.09-.9c-.03-.32-.21-.63-.37-.91"/><path fill="#9cc2ff" fill-opacity=".75" d="m12.1 5.99l-.07.21V16c0 2.02-1.47 3.76-3.42 4.19c-.5.1-1 .08-1.51.05c-.03.03-.05.05-.08.07c.42.06.82.12 1.25.09c2.17-.14 3.89-2.05 3.89-4.2V6.4l.07-.29zm5.7 2.89c-.03 1.4.44 2.18-1.28 2.44c.35.1.66.13.98-.06c.83-.5.46-1.64.3-2.38"/><path fill="#fff" fill-opacity=".16" d="M10.3 3.1v9.3c0 .2-.3.3-.4.3l-.6-.2c-.6-.2-1.3-.3-2-.2c-2.3.4-3.9 2.9-3.1 5.1h.1c.1-1.6 1.2-3.4 2.9-3.7l.8-.1c.8-.2 1.9.5 2.3.4c.2 0 .3-.3.3-.5V4.4c0-.7.7-.8 1.3-.6c.4.5.6 1.1 1.1 1.5c1.1 1 2.5 1.6 3.4 2.6l.8.9l.2-.2c-.5-1.7-2.1-2.7-3.5-3.7L12.7 4l-.6-.6c-.4-.4-.5-1.5-1.4-.9c-.2.1-.4.4-.4.6" class="wm-shine"/><path fill="#fff" fill-opacity=".92" d="M10.4 3.12v9.08c-.01.24-.14.57-.42.61c-.32.04-.7-.24-1-.32c-.55-.15-1.13-.17-1.7-.08c-2.72.44-4.1 3.78-2.46 5.99c-.01-.03.04-.07.03-.1c-.14-.45-.36-.82-.42-1.3c-.22-1.78.8-3.41 2.43-4.09c.83-.35 1.8-.33 2.64-.05c.22.07.46.25.7.25c.32 0 .49-.33.5-.61V3.37c0-.5.57-.61.92-.67c-.09-.07-.14-.16-.26-.2c-.43-.16-.96.14-.96.62" class="wm-shine"/></g>`;
</script>.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%230a0b26%22%20fill-opacity%3D%22.2%22%20d%3D%22m10.6%204.5l-.1%209.2c-.3-.1-.7-.3-1.1-.3l-.9-.1l-.9.2c-1.2.1-2.6%201.3-3%202.5l-.2.9c-.2.5-.2%201.1%200%201.6l.2.9c.1.5.6%201.1%201%201.4l.7.6c.4.3%201%20.5%201.5.6l.9.1c1.8.1%204-1.7%204.2-3.5l.1-.9l.1-9.8c1%20.5%202.5%201.5%203%202.6c.4.8.1%201.8.8%202.3c.3.2.7.3%201%20.2c1.3-.2%201.1-2.1.7-3l-.4-.8l-.7-1c-.9-1.3-2.6-1.9-3.8-3c-.5-.4-.7-1.3-1.3-1.6c-.7-.4-1.8%200-1.8.9%22%20class%3D%22wm-shadow%22%2F%3E%3Cpath%20fill%3D%22%2316206e%22%20d%3D%22m9.95%2012.3l-.06.06c-.79-.27-1.54-.5-2.39-.41c-2.32.26-3.98%202.34-3.81%204.65c.07.99.52%202.07%201.06%202.9c2.31%203.53%207.87%201.94%207.87-2.3l.01-9.8l.07-.21c.89.59%202.48%201.54%203%202.45c.16.27.1.66.14.96c.06.4.39%201.15.65%201.47c.41.51%201.23.53%201.68.05c.59-.64.27-1.86.05-2.61c-.53-1.77-1.73-3.11-3.2-4.18l-1.48-1.02l-.66-.54l-.43-.47l-.42-.78c-.53-.98-1.99-.39-2.05.58z%22%2F%3E%3Cpath%20fill%3D%22%232039b4%22%20d%3D%22m9.95%2012.3l-.06.06c-1.13-.38-2.2-.6-3.38-.18c-2.51.88-3.59%203.99-2.2%206.25c2.23%203.64%207.91%202.03%207.91-2.23l.01-9.8l.07-.21c1.11.74%202.49%201.51%203.16%202.7c.4.72.23%201.75.67%202.23c.5.53%201.38.43%201.77-.17c.38-.59.13-1.53-.05-2.15c-.72-2.41-2.98-3.36-4.76-4.84c-.25-.21-.5-.44-.68-.72c-.45-.64-.54-1.43-1.61-1.17c-1.09.27-.82%201.71-.82%202.53z%22%2F%3E%3Cpath%20fill%3D%22%230a0b26%22%20fill-opacity%3D%22.34%22%20d%3D%22M11.8%202.3c.1.3.2.6.5.8c-.1-.3-.2-.6-.5-.8m.1%203.5l-.1.2v9.8l-.1.9l-.2.7l-.4.8l-.6.7l-.8.6l-.9.4l-.9.2c-1%20.1-1.9-.4-2.7-.7c.5.5%201.2.9%201.9%201l.9.1l.8-.1l.9-.3l.5-.3l.7-.5l.6-.7l.4-.8l.2-.7l.1-.9V9.1c0-1%200-1.9.1-2.9l1.5%201zm5%201.3c.4%201.2%201.9%204.3-.8%203.9c1.1%201.4%202.3-.2%201.9-1.6l-.2-.9c-.2-.5-.5-1-.9-1.4%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20fill-opacity%3D%22.075%22%20d%3D%22M10.2%202.9V12c0%20.3-.2.7-.6.6l-1-.4c-.7-.2-1.8-.1-2.4.3l-.8.5l-.6.6c-1.5%201.4-1.1%204.5.7%205.5l.7.4c.4.3%201%20.3%201.4.3c2.2.1%204-1.6%204-3.8V6.1c0-.2.1-.3.2-.4c.2-.1.4-.2.6%200L14.3%207l.8.8c.5.4.8%201.1.9%201.7l.1.9c.1.8%201.7.6%201.3-1l-.2-.9l-.4-.8l-.6-.8c-.9-1.3-2.7-1.8-3.8-3l-.5-.6c-.4-.4-.6-1.5-1.4-.9c-.1.1-.3.3-.3.5%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20fill-opacity%3D%22.075%22%20d%3D%22m10.1%2012.4l-.2.2l-1.1-.4l-1-.1l-.9.1c-.6.1-1.3.5-1.7%201l-.6.7c-.4.4-.7%201.2-.6%201.7c1.2.6%202.7%201%204%20.9l1.1-.1l1-.1l1-.3l.9-.4V9c0-.9-.2-2.2.2-3l.3.1l1.3.9c.8.6%201.6%201.3%202%202.2c.3.6.1%201.3.6%201.9l.1-.1l.4-1l.2-1.1l.1-1l-.1-.3l-.5-.7c-1-1.2-2.5-1.9-3.6-2.8c-.7-.6-.9-1.3-1.3-1.7c-.4-.3-1-.2-1.3.1c-.4.5-.2%202.1-.2%202.8z%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20fill-opacity%3D%22.075%22%20d%3D%22M10.6%202.4c-.7.6-.4%201.7-.4%202.6v4.8c0%20.8-.1%201.7%200%202.5c.7-.3%201.4-.7%201.8-1.3c.1-1.6-.1-3.3.1-4.9l.1-.1h.2l1%20.7h.1c-.1-1.3-.7-2.9-1.9-3.7l-.7-.5zM6.3%2012.5l.7.2l1%20.1l1-.1l.6-.2c-1-.5-2.3-.5-3.3%200%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20fill-opacity%3D%22.42%22%20d%3D%22m9.95%2012.3l-.06.06c-.92-.31-1.8-.56-2.8-.35c-2.99.64-4.2%203.79-2.78%206.4c-.23-.94-.54-1.67-.37-2.71c.34-2.16%202.38-3.74%204.56-3.56c.56.05%201.07.24%201.59.42l.06-.06l.03-7.4c0-.85-.3-2.46.74-2.81c.25-.08.55-.06.78-.08c-.67-.31-1.48-.13-1.69.67L9.98%204.1zm5.64-3.31c.05.25.14.54.19.81c.06.41.06.75.23%201.12l.04-.12l-.09-.9c-.03-.32-.21-.63-.37-.91%22%2F%3E%3Cpath%20fill%3D%22%239cc2ff%22%20fill-opacity%3D%22.75%22%20d%3D%22m12.1%205.99l-.07.21V16c0%202.02-1.47%203.76-3.42%204.19c-.5.1-1%20.08-1.51.05c-.03.03-.05.05-.08.07c.42.06.82.12%201.25.09c2.17-.14%203.89-2.05%203.89-4.2V6.4l.07-.29zm5.7%202.89c-.03%201.4.44%202.18-1.28%202.44c.35.1.66.13.98-.06c.83-.5.46-1.64.3-2.38%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20fill-opacity%3D%22.16%22%20d%3D%22M10.3%203.1v9.3c0%20.2-.3.3-.4.3l-.6-.2c-.6-.2-1.3-.3-2-.2c-2.3.4-3.9%202.9-3.1%205.1h.1c.1-1.6%201.2-3.4%202.9-3.7l.8-.1c.8-.2%201.9.5%202.3.4c.2%200%20.3-.3.3-.5V4.4c0-.7.7-.8%201.3-.6c.4.5.6%201.1%201.1%201.5c1.1%201%202.5%201.6%203.4%202.6l.8.9l.2-.2c-.5-1.7-2.1-2.7-3.5-3.7L12.7%204l-.6-.6c-.4-.4-.5-1.5-1.4-.9c-.2.1-.4.4-.4.6%22%20class%3D%22wm-shine%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20fill-opacity%3D%22.92%22%20d%3D%22M10.4%203.12v9.08c-.01.24-.14.57-.42.61c-.32.04-.7-.24-1-.32c-.55-.15-1.13-.17-1.7-.08c-2.72.44-4.1%203.78-2.46%205.99c-.01-.03.04-.07.03-.1c-.14-.45-.36-.82-.42-1.3c-.22-1.78.8-3.41%202.43-4.09c.83-.35%201.8-.33%202.64-.05c.22.07.46.25.7.25c.32%200%20.49-.33.5-.61V3.37c0-.5.57-.61.92-.67c-.09-.07-.14-.16-.26-.2c-.43-.16-.96.14-.96.62%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%230a0b26%22%20fill-opacity%3D%22.2%22%20d%3D%22m10.6%204.5l-.1%209.2c-.3-.1-.7-.3-1.1-.3l-.9-.1l-.9.2c-1.2.1-2.6%201.3-3%202.5l-.2.9c-.2.5-.2%201.1%200%201.6l.2.9c.1.5.6%201.1%201%201.4l.7.6c.4.3%201%20.5%201.5.6l.9.1c1.8.1%204-1.7%204.2-3.5l.1-.9l.1-9.8c1%20.5%202.5%201.5%203%202.6c.4.8.1%201.8.8%202.3c.3.2.7.3%201%20.2c1.3-.2%201.1-2.1.7-3l-.4-.8l-.7-1c-.9-1.3-2.6-1.9-3.8-3c-.5-.4-.7-1.3-1.3-1.6c-.7-.4-1.8%200-1.8.9%22%20class%3D%22wm-shadow%22%2F%3E%3Cpath%20fill%3D%22%2316206e%22%20d%3D%22m9.95%2012.3l-.06.06c-.79-.27-1.54-.5-2.39-.41c-2.32.26-3.98%202.34-3.81%204.65c.07.99.52%202.07%201.06%202.9c2.31%203.53%207.87%201.94%207.87-2.3l.01-9.8l.07-.21c.89.59%202.48%201.54%203%202.45c.16.27.1.66.14.96c.06.4.39%201.15.65%201.47c.41.51%201.23.53%201.68.05c.59-.64.27-1.86.05-2.61c-.53-1.77-1.73-3.11-3.2-4.18l-1.48-1.02l-.66-.54l-.43-.47l-.42-.78c-.53-.98-1.99-.39-2.05.58z%22%2F%3E%3Cpath%20fill%3D%22%232039b4%22%20d%3D%22m9.95%2012.3l-.06.06c-1.13-.38-2.2-.6-3.38-.18c-2.51.88-3.59%203.99-2.2%206.25c2.23%203.64%207.91%202.03%207.91-2.23l.01-9.8l.07-.21c1.11.74%202.49%201.51%203.16%202.7c.4.72.23%201.75.67%202.23c.5.53%201.38.43%201.77-.17c.38-.59.13-1.53-.05-2.15c-.72-2.41-2.98-3.36-4.76-4.84c-.25-.21-.5-.44-.68-.72c-.45-.64-.54-1.43-1.61-1.17c-1.09.27-.82%201.71-.82%202.53z%22%2F%3E%3Cpath%20fill%3D%22%230a0b26%22%20fill-opacity%3D%22.34%22%20d%3D%22M11.8%202.3c.1.3.2.6.5.8c-.1-.3-.2-.6-.5-.8m.1%203.5l-.1.2v9.8l-.1.9l-.2.7l-.4.8l-.6.7l-.8.6l-.9.4l-.9.2c-1%20.1-1.9-.4-2.7-.7c.5.5%201.2.9%201.9%201l.9.1l.8-.1l.9-.3l.5-.3l.7-.5l.6-.7l.4-.8l.2-.7l.1-.9V9.1c0-1%200-1.9.1-2.9l1.5%201zm5%201.3c.4%201.2%201.9%204.3-.8%203.9c1.1%201.4%202.3-.2%201.9-1.6l-.2-.9c-.2-.5-.5-1-.9-1.4%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20fill-opacity%3D%22.075%22%20d%3D%22M10.2%202.9V12c0%20.3-.2.7-.6.6l-1-.4c-.7-.2-1.8-.1-2.4.3l-.8.5l-.6.6c-1.5%201.4-1.1%204.5.7%205.5l.7.4c.4.3%201%20.3%201.4.3c2.2.1%204-1.6%204-3.8V6.1c0-.2.1-.3.2-.4c.2-.1.4-.2.6%200L14.3%207l.8.8c.5.4.8%201.1.9%201.7l.1.9c.1.8%201.7.6%201.3-1l-.2-.9l-.4-.8l-.6-.8c-.9-1.3-2.7-1.8-3.8-3l-.5-.6c-.4-.4-.6-1.5-1.4-.9c-.1.1-.3.3-.3.5%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20fill-opacity%3D%22.075%22%20d%3D%22m10.1%2012.4l-.2.2l-1.1-.4l-1-.1l-.9.1c-.6.1-1.3.5-1.7%201l-.6.7c-.4.4-.7%201.2-.6%201.7c1.2.6%202.7%201%204%20.9l1.1-.1l1-.1l1-.3l.9-.4V9c0-.9-.2-2.2.2-3l.3.1l1.3.9c.8.6%201.6%201.3%202%202.2c.3.6.1%201.3.6%201.9l.1-.1l.4-1l.2-1.1l.1-1l-.1-.3l-.5-.7c-1-1.2-2.5-1.9-3.6-2.8c-.7-.6-.9-1.3-1.3-1.7c-.4-.3-1-.2-1.3.1c-.4.5-.2%202.1-.2%202.8z%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20fill-opacity%3D%22.075%22%20d%3D%22M10.6%202.4c-.7.6-.4%201.7-.4%202.6v4.8c0%20.8-.1%201.7%200%202.5c.7-.3%201.4-.7%201.8-1.3c.1-1.6-.1-3.3.1-4.9l.1-.1h.2l1%20.7h.1c-.1-1.3-.7-2.9-1.9-3.7l-.7-.5zM6.3%2012.5l.7.2l1%20.1l1-.1l.6-.2c-1-.5-2.3-.5-3.3%200%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20fill-opacity%3D%22.42%22%20d%3D%22m9.95%2012.3l-.06.06c-.92-.31-1.8-.56-2.8-.35c-2.99.64-4.2%203.79-2.78%206.4c-.23-.94-.54-1.67-.37-2.71c.34-2.16%202.38-3.74%204.56-3.56c.56.05%201.07.24%201.59.42l.06-.06l.03-7.4c0-.85-.3-2.46.74-2.81c.25-.08.55-.06.78-.08c-.67-.31-1.48-.13-1.69.67L9.98%204.1zm5.64-3.31c.05.25.14.54.19.81c.06.41.06.75.23%201.12l.04-.12l-.09-.9c-.03-.32-.21-.63-.37-.91%22%2F%3E%3Cpath%20fill%3D%22%239cc2ff%22%20fill-opacity%3D%22.75%22%20d%3D%22m12.1%205.99l-.07.21V16c0%202.02-1.47%203.76-3.42%204.19c-.5.1-1%20.08-1.51.05c-.03.03-.05.05-.08.07c.42.06.82.12%201.25.09c2.17-.14%203.89-2.05%203.89-4.2V6.4l.07-.29zm5.7%202.89c-.03%201.4.44%202.18-1.28%202.44c.35.1.66.13.98-.06c.83-.5.46-1.64.3-2.38%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20fill-opacity%3D%22.16%22%20d%3D%22M10.3%203.1v9.3c0%20.2-.3.3-.4.3l-.6-.2c-.6-.2-1.3-.3-2-.2c-2.3.4-3.9%202.9-3.1%205.1h.1c.1-1.6%201.2-3.4%202.9-3.7l.8-.1c.8-.2%201.9.5%202.3.4c.2%200%20.3-.3.3-.5V4.4c0-.7.7-.8%201.3-.6c.4.5.6%201.1%201.1%201.5c1.1%201%202.5%201.6%203.4%202.6l.8.9l.2-.2c-.5-1.7-2.1-2.7-3.5-3.7L12.7%204l-.6-.6c-.4-.4-.5-1.5-1.4-.9c-.2.1-.4.4-.4.6%22%20class%3D%22wm-shine%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20fill-opacity%3D%22.92%22%20d%3D%22M10.4%203.12v9.08c-.01.24-.14.57-.42.61c-.32.04-.7-.24-1-.32c-.55-.15-1.13-.17-1.7-.08c-2.72.44-4.1%203.78-2.46%205.99c-.01-.03.04-.07.03-.1c-.14-.45-.36-.82-.42-1.3c-.22-1.78.8-3.41%202.43-4.09c.83-.35%201.8-.33%202.64-.05c.22.07.46.25.7.25c.32%200%20.49-.33.5-.61V3.37c0-.5.57-.61.92-.67c-.09-.07-.14-.16-.26-.2c-.43-.16-.96.14-.96.62%22%20class%3D%22wm-shine%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}单文件 CSS 即可播放,无需任何依赖;描画动效仅对描边类图标生效。
透明度往复渐变,适合状态提示与在线指示。
.icon-music-note {
animation: icon-breathe 1.8s ease-in-out infinite;
}
@keyframes icon-breathe {
0%, 100% { opacity: 1; }
50% { opacity: 0.35; }
}匀速循环旋转,适合加载中场景。
.icon-music-note {
animation: icon-spin 1.6s linear infinite;
}
@keyframes icon-spin {
to { transform: rotate(360deg); }
}对源文件的客观技术指标,供工程侧评估引用方式。
文件体积
3.78 KB
3,872 字节
viewBox
0 0 24 24
矢量坐标系
图元总数
11
<path> ×11
风格
多色填充
填充跟随容器颜色
同时含 width/height 与 viewBox:可以只保留 viewBox,让图标跟随容器自适应缩放。 文件体积 3.78 KB(3,872 字节),图元 11 个,风格为多色填充。
关于 音乐 · 便签 图标的下载、商用与改色。
它是 with icons Luxe(withicons-luxe)开源图标集中的 music-note 图标,多色填充,viewBox 为 0 0 24 24,文件仅 3.78 KB,矢量格式可无损缩放到任意尺寸。
点击「下载与导出」中的 SVG 源文件按钮保存矢量文件;也可以按 512 / 256 / 128 / 64 / 32 / 16px 预设导出 PNG,或在输入框填 16~1024 之间的任意尺寸。需要 iOS、Android 全套尺寸时,用素材包生成器一键打包。
该图标采用 MIT(MIT) 开源协议,通常允许在遵守协议的前提下免费使用,常见要求是保留作者版权声明。商用前建议阅读协议原文确认。
在「预览与场景」的色板中切换颜色,三底色与全部场景会实时跟随;点击任一相近图标可打开预览弹层,复制对应颜色的 SVG 源码或 PNG。也可以复制 SVG 源码后自行修改 fill 值。