Full Screen Minimize icon
Used in specific fullscreen scaling moments. Contains state variants (maximize & minimize. The Full Screen Minimize icon is part of Microsoft's Fluent UI System Icons, available here in filled and regular (outlined) styles on a 24 px grid. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.
Use the Full Screen Minimize 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 { FullScreenMinimize24Regular, FullScreenMinimize24Filled } from "@fluentui/react-icons";
export function Example() {
return <FullScreenMinimize24Regular aria-label="Full Screen Minimize" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_full_screen_minimize_24_regular.svg" width="24" height="24" alt="Full Screen Minimize"> 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="M8.5 3.75C8.5 3.33579 8.16421 3 7.75 3C7.33579 3 7 3.33579 7 3.75V6.25C7 6.66421 6.66421 7 6.25 7H3.75C3.33579 7 3 7.33579 3 7.75C3 8.16421 3.33579 8.5 3.75 8.5H6.25C7.49264 8.5 8.5 7.49264 8.5 6.25V3.75ZM8.5 20.25C8.5 20.6642 8.16421 21 7.75 21C7.33579 21 7 20.6642 7 20.25V17.75C7 17.3358 6.66421 17 6.25 17H3.75C3.33579 17 3 16.6642 3 16.25C3 15.8358 3.33579 15.5 3.75 15.5H6.25C7.49264 15.5 8.5 16.5074 8.5 17.75V20.25ZM16.25 3C15.8358 3 15.5 3.33579 15.5 3.75V6.25C15.5 7.49264 16.5074 8.5 17.75 8.5H20.25C20.6642 8.5 21 8.16421 21 7.75C21 7.33579 20.6642 7 20.25 7H17.75C17.3358 7 17 6.66421 17 6.25V3.75C17 3.33579 16.6642 3 16.25 3ZM15.5 20.25C15.5 20.6642 15.8358 21 16.25 21C16.6642 21 17 20.6642 17 20.25V17.75C17 17.3358 17.3358 17 17.75 17H20.25C20.6642 17 21 16.6642 21 16.25C21 15.8358 20.6642 15.5 20.25 15.5H17.75C16.5074 15.5 15.5 16.5074 15.5 17.75V20.25Z" 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/full_screen_minimize_24_regular.svg";Details
| Name | Full Screen Minimize |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_full_screen_minimize_24_regular.svg |
| Filled file | ic_fluent_full_screen_minimize_24_filled.svg |
| React components | FullScreenMinimize24Regular, FullScreenMinimize24Filled |
| License | MIT (© Microsoft Corporation) |