headphone icon

headphone-fill from MingCute Icon by MingCute Design · Fill · Apache-2.0 Free for personal and commercial use.

Name
headphone-fill
Set
MingCute Icon
Style
Fill
Viewbox
24×24
License
Apache 2.0

1 other variant in MingCute Icon

headphone-line

The same icon in other sets

headphoneAkar IconsheadphoneBoxIcons v2headphoneEmoji One (Colored)headphoneFluent EmojiheadphoneFluent Emoji FlatheadphoneFluent Emoji High ContrastheadphoneFirefox OS EmojiheadphoneIonIconsheadphoneNoto EmojiheadphoneOpenMojiheadphonePixelarticonsheadphone-fillRemix IconheadphoneStreamline EmojisheadphoneTwitter Emoji

Related icons in MingCute Icon

headphone-2-fill

Use the headphone icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M20 11.943C20 7.562 16.424 4 12 4s-8 3.562-8 7.943c0 1.19.147 1.955.328 2.516c.113.347.222.228.398.035c.048-.052.1-.11.159-.164a2.5 2.5 0 0 1 3.472.05c1.421 1.411 2.732 3.369.921 5.169c-.972.966-2.436 1.368-3.55.328c-1.438-1.344-2.687-2.908-3.302-4.8C2.17 14.283 2 13.304 2 11.942C2 6.445 6.483 2 12 2s10 4.445 10 9.943c0 1.362-.169 2.341-.426 3.133c-.615 1.893-1.864 3.457-3.302 4.8c-1.114 1.041-2.578.64-3.55-.327c-1.81-1.8-.5-3.758.92-5.17a2.5 2.5 0 0 1 3.632.115c.176.193.285.312.398-.035c.181-.56.328-1.327.328-2.516"/></svg>

React

import type { SVGProps } from "react";

export function MingcuteHeadphoneFill(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M20 11.943C20 7.562 16.424 4 12 4s-8 3.562-8 7.943c0 1.19.147 1.955.328 2.516c.113.347.222.228.398.035c.048-.052.1-.11.159-.164a2.5 2.5 0 0 1 3.472.05c1.421 1.411 2.732 3.369.921 5.169c-.972.966-2.436 1.368-3.55.328c-1.438-1.344-2.687-2.908-3.302-4.8C2.17 14.283 2 13.304 2 11.942C2 6.445 6.483 2 12 2s10 4.445 10 9.943c0 1.362-.169 2.341-.426 3.133c-.615 1.893-1.864 3.457-3.302 4.8c-1.114 1.041-2.578.64-3.55-.327c-1.81-1.8-.5-3.758.92-5.17a2.5 2.5 0 0 1 3.632.115c.176.193.285.312.398-.035c.181-.56.328-1.327.328-2.516"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M20 11.943C20 7.562 16.424 4 12 4s-8 3.562-8 7.943c0 1.19.147 1.955.328 2.516c.113.347.222.228.398.035c.048-.052.1-.11.159-.164a2.5 2.5 0 0 1 3.472.05c1.421 1.411 2.732 3.369.921 5.169c-.972.966-2.436 1.368-3.55.328c-1.438-1.344-2.687-2.908-3.302-4.8C2.17 14.283 2 13.304 2 11.942C2 6.445 6.483 2 12 2s10 4.445 10 9.943c0 1.362-.169 2.341-.426 3.133c-.615 1.893-1.864 3.457-3.302 4.8c-1.114 1.041-2.578.64-3.55-.327c-1.81-1.8-.5-3.758.92-5.17a2.5 2.5 0 0 1 3.632.115c.176.193.285.312.398-.035c.181-.56.328-1.327.328-2.516"/></svg>
</template>

CSS

.icon-headphone-fill {
  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%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M20%2011.943C20%207.562%2016.424%204%2012%204s-8%203.562-8%207.943c0%201.19.147%201.955.328%202.516c.113.347.222.228.398.035c.048-.052.1-.11.159-.164a2.5%202.5%200%200%201%203.472.05c1.421%201.411%202.732%203.369.921%205.169c-.972.966-2.436%201.368-3.55.328c-1.438-1.344-2.687-2.908-3.302-4.8C2.17%2014.283%202%2013.304%202%2011.942C2%206.445%206.483%202%2012%202s10%204.445%2010%209.943c0%201.362-.169%202.341-.426%203.133c-.615%201.893-1.864%203.457-3.302%204.8c-1.114%201.041-2.578.64-3.55-.327c-1.81-1.8-.5-3.758.92-5.17a2.5%202.5%200%200%201%203.632.115c.176.193.285.312.398-.035c.181-.56.328-1.327.328-2.516%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%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M20%2011.943C20%207.562%2016.424%204%2012%204s-8%203.562-8%207.943c0%201.19.147%201.955.328%202.516c.113.347.222.228.398.035c.048-.052.1-.11.159-.164a2.5%202.5%200%200%201%203.472.05c1.421%201.411%202.732%203.369.921%205.169c-.972.966-2.436%201.368-3.55.328c-1.438-1.344-2.687-2.908-3.302-4.8C2.17%2014.283%202%2013.304%202%2011.942C2%206.445%206.483%202%2012%202s10%204.445%2010%209.943c0%201.362-.169%202.341-.426%203.133c-.615%201.893-1.864%203.457-3.302%204.8c-1.114%201.041-2.578.64-3.55-.327c-1.81-1.8-.5-3.758.92-5.17a2.5%202.5%200%200%201%203.632.115c.176.193.285.312.398-.035c.181-.56.328-1.327.328-2.516%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/mingcute/headphone-fill.svg?color=%231a73e8&size=48