Filmstrip Image icon

Use the Filmstrip Image 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 { FilmstripImage24Regular, FilmstripImage24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_filmstrip_image_24_regular.svg" width="24" height="24" alt="Filmstrip Image">

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="M2 5.25C2 3.45507 3.45507 2 5.25 2H14.75C16.5449 2 18 3.45507 18 5.25V8H16.5V5.25C16.5 4.2835 15.7165 3.5 14.75 3.5H5.25C4.2835 3.5 3.5 4.2835 3.5 5.25V12.75C3.5 13.7165 4.2835 14.5 5.25 14.5H8V16H5.25C3.45507 16 2 14.5449 2 12.75V5.25ZM19 13.25C19 13.9404 18.4404 14.5 17.75 14.5C17.0596 14.5 16.5 13.9404 16.5 13.25C16.5 12.5596 17.0596 12 17.75 12C18.4404 12 19 12.5596 19 13.25ZM9 12.25C9 10.4551 10.4551 9 12.25 9H18.75C20.5449 9 22 10.4551 22 12.25V18.75C22 20.5449 20.5449 22 18.75 22H12.25C10.4551 22 9 20.5449 9 18.75V12.25ZM12.25 10.5C11.2835 10.5 10.5 11.2835 10.5 12.25V18.75C10.5 18.9393 10.5301 19.1216 10.5856 19.2923L13.98 16.1069C14.845 15.2977 16.1892 15.2977 17.0542 16.1069L20.4246 19.2598C20.4736 19.0985 20.5 18.9273 20.5 18.75V12.25C20.5 11.2835 19.7165 10.5 18.75 10.5H12.25ZM12.25 20.5H18.75C18.9854 20.5 19.2099 20.4535 19.4149 20.3693L16.0295 17.2023C15.7411 16.9326 15.2931 16.9326 15.0047 17.2023L11.6167 20.3819C11.8131 20.4582 12.0267 20.5 12.25 20.5ZM5.75 5C6.16421 5 6.5 5.33579 6.5 5.75V6.25C6.5 6.66421 6.16421 7 5.75 7C5.33579 7 5 6.66421 5 6.25V5.75C5 5.33579 5.33579 5 5.75 5ZM6.5 8.75C6.5 8.33579 6.16421 8 5.75 8C5.33579 8 5 8.33579 5 8.75V9.25C5 9.66421 5.33579 10 5.75 10C6.16421 10 6.5 9.66421 6.5 9.25V8.75ZM14.25 5C14.6642 5 15 5.33579 15 5.75V6.25C15 6.66421 14.6642 7 14.25 7C13.8358 7 13.5 6.66421 13.5 6.25V5.75C13.5 5.33579 13.8358 5 14.25 5ZM6.5 11.75C6.5 11.3358 6.16421 11 5.75 11C5.33579 11 5 11.3358 5 11.75V12.25C5 12.6642 5.33579 13 5.75 13C6.16421 13 6.5 12.6642 6.5 12.25V11.75Z" 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_image_24_regular.svg";

Details

Keywords

mediamoviecontentassetsvideoimagepicture