Headphone icon

fxemoji:headphone

The Headphone icon (fxemoji:headphone) is a free SVG icon from the Firefox OS Emoji set by Mozilla. It is drawn on a 512 × 512 grid. Firefox OS Emoji icons are released under the Apache 2.0 license, which allows use in personal and commercial projects. Copy it as SVG, JSX, Vue or Svelte code, or download the SVG file.

Icon set: Firefox OS Emoji
Author: Mozilla
License: Apache-2.0
Size: 512 × 512
Category: Objects

Download SVG

SVG code

<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><path fill="#00B1FF" d="M96.894 12.915a4.742 4.742 0 0 0-7.037-4.153L35.109 38.986a4.74 4.74 0 0 0-2.451 4.154v63.756a16.1 16.1 0 0 0-6.685-1.462c-8.918 0-16.147 7.229-16.147 16.147s7.229 16.147 16.147 16.147c8.762 0 15.877-6.983 16.124-15.686c.017-.153.05-.292.05-.461V65.988l45.26-24.987v34.057a16.1 16.1 0 0 0-6.659-1.449c-8.918 0-16.147 7.229-16.147 16.147s7.229 16.147 16.147 16.147s16.147-7.229 16.147-16.147c0-.092-.012-.18-.014-.271c.001-.046.014-.089.014-.136zm395.25-7.569l-25.341 13.99a5.3 5.3 0 0 0-2.739 4.642v71.243a17.95 17.95 0 0 0-7.47-1.633c-9.965 0-18.044 8.078-18.044 18.044c0 9.965 8.078 18.043 18.044 18.043c9.793 0 17.746-7.807 18.018-17.534c.019-.169.055-.323.055-.509V51.603c0-1.292.702-2.482 1.833-3.106l19.074-10.53a3.55 3.55 0 0 0 1.833-3.106V8.452c0-2.701-2.898-4.412-5.263-3.106"/><path fill="#176068" d="M178.715 115.298c-5.569 0-11.02-2.748-14.249-7.785c-5.038-7.86-2.749-18.316 5.111-23.354c57.774-37.027 134.635-36.991 191.261.083c7.811 5.114 9.997 15.592 4.883 23.403c-5.115 7.811-15.592 9.996-23.403 4.883c-45.668-29.901-107.756-29.861-154.498.096a16.8 16.8 0 0 1-9.105 2.674"/><path fill="#B9C5C6" d="M436.526 252.625c-10.69 0-19.355-8.666-19.355-19.355c0-84.311-68.592-152.903-152.903-152.903S111.364 148.959 111.364 233.27c0 10.69-8.666 19.355-19.355 19.355s-19.356-8.666-19.356-19.355c0-105.657 85.958-191.614 191.614-191.614s191.614 85.958 191.614 191.614c0 10.689-8.665 19.355-19.355 19.355"/><path fill="#96A9B2" d="M92.009 360.936a6.636 6.636 0 0 1-6.636-6.636V233.27a6.636 6.636 0 1 1 13.272 0V354.3a6.635 6.635 0 0 1-6.636 6.636m351.152-6.636V233.27a6.636 6.636 0 1 0-13.272 0V354.3a6.636 6.636 0 1 0 13.272 0"/><path fill="#B9C5C6" d="M136.653 263.524c-40.721 0-73.732 33.011-73.732 73.733c0 40.721 33.011 73.732 73.732 73.732h21.888V263.524zm257.593 0h-21.888v147.465h21.888c40.721 0 73.732-33.011 73.732-73.732c0-40.722-33.011-73.733-73.732-73.733"/><path fill="#96A9B2" d="M90.976 508.633a40 40 0 0 1-10.426-1.354c-12.688-3.4-22.309-13.065-25.736-25.855c-2.185-8.156-4.706-29.688 19.031-53.425c2.688-2.688 5.149-5.001 7.32-7.04c12.419-11.666 16.167-15.188 16.167-46.836a6.636 6.636 0 1 1 13.272 0c0 35.957-5.875 42.909-20.352 56.51c-2.1 1.973-4.48 4.209-7.023 6.751c-18.846 18.846-17.184 34.674-15.595 40.604c2.218 8.277 8.178 14.28 16.351 16.471c12.449 3.336 27.47-2.63 41.209-16.368c20.292-20.293 44.154-27.753 63.826-19.963c15.289 6.057 25.119 20.537 25.656 37.792a6.636 6.636 0 1 1-13.265.412c-.375-12.059-6.834-21.728-17.278-25.864c-14.597-5.782-33.122.576-49.553 17.008c-13.788 13.785-29.193 21.157-43.604 21.157"/><path fill="#176068" d="M170.616 263.088v148.336a6.52 6.52 0 0 1-6.52 6.52h-11.109a6.52 6.52 0 0 1-6.52-6.52V263.089a6.52 6.52 0 0 1 6.52-6.52h11.109a6.52 6.52 0 0 1 6.52 6.519m207.296-6.52h-11.109a6.52 6.52 0 0 0-6.52 6.52v148.336a6.52 6.52 0 0 0 6.52 6.52h11.109a6.52 6.52 0 0 0 6.52-6.52V263.089a6.52 6.52 0 0 0-6.52-6.521m58.614-29.819a6.52 6.52 0 1 0 0 13.04a6.52 6.52 0 0 0 0-13.04m-344.517 0a6.52 6.52 0 1 0 0 13.04a6.52 6.52 0 0 0 0-13.04"/></svg>

How to use the Headphone icon

React

import { Icon } from "@iconify/react";

<Icon icon="fxemoji:headphone" width="24" />

Vue

<script setup>
import { Icon } from "@iconify/vue";
</script>

<template>
  <Icon icon="fxemoji:headphone" width="24" />
</template>

Svelte

<script>
  import Icon from "@iconify/svelte";
</script>

<Icon icon="fxemoji:headphone" width="24" />

Tailwind CSS

<!-- @iconify/tailwind plugin -->
<span class="icon-[fxemoji--headphone]"></span>

UnoCSS

<!-- @unocss/preset-icons + @iconify-json/fxemoji -->
<div class="i-fxemoji:headphone"></div>

Web component

<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>

<iconify-icon icon="fxemoji:headphone"></iconify-icon>

HTML image

<img src="https://iconyz.com/api/public/svg/fxemoji/headphone.svg" alt="Headphone icon" width="24" height="24">

Headphone icon in other icon sets

Headphone icon FAQ

Is the Headphone icon free for commercial use?

Yes. Firefox OS Emoji icons are released under the Apache 2.0 license, which allows use in personal and commercial projects.

How do I use the Headphone icon in React?

Install @iconify/react and render <Icon icon="fxemoji:headphone" />, or use “Copy code” on this page to get a standalone React component.

How do I add the Headphone icon to a web page?

Link the SVG file in an image tag: <img src="https://iconyz.com/api/public/svg/fxemoji/headphone.svg" alt="Headphone icon">, or paste the SVG code inline to style it with CSS.

Browse all Firefox OS Emoji icons →