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

Radix Icons · RxSpeakerLoud

Speaker Loud icon

A free speaker loud icon from Radix 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.

Also known asvolume icon sound icon audio icon mute icon

License: MIT license
Project: icons.radix-ui.com

Download SVG

Install with shadcn

npx shadcn@latest add https://ui.cuelark.com/r/icons/radix/speaker-loud.json

components/icons/radix-speaker-loud.tsx

import * as React from "react";

/**
 * Speaker Loud from Radix Icons (https://icons.radix-ui.com), MIT.
 * Via Cuelark UI: ui.cuelark.com/icons/radix/speaker-loud. Sized in em, colored by currentColor.
 */
export function RxSpeakerLoudIcon(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg
      aria-hidden="true"
      fill="none"
      viewBox="0 0 15 15"
      stroke="currentColor"
      fill="currentColor"
      strokeWidth="0"
      width="1em"
      height="1em"
      xmlns="http://www.w3.org/2000/svg"
      {...props}
    >
      <path
        d="M7.00195 1.06561C7.14436 0.984293 7.3197 0.977587 7.46973 1.05096C7.64126 1.13486 7.75 1.30922 7.75 1.50018V13.5002C7.75 13.6911 7.64126 13.8655 7.46973 13.9494C7.29823 14.0333 7.09409 14.0119 6.94336 13.8947L3.22168 11.0002H1.5C0.723336 11.0002 0.0846095 10.4099 0.0078125 9.6535L0 9.50018V5.50018C1.61064e-06 4.67175 0.671574 4.00018 1.5 4.00018H3.22168L6.94336 1.10565L7.00195 1.06561ZM12.1152 1.38397C12.2838 1.24147 12.536 1.26242 12.6787 1.43084L12.9473 1.76287C15.5508 5.13386 15.5507 9.86645 12.9473 13.2375L12.6787 13.5695L12.6201 13.6262C12.4739 13.7409 12.2627 13.741 12.1152 13.6164C11.9679 13.4915 11.9324 13.2824 12.0215 13.1193L12.0684 13.0529L12.3135 12.7492C14.6948 9.66597 14.6955 5.33554 12.3145 2.25213L12.0684 1.94744L12.0225 1.88104C11.933 1.71785 11.9677 1.50896 12.1152 1.38397ZM3.7002 4.89471C3.61243 4.96297 3.50377 5.00018 3.39258 5.00018H1.5C1.22386 5.00018 1 5.22404 1 5.50018V9.50018L1.00977 9.60077C1.05629 9.82873 1.25829 10.0002 1.5 10.0002H3.39258L3.47559 10.007C3.55692 10.0207 3.63442 10.0545 3.7002 10.1056L6.75 12.4777V2.52166L3.7002 4.89471ZM10.2783 3.84784C10.4391 3.74098 10.6493 3.76591 10.7812 3.89666L10.833 3.95916L10.9629 4.16229C12.2548 6.27291 12.2112 8.96969 10.833 11.0412C10.7106 11.2248 10.4621 11.2747 10.2783 11.1525C10.0945 11.0302 10.0448 10.7817 10.167 10.5978C11.3724 8.78616 11.4094 6.42521 10.2793 4.57928L10.166 4.40252L10.1289 4.33123C10.059 4.15884 10.1174 3.9549 10.2783 3.84784Z"
        fill="currentColor"
      />
    </svg>
  );
}

With react-icons

import { RxSpeakerLoud } from "react-icons/rx";

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

speaker-loud.svg

<svg
  fill="none"
  viewBox="0 0 15 15"
  stroke="currentColor"
  fill="currentColor"
  stroke-width="0"
  width="1em"
  height="1em"
  xmlns="http://www.w3.org/2000/svg"
>
  <path
    d="M7.00195 1.06561C7.14436 0.984293 7.3197 0.977587 7.46973 1.05096C7.64126 1.13486 7.75 1.30922 7.75 1.50018V13.5002C7.75 13.6911 7.64126 13.8655 7.46973 13.9494C7.29823 14.0333 7.09409 14.0119 6.94336 13.8947L3.22168 11.0002H1.5C0.723336 11.0002 0.0846095 10.4099 0.0078125 9.6535L0 9.50018V5.50018C1.61064e-06 4.67175 0.671574 4.00018 1.5 4.00018H3.22168L6.94336 1.10565L7.00195 1.06561ZM12.1152 1.38397C12.2838 1.24147 12.536 1.26242 12.6787 1.43084L12.9473 1.76287C15.5508 5.13386 15.5507 9.86645 12.9473 13.2375L12.6787 13.5695L12.6201 13.6262C12.4739 13.7409 12.2627 13.741 12.1152 13.6164C11.9679 13.4915 11.9324 13.2824 12.0215 13.1193L12.0684 13.0529L12.3135 12.7492C14.6948 9.66597 14.6955 5.33554 12.3145 2.25213L12.0684 1.94744L12.0225 1.88104C11.933 1.71785 11.9677 1.50896 12.1152 1.38397ZM3.7002 4.89471C3.61243 4.96297 3.50377 5.00018 3.39258 5.00018H1.5C1.22386 5.00018 1 5.22404 1 5.50018V9.50018L1.00977 9.60077C1.05629 9.82873 1.25829 10.0002 1.5 10.0002H3.39258L3.47559 10.007C3.55692 10.0207 3.63442 10.0545 3.7002 10.1056L6.75 12.4777V2.52166L3.7002 4.89471ZM10.2783 3.84784C10.4391 3.74098 10.6493 3.76591 10.7812 3.89666L10.833 3.95916L10.9629 4.16229C12.2548 6.27291 12.2112 8.96969 10.833 11.0412C10.7106 11.2248 10.4621 11.2747 10.2783 11.1525C10.0945 11.0302 10.0448 10.7817 10.167 10.5978C11.3724 8.78616 11.4094 6.42521 10.2793 4.57928L10.166 4.40252L10.1289 4.33123C10.059 4.15884 10.1174 3.9549 10.2783 3.84784Z"
    fill="currentColor"
  />
</svg>

Attribution

"Speaker Loud" icon from Radix Icons (https://icons.radix-ui.com), licensed under MIT license.

Related icons: volume, sound, audio, mute

Similar Radix Icons icons