Slide Play icon

Use the Slide Play 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 { SlidePlay24Regular, SlidePlay24Filled } from "@fluentui/react-icons";

export function Example() {
  return <SlidePlay24Regular aria-label="Slide Play" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_slide_play_24_regular.svg" width="24" height="24" alt="Slide Play">

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="M4.75 4C3.23122 4 2 5.23122 2 6.75V17.25C2 18.7688 3.23122 20 4.75 20H11.4982C11.3004 19.5258 11.1572 19.0232 11.0764 18.5H4.75C4.05964 18.5 3.5 17.9404 3.5 17.25V6.75C3.5 6.05964 4.05964 5.5 4.75 5.5H19.25C19.9404 5.5 20.5 6.05964 20.5 6.75V11.7322C21.051 12.0194 21.5557 12.3832 22 12.8096V6.75C22 5.23122 20.7688 4 19.25 4H4.75ZM23 17.5C23 20.5376 20.5376 23 17.5 23C14.4624 23 12 20.5376 12 17.5C12 14.4624 14.4624 12 17.5 12C20.5376 12 23 14.4624 23 17.5ZM16 19.499C16 19.8982 16.4448 20.1365 16.7771 19.9152L19.779 17.9161C20.0761 17.7183 20.0762 17.2817 19.779 17.0838L16.7771 15.0848C16.4448 14.8635 16 15.1017 16 15.5009V19.499Z" 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/slide_play_24_regular.svg";

Details

Keywords

slidelandscapedocumentpresentationplay