headphones icon
headphones from Framework7 Icons by Vladimir Kharlampidi · Outline · MIT Free for personal and commercial use.
- Name
- headphones
- Set
- Framework7 Icons
- Style
- Outline
- Viewbox
- 56×56
- License
- MIT
The same icon in other sets
headphonesBootstrap IconsheadphonesCarbonheadphones-fillEva IconsheadphonesFont Awesome 6 SolidheadphonesFont Awesome RegularheadphonesFont Awesome SolidheadphonesFeather Iconsheadphones-outlineFlowbite Iconsheadphones-12-filledFluent UI System Iconsheadphones-20Fluent UI System Color IconsheadphonesHuge IconsheadphonesLine AwesomeheadphonesLucideheadphonesMaterial SymbolsheadphonesMaterial Symbols LightheadphonesMaterial Design IconsheadphonesMyna UI IconsheadphonesPhosphorheadphonesPrime IconsheadphonesTabler Iconsheadphones-outlineTeenyiconsheadphonesUnicons
Use the headphones icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 56 56"><path fill="currentColor" d="M5.523 41.242H6.79c.375 0 .586-.234.586-.586V27.438c0-11.11 8.39-18.329 20.625-18.329c12.258 0 20.625 7.22 20.625 18.329v13.218c0 .352.211.586.586.586h1.266c1.03 0 1.757-.656 1.757-1.617V26.57c0-12.445-9.82-21.093-23.437-21.093h-1.594c-13.617 0-23.437 8.648-23.437 21.093v13.055c0 .96.75 1.617 1.757 1.617m6.75 9.281h2.204c2.882 0 4.5-1.523 4.5-4.218V36.18c0-2.696-1.618-4.22-4.5-4.22h-2.204c-1.57 0-2.437.845-2.437 2.392v13.78c0 1.571.867 2.391 2.437 2.391m29.274 0h2.203c1.594 0 2.484-.82 2.484-2.39V34.352c0-1.547-.89-2.391-2.484-2.391h-2.203c-2.86 0-4.477 1.523-4.477 4.219v10.125c0 2.695 1.617 4.218 4.477 4.218"/></svg>
React
import type { SVGProps } from "react";
export function F7Headphones(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 56 56"><path fill="currentColor" d="M5.523 41.242H6.79c.375 0 .586-.234.586-.586V27.438c0-11.11 8.39-18.329 20.625-18.329c12.258 0 20.625 7.22 20.625 18.329v13.218c0 .352.211.586.586.586h1.266c1.03 0 1.757-.656 1.757-1.617V26.57c0-12.445-9.82-21.093-23.437-21.093h-1.594c-13.617 0-23.437 8.648-23.437 21.093v13.055c0 .96.75 1.617 1.757 1.617m6.75 9.281h2.204c2.882 0 4.5-1.523 4.5-4.218V36.18c0-2.696-1.618-4.22-4.5-4.22h-2.204c-1.57 0-2.437.845-2.437 2.392v13.78c0 1.571.867 2.391 2.437 2.391m29.274 0h2.203c1.594 0 2.484-.82 2.484-2.39V34.352c0-1.547-.89-2.391-2.484-2.391h-2.203c-2.86 0-4.477 1.523-4.477 4.219v10.125c0 2.695 1.617 4.218 4.477 4.218"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 56 56"><path fill="currentColor" d="M5.523 41.242H6.79c.375 0 .586-.234.586-.586V27.438c0-11.11 8.39-18.329 20.625-18.329c12.258 0 20.625 7.22 20.625 18.329v13.218c0 .352.211.586.586.586h1.266c1.03 0 1.757-.656 1.757-1.617V26.57c0-12.445-9.82-21.093-23.437-21.093h-1.594c-13.617 0-23.437 8.648-23.437 21.093v13.055c0 .96.75 1.617 1.757 1.617m6.75 9.281h2.204c2.882 0 4.5-1.523 4.5-4.218V36.18c0-2.696-1.618-4.22-4.5-4.22h-2.204c-1.57 0-2.437.845-2.437 2.392v13.78c0 1.571.867 2.391 2.437 2.391m29.274 0h2.203c1.594 0 2.484-.82 2.484-2.39V34.352c0-1.547-.89-2.391-2.484-2.391h-2.203c-2.86 0-4.477 1.523-4.477 4.219v10.125c0 2.695 1.617 4.218 4.477 4.218"/></svg> </template>
CSS
.icon-headphones {
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%2056%2056%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M5.523%2041.242H6.79c.375%200%20.586-.234.586-.586V27.438c0-11.11%208.39-18.329%2020.625-18.329c12.258%200%2020.625%207.22%2020.625%2018.329v13.218c0%20.352.211.586.586.586h1.266c1.03%200%201.757-.656%201.757-1.617V26.57c0-12.445-9.82-21.093-23.437-21.093h-1.594c-13.617%200-23.437%208.648-23.437%2021.093v13.055c0%20.96.75%201.617%201.757%201.617m6.75%209.281h2.204c2.882%200%204.5-1.523%204.5-4.218V36.18c0-2.696-1.618-4.22-4.5-4.22h-2.204c-1.57%200-2.437.845-2.437%202.392v13.78c0%201.571.867%202.391%202.437%202.391m29.274%200h2.203c1.594%200%202.484-.82%202.484-2.39V34.352c0-1.547-.89-2.391-2.484-2.391h-2.203c-2.86%200-4.477%201.523-4.477%204.219v10.125c0%202.695%201.617%204.218%204.477%204.218%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%2056%2056%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M5.523%2041.242H6.79c.375%200%20.586-.234.586-.586V27.438c0-11.11%208.39-18.329%2020.625-18.329c12.258%200%2020.625%207.22%2020.625%2018.329v13.218c0%20.352.211.586.586.586h1.266c1.03%200%201.757-.656%201.757-1.617V26.57c0-12.445-9.82-21.093-23.437-21.093h-1.594c-13.617%200-23.437%208.648-23.437%2021.093v13.055c0%20.96.75%201.617%201.757%201.617m6.75%209.281h2.204c2.882%200%204.5-1.523%204.5-4.218V36.18c0-2.696-1.618-4.22-4.5-4.22h-2.204c-1.57%200-2.437.845-2.437%202.392v13.78c0%201.571.867%202.391%202.437%202.391m29.274%200h2.203c1.594%200%202.484-.82%202.484-2.39V34.352c0-1.547-.89-2.391-2.484-2.391h-2.203c-2.86%200-4.477%201.523-4.477%204.219v10.125c0%202.695%201.617%204.218%204.477%204.218%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/f7/headphones.svg?color=%231a73e8&size=48
