headphones icon
headphones-28 from Fluent UI System Color Icons by Microsoft Corporation · 28 · MIT Free for personal and commercial use.
- Name
- headphones-28
- Set
- Fluent UI System Color Icons
- Style
- 28
- Viewbox
- 28×28
- License
- MIT
4 other variants in Fluent UI System Color Icons
The same icon in other sets
headphonesBootstrap IconsheadphonesCarbonheadphones-fillEva IconsheadphonesFramework7 IconsheadphonesFont Awesome 6 SolidheadphonesFont Awesome RegularheadphonesFont Awesome SolidheadphonesFeather Iconsheadphones-outlineFlowbite Iconsheadphones-12-filledFluent UI System 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 28 28"><g fill="none"><path fill="url(#SVGU0wzbd9U)" d="M26 16h-2v-2c0-5.523-4.477-10-10-10S4 8.477 4 14v2H2v-2C2 7.373 7.373 2 14 2s12 5.373 12 12z"/><path fill="url(#SVGtSgDadMK)" d="M26 16h-2v-2c0-5.523-4.477-10-10-10S4 8.477 4 14v2H2v-2C2 7.373 7.373 2 14 2s12 5.373 12 12z"/><path fill="url(#SVGuYDNlbVI)" d="M4 16v9.465A4 4 0 0 1 2 22v-6z"/><path fill="url(#SVGuYDNlbVI)" d="M24 16v9.465A4 4 0 0 0 26 22v-6z"/><path fill="url(#SVGJe8jhbGQ)" d="M4 25.465V16h5a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H6a4 4 0 0 1-2-.535"/><path fill="url(#SVGJe8jhbGQ)" d="M22 26c.729 0 1.412-.195 2-.535V16h-5a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1z"/><defs><linearGradient id="SVGU0wzbd9U" x1="-5.5" x2="1.628" y1="4.196" y2="20.159" gradientUnits="userSpaceOnUse"><stop stop-color="#cad2d9"/><stop offset="1" stop-color="#70777d"/></linearGradient><linearGradient id="SVGtSgDadMK" x1="-6.571" x2="-3.907" y1="2" y2="13.898" gradientUnits="userSpaceOnUse"><stop stop-color="#b9c0c7"/><stop offset="1" stop-color="#70777d"/></linearGradient><linearGradient id="SVGuYDNlbVI" x1="3" x2="3" y1="16" y2="25.465" gradientUnits="userSpaceOnUse"><stop stop-color="#0078d4"/><stop offset="1" stop-color="#2052cb"/></linearGradient><linearGradient id="SVGJe8jhbGQ" x1="20.625" x2="20.625" y1="16" y2="26" gradientUnits="userSpaceOnUse"><stop stop-color="#0fafff"/><stop offset="1" stop-color="#0067bf"/></linearGradient></defs></g></svg>
React
import type { SVGProps } from "react";
export function FluentColorHeadphones28(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 28 28"><g fill="none"><path fill="url(#SVGU0wzbd9U)" d="M26 16h-2v-2c0-5.523-4.477-10-10-10S4 8.477 4 14v2H2v-2C2 7.373 7.373 2 14 2s12 5.373 12 12z"/><path fill="url(#SVGtSgDadMK)" d="M26 16h-2v-2c0-5.523-4.477-10-10-10S4 8.477 4 14v2H2v-2C2 7.373 7.373 2 14 2s12 5.373 12 12z"/><path fill="url(#SVGuYDNlbVI)" d="M4 16v9.465A4 4 0 0 1 2 22v-6z"/><path fill="url(#SVGuYDNlbVI)" d="M24 16v9.465A4 4 0 0 0 26 22v-6z"/><path fill="url(#SVGJe8jhbGQ)" d="M4 25.465V16h5a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H6a4 4 0 0 1-2-.535"/><path fill="url(#SVGJe8jhbGQ)" d="M22 26c.729 0 1.412-.195 2-.535V16h-5a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1z"/><defs><linearGradient id="SVGU0wzbd9U" x1="-5.5" x2="1.628" y1="4.196" y2="20.159" gradientUnits="userSpaceOnUse"><stop stopColor="#cad2d9"/><stop offset="1" stopColor="#70777d"/></linearGradient><linearGradient id="SVGtSgDadMK" x1="-6.571" x2="-3.907" y1="2" y2="13.898" gradientUnits="userSpaceOnUse"><stop stopColor="#b9c0c7"/><stop offset="1" stopColor="#70777d"/></linearGradient><linearGradient id="SVGuYDNlbVI" x1="3" x2="3" y1="16" y2="25.465" gradientUnits="userSpaceOnUse"><stop stopColor="#0078d4"/><stop offset="1" stopColor="#2052cb"/></linearGradient><linearGradient id="SVGJe8jhbGQ" x1="20.625" x2="20.625" y1="16" y2="26" gradientUnits="userSpaceOnUse"><stop stopColor="#0fafff"/><stop offset="1" stopColor="#0067bf"/></linearGradient></defs></g></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 28 28"><g fill="none"><path fill="url(#SVGU0wzbd9U)" d="M26 16h-2v-2c0-5.523-4.477-10-10-10S4 8.477 4 14v2H2v-2C2 7.373 7.373 2 14 2s12 5.373 12 12z"/><path fill="url(#SVGtSgDadMK)" d="M26 16h-2v-2c0-5.523-4.477-10-10-10S4 8.477 4 14v2H2v-2C2 7.373 7.373 2 14 2s12 5.373 12 12z"/><path fill="url(#SVGuYDNlbVI)" d="M4 16v9.465A4 4 0 0 1 2 22v-6z"/><path fill="url(#SVGuYDNlbVI)" d="M24 16v9.465A4 4 0 0 0 26 22v-6z"/><path fill="url(#SVGJe8jhbGQ)" d="M4 25.465V16h5a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H6a4 4 0 0 1-2-.535"/><path fill="url(#SVGJe8jhbGQ)" d="M22 26c.729 0 1.412-.195 2-.535V16h-5a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1z"/><defs><linearGradient id="SVGU0wzbd9U" x1="-5.5" x2="1.628" y1="4.196" y2="20.159" gradientUnits="userSpaceOnUse"><stop stop-color="#cad2d9"/><stop offset="1" stop-color="#70777d"/></linearGradient><linearGradient id="SVGtSgDadMK" x1="-6.571" x2="-3.907" y1="2" y2="13.898" gradientUnits="userSpaceOnUse"><stop stop-color="#b9c0c7"/><stop offset="1" stop-color="#70777d"/></linearGradient><linearGradient id="SVGuYDNlbVI" x1="3" x2="3" y1="16" y2="25.465" gradientUnits="userSpaceOnUse"><stop stop-color="#0078d4"/><stop offset="1" stop-color="#2052cb"/></linearGradient><linearGradient id="SVGJe8jhbGQ" x1="20.625" x2="20.625" y1="16" y2="26" gradientUnits="userSpaceOnUse"><stop stop-color="#0fafff"/><stop offset="1" stop-color="#0067bf"/></linearGradient></defs></g></svg> </template>
CSS
.icon-headphones-28 {
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%2028%2028%22%3E%3Cg%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22url(%23SVGU0wzbd9U)%22%20d%3D%22M26%2016h-2v-2c0-5.523-4.477-10-10-10S4%208.477%204%2014v2H2v-2C2%207.373%207.373%202%2014%202s12%205.373%2012%2012z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGtSgDadMK)%22%20d%3D%22M26%2016h-2v-2c0-5.523-4.477-10-10-10S4%208.477%204%2014v2H2v-2C2%207.373%207.373%202%2014%202s12%205.373%2012%2012z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGuYDNlbVI)%22%20d%3D%22M4%2016v9.465A4%204%200%200%201%202%2022v-6z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGuYDNlbVI)%22%20d%3D%22M24%2016v9.465A4%204%200%200%200%2026%2022v-6z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGJe8jhbGQ)%22%20d%3D%22M4%2025.465V16h5a1%201%200%200%201%201%201v8a1%201%200%200%201-1%201H6a4%204%200%200%201-2-.535%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGJe8jhbGQ)%22%20d%3D%22M22%2026c.729%200%201.412-.195%202-.535V16h-5a1%201%200%200%200-1%201v8a1%201%200%200%200%201%201z%22%2F%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22SVGU0wzbd9U%22%20x1%3D%22-5.5%22%20x2%3D%221.628%22%20y1%3D%224.196%22%20y2%3D%2220.159%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23cad2d9%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%2370777d%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGtSgDadMK%22%20x1%3D%22-6.571%22%20x2%3D%22-3.907%22%20y1%3D%222%22%20y2%3D%2213.898%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23b9c0c7%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%2370777d%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGuYDNlbVI%22%20x1%3D%223%22%20x2%3D%223%22%20y1%3D%2216%22%20y2%3D%2225.465%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%230078d4%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%232052cb%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGJe8jhbGQ%22%20x1%3D%2220.625%22%20x2%3D%2220.625%22%20y1%3D%2216%22%20y2%3D%2226%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%230fafff%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%230067bf%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3C%2Fg%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%2028%2028%22%3E%3Cg%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22url(%23SVGU0wzbd9U)%22%20d%3D%22M26%2016h-2v-2c0-5.523-4.477-10-10-10S4%208.477%204%2014v2H2v-2C2%207.373%207.373%202%2014%202s12%205.373%2012%2012z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGtSgDadMK)%22%20d%3D%22M26%2016h-2v-2c0-5.523-4.477-10-10-10S4%208.477%204%2014v2H2v-2C2%207.373%207.373%202%2014%202s12%205.373%2012%2012z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGuYDNlbVI)%22%20d%3D%22M4%2016v9.465A4%204%200%200%201%202%2022v-6z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGuYDNlbVI)%22%20d%3D%22M24%2016v9.465A4%204%200%200%200%2026%2022v-6z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGJe8jhbGQ)%22%20d%3D%22M4%2025.465V16h5a1%201%200%200%201%201%201v8a1%201%200%200%201-1%201H6a4%204%200%200%201-2-.535%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGJe8jhbGQ)%22%20d%3D%22M22%2026c.729%200%201.412-.195%202-.535V16h-5a1%201%200%200%200-1%201v8a1%201%200%200%200%201%201z%22%2F%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22SVGU0wzbd9U%22%20x1%3D%22-5.5%22%20x2%3D%221.628%22%20y1%3D%224.196%22%20y2%3D%2220.159%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23cad2d9%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%2370777d%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGtSgDadMK%22%20x1%3D%22-6.571%22%20x2%3D%22-3.907%22%20y1%3D%222%22%20y2%3D%2213.898%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23b9c0c7%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%2370777d%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGuYDNlbVI%22%20x1%3D%223%22%20x2%3D%223%22%20y1%3D%2216%22%20y2%3D%2225.465%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%230078d4%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%232052cb%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGJe8jhbGQ%22%20x1%3D%2220.625%22%20x2%3D%2220.625%22%20y1%3D%2216%22%20y2%3D%2226%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%230fafff%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%230067bf%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/fluent-color/headphones-28.svg?color=%231a73e8&size=48
