GIF icon

Use the GIF 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 { Gif24Regular, Gif24Filled } from "@fluentui/react-icons";

export function Example() {
  return <Gif24Regular aria-label="GIF" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_gif_24_regular.svg" width="24" height="24" alt="GIF">

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="M18.75 3.5C20.5449 3.5 22 4.95507 22 6.75V17.2526C22 19.0475 20.5449 20.5026 18.75 20.5026H5.25C3.45507 20.5026 2 19.0475 2 17.2526V6.75C2 4.95507 3.45507 3.5 5.25 3.5H18.75ZM18.75 5H5.25C4.2835 5 3.5 5.7835 3.5 6.75V17.2526C3.5 18.2191 4.2835 19.0026 5.25 19.0026H18.75C19.7165 19.0026 20.5 18.2191 20.5 17.2526V6.75C20.5 5.7835 19.7165 5 18.75 5ZM8.0146 8.87139C8.6115 8.87139 9.03353 8.95272 9.51677 9.18478C9.82793 9.33421 9.95904 9.70759 9.80962 10.0187C9.66019 10.3299 9.28682 10.461 8.97566 10.3116C8.67583 10.1676 8.43601 10.1214 8.0146 10.1214C7.14789 10.1214 6.51104 10.9178 6.51104 11.9938C6.51104 13.0708 7.14873 13.8697 8.0146 13.8697C8.44322 13.8697 8.80607 13.6899 8.99484 13.369L9.001 13.354V12.62L8.62522 12.6207C8.31142 12.6207 8.05164 12.3894 8.007 12.088L8.00022 11.9957C8.00022 11.6819 8.23148 11.4221 8.53286 11.3774L8.62522 11.3707H9.62682C9.94062 11.3707 10.2004 11.6019 10.245 11.9033L10.2518 11.9957L10.2505 13.5433L10.2441 13.5986L10.223 13.6885L10.2025 13.7437C9.82607 14.6338 8.96156 15.1197 8.0146 15.1197C6.38858 15.1197 5.26104 13.707 5.26104 11.9938C5.26104 10.2811 6.38839 8.87139 8.0146 8.87139ZM12.6289 8.99339C12.9427 8.99339 13.2025 9.22465 13.2472 9.52603L13.2539 9.61839V14.3805C13.2539 14.7257 12.9741 15.0055 12.6289 15.0055C12.3151 15.0055 12.0554 14.7743 12.0107 14.4729L12.0039 14.3805V9.61839C12.0039 9.27321 12.2838 8.99339 12.6289 8.99339ZM15.6248 8.99339L17.6222 9.00029C17.9673 9.00148 18.2462 9.28227 18.245 9.62745C18.2439 9.94124 18.0118 10.2002 17.7102 10.2438L17.6178 10.2503L16.247 10.245V11.999L17.37 11.9999C17.6838 11.9999 17.9436 12.2311 17.9882 12.5325L17.995 12.6249C17.995 12.9387 17.7637 13.1984 17.4624 13.2431L17.37 13.2499L16.247 13.249L16.2476 14.3644C16.2476 14.6782 16.0163 14.938 15.715 14.9827L15.6226 14.9894C15.3088 14.9894 15.049 14.7582 15.0044 14.4568L14.9976 14.3644V9.61623C14.9987 9.30244 15.2308 9.04345 15.5324 8.99985L15.6248 8.99339Z" 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/gif_24_regular.svg";

Details

Keywords

memeanimationpickerfunny