Window Dev Tools icon

Use the Window Dev Tools 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 { WindowDevTools24Regular, WindowDevTools24Filled } from "@fluentui/react-icons";

export function Example() {
  return <WindowDevTools24Regular aria-label="Window Dev Tools" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_window_dev_tools_24_regular.svg" width="24" height="24" alt="Window Dev Tools">

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.7402 19.6857C11.3675 20.0584 11.1356 20.5185 11.0443 21H6.25C4.45507 21 3 19.5449 3 17.75V6.25ZM15.9936 11.9329L14.2803 10.2197C13.9874 9.92678 13.5126 9.92678 13.2197 10.2197C12.9268 10.5126 12.9268 10.9874 13.2197 11.2803L14.9113 12.9719C15.042 12.8031 15.1848 12.6406 15.3398 12.4856C15.5454 12.28 15.7643 12.0958 15.9936 11.9329ZM4.5 7H19.5V6.25C19.5 5.2835 18.7165 4.5 17.75 4.5H6.25C5.2835 4.5 4.5 5.2835 4.5 6.25V7ZM10.7803 11.2803C11.0732 10.9874 11.0732 10.5126 10.7803 10.2197C10.4874 9.92678 10.0126 9.92678 9.71967 10.2197L6.71967 13.2197C6.42678 13.5126 6.42678 13.9874 6.71967 14.2803L9.71967 17.2803C10.0126 17.5732 10.4874 17.5732 10.7803 17.2803C11.0732 16.9874 11.0732 16.5126 10.7803 16.2197L8.31066 13.75L10.7803 11.2803ZM19.7988 12.0939C20.1516 12.1708 20.2389 12.601 19.9836 12.8563L18.0795 14.7602C17.483 15.3566 17.483 16.3237 18.0795 16.9202C18.6759 17.5166 19.6429 17.5166 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.5527C11.8509 21.9563 11.8509 20.9893 12.4474 20.3929L15.1764 17.6635C14.548 16.1809 14.8381 14.4015 16.0469 13.1928C17.0653 12.1745 18.4889 11.8082 19.7988 12.0939Z" 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_dev_tools_24_regular.svg";

Details

Keywords

rectangleshapewebappwindowui