Window Apps icon

Use the Window Apps 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 { WindowApps24Regular, WindowApps24Filled } from "@fluentui/react-icons";

export function Example() {
  return <WindowApps24Regular aria-label="Window Apps" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_window_apps_24_regular.svg" width="24" height="24" alt="Window Apps">

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="M6.25 3C4.45507 3 3 4.45507 3 6.25V17.75C3 19.5449 4.45507 21 6.25 21H9.00947C9.0032 20.9175 9 20.8341 9 20.75V19.5H6.25C5.2835 19.5 4.5 18.7165 4.5 17.75V8.5H19.5V9H20.75C20.8341 9 20.9175 9.0032 21 9.00947V6.25C21 4.45507 19.5449 3 17.75 3H6.25ZM19.5 7H4.5V6.25C4.5 5.2835 5.2835 4.5 6.25 4.5H17.75C18.7165 4.5 19.5 5.2835 19.5 6.25V7ZM12.25 15.5H15.5V12.25C15.5 11.0074 16.5074 10 17.75 10H20.75C21.9926 10 23 11.0074 23 12.25V19.75C23 21.5449 21.5449 23 19.75 23H12.25C11.0074 23 10 21.9926 10 20.75V17.75C10 16.5074 11.0074 15.5 12.25 15.5ZM17 12.25V15.5H21.5V12.25C21.5 11.8358 21.1642 11.5 20.75 11.5H17.75C17.3358 11.5 17 11.8358 17 12.25ZM15.5 21.5V17H12.25C11.8358 17 11.5 17.3358 11.5 17.75V20.75C11.5 21.1642 11.8358 21.5 12.25 21.5H15.5ZM17 17V21.5H19.75C20.7165 21.5 21.5 20.7165 21.5 19.75V17H17Z" 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/window_apps_24_regular.svg";

Details

Keywords

rectangleshapewebappwindowui