volume icon

volume from EOS Icons by SUSE UX/UI team · Regular · MIT Free for personal and commercial use.

Name: volume
Set: EOS Icons
Style: Regular
Viewbox: 24×24
License: MIT

The same icon in other sets

volumeBoxIcons v2 volumeBoxIcons v2 Solid volumeDither Icons volumeFont Awesome Solid volumeFeather Icons volumecss.gg volumeHuge Icons volumeHumbleicons volumeJam Icons volumeKeyline Icons volumeLucide volumeMaterial Design Icons volume-fillMingCute Icon volumePixelarticons volumeReicon volume-boldSolar volumeTabler Icons volumeUnicons

Related icons in EOS Icons

volume-binding volume-binding-outlined volume-outlined

Use the volume icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M17 2H7a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2M7 3a1 1 0 1 1-1 1a1 1 0 0 1 1-1m0 18a1 1 0 1 1 1-1a1 1 0 0 1-1 1m5-7a5 5 0 0 1-2-.422V11H7.422A4.997 4.997 0 1 1 12 14m5 7a1 1 0 1 1 1-1a1 1 0 0 1-1 1m0-16a1 1 0 1 1 1-1a1 1 0 0 1-1 1"/><circle cx="12" cy="9" r="2" fill="currentColor"/></svg>

React

import type { SVGProps } from "react";

export function EosIconsVolume(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="M17 2H7a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2M7 3a1 1 0 1 1-1 1a1 1 0 0 1 1-1m0 18a1 1 0 1 1 1-1a1 1 0 0 1-1 1m5-7a5 5 0 0 1-2-.422V11H7.422A4.997 4.997 0 1 1 12 14m5 7a1 1 0 1 1 1-1a1 1 0 0 1-1 1m0-16a1 1 0 1 1 1-1a1 1 0 0 1-1 1"/><circle cx="12" cy="9" r="2" fill="currentColor"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M17 2H7a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2M7 3a1 1 0 1 1-1 1a1 1 0 0 1 1-1m0 18a1 1 0 1 1 1-1a1 1 0 0 1-1 1m5-7a5 5 0 0 1-2-.422V11H7.422A4.997 4.997 0 1 1 12 14m5 7a1 1 0 1 1 1-1a1 1 0 0 1-1 1m0-16a1 1 0 1 1 1-1a1 1 0 0 1-1 1"/><circle cx="12" cy="9" r="2" fill="currentColor"/></svg>
</template>

CSS

.icon-volume {
  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%22M17%202H7a2%202%200%200%200-2%202v16a2%202%200%200%200%202%202h10a2%202%200%200%200%202-2V4a2%202%200%200%200-2-2M7%203a1%201%200%201%201-1%201a1%201%200%200%201%201-1m0%2018a1%201%200%201%201%201-1a1%201%200%200%201-1%201m5-7a5%205%200%200%201-2-.422V11H7.422A4.997%204.997%200%201%201%2012%2014m5%207a1%201%200%201%201%201-1a1%201%200%200%201-1%201m0-16a1%201%200%201%201%201-1a1%201%200%200%201-1%201%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%229%22%20r%3D%222%22%20fill%3D%22currentColor%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%22M17%202H7a2%202%200%200%200-2%202v16a2%202%200%200%200%202%202h10a2%202%200%200%200%202-2V4a2%202%200%200%200-2-2M7%203a1%201%200%201%201-1%201a1%201%200%200%201%201-1m0%2018a1%201%200%201%201%201-1a1%201%200%200%201-1%201m5-7a5%205%200%200%201-2-.422V11H7.422A4.997%204.997%200%201%201%2012%2014m5%207a1%201%200%201%201%201-1a1%201%200%200%201-1%201m0-16a1%201%200%201%201%201-1a1%201%200%200%201-1%201%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%229%22%20r%3D%222%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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