Filmstrip Play icon

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

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>

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

Details

Keywords

movievideoplayclipedit