Laptop Person icon

Use the Laptop Person 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 { LaptopPerson24Regular, LaptopPerson24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

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

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 16H16.0505C15.6323 15.5901 15.3164 15.0762 15.1449 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.25V10C19.0368 10 19.5454 10.1208 20 10.3368V6.25C20 5.00736 18.9926 4 17.75 4H6.25ZM2.75 17.5H13.3084C13.1113 17.8809 13 18.3134 13 18.772V18.875C13 18.9167 13.0007 18.9583 13.002 19H2.75C2.33579 19 2 18.6642 2 18.25C2 17.8358 2.33579 17.5 2.75 17.5ZM21 13.5C21 14.8807 19.8807 16 18.5 16C17.1193 16 16 14.8807 16 13.5C16 12.1193 17.1193 11 18.5 11C19.8807 11 21 12.1193 21 13.5ZM23 18.875C23 20.4315 21.7143 22 18.5 22C15.2857 22 14 20.4374 14 18.875V18.772C14 17.7929 14.7937 17 15.7727 17H21.2273C22.2063 17 23 17.793 23 18.772V18.875Z" 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_person_24_regular.svg";

Details

Keywords

devicecomputermobiletravelwfhpersonpersonal