找找图标
violin 图标

violin SVG 图标

emojioneviolin

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

图标 ID
emojione:violin
中文名
—
所属集合
Emoji One (Colored)
集合规模
1,834 枚
基础网格
32px
色彩
多色
开源协议
CC-BY-4.0
作者
Emoji One

下载 violin 图标

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

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

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

violin 的预览与使用场景

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

预览颜色
violin 图标 浅色背景预览浅色背景
violin 图标 深色背景预览深色背景
violin 图标 灰底融入预览灰底融入

在真实界面里长这样

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

各尺寸下的可读性

violin 图标 24px 渲染24pxviolin 图标 32px 渲染32pxviolin 图标 48px 渲染48pxviolin 图标 64px 渲染64pxviolin 图标 96px 渲染96pxviolin 图标 128px 渲染128px

复制 violin 图标代码

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

svgSVG 源码（内联 HTML）
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 64 64"><path fill="#DE7F11" d="M26.722 56.354c.273-2.827 1.65-3.646 2.561-3.776c3.279-.469 2.59-1.554 1.895-1.895c-3.807-1.863-.76-5.874-.105-6.754c2.357-3.155 6.336-.99 6.336-.99c-.33-4.641 3.531-4.401 5.48-5.484c8.875-4.924 1.291-12.271-1.357-14.919c-2.646-2.648-9.994-10.233-14.918-1.357c-1.082 1.947-.846 5.813-5.482 5.482c0 0 2.166 3.978-.99 6.334c-.879.658-4.889 3.702-6.752-.104c-.341-.695-1.423-1.385-1.895 1.895c-.132.911-.928 2.367-3.774 2.56c-6.823.459-8.502 9.864.319 18.688c8.924 8.925 18.055 6.828 18.682.32"/><path fill="#333" d="m30.546 37.365l-3.904-3.905L54.028 8.023l1.95 1.953zM58.35 6.982l3.272 3.273l-.827.827l-3.272-3.273z"/><g fill="#333"><path d="m53.86 3.927l2.753 2.754l-.827.827l-2.754-2.754z"/><path d="m53.353 6.218l-.852-1.858l.963-.964l1.857.854z"/></g><g fill="#333"><path d="m56.187 8.524l3.273 3.274l-.828.828l-3.274-3.274z"/><path d="m58.983 10.184l.854 1.857l-.963.964l-1.857-.853z"/></g><path fill="#333" d="m51.008 5.851l3.274 3.275l-.828.827l-3.273-3.274z"/><path fill="#B3660D" d="m60.646 6.927l-3.575-3.574L59.03 2l2.971 2.972z"/><path fill="#DE7F11" d="m55.46 11.436l2.719-4.092l1.285-.227l2.535-3.824l-1.291-1.29l-3.824 2.531l-.227 1.288l-4.092 2.717z"/><path fill="#333" d="M24.202 35.264c.113-.329.195-.823-.16-1.179c-2.672-2.672-7.045 6.266-8.813 4.498c-.389-.39-.289-.732-.181-.92a.72.72 0 0 0 .615-.197a.733.733 0 0 0 0-1.04a.734.734 0 0 0-1.039 0a.72.72 0 0 0-.094.898c-.213.311-.624 1.106.114 1.844c2.523 2.525 7.241-6.143 8.848-4.535c.104.104.113.258.098.392a.73.73 0 0 0-.455.203a.735.735 0 1 0 1.041 1.039a.73.73 0 0 0 .026-1.003m4.539 4.542c.33-.115.824-.196 1.18.159c2.672 2.673-6.264 7.048-4.496 8.815c.389.391.73.289.918.18a.73.73 0 0 1 .197-.615a.734.734 0 0 1 1.039 0a.73.73 0 0 1 0 1.04a.72.72 0 0 1-.896.095c-.311.213-1.107.623-1.844-.113c-2.523-2.525 6.143-7.245 4.533-8.854c-.104-.102-.258-.112-.391-.096a.72.72 0 0 1-.201.454a.735.735 0 1 1-1.041-1.04a.73.73 0 0 1 1.002-.025m-12.707 3.082s-1.257 2.101-1.543 2.861c-.257.683-.298 2.205-.649 2.843c-1.134 2.049-6.621 6.623-6.621 6.623l1.575 1.576s4.572-5.488 6.62-6.621c.639-.354 2.161-.395 2.843-.652c.762-.285 2.861-1.543 2.861-1.543z"/><path fill="#333" d="m27.064 33.165l.379.378l-11.056 11.084l-.379-.378zm3.385 3.386l.378.378l-11.055 11.083l-.378-.378zm-1.121-1.123l.379.38l-11.07 11.07l-.379-.38zM28.2 34.3l.38.378l-11.07 11.07l-.38-.379z"/><path fill="#B3660D" d="m6.978 10.521l46.5 46.5l-1.052 1.05L5.928 11.572z"/><path fill="#E2D8C7" d="m4.512 12.988l46.5 46.5l-1.051 1.05l-46.5-46.5z"/><path fill="#333" d="M5.517 16.094L2 12.576l4.979-2.055l2.055 2.055zm42.388 42.388L51.423 62l2.056-4.979l-2.056-2.055z"/><path fill="#333" d="m46.673 55.148l4.34 4.34l-1.051 1.05l-4.34-4.34z"/></svg>
reactReact 组件（TSX）
export function ViolinIcon(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="1em"
      height="1em"
      viewBox="0 0 64 64"
      fill="currentColor"
      {...props}
      dangerouslySetInnerHTML={{ __html: `<path fill="#DE7F11" d="M26.722 56.354c.273-2.827 1.65-3.646 2.561-3.776c3.279-.469 2.59-1.554 1.895-1.895c-3.807-1.863-.76-5.874-.105-6.754c2.357-3.155 6.336-.99 6.336-.99c-.33-4.641 3.531-4.401 5.48-5.484c8.875-4.924 1.291-12.271-1.357-14.919c-2.646-2.648-9.994-10.233-14.918-1.357c-1.082 1.947-.846 5.813-5.482 5.482c0 0 2.166 3.978-.99 6.334c-.879.658-4.889 3.702-6.752-.104c-.341-.695-1.423-1.385-1.895 1.895c-.132.911-.928 2.367-3.774 2.56c-6.823.459-8.502 9.864.319 18.688c8.924 8.925 18.055 6.828 18.682.32"/><path fill="#333" d="m30.546 37.365l-3.904-3.905L54.028 8.023l1.95 1.953zM58.35 6.982l3.272 3.273l-.827.827l-3.272-3.273z"/><g fill="#333"><path d="m53.86 3.927l2.753 2.754l-.827.827l-2.754-2.754z"/><path d="m53.353 6.218l-.852-1.858l.963-.964l1.857.854z"/></g><g fill="#333"><path d="m56.187 8.524l3.273 3.274l-.828.828l-3.274-3.274z"/><path d="m58.983 10.184l.854 1.857l-.963.964l-1.857-.853z"/></g><path fill="#333" d="m51.008 5.851l3.274 3.275l-.828.827l-3.273-3.274z"/><path fill="#B3660D" d="m60.646 6.927l-3.575-3.574L59.03 2l2.971 2.972z"/><path fill="#DE7F11" d="m55.46 11.436l2.719-4.092l1.285-.227l2.535-3.824l-1.291-1.29l-3.824 2.531l-.227 1.288l-4.092 2.717z"/><path fill="#333" d="M24.202 35.264c.113-.329.195-.823-.16-1.179c-2.672-2.672-7.045 6.266-8.813 4.498c-.389-.39-.289-.732-.181-.92a.72.72 0 0 0 .615-.197a.733.733 0 0 0 0-1.04a.734.734 0 0 0-1.039 0a.72.72 0 0 0-.094.898c-.213.311-.624 1.106.114 1.844c2.523 2.525 7.241-6.143 8.848-4.535c.104.104.113.258.098.392a.73.73 0 0 0-.455.203a.735.735 0 1 0 1.041 1.039a.73.73 0 0 0 .026-1.003m4.539 4.542c.33-.115.824-.196 1.18.159c2.672 2.673-6.264 7.048-4.496 8.815c.389.391.73.289.918.18a.73.73 0 0 1 .197-.615a.734.734 0 0 1 1.039 0a.73.73 0 0 1 0 1.04a.72.72 0 0 1-.896.095c-.311.213-1.107.623-1.844-.113c-2.523-2.525 6.143-7.245 4.533-8.854c-.104-.102-.258-.112-.391-.096a.72.72 0 0 1-.201.454a.735.735 0 1 1-1.041-1.04a.73.73 0 0 1 1.002-.025m-12.707 3.082s-1.257 2.101-1.543 2.861c-.257.683-.298 2.205-.649 2.843c-1.134 2.049-6.621 6.623-6.621 6.623l1.575 1.576s4.572-5.488 6.62-6.621c.639-.354 2.161-.395 2.843-.652c.762-.285 2.861-1.543 2.861-1.543z"/><path fill="#333" d="m27.064 33.165l.379.378l-11.056 11.084l-.379-.378zm3.385 3.386l.378.378l-11.055 11.083l-.378-.378zm-1.121-1.123l.379.38l-11.07 11.07l-.379-.38zM28.2 34.3l.38.378l-11.07 11.07l-.38-.379z"/><path fill="#B3660D" d="m6.978 10.521l46.5 46.5l-1.052 1.05L5.928 11.572z"/><path fill="#E2D8C7" d="m4.512 12.988l46.5 46.5l-1.051 1.05l-46.5-46.5z"/><path fill="#333" d="M5.517 16.094L2 12.576l4.979-2.055l2.055 2.055zm42.388 42.388L51.423 62l2.056-4.979l-2.056-2.055z"/><path fill="#333" d="m46.673 55.148l4.34 4.34l-1.051 1.05l-4.34-4.34z"/>` }}
    />
  );
}
vueVue 3 组件
<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 64 64" fill="currentColor" v-html="body"></svg>
</template>

<script setup>
const body = `<path fill="#DE7F11" d="M26.722 56.354c.273-2.827 1.65-3.646 2.561-3.776c3.279-.469 2.59-1.554 1.895-1.895c-3.807-1.863-.76-5.874-.105-6.754c2.357-3.155 6.336-.99 6.336-.99c-.33-4.641 3.531-4.401 5.48-5.484c8.875-4.924 1.291-12.271-1.357-14.919c-2.646-2.648-9.994-10.233-14.918-1.357c-1.082 1.947-.846 5.813-5.482 5.482c0 0 2.166 3.978-.99 6.334c-.879.658-4.889 3.702-6.752-.104c-.341-.695-1.423-1.385-1.895 1.895c-.132.911-.928 2.367-3.774 2.56c-6.823.459-8.502 9.864.319 18.688c8.924 8.925 18.055 6.828 18.682.32"/><path fill="#333" d="m30.546 37.365l-3.904-3.905L54.028 8.023l1.95 1.953zM58.35 6.982l3.272 3.273l-.827.827l-3.272-3.273z"/><g fill="#333"><path d="m53.86 3.927l2.753 2.754l-.827.827l-2.754-2.754z"/><path d="m53.353 6.218l-.852-1.858l.963-.964l1.857.854z"/></g><g fill="#333"><path d="m56.187 8.524l3.273 3.274l-.828.828l-3.274-3.274z"/><path d="m58.983 10.184l.854 1.857l-.963.964l-1.857-.853z"/></g><path fill="#333" d="m51.008 5.851l3.274 3.275l-.828.827l-3.273-3.274z"/><path fill="#B3660D" d="m60.646 6.927l-3.575-3.574L59.03 2l2.971 2.972z"/><path fill="#DE7F11" d="m55.46 11.436l2.719-4.092l1.285-.227l2.535-3.824l-1.291-1.29l-3.824 2.531l-.227 1.288l-4.092 2.717z"/><path fill="#333" d="M24.202 35.264c.113-.329.195-.823-.16-1.179c-2.672-2.672-7.045 6.266-8.813 4.498c-.389-.39-.289-.732-.181-.92a.72.72 0 0 0 .615-.197a.733.733 0 0 0 0-1.04a.734.734 0 0 0-1.039 0a.72.72 0 0 0-.094.898c-.213.311-.624 1.106.114 1.844c2.523 2.525 7.241-6.143 8.848-4.535c.104.104.113.258.098.392a.73.73 0 0 0-.455.203a.735.735 0 1 0 1.041 1.039a.73.73 0 0 0 .026-1.003m4.539 4.542c.33-.115.824-.196 1.18.159c2.672 2.673-6.264 7.048-4.496 8.815c.389.391.73.289.918.18a.73.73 0 0 1 .197-.615a.734.734 0 0 1 1.039 0a.73.73 0 0 1 0 1.04a.72.72 0 0 1-.896.095c-.311.213-1.107.623-1.844-.113c-2.523-2.525 6.143-7.245 4.533-8.854c-.104-.102-.258-.112-.391-.096a.72.72 0 0 1-.201.454a.735.735 0 1 1-1.041-1.04a.73.73 0 0 1 1.002-.025m-12.707 3.082s-1.257 2.101-1.543 2.861c-.257.683-.298 2.205-.649 2.843c-1.134 2.049-6.621 6.623-6.621 6.623l1.575 1.576s4.572-5.488 6.62-6.621c.639-.354 2.161-.395 2.843-.652c.762-.285 2.861-1.543 2.861-1.543z"/><path fill="#333" d="m27.064 33.165l.379.378l-11.056 11.084l-.379-.378zm3.385 3.386l.378.378l-11.055 11.083l-.378-.378zm-1.121-1.123l.379.38l-11.07 11.07l-.379-.38zM28.2 34.3l.38.378l-11.07 11.07l-.38-.379z"/><path fill="#B3660D" d="m6.978 10.521l46.5 46.5l-1.052 1.05L5.928 11.572z"/><path fill="#E2D8C7" d="m4.512 12.988l46.5 46.5l-1.051 1.05l-46.5-46.5z"/><path fill="#333" d="M5.517 16.094L2 12.576l4.979-2.055l2.055 2.055zm42.388 42.388L51.423 62l2.056-4.979l-2.056-2.055z"/><path fill="#333" d="m46.673 55.148l4.34 4.34l-1.051 1.05l-4.34-4.34z"/>`;
</script>
cssCSS mask（随 currentColor 改色）
.violin {
  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%2064%2064%22%3E%3Cpath%20fill%3D%22%23DE7F11%22%20d%3D%22M26.722%2056.354c.273-2.827%201.65-3.646%202.561-3.776c3.279-.469%202.59-1.554%201.895-1.895c-3.807-1.863-.76-5.874-.105-6.754c2.357-3.155%206.336-.99%206.336-.99c-.33-4.641%203.531-4.401%205.48-5.484c8.875-4.924%201.291-12.271-1.357-14.919c-2.646-2.648-9.994-10.233-14.918-1.357c-1.082%201.947-.846%205.813-5.482%205.482c0%200%202.166%203.978-.99%206.334c-.879.658-4.889%203.702-6.752-.104c-.341-.695-1.423-1.385-1.895%201.895c-.132.911-.928%202.367-3.774%202.56c-6.823.459-8.502%209.864.319%2018.688c8.924%208.925%2018.055%206.828%2018.682.32%22%2F%3E%3Cpath%20fill%3D%22%23333%22%20d%3D%22m30.546%2037.365l-3.904-3.905L54.028%208.023l1.95%201.953zM58.35%206.982l3.272%203.273l-.827.827l-3.272-3.273z%22%2F%3E%3Cg%20fill%3D%22%23333%22%3E%3Cpath%20d%3D%22m53.86%203.927l2.753%202.754l-.827.827l-2.754-2.754z%22%2F%3E%3Cpath%20d%3D%22m53.353%206.218l-.852-1.858l.963-.964l1.857.854z%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%23333%22%3E%3Cpath%20d%3D%22m56.187%208.524l3.273%203.274l-.828.828l-3.274-3.274z%22%2F%3E%3Cpath%20d%3D%22m58.983%2010.184l.854%201.857l-.963.964l-1.857-.853z%22%2F%3E%3C%2Fg%3E%3Cpath%20fill%3D%22%23333%22%20d%3D%22m51.008%205.851l3.274%203.275l-.828.827l-3.273-3.274z%22%2F%3E%3Cpath%20fill%3D%22%23B3660D%22%20d%3D%22m60.646%206.927l-3.575-3.574L59.03%202l2.971%202.972z%22%2F%3E%3Cpath%20fill%3D%22%23DE7F11%22%20d%3D%22m55.46%2011.436l2.719-4.092l1.285-.227l2.535-3.824l-1.291-1.29l-3.824%202.531l-.227%201.288l-4.092%202.717z%22%2F%3E%3Cpath%20fill%3D%22%23333%22%20d%3D%22M24.202%2035.264c.113-.329.195-.823-.16-1.179c-2.672-2.672-7.045%206.266-8.813%204.498c-.389-.39-.289-.732-.181-.92a.72.72%200%200%200%20.615-.197a.733.733%200%200%200%200-1.04a.734.734%200%200%200-1.039%200a.72.72%200%200%200-.094.898c-.213.311-.624%201.106.114%201.844c2.523%202.525%207.241-6.143%208.848-4.535c.104.104.113.258.098.392a.73.73%200%200%200-.455.203a.735.735%200%201%200%201.041%201.039a.73.73%200%200%200%20.026-1.003m4.539%204.542c.33-.115.824-.196%201.18.159c2.672%202.673-6.264%207.048-4.496%208.815c.389.391.73.289.918.18a.73.73%200%200%201%20.197-.615a.734.734%200%200%201%201.039%200a.73.73%200%200%201%200%201.04a.72.72%200%200%201-.896.095c-.311.213-1.107.623-1.844-.113c-2.523-2.525%206.143-7.245%204.533-8.854c-.104-.102-.258-.112-.391-.096a.72.72%200%200%201-.201.454a.735.735%200%201%201-1.041-1.04a.73.73%200%200%201%201.002-.025m-12.707%203.082s-1.257%202.101-1.543%202.861c-.257.683-.298%202.205-.649%202.843c-1.134%202.049-6.621%206.623-6.621%206.623l1.575%201.576s4.572-5.488%206.62-6.621c.639-.354%202.161-.395%202.843-.652c.762-.285%202.861-1.543%202.861-1.543z%22%2F%3E%3Cpath%20fill%3D%22%23333%22%20d%3D%22m27.064%2033.165l.379.378l-11.056%2011.084l-.379-.378zm3.385%203.386l.378.378l-11.055%2011.083l-.378-.378zm-1.121-1.123l.379.38l-11.07%2011.07l-.379-.38zM28.2%2034.3l.38.378l-11.07%2011.07l-.38-.379z%22%2F%3E%3Cpath%20fill%3D%22%23B3660D%22%20d%3D%22m6.978%2010.521l46.5%2046.5l-1.052%201.05L5.928%2011.572z%22%2F%3E%3Cpath%20fill%3D%22%23E2D8C7%22%20d%3D%22m4.512%2012.988l46.5%2046.5l-1.051%201.05l-46.5-46.5z%22%2F%3E%3Cpath%20fill%3D%22%23333%22%20d%3D%22M5.517%2016.094L2%2012.576l4.979-2.055l2.055%202.055zm42.388%2042.388L51.423%2062l2.056-4.979l-2.056-2.055z%22%2F%3E%3Cpath%20fill%3D%22%23333%22%20d%3D%22m46.673%2055.148l4.34%204.34l-1.051%201.05l-4.34-4.34z%22%2F%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%2064%2064%22%3E%3Cpath%20fill%3D%22%23DE7F11%22%20d%3D%22M26.722%2056.354c.273-2.827%201.65-3.646%202.561-3.776c3.279-.469%202.59-1.554%201.895-1.895c-3.807-1.863-.76-5.874-.105-6.754c2.357-3.155%206.336-.99%206.336-.99c-.33-4.641%203.531-4.401%205.48-5.484c8.875-4.924%201.291-12.271-1.357-14.919c-2.646-2.648-9.994-10.233-14.918-1.357c-1.082%201.947-.846%205.813-5.482%205.482c0%200%202.166%203.978-.99%206.334c-.879.658-4.889%203.702-6.752-.104c-.341-.695-1.423-1.385-1.895%201.895c-.132.911-.928%202.367-3.774%202.56c-6.823.459-8.502%209.864.319%2018.688c8.924%208.925%2018.055%206.828%2018.682.32%22%2F%3E%3Cpath%20fill%3D%22%23333%22%20d%3D%22m30.546%2037.365l-3.904-3.905L54.028%208.023l1.95%201.953zM58.35%206.982l3.272%203.273l-.827.827l-3.272-3.273z%22%2F%3E%3Cg%20fill%3D%22%23333%22%3E%3Cpath%20d%3D%22m53.86%203.927l2.753%202.754l-.827.827l-2.754-2.754z%22%2F%3E%3Cpath%20d%3D%22m53.353%206.218l-.852-1.858l.963-.964l1.857.854z%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%23333%22%3E%3Cpath%20d%3D%22m56.187%208.524l3.273%203.274l-.828.828l-3.274-3.274z%22%2F%3E%3Cpath%20d%3D%22m58.983%2010.184l.854%201.857l-.963.964l-1.857-.853z%22%2F%3E%3C%2Fg%3E%3Cpath%20fill%3D%22%23333%22%20d%3D%22m51.008%205.851l3.274%203.275l-.828.827l-3.273-3.274z%22%2F%3E%3Cpath%20fill%3D%22%23B3660D%22%20d%3D%22m60.646%206.927l-3.575-3.574L59.03%202l2.971%202.972z%22%2F%3E%3Cpath%20fill%3D%22%23DE7F11%22%20d%3D%22m55.46%2011.436l2.719-4.092l1.285-.227l2.535-3.824l-1.291-1.29l-3.824%202.531l-.227%201.288l-4.092%202.717z%22%2F%3E%3Cpath%20fill%3D%22%23333%22%20d%3D%22M24.202%2035.264c.113-.329.195-.823-.16-1.179c-2.672-2.672-7.045%206.266-8.813%204.498c-.389-.39-.289-.732-.181-.92a.72.72%200%200%200%20.615-.197a.733.733%200%200%200%200-1.04a.734.734%200%200%200-1.039%200a.72.72%200%200%200-.094.898c-.213.311-.624%201.106.114%201.844c2.523%202.525%207.241-6.143%208.848-4.535c.104.104.113.258.098.392a.73.73%200%200%200-.455.203a.735.735%200%201%200%201.041%201.039a.73.73%200%200%200%20.026-1.003m4.539%204.542c.33-.115.824-.196%201.18.159c2.672%202.673-6.264%207.048-4.496%208.815c.389.391.73.289.918.18a.73.73%200%200%201%20.197-.615a.734.734%200%200%201%201.039%200a.73.73%200%200%201%200%201.04a.72.72%200%200%201-.896.095c-.311.213-1.107.623-1.844-.113c-2.523-2.525%206.143-7.245%204.533-8.854c-.104-.102-.258-.112-.391-.096a.72.72%200%200%201-.201.454a.735.735%200%201%201-1.041-1.04a.73.73%200%200%201%201.002-.025m-12.707%203.082s-1.257%202.101-1.543%202.861c-.257.683-.298%202.205-.649%202.843c-1.134%202.049-6.621%206.623-6.621%206.623l1.575%201.576s4.572-5.488%206.62-6.621c.639-.354%202.161-.395%202.843-.652c.762-.285%202.861-1.543%202.861-1.543z%22%2F%3E%3Cpath%20fill%3D%22%23333%22%20d%3D%22m27.064%2033.165l.379.378l-11.056%2011.084l-.379-.378zm3.385%203.386l.378.378l-11.055%2011.083l-.378-.378zm-1.121-1.123l.379.38l-11.07%2011.07l-.379-.38zM28.2%2034.3l.38.378l-11.07%2011.07l-.38-.379z%22%2F%3E%3Cpath%20fill%3D%22%23B3660D%22%20d%3D%22m6.978%2010.521l46.5%2046.5l-1.052%201.05L5.928%2011.572z%22%2F%3E%3Cpath%20fill%3D%22%23E2D8C7%22%20d%3D%22m4.512%2012.988l46.5%2046.5l-1.051%201.05l-46.5-46.5z%22%2F%3E%3Cpath%20fill%3D%22%23333%22%20d%3D%22M5.517%2016.094L2%2012.576l4.979-2.055l2.055%202.055zm42.388%2042.388L51.423%2062l2.056-4.979l-2.056-2.055z%22%2F%3E%3Cpath%20fill%3D%22%23333%22%20d%3D%22m46.673%2055.148l4.34%204.34l-1.051%201.05l-4.34-4.34z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

给 violin 加一点动效

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

violin 呼吸动效演示

呼吸

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

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

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

旋转

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

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

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

SVG 健康报告

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

文件体积

2.72 KB

2,789 字节

viewBox

0 0 64 64

矢量坐标系

图元总数

15

<path> ×15

风格

多色填充

填充跟随容器颜色

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

常见问题

关于 violin 图标的下载、商用与改色。

violin 图标是什么？▾

它是 Emoji One (Colored)（emojione）开源图标集中的 violin 图标，多色填充，viewBox 为 0 0 64 64，文件仅 2.72 KB，矢量格式可无损缩放到任意尺寸。

如何下载 violin 图标？▾

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

violin 图标可以商用吗？▾

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

如何修改 violin 图标的颜色？▾

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