Options Speaker icon

Use the Options Speaker icon in React

Install Microsoft's @fluentui/react-icons package, then import the component. Icons inherit the current text color, and you can size them with CSS.

npm install @fluentui/react-icons

import { OptionsSpeaker24Regular, OptionsSpeaker24Filled } from "@fluentui/react-icons";

export function Example() {
  return <OptionsSpeaker24Regular aria-label="Options Speaker" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_options_speaker_24_regular.svg" width="24" height="24" alt="Options Speaker">

Or paste the SVG markup inline. Setting fill="currentColor" makes the icon follow the text color of its parent:

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18.6309 11.1758C18.948 10.9094 19.4211 10.9505 19.6875 11.2676C20.8185 12.6142 21.5009 14.3531 21.501 16.249C21.501 18.145 20.8185 19.8838 19.6875 21.2305C19.4211 21.5476 18.948 21.5886 18.6309 21.3223C18.3139 21.0559 18.2728 20.5827 18.5391 20.2656C19.4515 19.1791 20.001 17.7791 20.001 16.249C20.0009 14.7189 19.4515 13.319 18.5391 12.2324C18.2727 11.9153 18.3138 11.4422 18.6309 11.1758ZM12.7129 12.2197C13.1852 11.7479 13.9927 12.0824 13.9932 12.75V16.1533C13.9972 16.1847 14 16.2166 14 16.249C14 16.2811 13.9971 16.3127 13.9932 16.3438V19.751C13.9929 20.4189 13.1853 20.7533 12.7129 20.2812L10.4316 17.999H8.75C8.33582 17.999 8.00005 17.6632 8 17.249V16.999H2.75C2.33582 16.999 2.00005 16.6632 2 16.249C2 15.8348 2.33579 15.499 2.75 15.499H8V15.249C8 14.8348 8.33579 14.499 8.75 14.499H10.4346L12.7129 12.2197ZM15.8408 12.7568C16.1154 12.4468 16.5894 12.4179 16.8994 12.6924C17.8805 13.5615 18.501 14.8334 18.501 16.249C18.5009 17.6647 17.8805 18.9366 16.8994 19.8057C16.5894 20.0801 16.1154 20.0512 15.8408 19.7412C15.5664 19.4312 15.5954 18.9572 15.9053 18.6826C16.5785 18.0861 17.0009 17.2173 17.001 16.249C17.001 15.2807 16.5785 14.4119 15.9053 13.8154C15.5953 13.5408 15.5664 13.0669 15.8408 12.7568ZM8.75 3C10.2867 3 11.5735 4.06675 11.9121 5.5H21.25C21.6642 5.5 22 5.83579 22 6.25C22 6.66421 21.6642 7 21.25 7H11.9121C11.5735 8.43325 10.2867 9.5 8.75 9.5C7.21328 9.5 5.92655 8.43325 5.58789 7H2.75C2.33579 7 2 6.66421 2 6.25C2 5.83579 2.33579 5.5 2.75 5.5H5.58789C5.92655 4.06675 7.21328 3 8.75 3ZM8.75 4.5C7.7835 4.5 7 5.2835 7 6.25C7 7.2165 7.7835 8 8.75 8C9.7165 8 10.5 7.2165 10.5 6.25C10.5 5.2835 9.7165 4.5 8.75 4.5Z" fill="currentColor"/></svg>

Use it from the SVG package

Microsoft's @fluentui/svg-icons package contains the raw SVG files, which works well with bundlers that import SVGs:

npm install @fluentui/svg-icons

import icon from "@fluentui/svg-icons/icons/options_speaker_24_regular.svg";

Details