Laptop Settings icon

Use the Laptop Settings 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 { LaptopSettings24Regular, LaptopSettings24Filled } from "@fluentui/react-icons";

export function Example() {
  return <LaptopSettings24Regular aria-label="Laptop Settings" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_laptop_settings_24_regular.svg" width="24" height="24" alt="Laptop Settings">

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 4C5.00736 4 4 5.00736 4 6.25V13.75C4 14.9926 5.00736 16 6.25 16H11.0189C11.0585 15.4805 11.159 14.9782 11.3135 14.5H6.25C5.83579 14.5 5.5 14.1642 5.5 13.75V6.25C5.5 5.83579 5.83579 5.5 6.25 5.5H17.75C18.1642 5.5 18.5 5.83579 18.5 6.25V10.0764C19.0232 10.1572 19.5258 10.3004 20 10.4982V6.25C20 5.00736 18.9926 4 17.75 4H6.25ZM2.75 17.5H11.0764C11.1572 18.0232 11.3004 18.5258 11.4982 19H2.75C2.33579 19 2 18.6642 2 18.25C2 17.8358 2.33579 17.5 2.75 17.5ZM14.2772 12.9756C14.592 14.0659 13.9376 15.1993 12.836 15.4718L12.2518 15.6164C12.2069 15.9041 12.1836 16.1992 12.1836 16.5001C12.1836 16.8147 12.2091 17.1232 12.2582 17.4235L12.7976 17.5534C13.9102 17.8213 14.5715 18.9663 14.2476 20.0639L14.0613 20.6951C14.5005 21.0808 15.0009 21.3939 15.5455 21.6167L16.0388 21.098C16.8273 20.2687 18.1496 20.2689 18.9379 21.0985L19.4366 21.6232C19.9801 21.403 20.4801 21.0928 20.9194 20.7103L20.7214 20.0244C20.4066 18.9342 21.061 17.8007 22.1626 17.5282L22.7463 17.3838C22.7912 17.0961 22.8145 16.8009 22.8145 16.5001C22.8145 16.1853 22.789 15.8767 22.7399 15.5764L22.2009 15.4466C21.0884 15.1787 20.4271 14.0337 20.751 12.9362L20.9371 12.3053C20.498 11.9196 19.9975 11.6064 19.4529 11.3835L18.9598 11.9021C18.1713 12.7313 16.849 12.7311 16.0607 11.9016L15.5619 11.3767C15.0184 11.5969 14.5184 11.9071 14.0791 12.2894L14.2772 12.9756ZM17.4991 18.0001C16.6984 18.0001 16.0494 17.3285 16.0494 16.5001C16.0494 15.6716 16.6984 15.0001 17.4991 15.0001C18.2997 15.0001 18.9487 15.6716 18.9487 16.5001C18.9487 17.3285 18.2997 18.0001 17.4991 18.0001Z" 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/laptop_settings_24_regular.svg";

Details

Keywords

devicecomputermobiletravelwfh