下载 drum 图标
SVG 矢量源文件，或 PNG 按 16~512 预设与 16~1024 自定义尺寸导出，任意尺寸边缘锐利。
px
PNG 由矢量源实时渲染，任意尺寸边缘锐利无锯齿；下载与预览均免费，无需注册。
drum 的预览与使用场景
切换预览颜色后，下方三底色、真实界面场景与各尺寸渲染会实时跟随。
预览颜色
浅色背景
深色背景灰底融入在真实界面里长这样
继续按钮内 · 主操作搜索drum…输入框 · 前缀图标drum导航菜单 · 选中态暂无内容空状态 · 引导提示9:41drum
drum-kit
oil-drum手机桌面 · App 图标
drumdrum-kitoil-drum手机桌面 · App 图标drumgame-icons.design/icons/drum浏览器 · 标签页与站点图标各尺寸下的可读性
24px32px48px64px96px128px复制 drum 图标代码
内联 SVG、React、Vue 与 CSS mask 四种主流引用方式，代码基于当前源文件生成，复制即用。
svgSVG 源码（内联 HTML）
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path fill="currentColor" d="M476.865 25.514L282.941 145.422l19.32 9.215L486.333 40.822l-9.467-15.308zM73.6 65.508l-7.748 16.246l286.595 136.709l1.389 2.715c3.244 6.346 9.677 12.524 17.723 16.373l.003.002l.004.002c8.566 4.084 17.188 5.364 23.63 4.373c6.443-.992 10.352-3.63 12.523-8.18s1.665-8.39-1.725-13.603s-10.122-10.882-18.935-15.086c-8.063-3.843-16.927-4.961-23.91-3.487l-2.983.63zm121.097 97.65c-40.936 2.913-77.435 8.644-106.084 16.283c-21.165 5.644-38.06 12.392-48.953 19.26S25 211.723 25 216s3.767 10.43 14.66 17.299s27.788 13.616 48.953 19.26C130.943 263.847 190.374 271 256 271c49.18 0 94.88-4.017 132.512-10.781c-8.123-.325-16.546-2.53-24.703-6.422l-.002-.002l-.004-.002c-10.2-4.878-18.614-12.38-24.135-21.484l-72.705-34.68l-36.498 22.566c-4.5 9.65-12.051 18.021-21.662 23.977l-.002.002l-.004.002c-10.715 6.625-22.297 10.072-33.281 9.588c-10.985-.484-21.794-5.485-27.856-15.29c-6.062-9.803-5.366-21.696-.515-31.294c4.85-9.598 13.3-17.76 23.785-24.243l.002-.001h.002c9.63-5.951 20.504-8.973 31.16-8.688l6.904-4.27l-14.3-6.82zm127.432.36l-.545.336l41.3 19.7c10.563-1.44 21.702.385 31.92 5.257h.005c11.125 5.306 20.412 12.504 26.275 21.52c5.863 9.014 7.844 20.763 2.88 31.167c-3.08 6.457-8.178 11.27-14.2 14.395c4.699-1.07 9.273-2.174 13.623-3.334c21.165-5.644 38.06-12.392 48.953-19.26S487 220.277 487 216s-3.767-10.43-14.66-17.299s-27.788-13.616-48.953-19.26c-27.516-7.337-62.286-12.91-101.258-15.923m-93.81 15.677l-21.499 13.293l-3.033-.3c-7.102-.708-15.793 1.364-23.39 6.058l-.002.002c-8.305 5.135-14.382 11.502-17.186 17.05c-2.804 5.55-2.89 9.422-.238 13.71c2.651 4.288 6.822 6.486 13.336 6.773c6.513.287 14.949-1.923 23.023-6.916c7.58-4.699 13.305-11.538 15.842-18.199l1.086-2.85l31.383-19.404zM39.642 253.912l26.941 44.9l33.31-24.982a409 409 0 0 1-15.92-3.879c-17.352-4.627-32.253-9.928-44.331-16.039m432.714 0c-12.078 6.11-26.98 11.412-44.332 16.04c-6.926 1.846-14.283 3.565-21.949 5.175l38.926 24.377zM487 264.492l-17.576 29.293a91 91 0 0 0 2.209-.97c5.948-2.72 10.255-5.583 12.627-7.944S487 281.188 487 280zm-462 .002V280c0 1.188.369 2.51 2.74 4.871s6.679 5.224 12.627 7.943q1.07.49 2.207.971zm98.639 14.027l-36.737 27.553c1.874.36 3.74.72 5.674 1.065c21.728 3.862 47.224 6.792 74.612 8.775l-36.143-36.143a574 574 0 0 1-7.406-1.25m233.996 4.538c-23.345 2.877-48.603 4.787-75.155 5.552l37.08 27.809zm27.261.045l-37.195 32.59c26.286-1.979 50.764-4.83 71.723-8.555c1.011-.18 1.972-.373 2.967-.557zm-224.369.697l32.317 32.316l36.676-27.506c-24.226-.698-47.389-2.342-68.993-4.81M256 291.25l-36.322 27.242c12.024.332 24.171.508 36.322.508c12.15 0 24.298-.176 36.322-.508zM25 305.121V440c0 5.5 4.3 11.699 16.09 18.436c3.953 2.259 8.63 4.452 13.91 6.554V317.13c-8.28-2.377-15.693-5.007-22.117-7.943c-2.813-1.287-5.44-2.63-7.883-4.065zm462 0c-2.443 1.435-5.07 2.778-7.883 4.065c-6.424 2.936-13.838 5.566-22.117 7.943V464.99c5.28-2.103 9.957-4.295 13.91-6.554C482.7 451.699 487 445.5 487 440zM73 321.63v149.488c6.196 1.816 12.868 3.523 19.953 5.098c25.716 5.714 56.789 9.79 90.047 12.2V334.978c-34.264-1.945-66.46-5.297-93.576-10.118A430 430 0 0 1 73 321.63m366 0a430 430 0 0 1-16.424 3.232c-27.115 4.82-59.312 8.173-93.576 10.118v153.435c33.258-2.409 64.331-6.485 90.047-12.2c7.085-1.574 13.757-3.281 19.953-5.097zm-238 14.24v153.684a1039 1039 0 0 0 55 1.445c18.483 0 36.972-.485 55-1.445V335.87c-18.053.752-36.52 1.129-55 1.129s-36.947-.377-55-1.129"/></svg>reactReact 组件（TSX）
export function DrumIcon(props: React.SVGProps<SVGSVGElement>) {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width="1em"
height="1em"
viewBox="0 0 512 512"
fill="currentColor"
{...props}
dangerouslySetInnerHTML={{ __html: `<path fill="currentColor" d="M476.865 25.514L282.941 145.422l19.32 9.215L486.333 40.822l-9.467-15.308zM73.6 65.508l-7.748 16.246l286.595 136.709l1.389 2.715c3.244 6.346 9.677 12.524 17.723 16.373l.003.002l.004.002c8.566 4.084 17.188 5.364 23.63 4.373c6.443-.992 10.352-3.63 12.523-8.18s1.665-8.39-1.725-13.603s-10.122-10.882-18.935-15.086c-8.063-3.843-16.927-4.961-23.91-3.487l-2.983.63zm121.097 97.65c-40.936 2.913-77.435 8.644-106.084 16.283c-21.165 5.644-38.06 12.392-48.953 19.26S25 211.723 25 216s3.767 10.43 14.66 17.299s27.788 13.616 48.953 19.26C130.943 263.847 190.374 271 256 271c49.18 0 94.88-4.017 132.512-10.781c-8.123-.325-16.546-2.53-24.703-6.422l-.002-.002l-.004-.002c-10.2-4.878-18.614-12.38-24.135-21.484l-72.705-34.68l-36.498 22.566c-4.5 9.65-12.051 18.021-21.662 23.977l-.002.002l-.004.002c-10.715 6.625-22.297 10.072-33.281 9.588c-10.985-.484-21.794-5.485-27.856-15.29c-6.062-9.803-5.366-21.696-.515-31.294c4.85-9.598 13.3-17.76 23.785-24.243l.002-.001h.002c9.63-5.951 20.504-8.973 31.16-8.688l6.904-4.27l-14.3-6.82zm127.432.36l-.545.336l41.3 19.7c10.563-1.44 21.702.385 31.92 5.257h.005c11.125 5.306 20.412 12.504 26.275 21.52c5.863 9.014 7.844 20.763 2.88 31.167c-3.08 6.457-8.178 11.27-14.2 14.395c4.699-1.07 9.273-2.174 13.623-3.334c21.165-5.644 38.06-12.392 48.953-19.26S487 220.277 487 216s-3.767-10.43-14.66-17.299s-27.788-13.616-48.953-19.26c-27.516-7.337-62.286-12.91-101.258-15.923m-93.81 15.677l-21.499 13.293l-3.033-.3c-7.102-.708-15.793 1.364-23.39 6.058l-.002.002c-8.305 5.135-14.382 11.502-17.186 17.05c-2.804 5.55-2.89 9.422-.238 13.71c2.651 4.288 6.822 6.486 13.336 6.773c6.513.287 14.949-1.923 23.023-6.916c7.58-4.699 13.305-11.538 15.842-18.199l1.086-2.85l31.383-19.404zM39.642 253.912l26.941 44.9l33.31-24.982a409 409 0 0 1-15.92-3.879c-17.352-4.627-32.253-9.928-44.331-16.039m432.714 0c-12.078 6.11-26.98 11.412-44.332 16.04c-6.926 1.846-14.283 3.565-21.949 5.175l38.926 24.377zM487 264.492l-17.576 29.293a91 91 0 0 0 2.209-.97c5.948-2.72 10.255-5.583 12.627-7.944S487 281.188 487 280zm-462 .002V280c0 1.188.369 2.51 2.74 4.871s6.679 5.224 12.627 7.943q1.07.49 2.207.971zm98.639 14.027l-36.737 27.553c1.874.36 3.74.72 5.674 1.065c21.728 3.862 47.224 6.792 74.612 8.775l-36.143-36.143a574 574 0 0 1-7.406-1.25m233.996 4.538c-23.345 2.877-48.603 4.787-75.155 5.552l37.08 27.809zm27.261.045l-37.195 32.59c26.286-1.979 50.764-4.83 71.723-8.555c1.011-.18 1.972-.373 2.967-.557zm-224.369.697l32.317 32.316l36.676-27.506c-24.226-.698-47.389-2.342-68.993-4.81M256 291.25l-36.322 27.242c12.024.332 24.171.508 36.322.508c12.15 0 24.298-.176 36.322-.508zM25 305.121V440c0 5.5 4.3 11.699 16.09 18.436c3.953 2.259 8.63 4.452 13.91 6.554V317.13c-8.28-2.377-15.693-5.007-22.117-7.943c-2.813-1.287-5.44-2.63-7.883-4.065zm462 0c-2.443 1.435-5.07 2.778-7.883 4.065c-6.424 2.936-13.838 5.566-22.117 7.943V464.99c5.28-2.103 9.957-4.295 13.91-6.554C482.7 451.699 487 445.5 487 440zM73 321.63v149.488c6.196 1.816 12.868 3.523 19.953 5.098c25.716 5.714 56.789 9.79 90.047 12.2V334.978c-34.264-1.945-66.46-5.297-93.576-10.118A430 430 0 0 1 73 321.63m366 0a430 430 0 0 1-16.424 3.232c-27.115 4.82-59.312 8.173-93.576 10.118v153.435c33.258-2.409 64.331-6.485 90.047-12.2c7.085-1.574 13.757-3.281 19.953-5.097zm-238 14.24v153.684a1039 1039 0 0 0 55 1.445c18.483 0 36.972-.485 55-1.445V335.87c-18.053.752-36.52 1.129-55 1.129s-36.947-.377-55-1.129"/>` }}
/>
);
}vueVue 3 组件
<template>
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512" fill="currentColor" v-html="body"></svg>
</template>
<script setup>
const body = `<path fill="currentColor" d="M476.865 25.514L282.941 145.422l19.32 9.215L486.333 40.822l-9.467-15.308zM73.6 65.508l-7.748 16.246l286.595 136.709l1.389 2.715c3.244 6.346 9.677 12.524 17.723 16.373l.003.002l.004.002c8.566 4.084 17.188 5.364 23.63 4.373c6.443-.992 10.352-3.63 12.523-8.18s1.665-8.39-1.725-13.603s-10.122-10.882-18.935-15.086c-8.063-3.843-16.927-4.961-23.91-3.487l-2.983.63zm121.097 97.65c-40.936 2.913-77.435 8.644-106.084 16.283c-21.165 5.644-38.06 12.392-48.953 19.26S25 211.723 25 216s3.767 10.43 14.66 17.299s27.788 13.616 48.953 19.26C130.943 263.847 190.374 271 256 271c49.18 0 94.88-4.017 132.512-10.781c-8.123-.325-16.546-2.53-24.703-6.422l-.002-.002l-.004-.002c-10.2-4.878-18.614-12.38-24.135-21.484l-72.705-34.68l-36.498 22.566c-4.5 9.65-12.051 18.021-21.662 23.977l-.002.002l-.004.002c-10.715 6.625-22.297 10.072-33.281 9.588c-10.985-.484-21.794-5.485-27.856-15.29c-6.062-9.803-5.366-21.696-.515-31.294c4.85-9.598 13.3-17.76 23.785-24.243l.002-.001h.002c9.63-5.951 20.504-8.973 31.16-8.688l6.904-4.27l-14.3-6.82zm127.432.36l-.545.336l41.3 19.7c10.563-1.44 21.702.385 31.92 5.257h.005c11.125 5.306 20.412 12.504 26.275 21.52c5.863 9.014 7.844 20.763 2.88 31.167c-3.08 6.457-8.178 11.27-14.2 14.395c4.699-1.07 9.273-2.174 13.623-3.334c21.165-5.644 38.06-12.392 48.953-19.26S487 220.277 487 216s-3.767-10.43-14.66-17.299s-27.788-13.616-48.953-19.26c-27.516-7.337-62.286-12.91-101.258-15.923m-93.81 15.677l-21.499 13.293l-3.033-.3c-7.102-.708-15.793 1.364-23.39 6.058l-.002.002c-8.305 5.135-14.382 11.502-17.186 17.05c-2.804 5.55-2.89 9.422-.238 13.71c2.651 4.288 6.822 6.486 13.336 6.773c6.513.287 14.949-1.923 23.023-6.916c7.58-4.699 13.305-11.538 15.842-18.199l1.086-2.85l31.383-19.404zM39.642 253.912l26.941 44.9l33.31-24.982a409 409 0 0 1-15.92-3.879c-17.352-4.627-32.253-9.928-44.331-16.039m432.714 0c-12.078 6.11-26.98 11.412-44.332 16.04c-6.926 1.846-14.283 3.565-21.949 5.175l38.926 24.377zM487 264.492l-17.576 29.293a91 91 0 0 0 2.209-.97c5.948-2.72 10.255-5.583 12.627-7.944S487 281.188 487 280zm-462 .002V280c0 1.188.369 2.51 2.74 4.871s6.679 5.224 12.627 7.943q1.07.49 2.207.971zm98.639 14.027l-36.737 27.553c1.874.36 3.74.72 5.674 1.065c21.728 3.862 47.224 6.792 74.612 8.775l-36.143-36.143a574 574 0 0 1-7.406-1.25m233.996 4.538c-23.345 2.877-48.603 4.787-75.155 5.552l37.08 27.809zm27.261.045l-37.195 32.59c26.286-1.979 50.764-4.83 71.723-8.555c1.011-.18 1.972-.373 2.967-.557zm-224.369.697l32.317 32.316l36.676-27.506c-24.226-.698-47.389-2.342-68.993-4.81M256 291.25l-36.322 27.242c12.024.332 24.171.508 36.322.508c12.15 0 24.298-.176 36.322-.508zM25 305.121V440c0 5.5 4.3 11.699 16.09 18.436c3.953 2.259 8.63 4.452 13.91 6.554V317.13c-8.28-2.377-15.693-5.007-22.117-7.943c-2.813-1.287-5.44-2.63-7.883-4.065zm462 0c-2.443 1.435-5.07 2.778-7.883 4.065c-6.424 2.936-13.838 5.566-22.117 7.943V464.99c5.28-2.103 9.957-4.295 13.91-6.554C482.7 451.699 487 445.5 487 440zM73 321.63v149.488c6.196 1.816 12.868 3.523 19.953 5.098c25.716 5.714 56.789 9.79 90.047 12.2V334.978c-34.264-1.945-66.46-5.297-93.576-10.118A430 430 0 0 1 73 321.63m366 0a430 430 0 0 1-16.424 3.232c-27.115 4.82-59.312 8.173-93.576 10.118v153.435c33.258-2.409 64.331-6.485 90.047-12.2c7.085-1.574 13.757-3.281 19.953-5.097zm-238 14.24v153.684a1039 1039 0 0 0 55 1.445c18.483 0 36.972-.485 55-1.445V335.87c-18.053.752-36.52 1.129-55 1.129s-36.947-.377-55-1.129"/>`;
</script>cssCSS mask（随 currentColor 改色）
.drum {
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%20512%20512%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M476.865%2025.514L282.941%20145.422l19.32%209.215L486.333%2040.822l-9.467-15.308zM73.6%2065.508l-7.748%2016.246l286.595%20136.709l1.389%202.715c3.244%206.346%209.677%2012.524%2017.723%2016.373l.003.002l.004.002c8.566%204.084%2017.188%205.364%2023.63%204.373c6.443-.992%2010.352-3.63%2012.523-8.18s1.665-8.39-1.725-13.603s-10.122-10.882-18.935-15.086c-8.063-3.843-16.927-4.961-23.91-3.487l-2.983.63zm121.097%2097.65c-40.936%202.913-77.435%208.644-106.084%2016.283c-21.165%205.644-38.06%2012.392-48.953%2019.26S25%20211.723%2025%20216s3.767%2010.43%2014.66%2017.299s27.788%2013.616%2048.953%2019.26C130.943%20263.847%20190.374%20271%20256%20271c49.18%200%2094.88-4.017%20132.512-10.781c-8.123-.325-16.546-2.53-24.703-6.422l-.002-.002l-.004-.002c-10.2-4.878-18.614-12.38-24.135-21.484l-72.705-34.68l-36.498%2022.566c-4.5%209.65-12.051%2018.021-21.662%2023.977l-.002.002l-.004.002c-10.715%206.625-22.297%2010.072-33.281%209.588c-10.985-.484-21.794-5.485-27.856-15.29c-6.062-9.803-5.366-21.696-.515-31.294c4.85-9.598%2013.3-17.76%2023.785-24.243l.002-.001h.002c9.63-5.951%2020.504-8.973%2031.16-8.688l6.904-4.27l-14.3-6.82zm127.432.36l-.545.336l41.3%2019.7c10.563-1.44%2021.702.385%2031.92%205.257h.005c11.125%205.306%2020.412%2012.504%2026.275%2021.52c5.863%209.014%207.844%2020.763%202.88%2031.167c-3.08%206.457-8.178%2011.27-14.2%2014.395c4.699-1.07%209.273-2.174%2013.623-3.334c21.165-5.644%2038.06-12.392%2048.953-19.26S487%20220.277%20487%20216s-3.767-10.43-14.66-17.299s-27.788-13.616-48.953-19.26c-27.516-7.337-62.286-12.91-101.258-15.923m-93.81%2015.677l-21.499%2013.293l-3.033-.3c-7.102-.708-15.793%201.364-23.39%206.058l-.002.002c-8.305%205.135-14.382%2011.502-17.186%2017.05c-2.804%205.55-2.89%209.422-.238%2013.71c2.651%204.288%206.822%206.486%2013.336%206.773c6.513.287%2014.949-1.923%2023.023-6.916c7.58-4.699%2013.305-11.538%2015.842-18.199l1.086-2.85l31.383-19.404zM39.642%20253.912l26.941%2044.9l33.31-24.982a409%20409%200%200%201-15.92-3.879c-17.352-4.627-32.253-9.928-44.331-16.039m432.714%200c-12.078%206.11-26.98%2011.412-44.332%2016.04c-6.926%201.846-14.283%203.565-21.949%205.175l38.926%2024.377zM487%20264.492l-17.576%2029.293a91%2091%200%200%200%202.209-.97c5.948-2.72%2010.255-5.583%2012.627-7.944S487%20281.188%20487%20280zm-462%20.002V280c0%201.188.369%202.51%202.74%204.871s6.679%205.224%2012.627%207.943q1.07.49%202.207.971zm98.639%2014.027l-36.737%2027.553c1.874.36%203.74.72%205.674%201.065c21.728%203.862%2047.224%206.792%2074.612%208.775l-36.143-36.143a574%20574%200%200%201-7.406-1.25m233.996%204.538c-23.345%202.877-48.603%204.787-75.155%205.552l37.08%2027.809zm27.261.045l-37.195%2032.59c26.286-1.979%2050.764-4.83%2071.723-8.555c1.011-.18%201.972-.373%202.967-.557zm-224.369.697l32.317%2032.316l36.676-27.506c-24.226-.698-47.389-2.342-68.993-4.81M256%20291.25l-36.322%2027.242c12.024.332%2024.171.508%2036.322.508c12.15%200%2024.298-.176%2036.322-.508zM25%20305.121V440c0%205.5%204.3%2011.699%2016.09%2018.436c3.953%202.259%208.63%204.452%2013.91%206.554V317.13c-8.28-2.377-15.693-5.007-22.117-7.943c-2.813-1.287-5.44-2.63-7.883-4.065zm462%200c-2.443%201.435-5.07%202.778-7.883%204.065c-6.424%202.936-13.838%205.566-22.117%207.943V464.99c5.28-2.103%209.957-4.295%2013.91-6.554C482.7%20451.699%20487%20445.5%20487%20440zM73%20321.63v149.488c6.196%201.816%2012.868%203.523%2019.953%205.098c25.716%205.714%2056.789%209.79%2090.047%2012.2V334.978c-34.264-1.945-66.46-5.297-93.576-10.118A430%20430%200%200%201%2073%20321.63m366%200a430%20430%200%200%201-16.424%203.232c-27.115%204.82-59.312%208.173-93.576%2010.118v153.435c33.258-2.409%2064.331-6.485%2090.047-12.2c7.085-1.574%2013.757-3.281%2019.953-5.097zm-238%2014.24v153.684a1039%201039%200%200%200%2055%201.445c18.483%200%2036.972-.485%2055-1.445V335.87c-18.053.752-36.52%201.129-55%201.129s-36.947-.377-55-1.129%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%20512%20512%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M476.865%2025.514L282.941%20145.422l19.32%209.215L486.333%2040.822l-9.467-15.308zM73.6%2065.508l-7.748%2016.246l286.595%20136.709l1.389%202.715c3.244%206.346%209.677%2012.524%2017.723%2016.373l.003.002l.004.002c8.566%204.084%2017.188%205.364%2023.63%204.373c6.443-.992%2010.352-3.63%2012.523-8.18s1.665-8.39-1.725-13.603s-10.122-10.882-18.935-15.086c-8.063-3.843-16.927-4.961-23.91-3.487l-2.983.63zm121.097%2097.65c-40.936%202.913-77.435%208.644-106.084%2016.283c-21.165%205.644-38.06%2012.392-48.953%2019.26S25%20211.723%2025%20216s3.767%2010.43%2014.66%2017.299s27.788%2013.616%2048.953%2019.26C130.943%20263.847%20190.374%20271%20256%20271c49.18%200%2094.88-4.017%20132.512-10.781c-8.123-.325-16.546-2.53-24.703-6.422l-.002-.002l-.004-.002c-10.2-4.878-18.614-12.38-24.135-21.484l-72.705-34.68l-36.498%2022.566c-4.5%209.65-12.051%2018.021-21.662%2023.977l-.002.002l-.004.002c-10.715%206.625-22.297%2010.072-33.281%209.588c-10.985-.484-21.794-5.485-27.856-15.29c-6.062-9.803-5.366-21.696-.515-31.294c4.85-9.598%2013.3-17.76%2023.785-24.243l.002-.001h.002c9.63-5.951%2020.504-8.973%2031.16-8.688l6.904-4.27l-14.3-6.82zm127.432.36l-.545.336l41.3%2019.7c10.563-1.44%2021.702.385%2031.92%205.257h.005c11.125%205.306%2020.412%2012.504%2026.275%2021.52c5.863%209.014%207.844%2020.763%202.88%2031.167c-3.08%206.457-8.178%2011.27-14.2%2014.395c4.699-1.07%209.273-2.174%2013.623-3.334c21.165-5.644%2038.06-12.392%2048.953-19.26S487%20220.277%20487%20216s-3.767-10.43-14.66-17.299s-27.788-13.616-48.953-19.26c-27.516-7.337-62.286-12.91-101.258-15.923m-93.81%2015.677l-21.499%2013.293l-3.033-.3c-7.102-.708-15.793%201.364-23.39%206.058l-.002.002c-8.305%205.135-14.382%2011.502-17.186%2017.05c-2.804%205.55-2.89%209.422-.238%2013.71c2.651%204.288%206.822%206.486%2013.336%206.773c6.513.287%2014.949-1.923%2023.023-6.916c7.58-4.699%2013.305-11.538%2015.842-18.199l1.086-2.85l31.383-19.404zM39.642%20253.912l26.941%2044.9l33.31-24.982a409%20409%200%200%201-15.92-3.879c-17.352-4.627-32.253-9.928-44.331-16.039m432.714%200c-12.078%206.11-26.98%2011.412-44.332%2016.04c-6.926%201.846-14.283%203.565-21.949%205.175l38.926%2024.377zM487%20264.492l-17.576%2029.293a91%2091%200%200%200%202.209-.97c5.948-2.72%2010.255-5.583%2012.627-7.944S487%20281.188%20487%20280zm-462%20.002V280c0%201.188.369%202.51%202.74%204.871s6.679%205.224%2012.627%207.943q1.07.49%202.207.971zm98.639%2014.027l-36.737%2027.553c1.874.36%203.74.72%205.674%201.065c21.728%203.862%2047.224%206.792%2074.612%208.775l-36.143-36.143a574%20574%200%200%201-7.406-1.25m233.996%204.538c-23.345%202.877-48.603%204.787-75.155%205.552l37.08%2027.809zm27.261.045l-37.195%2032.59c26.286-1.979%2050.764-4.83%2071.723-8.555c1.011-.18%201.972-.373%202.967-.557zm-224.369.697l32.317%2032.316l36.676-27.506c-24.226-.698-47.389-2.342-68.993-4.81M256%20291.25l-36.322%2027.242c12.024.332%2024.171.508%2036.322.508c12.15%200%2024.298-.176%2036.322-.508zM25%20305.121V440c0%205.5%204.3%2011.699%2016.09%2018.436c3.953%202.259%208.63%204.452%2013.91%206.554V317.13c-8.28-2.377-15.693-5.007-22.117-7.943c-2.813-1.287-5.44-2.63-7.883-4.065zm462%200c-2.443%201.435-5.07%202.778-7.883%204.065c-6.424%202.936-13.838%205.566-22.117%207.943V464.99c5.28-2.103%209.957-4.295%2013.91-6.554C482.7%20451.699%20487%20445.5%20487%20440zM73%20321.63v149.488c6.196%201.816%2012.868%203.523%2019.953%205.098c25.716%205.714%2056.789%209.79%2090.047%2012.2V334.978c-34.264-1.945-66.46-5.297-93.576-10.118A430%20430%200%200%201%2073%20321.63m366%200a430%20430%200%200%201-16.424%203.232c-27.115%204.82-59.312%208.173-93.576%2010.118v153.435c33.258-2.409%2064.331-6.485%2090.047-12.2c7.085-1.574%2013.757-3.281%2019.953-5.097zm-238%2014.24v153.684a1039%201039%200%200%200%2055%201.445c18.483%200%2036.972-.485%2055-1.445V335.87c-18.053.752-36.52%201.129-55%201.129s-36.947-.377-55-1.129%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}给 drum 加一点动效
单文件 CSS 即可播放，无需任何依赖；描画动效仅对描边类图标生效。
呼吸
透明度往复渐变，适合状态提示与在线指示。
css呼吸动效样式
.icon-drum {
animation: icon-breathe 1.8s ease-in-out infinite;
}
@keyframes icon-breathe {
0%, 100% { opacity: 1; }
50% { opacity: 0.35; }
}旋转
匀速循环旋转，适合加载中场景。
css旋转动效样式
.icon-drum {
animation: icon-spin 1.6s linear infinite;
}
@keyframes icon-spin {
to { transform: rotate(360deg); }
}SVG 健康报告
对源文件的客观技术指标，供工程侧评估引用方式。
文件体积
3.38 KB
3,457 字节
viewBox
0 0 512 512
矢量坐标系
图元总数
1
<path> ×1
风格
单色（跟随 currentColor）
填充跟随容器颜色
同时含 width/height 与 viewBox：可以只保留 viewBox，让图标跟随容器自适应缩放。 文件体积 3.38 KB（3,457 字节），图元 1 个，风格为单色（跟随 currentColor）。
常见问题
关于 drum 图标的下载、商用与改色。
drum 图标是什么？▾
它是 Game Icons（game-icons）开源图标集中的 drum 图标，单色（跟随 currentColor），viewBox 为 0 0 512 512，文件仅 3.38 KB，矢量格式可无损缩放到任意尺寸。
如何下载 drum 图标？▾
点击「下载与导出」中的 SVG 源文件按钮保存矢量文件；也可以按 512 / 256 / 128 / 64 / 32 / 16px 预设导出 PNG，或在输入框填 16~1024 之间的任意尺寸。需要 iOS、Android 全套尺寸时，用素材包生成器一键打包。
drum 图标可以商用吗？▾
该图标采用 CC BY 3.0（CC-BY-3.0） 开源协议，通常允许在遵守协议的前提下免费使用，常见要求是保留作者版权声明。商用前建议阅读协议原文确认。
如何修改 drum 图标的颜色？▾
在「预览与场景」的色板中切换颜色，三底色与全部场景会实时跟随；点击任一相近图标可打开预览弹层，复制对应颜色的 SVG 源码或 PNG。也可以复制 SVG 源码后自行修改 fill 值。
Game Icons 中的相近图标