beats logo
beats from Devicon by konpa · Original · MIT Free for personal and commercial use.
- Name
- beats
- Set
- Devicon
- Style
- Original
- Viewbox
- 128×128
- License
- MIT
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 128 128"><path fill="#07c" d="M93.352 54.215A39.8 39.8 0 0 0 96 40C96 17.906 78.094 0 56 0H12v48h60c7.86 0 15.168 2.3 21.352 6.215"/><path fill="#00bfb3" d="M102.809 62.496C94.399 79.922 76.609 92 56 92H12v36h60c22.09 0 40-17.914 40-40a39.83 39.83 0 0 0-9.191-25.512"/><path fill="#343741" d="M93.352 54.215A39.8 39.8 0 0 0 72 48H12v32h44c17.078 0 31.613-10.719 37.352-25.785"/></svg>
React
import type { SVGProps } from "react";
export function DeviconBeats(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 128 128"><path fill="#07c" d="M93.352 54.215A39.8 39.8 0 0 0 96 40C96 17.906 78.094 0 56 0H12v48h60c7.86 0 15.168 2.3 21.352 6.215"/><path fill="#00bfb3" d="M102.809 62.496C94.399 79.922 76.609 92 56 92H12v36h60c22.09 0 40-17.914 40-40a39.83 39.83 0 0 0-9.191-25.512"/><path fill="#343741" d="M93.352 54.215A39.8 39.8 0 0 0 72 48H12v32h44c17.078 0 31.613-10.719 37.352-25.785"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 128 128"><path fill="#07c" d="M93.352 54.215A39.8 39.8 0 0 0 96 40C96 17.906 78.094 0 56 0H12v48h60c7.86 0 15.168 2.3 21.352 6.215"/><path fill="#00bfb3" d="M102.809 62.496C94.399 79.922 76.609 92 56 92H12v36h60c22.09 0 40-17.914 40-40a39.83 39.83 0 0 0-9.191-25.512"/><path fill="#343741" d="M93.352 54.215A39.8 39.8 0 0 0 72 48H12v32h44c17.078 0 31.613-10.719 37.352-25.785"/></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%20128%20128%22%3E%3Cpath%20fill%3D%22%2307c%22%20d%3D%22M93.352%2054.215A39.8%2039.8%200%200%200%2096%2040C96%2017.906%2078.094%200%2056%200H12v48h60c7.86%200%2015.168%202.3%2021.352%206.215%22%2F%3E%3Cpath%20fill%3D%22%2300bfb3%22%20d%3D%22M102.809%2062.496C94.399%2079.922%2076.609%2092%2056%2092H12v36h60c22.09%200%2040-17.914%2040-40a39.83%2039.83%200%200%200-9.191-25.512%22%2F%3E%3Cpath%20fill%3D%22%23343741%22%20d%3D%22M93.352%2054.215A39.8%2039.8%200%200%200%2072%2048H12v32h44c17.078%200%2031.613-10.719%2037.352-25.785%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%20128%20128%22%3E%3Cpath%20fill%3D%22%2307c%22%20d%3D%22M93.352%2054.215A39.8%2039.8%200%200%200%2096%2040C96%2017.906%2078.094%200%2056%200H12v48h60c7.86%200%2015.168%202.3%2021.352%206.215%22%2F%3E%3Cpath%20fill%3D%22%2300bfb3%22%20d%3D%22M102.809%2062.496C94.399%2079.922%2076.609%2092%2056%2092H12v36h60c22.09%200%2040-17.914%2040-40a39.83%2039.83%200%200%200-9.191-25.512%22%2F%3E%3Cpath%20fill%3D%22%23343741%22%20d%3D%22M93.352%2054.215A39.8%2039.8%200%200%200%2072%2048H12v32h44c17.078%200%2031.613-10.719%2037.352-25.785%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/devicon/beats.svg?color=%231a73e8&size=48
