Scan Type Checkmark icon
Used to represent scanning scenarios with different content. The Scan Type Checkmark icon is part of Microsoft's Fluent UI System Icons, available here in filled and regular (outlined) styles on a 24 px grid. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.
Use the Scan Type Checkmark 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 { ScanTypeCheckmark24Regular, ScanTypeCheckmark24Filled } from "@fluentui/react-icons";
export function Example() {
return <ScanTypeCheckmark24Regular aria-label="Scan Type Checkmark" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_scan_type_checkmark_24_regular.svg" width="24" height="24" alt="Scan Type Checkmark"> 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 20.8358 8.66421 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.25ZM7 7.75C7 7.33579 7.33579 7 7.75 7H16.25C16.6642 7 17 7.33579 17 7.75V9C17 9.41421 16.6642 9.75 16.25 9.75C15.8358 9.75 15.5 9.41421 15.5 9V8.5H12.75V15.4661C12.4968 15.9451 12.3016 16.4595 12.1739 17H9.75C9.33579 17 9 16.6642 9 16.25C9 15.8358 9.33579 15.5 9.75 15.5H11.25V8.5H8.5V9C8.5 9.41421 8.16421 9.75 7.75 9.75C7.33579 9.75 7 9.41421 7 9V7.75ZM24 18.5C24 21.5376 21.5376 24 18.5 24C15.4624 24 13 21.5376 13 18.5C13 15.4624 15.4624 13 18.5 13C21.5376 13 24 15.4624 24 18.5ZM21.8536 16.1464C21.6583 15.9512 21.3417 15.9512 21.1464 16.1464L17.5 19.7929L15.8536 18.1464C15.6583 17.9512 15.3417 17.9512 15.1464 18.1464C14.9512 18.3417 14.9512 18.6583 15.1464 18.8536L17.1464 20.8536C17.3417 21.0488 17.6583 21.0488 17.8536 20.8536L21.8536 16.8536C22.0488 16.6583 22.0488 16.3417 21.8536 16.1464Z" 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_type_checkmark_24_regular.svg";Details
| Name | Scan Type Checkmark |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_scan_type_checkmark_24_regular.svg |
| Filled file | ic_fluent_scan_type_checkmark_24_filled.svg |
| React components | ScanTypeCheckmark24Regular, ScanTypeCheckmark24Filled |
| License | MIT (© Microsoft Corporation) |