drum icon
drum from Line Awesome by Icons8 · Line · Objects · Apache-2.0 Free for personal and commercial use.
- Name
- drum
- Set
- Line Awesome
- Style
- Line
- Category
- Objects
- Viewbox
- 32×32
- License
- Apache 2.0
- Aliases
- drum-solid
The same icon in other sets
More objects icons from Line Awesome
Use the drum icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="m27.188 5.094l-11.063 5.25A2 2 0 0 0 15 10a1.999 1.999 0 1 0 0 4c1.05 0 1.922-.813 2-1.844l6.063-2.875C24.878 10.047 26 11.047 26 12c0 1.887-4.277 4-10 4S6 13.887 6 12s4.277-4 10-4c.172 0 .328-.004.5 0l3.531-1.656A24 24 0 0 0 16 6C9.16 6 4 8.578 4 12v10c0 .988.445 1.895 1.125 2.625s1.605 1.32 2.688 1.813C9.976 27.422 12.84 28 16 28s6.023-.578 8.188-1.563c1.082-.492 2.007-1.082 2.687-1.812S28 22.988 28 22V12c0-1.477-.977-2.79-2.625-3.813l2.656-1.28zM6 15.406c1.016.766 2.379 1.395 4 1.844v7.906c-.5-.156-.957-.34-1.375-.531c-.906-.414-1.598-.91-2.031-1.375S6 22.395 6 22zm20 0V22c0 .395-.16.785-.594 1.25s-1.125.96-2.031 1.375c-.418.191-.875.375-1.375.531V17.25c1.621-.45 2.984-1.078 4-1.844m-14 2.281A24.4 24.4 0 0 0 16 18a24.4 24.4 0 0 0 4-.313v7.938c-1.23.23-2.578.375-4 .375s-2.77-.145-4-.375z"/></svg>
React
import type { SVGProps } from "react";
export function LaDrum(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="m27.188 5.094l-11.063 5.25A2 2 0 0 0 15 10a1.999 1.999 0 1 0 0 4c1.05 0 1.922-.813 2-1.844l6.063-2.875C24.878 10.047 26 11.047 26 12c0 1.887-4.277 4-10 4S6 13.887 6 12s4.277-4 10-4c.172 0 .328-.004.5 0l3.531-1.656A24 24 0 0 0 16 6C9.16 6 4 8.578 4 12v10c0 .988.445 1.895 1.125 2.625s1.605 1.32 2.688 1.813C9.976 27.422 12.84 28 16 28s6.023-.578 8.188-1.563c1.082-.492 2.007-1.082 2.687-1.812S28 22.988 28 22V12c0-1.477-.977-2.79-2.625-3.813l2.656-1.28zM6 15.406c1.016.766 2.379 1.395 4 1.844v7.906c-.5-.156-.957-.34-1.375-.531c-.906-.414-1.598-.91-2.031-1.375S6 22.395 6 22zm20 0V22c0 .395-.16.785-.594 1.25s-1.125.96-2.031 1.375c-.418.191-.875.375-1.375.531V17.25c1.621-.45 2.984-1.078 4-1.844m-14 2.281A24.4 24.4 0 0 0 16 18a24.4 24.4 0 0 0 4-.313v7.938c-1.23.23-2.578.375-4 .375s-2.77-.145-4-.375z"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="m27.188 5.094l-11.063 5.25A2 2 0 0 0 15 10a1.999 1.999 0 1 0 0 4c1.05 0 1.922-.813 2-1.844l6.063-2.875C24.878 10.047 26 11.047 26 12c0 1.887-4.277 4-10 4S6 13.887 6 12s4.277-4 10-4c.172 0 .328-.004.5 0l3.531-1.656A24 24 0 0 0 16 6C9.16 6 4 8.578 4 12v10c0 .988.445 1.895 1.125 2.625s1.605 1.32 2.688 1.813C9.976 27.422 12.84 28 16 28s6.023-.578 8.188-1.563c1.082-.492 2.007-1.082 2.687-1.812S28 22.988 28 22V12c0-1.477-.977-2.79-2.625-3.813l2.656-1.28zM6 15.406c1.016.766 2.379 1.395 4 1.844v7.906c-.5-.156-.957-.34-1.375-.531c-.906-.414-1.598-.91-2.031-1.375S6 22.395 6 22zm20 0V22c0 .395-.16.785-.594 1.25s-1.125.96-2.031 1.375c-.418.191-.875.375-1.375.531V17.25c1.621-.45 2.984-1.078 4-1.844m-14 2.281A24.4 24.4 0 0 0 16 18a24.4 24.4 0 0 0 4-.313v7.938c-1.23.23-2.578.375-4 .375s-2.77-.145-4-.375z"/></svg> </template>
CSS
.icon-drum {
width: 24px;
height: 24px;
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%2032%2032%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22m27.188%205.094l-11.063%205.25A2%202%200%200%200%2015%2010a1.999%201.999%200%201%200%200%204c1.05%200%201.922-.813%202-1.844l6.063-2.875C24.878%2010.047%2026%2011.047%2026%2012c0%201.887-4.277%204-10%204S6%2013.887%206%2012s4.277-4%2010-4c.172%200%20.328-.004.5%200l3.531-1.656A24%2024%200%200%200%2016%206C9.16%206%204%208.578%204%2012v10c0%20.988.445%201.895%201.125%202.625s1.605%201.32%202.688%201.813C9.976%2027.422%2012.84%2028%2016%2028s6.023-.578%208.188-1.563c1.082-.492%202.007-1.082%202.687-1.812S28%2022.988%2028%2022V12c0-1.477-.977-2.79-2.625-3.813l2.656-1.28zM6%2015.406c1.016.766%202.379%201.395%204%201.844v7.906c-.5-.156-.957-.34-1.375-.531c-.906-.414-1.598-.91-2.031-1.375S6%2022.395%206%2022zm20%200V22c0%20.395-.16.785-.594%201.25s-1.125.96-2.031%201.375c-.418.191-.875.375-1.375.531V17.25c1.621-.45%202.984-1.078%204-1.844m-14%202.281A24.4%2024.4%200%200%200%2016%2018a24.4%2024.4%200%200%200%204-.313v7.938c-1.23.23-2.578.375-4%20.375s-2.77-.145-4-.375z%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%2032%2032%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22m27.188%205.094l-11.063%205.25A2%202%200%200%200%2015%2010a1.999%201.999%200%201%200%200%204c1.05%200%201.922-.813%202-1.844l6.063-2.875C24.878%2010.047%2026%2011.047%2026%2012c0%201.887-4.277%204-10%204S6%2013.887%206%2012s4.277-4%2010-4c.172%200%20.328-.004.5%200l3.531-1.656A24%2024%200%200%200%2016%206C9.16%206%204%208.578%204%2012v10c0%20.988.445%201.895%201.125%202.625s1.605%201.32%202.688%201.813C9.976%2027.422%2012.84%2028%2016%2028s6.023-.578%208.188-1.563c1.082-.492%202.007-1.082%202.687-1.812S28%2022.988%2028%2022V12c0-1.477-.977-2.79-2.625-3.813l2.656-1.28zM6%2015.406c1.016.766%202.379%201.395%204%201.844v7.906c-.5-.156-.957-.34-1.375-.531c-.906-.414-1.598-.91-2.031-1.375S6%2022.395%206%2022zm20%200V22c0%20.395-.16.785-.594%201.25s-1.125.96-2.031%201.375c-.418.191-.875.375-1.375.531V17.25c1.621-.45%202.984-1.078%204-1.844m-14%202.281A24.4%2024.4%200%200%200%2016%2018a24.4%2024.4%200%200%200%204-.313v7.938c-1.23.23-2.578.375-4%20.375s-2.77-.145-4-.375z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/la/drum.svg?color=%231a73e8&size=48
