Filmstrip Arrow Up icon

The Filmstrip Arrow Up 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_arrow_up_24_regular.svg

Filmstrip Arrow Up icon in React

npm install @fluentui/react-icons

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

export function Example() {
  return <FilmstripArrowUp24Regular aria-label="Filmstrip Arrow Up" />;
}

Filmstrip Arrow Up icon in SVG

npm install @fluentui/svg-icons

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

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

Filmstrip Arrow Up icon in Blazor

Microsoft's Fluent UI Blazor icons package:

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

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

Filmstrip Arrow Up 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="&#xF0CE1;" FontSize="24" />

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

Filmstrip Arrow Up 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_arrow_up_24_regular"></i>

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

Filmstrip Arrow Up 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_arrow_up_24_regular" />

// Kotlin
R.drawable.ic_fluent_filmstrip_arrow_up_24_regular

Filmstrip Arrow Up icon in iOS

# Podfile
pod "FluentIcons", "1.1.341"

import FluentIcons

UIImage(fluent: .filmstripArrowUp24Regular)

Filmstrip Arrow Up 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 Arrow Up 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 { FilmstripArrowUp24Regular, FilmstripArrowUp24Filled } from "@fluentui/react-icons";

export function Example() {
  return <FilmstripArrowUp24Regular aria-label="Filmstrip Arrow Up" />;
}

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_arrow_up_24_regular.svg" width="24" height="24" alt="Filmstrip Arrow Up">

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="M17.5 12C20.5376 12 23 14.4624 23 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 12ZM17.8535 14.1465C17.6583 13.9512 17.3417 13.9512 17.1465 14.1465L14.6465 16.6465C14.4512 16.8417 14.4512 17.1583 14.6465 17.3535C14.8417 17.5488 15.1583 17.5488 15.3535 17.3535L17 15.707V20.5C17 20.7761 17.2239 21 17.5 21C17.7761 21 18 20.7761 18 20.5V15.707L19.6465 17.3535C19.8417 17.5488 20.1583 17.5488 20.3535 17.3535C20.5488 17.1583 20.5488 16.8417 20.3535 16.6465L17.8535 14.1465ZM18.75 4C20.5449 4 22 5.45507 22 7.25V12.8115C21.5556 12.3849 21.0512 12.0208 20.5 11.7334V7.25C20.5 6.2835 19.7165 5.5 18.75 5.5H5.25C4.2835 5.5 3.5 6.2835 3.5 7.25V16.75C3.5 17.7165 4.2835 18.5 5.25 18.5H11.0771C11.158 19.0233 11.3012 19.5258 11.499 20H5.25C3.45507 20 2 18.5449 2 16.75V7.25C2 5.45507 3.45507 4 5.25 4H18.75ZM5.75 15C6.16421 15 6.5 15.3358 6.5 15.75V16.25C6.5 16.6642 6.16421 17 5.75 17C5.33579 17 5 16.6642 5 16.25V15.75C5 15.3358 5.33579 15 5.75 15ZM5.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.75C5 11.3358 5.33579 11 5.75 11ZM5.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.75C5 7.33579 5.33579 7 5.75 7ZM18.25 7C18.6642 7 19 7.33579 19 7.75V8.25C19 8.66421 18.6642 9 18.25 9C17.8358 9 17.5 8.66421 17.5 8.25V7.75C17.5 7.33579 17.8358 7 18.25 7Z" fill="currentColor"/></svg>

Details

NameFilmstrip Arrow Up
StylesRegular (outlined), Filled
Sizes16 px, 20 px, 24 px, 32 px
Regular (outlined) fileic_fluent_filmstrip_arrow_up_24_regular.svg
Filled fileic_fluent_filmstrip_arrow_up_24_filled.svg
React (Regular)FilmstripArrowUp16Regular, FilmstripArrowUp20Regular, FilmstripArrowUp24Regular, FilmstripArrowUp32Regular
React (Filled)FilmstripArrowUp16Filled, FilmstripArrowUp20Filled, FilmstripArrowUp24Filled, FilmstripArrowUp32Filled
LicenseMIT (© Microsoft Corporation)

Related icons