Speaker Off

Install

npm install @svg-animated-icons/react

CLI

Copy an icon component straight into your project — shadcn-style. Replace {icon} with an icon name like arrow-left.

terminal

npx @svg-animated-icons/cli add {icon} --react

Flag	Description
`--dest <dir>`	Destination directory (default: components/animated-icons)

Or copy the component with the CLI

CLI

npx @svg-animated-icons/cli add speaker-off --react

Code

React

// Generated by @svg-animated-icons/cli
// You own this file — edit it freely.

import React from "react";

type Props = {
  disableHover?: boolean;
  className?: string;
};

export function SpeakerOffIcon({ disableHover, className }: Props) {
  const classes = [
    "ai-speaker-off-icon",
    disableHover ? "no-hover" : "",
    className ?? "",
  ]
    .filter(Boolean)
    .join(" ");

  return (
    <>
      <style>{`
.ai-speaker-off-icon {
  width: 1em;
  height: 1em;
  display: inline-block;
  cursor: pointer;
  overflow: visible;
}

.ai-speaker-off-icon * {
  transform-box: fill-box;
}

.ai-speaker-off-icon.no-hover * {
  transform: none;
  opacity: 1;
  animation: none;
}

.ai-speaker-off-icon .cross {
  transform-origin: center;
}

.ai-speaker-off-icon:not(.no-hover):hover .cross {
  animation: ai-speaker-off-pulse 700ms ease-in-out;
}

@keyframes ai-speaker-off-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.25); }
}
`}</style>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        className={classes}
        viewBox="0 0 15 15"
        fill="none"
      >
        <path className="speaker" fillRule="evenodd" d="M7.25867 1.06171C7.40129 0.983222 7.57527 0.978808 7.72351 1.05292C7.8929 1.13762 7.99987 1.3108 7.99987 1.50018V13.5C7.99987 13.6894 7.8929 13.8626 7.72351 13.9472C7.55423 14.0319 7.35155 14.0138 7.20008 13.9004L3.33295 11H1.49998C0.723325 11 0.0846083 10.4098 0.00781237 9.65337L0 9.50005V5.50012C1.61061e-06 4.67171 0.671563 4.00014 1.49998 4.00014H3.33295L7.20008 1.0998L7.25867 1.06171ZM3.79974 4.90052C3.71326 4.96528 3.608 5.00013 3.49994 5.00013H1.49998C1.22384 5.00013 0.999985 5.22398 0.999984 5.50012V9.50005L1.00975 9.60064C1.05627 9.8286 1.25827 10 1.49998 10H3.49994C3.608 10 3.71326 10.0349 3.79974 10.0997L6.99989 12.499V2.50017L3.79974 4.90052Z" fill="currentColor"/>
        <path className="cross" d="M14.1463 5.14661C14.3415 4.95135 14.658 4.95135 14.8533 5.14661C15.0485 5.34187 15.0485 5.65837 14.8533 5.85363L13.2068 7.50008L14.8533 9.14654L14.9177 9.22467C15.0459 9.41874 15.0241 9.6827 14.8533 9.85356C14.6824 10.0244 14.4185 10.0462 14.2244 9.91801L14.1463 9.85356L12.4998 8.2071L10.8533 9.85356C10.6581 10.0488 10.3416 10.0488 10.1463 9.85356C9.95106 9.6583 9.95106 9.3418 10.1463 9.14654L11.7928 7.50008L10.1463 5.85363L10.0819 5.7755C9.9537 5.58143 9.97546 5.31747 10.1463 5.14661C10.3172 4.97575 10.5811 4.95399 10.7752 5.08216L10.8533 5.14661L12.4998 6.79307L14.1463 5.14661Z" fill="currentColor"/>
      </svg>
    </>
  );
}