Dual Screen Speaker icon

Use the Dual Screen 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 { DualScreenSpeaker24Regular, DualScreenSpeaker24Filled } from "@fluentui/react-icons";

export function Example() {
  return <DualScreenSpeaker24Regular aria-label="Dual Screen Speaker" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_dual_screen_speaker_24_regular.svg" width="24" height="24" alt="Dual Screen 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.1437 3.30165C21.8155 2.75475 21.4788 2.38063 21.2307 2.17385C20.9125 1.90868 20.4395 1.95167 20.1744 2.26988C19.9092 2.58809 19.9522 3.06101 20.2704 3.32618C20.3973 3.4319 20.623 3.68278 20.8574 4.07339C21.2588 4.74241 21.5005 5.5481 21.5005 6.50002C21.5005 7.45193 21.2588 8.25763 20.8574 8.92665C20.623 9.31725 20.3973 9.56813 20.2704 9.67385C19.9522 9.93903 19.9092 10.4119 20.1744 10.7302C20.4395 11.0484 20.9125 11.0914 21.2307 10.8262C21.4788 10.6194 21.8155 10.2453 22.1437 9.69839C22.6797 8.80491 23.0005 7.7356 23.0005 6.50002C23.0005 5.26443 22.6797 4.19513 22.1437 3.30165Z" fill="currentColor"/>
<path d="M19.8746 4.39649C19.6355 4.03782 19.389 3.79138 19.2005 3.65002C18.8692 3.40149 18.3991 3.46865 18.1505 3.80002C17.902 4.13139 17.9692 4.60149 18.3005 4.85002C18.3621 4.89616 18.4906 5.02471 18.6265 5.22854C18.8605 5.57951 19.0005 5.99969 19.0005 6.50002C19.0005 7.00035 18.8605 7.42053 18.6265 7.77149C18.4906 7.97532 18.3621 8.10388 18.3005 8.15002L18.2167 8.22302C17.9596 8.48287 17.9246 8.89877 18.1505 9.20002C18.3991 9.53139 18.8692 9.59855 19.2005 9.35002C19.389 9.20866 19.6355 8.96221 19.8746 8.60354C20.2656 8.01701 20.5005 7.31219 20.5005 6.50002C20.5005 5.68785 20.2656 4.98303 19.8746 4.39649Z" fill="currentColor"/>
<path d="M17.0005 3.75003C17.0005 3.43758 16.8068 3.15786 16.5143 3.04796C16.2218 2.93806 15.8918 3.02101 15.6861 3.25616L14.1602 5.00003H12.7505C12.3363 5.00003 12.0005 5.33582 12.0005 5.75003V7.25003C12.0005 7.66425 12.3363 8.00003 12.7505 8.00003H14.1602L15.6861 9.74391C15.8918 9.97906 16.2218 10.062 16.5143 9.95211C16.8068 9.84221 17.0005 9.56249 17.0005 9.25003V3.75003Z" fill="currentColor"/>
<path d="M11.9513 4.00098H3.75781C2.79131 4.00098 2.00781 4.78448 2.00781 5.75098V18.2461C2.00781 19.2126 2.79131 19.9961 3.75781 19.9961L11.2548 19.996L11.2554 19.9985H20.253C21.2195 19.9985 22.003 19.215 22.003 18.2485V11.4784C21.9581 11.5197 21.914 11.5584 21.8708 11.5944C21.4748 11.9245 20.9761 12.0499 20.503 11.9825V18.2485C20.503 18.3866 20.391 18.4985 20.253 18.4985H12.7554V8.99979H12.0005C11.7045 8.99979 11.4385 8.87116 11.2554 8.66675V18.4961H3.75781C3.61974 18.4961 3.50781 18.3842 3.50781 18.2461V5.75098C3.50781 5.61291 3.61974 5.50098 3.75781 5.50098H11.0005V4.99979C11.0005 4.464 11.4218 4.02663 11.9513 4.00098Z" fill="currentColor"/>
<path d="M16.2465 15.4998H14.7465L14.6448 15.5066C14.2787 15.5563 13.9965 15.8701 13.9965 16.2498C13.9965 16.664 14.3323 16.9998 14.7465 16.9998H16.2465L16.3483 16.9929C16.7144 16.9432 16.9965 16.6295 16.9965 16.2498C16.9965 15.8355 16.6608 15.4998 16.2465 15.4998Z" fill="currentColor"/>
<path d="M7.74901 15.4998H9.2507C9.66492 15.4998 10.0007 15.8355 10.0007 16.2498C10.0007 16.6295 9.71855 16.9432 9.35247 16.9929L9.2507 16.9998H7.74901C7.33479 16.9998 6.99901 16.664 6.99901 16.2498C6.99901 15.8701 7.28116 15.5563 7.64724 15.5066L7.74901 15.4998Z" 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/dual_screen_speaker_24_regular.svg";

Details

Keywords

duoopendoublescreenfoldable