Window Wrench icon
Used to represent general windowed app scenarios. The Window Wrench 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 Window Wrench 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 { WindowWrench24Regular, WindowWrench24Filled } from "@fluentui/react-icons";
export function Example() {
return <WindowWrench24Regular aria-label="Window Wrench" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_window_wrench_24_regular.svg" width="24" height="24" alt="Window Wrench"> 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="M3 6.25C3 4.45507 4.45507 3 6.25 3H17.75C19.5449 3 21 4.45507 21 6.25V11.9084C20.8258 11.5286 20.4824 11.2194 20.0118 11.1167C19.8426 11.0798 19.6717 11.0516 19.5 11.0322V8.5H4.5V17.75C4.5 18.7165 5.2835 19.5 6.25 19.5H11.9259L11.7403 19.6856C11.3676 20.0583 11.1356 20.5185 11.0443 21H6.25C4.45507 21 3 19.5449 3 17.75V6.25ZM19.5 6.25C19.5 5.2835 18.7165 4.5 17.75 4.5H6.25C5.2835 4.5 4.5 5.2835 4.5 6.25V7H19.5V6.25ZM12.0747 21C12.1467 20.778 12.271 20.5692 12.4474 20.3928L15.1764 17.6635C14.548 16.1809 14.8381 14.4015 16.0469 13.1928C16.9883 12.2515 18.276 11.8673 19.5 12.0403C19.6001 12.0544 19.6998 12.0722 19.7988 12.0938C20.0145 12.1408 20.1309 12.3199 20.1305 12.5103C20.1303 12.6314 20.0828 12.7571 19.9836 12.8563L18.0795 14.7602C17.483 15.3566 17.483 16.3237 18.0795 16.9202C18.4649 17.3056 19.0051 17.4419 19.5 17.3292C19.7351 17.2757 19.9599 17.1659 20.1531 17C20.1826 16.9747 20.2114 16.9481 20.2393 16.9202L22.1436 15.0161C22.3989 14.7608 22.8292 14.8481 22.9061 15.2009C23.1918 16.5106 22.8255 17.934 21.807 18.9523C20.5985 20.1608 18.8194 20.451 17.3367 19.8231L14.6074 22.5527C14.0109 23.1491 13.0438 23.1491 12.4474 22.5527C12.0273 22.1326 11.903 21.5288 12.0747 21ZM17.574 21H17.7203C17.6814 20.9905 17.6426 20.9805 17.6038 20.9701L17.574 21Z" 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_wrench_24_regular.svg";Details
| Name | Window Wrench |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_window_wrench_24_regular.svg |
| Filled file | ic_fluent_window_wrench_24_filled.svg |
| React components | WindowWrench24Regular, WindowWrench24Filled |
| License | MIT (© Microsoft Corporation) |