Tablet Speaker icon

Use the Tablet 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 { TabletSpeaker24Regular, TabletSpeaker24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_tablet_speaker_24_regular.svg" width="24" height="24" alt="Tablet 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 3.30165C21.815 2.75475 21.4783 2.38063 21.2302 2.17385C20.912 1.90868 20.4391 1.95167 20.1739 2.26988C19.9087 2.58809 19.9517 3.06101 20.2699 3.32618C20.3968 3.4319 20.6226 3.68278 20.8569 4.07339C21.2583 4.74241 21.5 5.5481 21.5 6.50002C21.5 7.45193 21.2583 8.25763 20.8569 8.92665C20.6226 9.31725 20.3968 9.56813 20.2699 9.67385C19.9517 9.93903 19.9087 10.4119 20.1739 10.7302C20.4391 11.0484 20.912 11.0914 21.2302 10.8262C21.4783 10.6194 21.815 10.2453 22.1432 9.69839C22.6793 8.80491 23 7.7356 23 6.50002C23 5.26443 22.6793 4.19513 22.1432 3.30165Z" fill="currentColor"/>
<path d="M19.8741 4.39649C19.635 4.03782 19.3885 3.79138 19.2 3.65002C18.8687 3.40149 18.3986 3.46865 18.15 3.80002C17.9015 4.13139 17.9687 4.60149 18.3 4.85002C18.3616 4.89616 18.4901 5.02471 18.626 5.22854C18.86 5.57951 19 5.99969 19 6.50002C19 7.00035 18.86 7.42053 18.626 7.77149C18.4901 7.97532 18.3616 8.10388 18.3 8.15002L18.2163 8.22302C17.9591 8.48287 17.9241 8.89877 18.15 9.20002C18.3986 9.53139 18.8687 9.59855 19.2 9.35002C19.3885 9.20866 19.635 8.96221 19.8741 8.60354C20.2651 8.01701 20.5 7.31219 20.5 6.50002C20.5 5.68785 20.2651 4.98303 19.8741 4.39649Z" fill="currentColor"/>
<path d="M17 3.75003C17 3.43758 16.8063 3.15786 16.5138 3.04796C16.2213 2.93806 15.8913 3.02101 15.6856 3.25616L14.1597 5.00003H12.75C12.3358 5.00003 12 5.33582 12 5.75003V7.25003C12 7.66425 12.3358 8.00003 12.75 8.00003H14.1597L15.6856 9.74391C15.8913 9.97906 16.2213 10.062 16.5138 9.95211C16.8063 9.84221 17 9.56249 17 9.25003V3.75003Z" fill="currentColor"/>
<path d="M4.25 3.99951L12 3.99979C11.4477 3.99979 11 4.4475 11 4.99979V5.49951H4.25C3.83579 5.49951 3.5 5.8353 3.5 6.24951V17.7518C3.5 18.166 3.83579 18.5018 4.25 18.5018H19.7488C20.163 18.5018 20.4988 18.166 20.4988 17.7518V11.9819C20.973 12.0506 21.4733 11.9253 21.8703 11.5944C21.9124 11.5594 21.9553 11.5218 21.9988 11.4817V17.7518C21.9988 18.9944 20.9915 20.0018 19.7488 20.0018H4.25C3.00736 20.0018 2 18.9944 2 17.7518V6.24951C2 5.00687 3.00736 3.99951 4.25 3.99951Z" fill="currentColor"/>
<path d="M13.75 15.5C14.1642 15.5 14.5 15.8357 14.5 16.25C14.5 16.6296 14.2178 16.9434 13.8518 16.9931L13.75 17H10.25C9.83579 17 9.5 16.6642 9.5 16.25C9.5 15.8703 9.78215 15.5565 10.1482 15.5068L10.25 15.5H13.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/tablet_speaker_24_regular.svg";

Details

Keywords

devicescreenphysicalanalogwatchviewvideocomputerpc