IconMediaHas a state

Volume icon

The Volume icon is an animated React icon from ReactFrame: a 24×24 drawing with a 1.5px stroke that moves when its button or card is hovered, and switches to a “Muted” state with the active prop. Copy it as SVG or JSX, download the .svg file, or install it with the shadcn CLI. It's free.

Also known asmusicsoundspeakermutecontententertainmentmultimediabroadcastaudioaccessibility

Hover to play

Style

Stroke1.5

Animation

State

Static file: /icons/svg/volume.svg

Install

Copied!

npx shadcn@latest add @reactframe/volume-icon

Use it

import { useState } from "react";
import { motion } from "motion/react";
import { VolumeIcon } from "@/components/volume-icon";

export function Example() {
  const [on, setOn] = useState(false);
  // Hovering the button plays the icon; `active` switches it to its "Muted" state.
  return (
    <motion.button initial="rest" whileHover="hover" onClick={() => setOn(!on)}>
      <VolumeIcon size={20} active={on} />
      Volume
    </motion.button>
  );
}

Details

Component: VolumeIcon
Category: Media
Canvas: 24 × 24, 2px padding
Stroke: 1.5 (adjustable), round caps and joins
Styles: Stroke, duotone, static, pixel
State: “Muted” via the active prop
Dependencies: motion

More media icons