waves icon

waves from Phosphor by Phosphor Icons · Regular · MIT Free for personal and commercial use.

Name: waves
Set: Phosphor
Style: Regular
Viewbox: 256×256
License: MIT

5 other variants in Phosphor

waves-bold waves-duotone waves-fill waves-light waves-thin

The same icon in other sets

wavesHuge Icons wavesLucide wavesMaterial Symbols wavesMaterial Design Icons wavesPixelarticons

Use the waves icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M222.16 177.25a8 8 0 0 1-1 11.25c-17.36 14.39-32.86 19.5-47 19.5c-18.58 0-34.82-8.82-49.93-17c-25.35-13.76-47.24-25.64-79.07.74a8 8 0 1 1-10.22-12.31c40.17-33.28 70.32-16.92 96.93-2.48c25.35 13.75 47.24 25.63 79.07-.74a8 8 0 0 1 11.22 1.04m-11.27-57c-31.83 26.38-53.72 14.5-79.07.74c-26.61-14.43-56.76-30.79-96.93 2.49a8 8 0 0 0 10.22 12.31c31.83-26.38 53.72-14.5 79.07-.74c15.11 8.19 31.35 17 49.93 17c14.14 0 29.64-5.11 47-19.5a8 8 0 1 0-10.22-12.31ZM45.11 79.8c31.83-26.37 53.72-14.49 79.07-.74c15.11 8.2 31.35 17 49.93 17c14.14 0 29.64-5.12 47-19.5a8 8 0 1 0-10.22-12.31c-31.83 26.38-53.72 14.5-79.07.74c-26.61-14.41-56.76-30.77-96.93 2.51a8 8 0 1 0 10.22 12.3"/></svg>

React

import type { SVGProps } from "react";

export function PhWaves(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M222.16 177.25a8 8 0 0 1-1 11.25c-17.36 14.39-32.86 19.5-47 19.5c-18.58 0-34.82-8.82-49.93-17c-25.35-13.76-47.24-25.64-79.07.74a8 8 0 1 1-10.22-12.31c40.17-33.28 70.32-16.92 96.93-2.48c25.35 13.75 47.24 25.63 79.07-.74a8 8 0 0 1 11.22 1.04m-11.27-57c-31.83 26.38-53.72 14.5-79.07.74c-26.61-14.43-56.76-30.79-96.93 2.49a8 8 0 0 0 10.22 12.31c31.83-26.38 53.72-14.5 79.07-.74c15.11 8.19 31.35 17 49.93 17c14.14 0 29.64-5.11 47-19.5a8 8 0 1 0-10.22-12.31ZM45.11 79.8c31.83-26.37 53.72-14.49 79.07-.74c15.11 8.2 31.35 17 49.93 17c14.14 0 29.64-5.12 47-19.5a8 8 0 1 0-10.22-12.31c-31.83 26.38-53.72 14.5-79.07.74c-26.61-14.41-56.76-30.77-96.93 2.51a8 8 0 1 0 10.22 12.3"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M222.16 177.25a8 8 0 0 1-1 11.25c-17.36 14.39-32.86 19.5-47 19.5c-18.58 0-34.82-8.82-49.93-17c-25.35-13.76-47.24-25.64-79.07.74a8 8 0 1 1-10.22-12.31c40.17-33.28 70.32-16.92 96.93-2.48c25.35 13.75 47.24 25.63 79.07-.74a8 8 0 0 1 11.22 1.04m-11.27-57c-31.83 26.38-53.72 14.5-79.07.74c-26.61-14.43-56.76-30.79-96.93 2.49a8 8 0 0 0 10.22 12.31c31.83-26.38 53.72-14.5 79.07-.74c15.11 8.19 31.35 17 49.93 17c14.14 0 29.64-5.11 47-19.5a8 8 0 1 0-10.22-12.31ZM45.11 79.8c31.83-26.37 53.72-14.49 79.07-.74c15.11 8.2 31.35 17 49.93 17c14.14 0 29.64-5.12 47-19.5a8 8 0 1 0-10.22-12.31c-31.83 26.38-53.72 14.5-79.07.74c-26.61-14.41-56.76-30.77-96.93 2.51a8 8 0 1 0 10.22 12.3"/></svg>
</template>

CSS

.icon-waves {
  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%20256%20256%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M222.16%20177.25a8%208%200%200%201-1%2011.25c-17.36%2014.39-32.86%2019.5-47%2019.5c-18.58%200-34.82-8.82-49.93-17c-25.35-13.76-47.24-25.64-79.07.74a8%208%200%201%201-10.22-12.31c40.17-33.28%2070.32-16.92%2096.93-2.48c25.35%2013.75%2047.24%2025.63%2079.07-.74a8%208%200%200%201%2011.22%201.04m-11.27-57c-31.83%2026.38-53.72%2014.5-79.07.74c-26.61-14.43-56.76-30.79-96.93%202.49a8%208%200%200%200%2010.22%2012.31c31.83-26.38%2053.72-14.5%2079.07-.74c15.11%208.19%2031.35%2017%2049.93%2017c14.14%200%2029.64-5.11%2047-19.5a8%208%200%201%200-10.22-12.31ZM45.11%2079.8c31.83-26.37%2053.72-14.49%2079.07-.74c15.11%208.2%2031.35%2017%2049.93%2017c14.14%200%2029.64-5.12%2047-19.5a8%208%200%201%200-10.22-12.31c-31.83%2026.38-53.72%2014.5-79.07.74c-26.61-14.41-56.76-30.77-96.93%202.51a8%208%200%201%200%2010.22%2012.3%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%20256%20256%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M222.16%20177.25a8%208%200%200%201-1%2011.25c-17.36%2014.39-32.86%2019.5-47%2019.5c-18.58%200-34.82-8.82-49.93-17c-25.35-13.76-47.24-25.64-79.07.74a8%208%200%201%201-10.22-12.31c40.17-33.28%2070.32-16.92%2096.93-2.48c25.35%2013.75%2047.24%2025.63%2079.07-.74a8%208%200%200%201%2011.22%201.04m-11.27-57c-31.83%2026.38-53.72%2014.5-79.07.74c-26.61-14.43-56.76-30.79-96.93%202.49a8%208%200%200%200%2010.22%2012.31c31.83-26.38%2053.72-14.5%2079.07-.74c15.11%208.19%2031.35%2017%2049.93%2017c14.14%200%2029.64-5.11%2047-19.5a8%208%200%201%200-10.22-12.31ZM45.11%2079.8c31.83-26.37%2053.72-14.49%2079.07-.74c15.11%208.2%2031.35%2017%2049.93%2017c14.14%200%2029.64-5.12%2047-19.5a8%208%200%201%200-10.22-12.31c-31.83%2026.38-53.72%2014.5-79.07.74c-26.61-14.41-56.76-30.77-96.93%202.51a8%208%200%201%200%2010.22%2012.3%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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