Video Play Pause icon

Use the Video Play Pause 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 { VideoPlayPause24Regular, VideoPlayPause24Filled } from "@fluentui/react-icons";

export function Example() {
  return <VideoPlayPause24Regular aria-label="Video Play Pause" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_video_play_pause_24_regular.svg" width="24" height="24" alt="Video Play Pause">

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="M12 7.75C12 6.7835 12.7835 6 13.75 6H15.25C16.2165 6 17 6.7835 17 7.75V16.25C17 17.2165 16.2165 18 15.25 18H13.75C12.7835 18 12 17.2165 12 16.25V12.1198C11.9757 12.6708 11.6956 13.2117 11.1607 13.5368L4.65892 17.4886C3.4927 18.1974 2 17.3578 2 15.9931V8.00436C2 6.63216 3.50737 5.79381 4.67313 6.51765L11.1749 10.5547C11.7012 10.8815 11.9759 11.4174 12 11.9626V7.75ZM13.75 7.5C13.6119 7.5 13.5 7.61193 13.5 7.75V16.25C13.5 16.3881 13.6119 16.5 13.75 16.5H15.25C15.3881 16.5 15.5 16.3881 15.5 16.25V7.75C15.5 7.61193 15.3881 7.5 15.25 7.5H13.75ZM18 7.75C18 6.7835 18.7835 6 19.75 6H21.25C22.2165 6 23 6.7835 23 7.75V16.25C23 17.2165 22.2165 18 21.25 18H19.75C18.7835 18 18 17.2165 18 16.25V7.75ZM19.75 7.5C19.6119 7.5 19.5 7.61193 19.5 7.75V16.25C19.5 16.3881 19.6119 16.5 19.75 16.5H21.25C21.3881 16.5 21.5 16.3881 21.5 16.25V7.75C21.5 7.61193 21.3881 7.5 21.25 7.5H19.75ZM3.5 8.00436V15.9931C3.5 16.1881 3.71324 16.308 3.87985 16.2067L10.3816 12.255C10.5409 12.1582 10.542 11.9274 10.3836 11.829L3.88188 7.79198C3.71534 7.68857 3.5 7.80834 3.5 8.00436Z" 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/video_play_pause_24_regular.svg";

Details

Keywords

controlplaybackstartbegin