Presenter icon
Used to represent presenter in digital and physical meeting & lecture scenarios. The Presenter icon is part of Microsoft's Fluent UI System Icons, available here in filled and regular (outlined) styles on a 24 px grid. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.
Use the Presenter 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 { Presenter24Regular, Presenter24Filled } from "@fluentui/react-icons";
export function Example() {
return <Presenter24Regular aria-label="Presenter" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_presenter_24_regular.svg" width="24" height="24" alt="Presenter"> 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="M20.25 12C20.5583 12 20.8355 12.1887 20.9482 12.4756C21.0609 12.7626 20.9867 13.0899 20.7607 13.2998L16 17.7197V19.75C16 20.9926 14.9926 22 13.75 22H10.25C9.00742 21.9999 7.99997 20.9926 7.99997 19.75V17.7197L3.23921 13.2998C3.01341 13.09 2.93907 12.7625 3.05171 12.4756C3.16447 12.1887 3.4417 12.0001 3.74996 12H20.25ZM9.26071 16.8428C9.41347 16.9847 9.49997 17.1841 9.49997 17.3926V19.75C9.49997 20.1641 9.83585 20.4999 10.25 20.5H13.75C14.1642 20.5 14.5 20.1642 14.5 19.75V17.3926C14.5 17.1841 14.5866 16.9847 14.7392 16.8428L18.3398 13.5H5.66012L9.26071 16.8428ZM14.251 9C15.4091 9 16.3619 9.87507 16.4863 11H14.9551C14.8518 10.7093 14.5771 10.5 14.251 10.5H9.75095C9.42486 10.5001 9.15007 10.7093 9.04685 11H7.51559C7.63999 9.87513 8.59293 9.0001 9.75095 9H14.251ZM12 2C13.6568 2 15 3.34315 15 5C15 6.65685 13.6568 8 12 8C10.3432 7.99989 8.99997 6.65679 8.99997 5C8.99997 3.34321 10.3432 2.00011 12 2ZM12 3.5C11.1716 3.50011 10.5 4.17164 10.5 5C10.5 5.82836 11.1716 6.49989 12 6.5C12.8284 6.5 13.5 5.82843 13.5 5C13.5 4.17157 12.8284 3.5 12 3.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/presenter_24_regular.svg";Details
| Name | Presenter |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_presenter_24_regular.svg |
| Filled file | ic_fluent_presenter_24_filled.svg |
| React components | Presenter24Regular, Presenter24Filled |
| License | MIT (© Microsoft Corporation) |