Desktop Speaker icon

Use the Desktop 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 { DesktopSpeaker24Regular, DesktopSpeaker24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_desktop_speaker_24_regular.svg" width="24" height="24" alt="Desktop 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="M22.1432 2.30165C21.815 1.75475 21.4783 1.38063 21.2302 1.17385C20.912 0.90868 20.4391 0.951673 20.1739 1.26988C19.9087 1.58809 19.9517 2.06101 20.2699 2.32618C20.3968 2.4319 20.6226 2.68278 20.8569 3.07339C21.2583 3.74241 21.5 4.5481 21.5 5.50002C21.5 6.45193 21.2583 7.25763 20.8569 7.92665C20.6226 8.31725 20.3968 8.56813 20.2699 8.67385C19.9517 8.93903 19.9087 9.41195 20.1739 9.73016C20.4391 10.0484 20.912 10.0914 21.2302 9.82619C21.4783 9.6194 21.815 9.24528 22.1432 8.69839C22.6793 7.80491 23 6.7356 23 5.50002C23 4.26443 22.6793 3.19513 22.1432 2.30165ZM19.8741 3.39649C19.635 3.03782 19.3885 2.79138 19.2 2.65002C18.8687 2.40149 18.3986 2.46865 18.15 2.80002C17.9015 3.13139 17.9687 3.60149 18.3 3.85002C18.3616 3.89616 18.4901 4.02471 18.626 4.22854C18.86 4.57951 19 4.99969 19 5.50002C19 6.00035 18.86 6.42053 18.626 6.77149C18.4901 6.97532 18.3616 7.10388 18.3 7.15002L18.2163 7.22302C17.9591 7.48287 17.9241 7.89877 18.15 8.20002C18.3986 8.53139 18.8687 8.59855 19.2 8.35002C19.3885 8.20866 19.635 7.96221 19.8741 7.60354C20.2651 7.01701 20.5 6.31219 20.5 5.50002C20.5 4.68785 20.2651 3.98303 19.8741 3.39649ZM17 2.75003C17 2.43758 16.8063 2.15786 16.5138 2.04796C16.2213 1.93806 15.8913 2.02101 15.6856 2.25616L14.1597 4.00003H12.75C12.3358 4.00003 12 4.33582 12 4.75003V6.25003C12 6.66425 12.3358 7.00003 12.75 7.00003H14.1597L15.6856 8.74391C15.8913 8.97906 16.2213 9.06201 16.5138 8.95211C16.8063 8.84221 17 8.56249 17 8.25003V2.75003ZM4.25 3H11.9791C11.4365 3.01111 11 3.45447 11 3.99979V4.5H4.25C3.8703 4.5 3.55651 4.78215 3.50685 5.14823L3.5 5.25V15.7523C3.5 16.132 3.78215 16.4458 4.14823 16.4954L4.25 16.5023H19.7488C20.1285 16.5023 20.4423 16.2201 20.492 15.854L20.4988 15.7523V10.9819C20.973 11.0506 21.4733 10.9253 21.8703 10.5944C21.9124 10.5594 21.9553 10.5218 21.9988 10.4817V15.7523C21.9988 16.9431 21.0737 17.9179 19.9029 17.9971L19.7488 18.0023L15.499 18.002V20.5L17.25 20.5004C17.6642 20.5004 18 20.8362 18 21.2504C18 21.6301 17.7178 21.9439 17.3518 21.9936L17.25 22.0004H6.75C6.33579 22.0004 6 21.6647 6 21.2504C6 20.8707 6.28215 20.5569 6.64823 20.5073L6.75 20.5004L8.499 20.5V18.002L4.25 18.0023C3.05914 18.0023 2.08436 17.0771 2.00519 15.9063L2 15.7523V5.25C2 4.05914 2.92516 3.08436 4.09595 3.00519L4.25 3ZM13.998 18.002H9.998L9.999 20.5004H13.999L13.998 18.002Z" 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/desktop_speaker_24_regular.svg";

Details

Keywords

monitorofficetowerpclargescreen