Phone Speaker icon

Use the Phone 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 { PhoneSpeaker24Regular, PhoneSpeaker24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_phone_speaker_24_regular.svg" width="24" height="24" alt="Phone 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="M13.75 2C14.9926 2 16 3.00736 16 4.25V12.9234C15.6318 12.9743 15.2705 13.1469 14.9733 13.4639L14.5 13.9687V4.25C14.5 3.83579 14.1642 3.5 13.75 3.5H6.25C5.83579 3.5 5.5 3.83579 5.5 4.25V19.75C5.5 20.1642 5.83579 20.5 6.25 20.5H13.75C13.827 20.5 13.9013 20.4884 13.9713 20.4668L14.9733 21.5356C14.9934 21.557 15.0137 21.5777 15.0342 21.5977C14.6701 21.8513 14.2274 22 13.75 22H6.25C5.00736 22 4 20.9926 4 19.75V4.25C4 3.00736 5.00736 2 6.25 2H13.75ZM8.74887 17.5038L11 17.5004V19.0004L8.75113 19.0038C8.33692 19.0044 8.00062 18.6691 8 18.2549C7.99938 17.8407 8.33466 17.5044 8.74887 17.5038ZM22.1432 14.3016C21.815 13.7548 21.4783 13.3806 21.2302 13.1739C20.912 12.9087 20.4391 12.9517 20.1739 13.2699C19.9087 13.5881 19.9517 14.061 20.2699 14.3262C20.3968 14.4319 20.6226 14.6828 20.8569 15.0734C21.2583 15.7424 21.5 16.5481 21.5 17.5C21.5 18.4519 21.2583 19.2576 20.8569 19.9266C20.6226 20.3173 20.3968 20.5681 20.2699 20.6739C19.9517 20.939 19.9087 21.4119 20.1739 21.7302C20.4391 22.0484 20.912 22.0914 21.2302 21.8262C21.4783 21.6194 21.815 21.2453 22.1432 20.6984C22.6793 19.8049 23 18.7356 23 17.5C23 16.2644 22.6793 15.1951 22.1432 14.3016ZM19.8741 15.3965C19.635 15.0378 19.3885 14.7914 19.2 14.65C18.8687 14.4015 18.3986 14.4686 18.15 14.8C17.9015 15.1314 17.9687 15.6015 18.3 15.85C18.3616 15.8962 18.4901 16.0247 18.626 16.2285C18.86 16.5795 19 16.9997 19 17.5C19 18.0003 18.86 18.4205 18.626 18.7715C18.4901 18.9753 18.3616 19.1039 18.3 19.15L18.2163 19.223C17.9591 19.4829 17.9241 19.8988 18.15 20.2C18.3986 20.5314 18.8687 20.5985 19.2 20.35C19.3885 20.2087 19.635 19.9622 19.8741 19.6035C20.2651 19.017 20.5 18.3122 20.5 17.5C20.5 16.6878 20.2651 15.983 19.8741 15.3965ZM17 14.75C17 14.4376 16.8063 14.1579 16.5138 14.048C16.2213 13.9381 15.8913 14.021 15.6856 14.2562L14.1597 16H12.75C12.3358 16 12 16.3358 12 16.75V18.25C12 18.6642 12.3358 19 12.75 19H14.1597L15.6856 20.7439C15.8913 20.9791 16.2213 21.062 16.5138 20.9521C16.8063 20.8422 17 20.5625 17 20.25V14.75Z" 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/phone_speaker_24_regular.svg";

Details

Keywords

devicemobilesmallscreencellulartelephoneappleandroidaudiosoundvolume