Gentleface › Audio & video › drum
drum icon
drumDrum: drum, percussion, drums, drum kit. Drawn on the 16 px grid. Free SVG, PNG and code, MIT licensed.
Code line-round
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M13.707 6.293C13.902 6.488 14 6.724 14 7L14 8C14 8.276 13.902 8.512 13.707 8.707C13.512 8.902 13.276 9 13 9L13 12C13.276 12 13.512 12.098 13.707 12.293C13.902 12.488 14 12.724 14 13L14 14C14 14.276 13.902 14.512 13.707 14.707C13.512 14.902 13.276 15 13 15L2 15C1.724 15 1.488 14.902 1.293 14.707C1.098 14.512 1 14.276 1 14L1 13C1 12.724 1.098 12.488 1.293 12.293C1.488 12.098 1.724 12 2 12L2 9C1.724 9 1.488 8.902 1.293 8.707C1.098 8.512 1 8.276 1 8L1 7C1 6.724 1.098 6.488 1.293 6.293C1.488 6.098 1.724 6 2 6L7.293 6L12.146 1.146C12.246 1.047 12.364 0.997 12.5 0.997C12.636 0.997 12.754 1.047 12.854 1.146C12.951 1.244 13 1.362 13 1.5C13 1.638 12.951 1.756 12.854 1.854L8.707 6L13 6C13.276 6 13.512 6.098 13.707 6.293ZM2 7L2 8L13 8L13 7L2 7ZM3 11.293L3.5 11.793L6.293 9L3 9L3 11.293ZM11.5 11.793L12 11.293L12 9L8.707 9L11.5 11.793ZM4.707 12L10.293 12L7.5 9.207L4.707 12ZM13 13L2 13L2 14L13 14L13 13Z"/></svg>
// Gentleface "drum" (line-round), MIT. https://gentleface.com/icons/drum
import type { SVGProps } from 'react';
export function DrumIcon(props: SVGProps<SVGSVGElement>) {
return (
<svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" {...props}>
<path d="M13.707 6.293C13.902 6.488 14 6.724 14 7L14 8C14 8.276 13.902 8.512 13.707 8.707C13.512 8.902 13.276 9 13 9L13 12C13.276 12 13.512 12.098 13.707 12.293C13.902 12.488 14 12.724 14 13L14 14C14 14.276 13.902 14.512 13.707 14.707C13.512 14.902 13.276 15 13 15L2 15C1.724 15 1.488 14.902 1.293 14.707C1.098 14.512 1 14.276 1 14L1 13C1 12.724 1.098 12.488 1.293 12.293C1.488 12.098 1.724 12 2 12L2 9C1.724 9 1.488 8.902 1.293 8.707C1.098 8.512 1 8.276 1 8L1 7C1 6.724 1.098 6.488 1.293 6.293C1.488 6.098 1.724 6 2 6L7.293 6L12.146 1.146C12.246 1.047 12.364 0.997 12.5 0.997C12.636 0.997 12.754 1.047 12.854 1.146C12.951 1.244 13 1.362 13 1.5C13 1.638 12.951 1.756 12.854 1.854L8.707 6L13 6C13.276 6 13.512 6.098 13.707 6.293ZM2 7L2 8L13 8L13 7L2 7ZM3 11.293L3.5 11.793L6.293 9L3 9L3 11.293ZM11.5 11.793L12 11.293L12 9L8.707 9L11.5 11.793ZM4.707 12L10.293 12L7.5 9.207L4.707 12ZM13 13L2 13L2 14L13 14L13 13Z" />
</svg>
);
}Vue: see /icons/drum.md
Svelte: see /icons/drum.md
HTML img: see /icons/drum.md
CSS: see /icons/drum.md
Data URL: see /icons/drum.md
Sprite: see /icons/drum.md
SwiftUI: see /icons/drum.md
Compose: see /icons/drum.md
Android XML: see /icons/drum.md
Flutter: see /icons/drum.md
Each SVG is 16 × 16 with fill="currentColor". Keep it at 16 px or an exact multiple (32, 48) on whole pixels: a fractional size or position blurs it. The snippets are decorative (aria-hidden). For an icon that carries meaning on its own, such as an icon-only button, label the button, or give the SVG role="img" and an aria-label. More in how to use.
With npm: import { DrumIcon } from '@gentleface/react'; (setup).
Meaning
- Use it for
- drum, percussion, drums, drum kit
- Alternatives
piano: musical instruments in general (musical-instrument)
- Also fits
- musical instrument: drums or percussion (drum)
- Tags
- drum, percussion, snare, drumstick, music, instrument, beat, rhythm, band, marching
- Category
- Audio & video
- Component name
DrumIcon- History
- released in 0.2.0
- added
- Since
- version 0.2.0
More audio & video icons
album aspect-ratio audio-lines cassette clapperboard disc earbuds eject explicit fast-forward film guitar hd headphones headphones-off headset · all audio & video icons
For agents
Metadata: /icons/drum.json · Markdown: /icons/drum.md · SVG: https://gentleface.com/svg/{style}/16/drum.svg · PNG: https://gentleface.com/png/{style}/{16|32|48}/drum.png