beats logo
beats from SVG Logos by Gil Barbara · Color · CC0-1.0 Free for personal and commercial use.
- Name
- beats
- Set
- SVG Logos
- Style
- Color
- Viewbox
- 256×328
- License
- CC0
The same logo in other sets
Use the beats logo
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 328"><path fill="#07c" d="M208.262 138.798c-14.691 38.558-51.908 66.004-95.623 66.004H0V0h112.638C169.2 0 215.04 45.851 215.04 102.401c0 12.84-2.464 25.074-6.778 36.397"/><path fill="#343741" d="M208.262 138.798c-15.826-10.024-34.534-15.917-54.663-15.917H.001v81.921h112.638c43.715 0 80.932-27.446 95.623-66.004"/><path fill="#00bfb3" d="M232.316 159.811c-21.451 44.529-67.036 75.337-119.678 75.337H0v92.54h153.599c56.562 0 102.401-45.85 102.401-102.4c0-24.91-8.902-47.727-23.684-65.477"/></svg>
React
import type { SVGProps } from "react";
export function LogosBeats(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 328"><path fill="#07c" d="M208.262 138.798c-14.691 38.558-51.908 66.004-95.623 66.004H0V0h112.638C169.2 0 215.04 45.851 215.04 102.401c0 12.84-2.464 25.074-6.778 36.397"/><path fill="#343741" d="M208.262 138.798c-15.826-10.024-34.534-15.917-54.663-15.917H.001v81.921h112.638c43.715 0 80.932-27.446 95.623-66.004"/><path fill="#00bfb3" d="M232.316 159.811c-21.451 44.529-67.036 75.337-119.678 75.337H0v92.54h153.599c56.562 0 102.401-45.85 102.401-102.4c0-24.91-8.902-47.727-23.684-65.477"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 328"><path fill="#07c" d="M208.262 138.798c-14.691 38.558-51.908 66.004-95.623 66.004H0V0h112.638C169.2 0 215.04 45.851 215.04 102.401c0 12.84-2.464 25.074-6.778 36.397"/><path fill="#343741" d="M208.262 138.798c-15.826-10.024-34.534-15.917-54.663-15.917H.001v81.921h112.638c43.715 0 80.932-27.446 95.623-66.004"/><path fill="#00bfb3" d="M232.316 159.811c-21.451 44.529-67.036 75.337-119.678 75.337H0v92.54h153.599c56.562 0 102.401-45.85 102.401-102.4c0-24.91-8.902-47.727-23.684-65.477"/></svg> </template>
CSS
.icon-beats {
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%20256%20328%22%3E%3Cpath%20fill%3D%22%2307c%22%20d%3D%22M208.262%20138.798c-14.691%2038.558-51.908%2066.004-95.623%2066.004H0V0h112.638C169.2%200%20215.04%2045.851%20215.04%20102.401c0%2012.84-2.464%2025.074-6.778%2036.397%22%2F%3E%3Cpath%20fill%3D%22%23343741%22%20d%3D%22M208.262%20138.798c-15.826-10.024-34.534-15.917-54.663-15.917H.001v81.921h112.638c43.715%200%2080.932-27.446%2095.623-66.004%22%2F%3E%3Cpath%20fill%3D%22%2300bfb3%22%20d%3D%22M232.316%20159.811c-21.451%2044.529-67.036%2075.337-119.678%2075.337H0v92.54h153.599c56.562%200%20102.401-45.85%20102.401-102.4c0-24.91-8.902-47.727-23.684-65.477%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%20256%20328%22%3E%3Cpath%20fill%3D%22%2307c%22%20d%3D%22M208.262%20138.798c-14.691%2038.558-51.908%2066.004-95.623%2066.004H0V0h112.638C169.2%200%20215.04%2045.851%20215.04%20102.401c0%2012.84-2.464%2025.074-6.778%2036.397%22%2F%3E%3Cpath%20fill%3D%22%23343741%22%20d%3D%22M208.262%20138.798c-15.826-10.024-34.534-15.917-54.663-15.917H.001v81.921h112.638c43.715%200%2080.932-27.446%2095.623-66.004%22%2F%3E%3Cpath%20fill%3D%22%2300bfb3%22%20d%3D%22M232.316%20159.811c-21.451%2044.529-67.036%2075.337-119.678%2075.337H0v92.54h153.599c56.562%200%20102.401-45.85%20102.401-102.4c0-24.91-8.902-47.727-23.684-65.477%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/logos/beats.svg?color=%231a73e8&size=48
