Match App Layout icon
Used as an action to match layout. The Match App Layout 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 Match App Layout 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 { MatchAppLayout24Regular, MatchAppLayout24Filled } from "@fluentui/react-icons";
export function Example() {
return <MatchAppLayout24Regular aria-label="Match App Layout" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_match_app_layout_24_regular.svg" width="24" height="24" alt="Match App Layout"> 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="M9.28168 8C10.2482 8 11.0317 8.7835 11.0317 9.75V14.25C11.0317 15.2165 10.2482 16 9.28168 16H3.75C2.7835 16 2 15.2165 2 14.25V9.75C2 8.83183 2.70711 8.07881 3.60647 8.0058L3.75 8H9.28168ZM20.25 8C21.2165 8 22 8.7835 22 9.75V14.25C22 15.2165 21.2165 16 20.25 16H14.7183C13.7518 16 12.9683 15.2165 12.9683 14.25V9.75C12.9683 8.7835 13.7518 8 14.7183 8H20.25ZM9.28168 9.5H3.75L3.69268 9.5066C3.58223 9.53251 3.5 9.63165 3.5 9.75V14.25C3.5 14.3881 3.61193 14.5 3.75 14.5H9.28168C9.41975 14.5 9.53168 14.3881 9.53168 14.25V9.75C9.53168 9.61193 9.41975 9.5 9.28168 9.5ZM20.25 9.5H14.7183C14.5802 9.5 14.4683 9.61193 14.4683 9.75V14.25C14.4683 14.3881 14.5802 14.5 14.7183 14.5H20.25C20.3881 14.5 20.5 14.3881 20.5 14.25V9.75C20.5 9.61193 20.3881 9.5 20.25 9.5Z" 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/match_app_layout_24_regular.svg";Details
| Name | Match App Layout |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_match_app_layout_24_regular.svg |
| Filled file | ic_fluent_match_app_layout_24_filled.svg |
| React components | MatchAppLayout24Regular, MatchAppLayout24Filled |
| License | MIT (© Microsoft Corporation) |