Hover the icon or press Play. Suggested motion: bounce. Pick another to preview it and update the animated code:

Simple Line Icons · SlVolume1

Volume1 icon

A free volume1 icon from Simple Line Icons, ready for React. Use it static or animated: both versions are below, copy-paste or one shadcn command away. Sized in em and colored by currentColor.

License: MIT license
Project: thesabbir.github.io

Download SVG

Install with shadcn

npx shadcn@latest add https://ui.cuelark.com/r/icons/simple-line-icons/volume1.json

components/icons/simple-line-icons-volume1.tsx

import * as React from "react";

/**
 * Volume1 from Simple Line Icons (https://thesabbir.github.io/simple-line-icons/), MIT.
 * Via Cuelark UI: ui.cuelark.com/icons/simple-line-icons/volume1. Sized in em, colored by currentColor.
 */
export function SlVolume1Icon(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg
      aria-hidden="true"
      viewBox="0 0 1024 1024"
      stroke="currentColor"
      fill="currentColor"
      strokeWidth="0"
      width="1em"
      height="1em"
      xmlns="http://www.w3.org/2000/svg"
      {...props}
    >
      <path
        d="M654.768 65.904c-10.432-5.552-23.088-4.928-32.912 1.696L300.768 319.712l-106.624.08c-54.512 0-98.88 38.657-98.88 86.4l1.712 211.137c0 47.536 44.352 86.224 98.863 86.224l106.592.065L621.823 956.37a31.977 31.977 0 0 0 17.905 5.472c5.152 0 10.32-1.249 15.008-3.745a31.951 31.951 0 0 0 17.008-28.256V94.16a32.088 32.088 0 0 0-16.976-28.257zm-47.04 803.728L330.129 645.106a31.97 31.97 0 0 0-17.889-5.473l-116.384-.064c-20.544 0-34.88-11.712-34.88-22.464l-1.712-211.152c0-10.48 14.336-22.16 34.896-22.16l116.4-.08a32.017 32.017 0 0 0 17.855-5.457l279.312-224v715.376zm182.097-521.998c-17.712-2.928-33.937 8.864-36.849 26.305-2.912 17.424 8.88 33.92 26.289 36.832 50.32 8.4 85.472 52.304 85.472 106.753 0 51.84-36.368 96.687-86.496 106.688-17.344 3.44-28.592 20.288-25.12 37.632 3.024 15.215 16.368 25.744 31.344 25.744 2.064 0 4.192-.193 6.288-.624 79.968-15.905 138-87.185 138-169.44-.016-85.025-58.447-156.465-138.928-169.89z"
      />
    </svg>
  );
}

With react-icons

import { SlVolume1 } from "react-icons/sl";

export function Example() {
  return <SlVolume1 className="size-5" />;
}

volume1.svg

<svg
  viewBox="0 0 1024 1024"
  stroke="currentColor"
  fill="currentColor"
  stroke-width="0"
  width="1em"
  height="1em"
  xmlns="http://www.w3.org/2000/svg"
>
  <path
    d="M654.768 65.904c-10.432-5.552-23.088-4.928-32.912 1.696L300.768 319.712l-106.624.08c-54.512 0-98.88 38.657-98.88 86.4l1.712 211.137c0 47.536 44.352 86.224 98.863 86.224l106.592.065L621.823 956.37a31.977 31.977 0 0 0 17.905 5.472c5.152 0 10.32-1.249 15.008-3.745a31.951 31.951 0 0 0 17.008-28.256V94.16a32.088 32.088 0 0 0-16.976-28.257zm-47.04 803.728L330.129 645.106a31.97 31.97 0 0 0-17.889-5.473l-116.384-.064c-20.544 0-34.88-11.712-34.88-22.464l-1.712-211.152c0-10.48 14.336-22.16 34.896-22.16l116.4-.08a32.017 32.017 0 0 0 17.855-5.457l279.312-224v715.376zm182.097-521.998c-17.712-2.928-33.937 8.864-36.849 26.305-2.912 17.424 8.88 33.92 26.289 36.832 50.32 8.4 85.472 52.304 85.472 106.753 0 51.84-36.368 96.687-86.496 106.688-17.344 3.44-28.592 20.288-25.12 37.632 3.024 15.215 16.368 25.744 31.344 25.744 2.064 0 4.192-.193 6.288-.624 79.968-15.905 138-87.185 138-169.44-.016-85.025-58.447-156.465-138.928-169.89z"
  />
</svg>

Attribution

"Volume1" icon from Simple Line Icons (https://thesabbir.github.io/simple-line-icons/), licensed under MIT license.

Volume1 icon in other sets

Similar Simple Line Icons icons