Fluent Icons

Filmstrip Play icon

Used to represent video playlist in editing & general media scenarios. The Filmstrip Play icon is part of Microsoft's Fluent UI System Icons, available here in regular and filled styles in 4 sizes from 16 to 32 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_filmstrip_play_24_regular.svg

Filmstrip Play icon in React

npm install @fluentui/react-icons

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

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

Filmstrip Play icon in SVG

npm install @fluentui/svg-icons

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

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

Filmstrip Play icon in Blazor

Microsoft's Fluent UI Blazor icons package:

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

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

Filmstrip Play icon in Flutter

flutter pub add fluentui_system_icons

import 'package:fluentui_system_icons/fluentui_system_icons.dart';

Icon(FluentIcons.filmstrip_play_24_regular)

Filmstrip Play 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="&#xF003A;" FontSize="24" />

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

Filmstrip Play 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_filmstrip_play_24_regular"></i>

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

Filmstrip Play icon in Android

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

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

// Kotlin
R.drawable.ic_fluent_filmstrip_play_24_regular

Filmstrip Play icon in iOS

# Podfile
pod "FluentIcons", "1.1.341"

import FluentIcons

UIImage(fluent: .filmstripPlay24Regular)

Filmstrip Play 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 Filmstrip 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 { FilmstripPlay24Regular, FilmstripPlay24Filled } from "@fluentui/react-icons";

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

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_filmstrip_play_24_regular.svg" width="24" height="24" alt="Filmstrip 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="M5.25 4C3.45507 4 2 5.45507 2 7.25V16.75C2 18.5449 3.45507 20 5.25 20H18.75C20.5449 20 22 18.5449 22 16.75V7.25C22 5.45507 20.5449 4 18.75 4H5.25ZM3.5 7.25C3.5 6.2835 4.2835 5.5 5.25 5.5H18.75C19.7165 5.5 20.5 6.2835 20.5 7.25V16.75C20.5 17.7165 19.7165 18.5 18.75 18.5H5.25C4.2835 18.5 3.5 17.7165 3.5 16.75V7.25ZM18.25 7C17.8358 7 17.5 7.33579 17.5 7.75V8.25C17.5 8.66421 17.8358 9 18.25 9C18.6642 9 19 8.66421 19 8.25V7.75C19 7.33579 18.6642 7 18.25 7ZM17.5 15.75C17.5 15.3358 17.8358 15 18.25 15C18.6642 15 19 15.3358 19 15.75V16.25C19 16.6642 18.6642 17 18.25 17C17.8358 17 17.5 16.6642 17.5 16.25V15.75ZM18.25 11C17.8358 11 17.5 11.3358 17.5 11.75V12.25C17.5 12.6642 17.8358 13 18.25 13C18.6642 13 19 12.6642 19 12.25V11.75C19 11.3358 18.6642 11 18.25 11ZM5 7.75C5 7.33579 5.33579 7 5.75 7C6.16421 7 6.5 7.33579 6.5 7.75V8.25C6.5 8.66421 6.16421 9 5.75 9C5.33579 9 5 8.66421 5 8.25V7.75ZM5.75 15C5.33579 15 5 15.3358 5 15.75V16.25C5 16.6642 5.33579 17 5.75 17C6.16421 17 6.5 16.6642 6.5 16.25V15.75C6.5 15.3358 6.16421 15 5.75 15ZM5 11.75C5 11.3358 5.33579 11 5.75 11C6.16421 11 6.5 11.3358 6.5 11.75V12.25C6.5 12.6642 6.16421 13 5.75 13C5.33579 13 5 12.6642 5 12.25V11.75ZM10 9.75123C10 9.17203 10.5761 8.81137 11.0345 9.10362L14.7089 11.4466C15.097 11.6941 15.097 12.306 14.7089 12.5534L11.0344 14.8964C10.5761 15.1886 10 14.828 10 14.2488V9.75123Z" fill="currentColor"/></svg>

Details

NameFilmstrip Play
StylesRegular (outlined), Filled
Sizes16 px, 20 px, 24 px, 32 px
Regular (outlined) fileic_fluent_filmstrip_play_24_regular.svg
Filled fileic_fluent_filmstrip_play_24_filled.svg
React (Regular)FilmstripPlay16Regular, FilmstripPlay20Regular, FilmstripPlay24Regular, FilmstripPlay32Regular
React (Filled)FilmstripPlay16Filled, FilmstripPlay20Filled, FilmstripPlay24Filled, FilmstripPlay32Filled
LicenseMIT (© Microsoft Corporation)

Keywords

videoplayclipedit

Related icons

FilmstripFilmstrip OffFilmstrip SplitPlay Circle HintFilmstrip ImageCalendar PlayPlay MultipleSlide PlayDrawer PlayFilmstrip Arrow UpFilmstrip GlobeFilmstrip Music Note 2