Fluent Icons

GIF icon

Used in gif picker moments. The GIF icon is part of Microsoft's Fluent UI System Icons, available here in regular and filled styles in 3 sizes from 16 to 24 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_gif_24_regular.svg

GIF icon in React

npm install @fluentui/react-icons

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

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

GIF icon in SVG

npm install @fluentui/svg-icons

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

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

GIF icon in Blazor

Microsoft's Fluent UI Blazor icons package:

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

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

GIF icon in Flutter

flutter pub add fluentui_system_icons

import 'package:fluentui_system_icons/fluentui_system_icons.dart';

Icon(FluentIcons.gif_24_regular)

GIF 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="&#xF454;" FontSize="24" />

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

GIF 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_gif_24_regular"></i>

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

GIF icon in Android

// build.gradle
implementation("com.microsoft.design:fluent-system-icons:1.1.341@aar")

<!-- layout XML -->
<ImageView android:src="@drawable/ic_fluent_gif_24_regular" />

// Kotlin
R.drawable.ic_fluent_gif_24_regular

GIF icon in iOS

# Podfile
pod "FluentIcons", "1.1.341"

import FluentIcons

UIImage(fluent: .gif24Regular)

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

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_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>

Details

NameGIF
StylesRegular (outlined), Filled
Sizes16 px, 20 px, 24 px
Regular (outlined) fileic_fluent_gif_24_regular.svg
Filled fileic_fluent_gif_24_filled.svg
React (Regular)Gif16Regular, Gif20Regular, Gif24Regular
React (Filled)Gif16Filled, Gif20Filled, Gif24Filled
LicenseMIT (© Microsoft Corporation)

Keywords

Related icons

Emoji MemeSlide TransitionSpinner iOSTable CursorTime And WeatherGestureGiftGavel ProhibitedGift CardGavelGift Card AddGauge Rotate 315