Fluent Icons

Video Play Pause icon

Used in playback controls. Collection includes Fastforward, Rewind, Previous, Next, Stop, Pause. The Video Play Pause icon is part of Microsoft's Fluent UI System Icons, available here in regular and filled styles in 2 sizes from 20 to 24 px. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.

Regular (outlined)

SVG

Filled

SVG

Every size and style

Microsoft draws each size separately so icons stay crisp, rather than scaling one drawing. Pick a style and size to preview it, download it, or copy the code for your platform.

Regular, 24 px

ic_fluent_video_play_pause_24_regular.svg

Video Play Pause icon in React

npm install @fluentui/react-icons

import { VideoPlayPause24Regular } from "@fluentui/react-icons";

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

Video Play Pause icon in SVG

npm install @fluentui/svg-icons

import icon from "@fluentui/svg-icons/icons/video_play_pause_24_regular.svg";

<!-- or load it from a CDN -->
<img src="https://cdn.jsdelivr.net/npm/@fluentui/svg-icons@1.1.341/icons/video_play_pause_24_regular.svg" width="24" height="24" alt="Video Play Pause">

Video Play Pause icon in Blazor

Microsoft's Fluent UI Blazor icons package:

dotnet add package Microsoft.FluentUI.AspNetCore.Components.Icons

<FluentIcon Value="@(new Icons.Regular.Size24.VideoPlayPause())" />

Video Play Pause icon in Flutter

flutter pub add fluentui_system_icons

import 'package:fluentui_system_icons/fluentui_system_icons.dart';

Icon(FluentIcons.video_play_pause_24_regular)

Video Play Pause icon in WinUI / WPF

Add FluentSystemIcons-Regular.ttf from Microsoft's repository to your app, then use the glyph:

<!-- WinUI 3 (font in Assets/Fonts) -->
<FontIcon FontFamily="ms-appx:///Assets/Fonts/FluentSystemIcons-Regular.ttf#FluentSystemIcons-Regular" Glyph="&#xF857;" FontSize="24" />

<!-- WPF (font in Fonts/, Build Action: Resource) -->
<TextBlock FontFamily="pack://application:,,,/Fonts/#FluentSystemIcons-Regular" Text="&#xF857;" FontSize="24" />

Video Play Pause icon in Icon font

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/microsoft/fluentui-system-icons@9cf8af0f95a555918a60b8147a2f33a6a1248442/fonts/FluentSystemIcons-Regular.css">

<i class="icon-ic_fluent_video_play_pause_24_regular"></i>

/* or use the code point in your own CSS */
.icon::before {
  font-family: "FluentSystemIcons-Regular";
  content: "\f857";
  font-size: 24px;
}

Video Play Pause icon in Android

// build.gradle
implementation("com.microsoft.design:fluent-system-icons:1.1.341@aar")

<!-- layout XML -->
<ImageView android:src="@drawable/ic_fluent_video_play_pause_24_regular" />

// Kotlin
R.drawable.ic_fluent_video_play_pause_24_regular

Video Play Pause icon in iOS

# Podfile
pod "FluentIcons", "1.1.341"

import FluentIcons

UIImage(fluent: .videoPlayPause24Regular)

Video Play Pause icon in Power Apps

Paste into an Image control's Image property. The Copy button copies the full formula with this icon's SVG.

"data:image/svg+xml;utf8, " & EncodeUrl("<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'>…</svg>")

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" />;
}

Coding agents can look up this component through the Fluent Icons MCP server.

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>

Details

NameVideo Play Pause
StylesRegular (outlined), Filled
Sizes20 px, 24 px
Regular (outlined) fileic_fluent_video_play_pause_24_regular.svg
Filled fileic_fluent_video_play_pause_24_filled.svg
React (Regular)VideoPlayPause20Regular, VideoPlayPause24Regular
React (Filled)VideoPlayPause20Filled, VideoPlayPause24Filled
LicenseMIT (© Microsoft Corporation)

Keywords

controlplaybackstartbegin

Related icons

PlayPlay CirclePlay Circle SparklePlay SettingsPausePause CirclePause OffPause SettingsArrow Repeat 1Arrow ShuffleArrow Shuffle OffFilmstrip Play