Scan Person icon

Use the Scan 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 { ScanPerson24Regular, ScanPerson24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_scan_person_24_regular.svg" width="24" height="24" alt="Scan 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="M5.25 3.5C4.2835 3.5 3.5 4.2835 3.5 5.25V8.25C3.5 8.66421 3.16421 9 2.75 9C2.33579 9 2 8.66421 2 8.25V5.25C2 3.45507 3.45507 2 5.25 2H8.25C8.66421 2 9 2.33579 9 2.75C9 3.16421 8.66421 3.5 8.25 3.5H5.25ZM5.25 20.5C4.2835 20.5 3.5 19.7165 3.5 18.75V15.75C3.5 15.3358 3.16421 15 2.75 15C2.33579 15 2 15.3358 2 15.75V18.75C2 20.5449 3.45507 22 5.25 22H8.25C8.66421 22 9 21.6642 9 21.25C9 21.1623 8.98496 21.0782 8.95732 21L8.952 20.9854C8.84504 20.7018 8.57108 20.5 8.25 20.5H5.25ZM20.5 5.25C20.5 4.2835 19.7165 3.5 18.75 3.5H15.75C15.3358 3.5 15 3.16421 15 2.75C15 2.33579 15.3358 2 15.75 2H18.75C20.5449 2 22 3.45507 22 5.25V8.25C22 8.66421 21.6642 9 21.25 9C20.8358 9 20.5 8.66421 20.5 8.25V5.25ZM18.75 20.5C19.7165 20.5 20.5 19.7165 20.5 18.75V15.75C20.5 15.3358 20.8358 15 21.25 15C21.6642 15 22 15.3358 22 15.75V18.75C22 20.5449 20.5449 22 18.75 22H15.75C15.3358 22 15 21.6642 15 21.25C15 21.1387 15.0242 21.033 15.0677 20.9381C15.1861 20.6796 15.4471 20.5 15.75 20.5H18.75ZM6.5 18.6155C6.5 18.9249 6.58626 19.2211 6.75774 19.5H5.25C5.20607 19.5 5.16302 19.4962 5.12116 19.489C5.04281 19.2167 5 18.9257 5 18.6155V18.25C5 17.0074 6.00736 16 7.25 16H16.75C17.9926 16 19 17.0074 19 18.25V18.6155C19 18.9256 18.9532 19.2173 18.8682 19.4907C18.8297 19.4968 18.7902 19.5 18.75 19.5H17.2066C17.4028 19.2122 17.5 18.9142 17.5 18.6155V18.25C17.5 17.8358 17.1642 17.5 16.75 17.5H7.25C6.83579 17.5 6.5 17.8358 6.5 18.25V18.6155ZM14.75 9.75C14.75 8.23122 13.5188 7 12 7C10.4812 7 9.25 8.23122 9.25 9.75C9.25 11.2688 10.4812 12.5 12 12.5C13.5188 12.5 14.75 11.2688 14.75 9.75ZM16.25 9.75C16.25 12.0972 14.3472 14 12 14C9.65279 14 7.75 12.0972 7.75 9.75C7.75 7.40279 9.65279 5.5 12 5.5C14.3472 5.5 16.25 7.40279 16.25 9.75Z" 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/scan_person_24_regular.svg";

Details

Keywords

cameraapertureimagepicturescanaifacescanner