Filmstrip Arrow Up icon

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

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>

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/filmstrip_arrow_up_24_regular.svg";

Details