Scan icon

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

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

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_scan_24_regular.svg" width="24" height="24" alt="Scan">

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="M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2ZM15.2502 14.3322L15.2115 14.4042L15.1479 14.4954L10.3911 20.3479C10.9121 20.4478 11.4499 20.5 12 20.5C14.171 20.5 16.1518 19.6861 17.6541 18.3468L15.57 13.8062C15.4767 13.9901 15.3696 14.1659 15.2502 14.3322ZM4.4903 15.9854C5.42691 17.7466 6.96494 19.1392 8.83046 19.8894L11.991 16L11.8004 15.9951L11.669 15.9865L4.4903 15.9854ZM20.1301 9.51192H15.1322C15.2138 9.61455 15.2905 9.72128 15.3619 9.83176C15.3864 9.85886 15.4088 9.8889 15.4291 9.92091L15.4778 10.0105L15.5168 10.0926C15.6029 10.251 15.6786 10.4158 15.743 10.5862L18.7588 17.1552C19.8511 15.7253 20.5 13.9384 20.5 12C20.5 11.1343 20.3706 10.2989 20.1301 9.51192ZM3.5 12C3.5 12.8649 3.62919 13.6997 3.86932 14.486H8.86618C8.7844 14.3831 8.70759 14.276 8.6361 14.1652L8.50085 13.9432L4.88651 7.34546C4.00985 8.68254 3.5 10.2817 3.5 12ZM10.0198 10.4737L9.9755 10.5454C9.95359 10.5796 9.92937 10.6114 9.90318 10.6407C9.64761 11.0317 9.5 11.4986 9.5 12C9.5 13.2943 10.4835 14.3588 11.744 14.487H12.256C13.5165 14.3588 14.5 13.2943 14.5 12C14.5 10.6985 13.5055 9.62934 12.235 9.5109L11.8623 9.51285L11.8043 9.50755C11.0785 9.56375 10.4396 9.92987 10.0198 10.4737ZM12 3.5C9.60862 3.5 7.4479 4.48753 5.90339 6.07704L8.30536 10.4644C8.43215 10.1597 8.59554 9.87405 8.79004 9.61292L12.6939 3.52791C12.465 3.50942 12.2336 3.5 12 3.5ZM11.5942 8.02033C11.7277 8.00689 11.863 8 12 8C12.1026 8 12.2043 8.00386 12.305 8.01146L19.5086 8.01265C18.4758 6.07167 16.7123 4.57858 14.5851 3.90024L14.2928 3.81283L11.5942 8.02033Z" 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_24_regular.svg";

Details

Keywords

cameraapertureimagepicturescan