gif icon
gif-24-regular from Fluent UI System Icons by Microsoft Corporation · 24 Regular · MIT Free for personal and commercial use.
- Name
- gif-24-regular
- Set
- Fluent UI System Icons
- Style
- 24 Regular
- Viewbox
- 24×24
- License
- MIT
5 other variants in Fluent UI System Icons
The same icon in other sets
Use the gif icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M18.75 3.5A3.25 3.25 0 0 1 22 6.75v10.503a3.25 3.25 0 0 1-3.25 3.25H5.25A3.25 3.25 0 0 1 2 17.253V6.75A3.25 3.25 0 0 1 5.25 3.5zm0 1.5H5.25A1.75 1.75 0 0 0 3.5 6.75v10.503c0 .966.784 1.75 1.75 1.75h13.5a1.75 1.75 0 0 0 1.75-1.75V6.75A1.75 1.75 0 0 0 18.75 5M8.015 8.871c.596 0 1.019.082 1.502.314a.625.625 0 1 1-.541 1.127c-.3-.144-.54-.19-.961-.19c-.867 0-1.504.796-1.504 1.872s.638 1.876 1.504 1.876c.428 0 .791-.18.98-.501L9 13.354v-.734h-.376a.625.625 0 0 1-.618-.532L8 11.996c0-.314.231-.574.533-.619l.092-.006h1.002c.314 0 .573.23.618.532l.007.093l-.002 1.547l-.006.056l-.021.09l-.02.055c-.377.89-1.241 1.376-2.188 1.376c-1.626 0-2.754-1.413-2.754-3.126S6.388 8.87 8.015 8.87m4.614.122c.314 0 .574.232.618.533l.007.092v4.762a.625.625 0 0 1-1.243.093l-.007-.093v-4.76c0-.345.28-.625.625-.625m2.996 0L17.622 9a.625.625 0 0 1 .088 1.244l-.092.006l-1.371-.005v1.754h1.123c.314 0 .574.232.618.534l.007.092a.625.625 0 0 1-.533.618l-.092.007l-1.123-.001v1.115a.625.625 0 0 1-.532.619l-.092.006a.625.625 0 0 1-.619-.532l-.006-.093V9.616A.625.625 0 0 1 15.532 9z"/></svg>
React
import type { SVGProps } from "react";
export function FluentGif24Regular(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M18.75 3.5A3.25 3.25 0 0 1 22 6.75v10.503a3.25 3.25 0 0 1-3.25 3.25H5.25A3.25 3.25 0 0 1 2 17.253V6.75A3.25 3.25 0 0 1 5.25 3.5zm0 1.5H5.25A1.75 1.75 0 0 0 3.5 6.75v10.503c0 .966.784 1.75 1.75 1.75h13.5a1.75 1.75 0 0 0 1.75-1.75V6.75A1.75 1.75 0 0 0 18.75 5M8.015 8.871c.596 0 1.019.082 1.502.314a.625.625 0 1 1-.541 1.127c-.3-.144-.54-.19-.961-.19c-.867 0-1.504.796-1.504 1.872s.638 1.876 1.504 1.876c.428 0 .791-.18.98-.501L9 13.354v-.734h-.376a.625.625 0 0 1-.618-.532L8 11.996c0-.314.231-.574.533-.619l.092-.006h1.002c.314 0 .573.23.618.532l.007.093l-.002 1.547l-.006.056l-.021.09l-.02.055c-.377.89-1.241 1.376-2.188 1.376c-1.626 0-2.754-1.413-2.754-3.126S6.388 8.87 8.015 8.87m4.614.122c.314 0 .574.232.618.533l.007.092v4.762a.625.625 0 0 1-1.243.093l-.007-.093v-4.76c0-.345.28-.625.625-.625m2.996 0L17.622 9a.625.625 0 0 1 .088 1.244l-.092.006l-1.371-.005v1.754h1.123c.314 0 .574.232.618.534l.007.092a.625.625 0 0 1-.533.618l-.092.007l-1.123-.001v1.115a.625.625 0 0 1-.532.619l-.092.006a.625.625 0 0 1-.619-.532l-.006-.093V9.616A.625.625 0 0 1 15.532 9z"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M18.75 3.5A3.25 3.25 0 0 1 22 6.75v10.503a3.25 3.25 0 0 1-3.25 3.25H5.25A3.25 3.25 0 0 1 2 17.253V6.75A3.25 3.25 0 0 1 5.25 3.5zm0 1.5H5.25A1.75 1.75 0 0 0 3.5 6.75v10.503c0 .966.784 1.75 1.75 1.75h13.5a1.75 1.75 0 0 0 1.75-1.75V6.75A1.75 1.75 0 0 0 18.75 5M8.015 8.871c.596 0 1.019.082 1.502.314a.625.625 0 1 1-.541 1.127c-.3-.144-.54-.19-.961-.19c-.867 0-1.504.796-1.504 1.872s.638 1.876 1.504 1.876c.428 0 .791-.18.98-.501L9 13.354v-.734h-.376a.625.625 0 0 1-.618-.532L8 11.996c0-.314.231-.574.533-.619l.092-.006h1.002c.314 0 .573.23.618.532l.007.093l-.002 1.547l-.006.056l-.021.09l-.02.055c-.377.89-1.241 1.376-2.188 1.376c-1.626 0-2.754-1.413-2.754-3.126S6.388 8.87 8.015 8.87m4.614.122c.314 0 .574.232.618.533l.007.092v4.762a.625.625 0 0 1-1.243.093l-.007-.093v-4.76c0-.345.28-.625.625-.625m2.996 0L17.622 9a.625.625 0 0 1 .088 1.244l-.092.006l-1.371-.005v1.754h1.123c.314 0 .574.232.618.534l.007.092a.625.625 0 0 1-.533.618l-.092.007l-1.123-.001v1.115a.625.625 0 0 1-.532.619l-.092.006a.625.625 0 0 1-.619-.532l-.006-.093V9.616A.625.625 0 0 1 15.532 9z"/></svg> </template>
CSS
.icon-gif-24-regular {
width: 24px;
height: 24px;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M18.75%203.5A3.25%203.25%200%200%201%2022%206.75v10.503a3.25%203.25%200%200%201-3.25%203.25H5.25A3.25%203.25%200%200%201%202%2017.253V6.75A3.25%203.25%200%200%201%205.25%203.5zm0%201.5H5.25A1.75%201.75%200%200%200%203.5%206.75v10.503c0%20.966.784%201.75%201.75%201.75h13.5a1.75%201.75%200%200%200%201.75-1.75V6.75A1.75%201.75%200%200%200%2018.75%205M8.015%208.871c.596%200%201.019.082%201.502.314a.625.625%200%201%201-.541%201.127c-.3-.144-.54-.19-.961-.19c-.867%200-1.504.796-1.504%201.872s.638%201.876%201.504%201.876c.428%200%20.791-.18.98-.501L9%2013.354v-.734h-.376a.625.625%200%200%201-.618-.532L8%2011.996c0-.314.231-.574.533-.619l.092-.006h1.002c.314%200%20.573.23.618.532l.007.093l-.002%201.547l-.006.056l-.021.09l-.02.055c-.377.89-1.241%201.376-2.188%201.376c-1.626%200-2.754-1.413-2.754-3.126S6.388%208.87%208.015%208.87m4.614.122c.314%200%20.574.232.618.533l.007.092v4.762a.625.625%200%200%201-1.243.093l-.007-.093v-4.76c0-.345.28-.625.625-.625m2.996%200L17.622%209a.625.625%200%200%201%20.088%201.244l-.092.006l-1.371-.005v1.754h1.123c.314%200%20.574.232.618.534l.007.092a.625.625%200%200%201-.533.618l-.092.007l-1.123-.001v1.115a.625.625%200%200%201-.532.619l-.092.006a.625.625%200%200%201-.619-.532l-.006-.093V9.616A.625.625%200%200%201%2015.532%209z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M18.75%203.5A3.25%203.25%200%200%201%2022%206.75v10.503a3.25%203.25%200%200%201-3.25%203.25H5.25A3.25%203.25%200%200%201%202%2017.253V6.75A3.25%203.25%200%200%201%205.25%203.5zm0%201.5H5.25A1.75%201.75%200%200%200%203.5%206.75v10.503c0%20.966.784%201.75%201.75%201.75h13.5a1.75%201.75%200%200%200%201.75-1.75V6.75A1.75%201.75%200%200%200%2018.75%205M8.015%208.871c.596%200%201.019.082%201.502.314a.625.625%200%201%201-.541%201.127c-.3-.144-.54-.19-.961-.19c-.867%200-1.504.796-1.504%201.872s.638%201.876%201.504%201.876c.428%200%20.791-.18.98-.501L9%2013.354v-.734h-.376a.625.625%200%200%201-.618-.532L8%2011.996c0-.314.231-.574.533-.619l.092-.006h1.002c.314%200%20.573.23.618.532l.007.093l-.002%201.547l-.006.056l-.021.09l-.02.055c-.377.89-1.241%201.376-2.188%201.376c-1.626%200-2.754-1.413-2.754-3.126S6.388%208.87%208.015%208.87m4.614.122c.314%200%20.574.232.618.533l.007.092v4.762a.625.625%200%200%201-1.243.093l-.007-.093v-4.76c0-.345.28-.625.625-.625m2.996%200L17.622%209a.625.625%200%200%201%20.088%201.244l-.092.006l-1.371-.005v1.754h1.123c.314%200%20.574.232.618.534l.007.092a.625.625%200%200%201-.533.618l-.092.007l-1.123-.001v1.115a.625.625%200%200%201-.532.619l-.092.006a.625.625%200%200%201-.619-.532l-.006-.093V9.616A.625.625%200%200%201%2015.532%209z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/fluent/gif-24-regular.svg?color=%231a73e8&size=48
