Barcode Scanner Dismiss icon

Use the Barcode Scanner Dismiss 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 { BarcodeScannerDismiss24Regular, BarcodeScannerDismiss24Filled } from "@fluentui/react-icons";

export function Example() {
  return <BarcodeScannerDismiss24Regular aria-label="Barcode Scanner Dismiss" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_barcode_scanner_dismiss_24_regular.svg" width="24" height="24" alt="Barcode Scanner Dismiss">

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="M17.5 11C20.5376 11 23 13.4624 23 16.5C23 19.5376 20.5376 22 17.5 22C14.4624 22 12 19.5376 12 16.5C12 13.4624 14.4624 11 17.5 11ZM2.75 16C3.16421 16 3.5 16.3358 3.5 16.75V18.25C3.5 18.9404 4.05964 19.5 4.75 19.5H6.25C6.66421 19.5 7 19.8358 7 20.25C7 20.6642 6.66421 21 6.25 21H4.75C3.23122 21 2 19.7688 2 18.25V16.75C2 16.3358 2.33579 16 2.75 16ZM19.8535 14.1465C19.6583 13.9512 19.3417 13.9512 19.1465 14.1465L17.5 15.793L15.8535 14.1465C15.6583 13.9512 15.3417 13.9512 15.1465 14.1465C14.9512 14.3417 14.9512 14.6583 15.1465 14.8535L16.793 16.5L15.1465 18.1465C14.9512 18.3417 14.9512 18.6583 15.1465 18.8535C15.3417 19.0488 15.6583 19.0488 15.8535 18.8535L17.5 17.207L19.1465 18.8535C19.3417 19.0488 19.6583 19.0488 19.8535 18.8535C20.0488 18.6583 20.0488 18.3417 19.8535 18.1465L18.207 16.5L19.8535 14.8535C20.0488 14.6583 20.0488 14.3417 19.8535 14.1465ZM5.75 7C6.16421 7 6.5 7.33579 6.5 7.75V16.25C6.5 16.6642 6.16421 17 5.75 17C5.33579 17 5 16.6642 5 16.25V7.75C5 7.33579 5.33579 7 5.75 7ZM9.75 7C10.1642 7 10.5 7.33579 10.5 7.75V16.25C10.5 16.6642 10.1642 17 9.75 17C9.33579 17 9 16.6642 9 16.25V7.75C9 7.33579 9.33579 7 9.75 7ZM13.75 7C14.1642 7 14.5 7.33579 14.5 7.75V10.7334C13.9488 11.0208 13.4444 11.3849 13 11.8115V7.75C13 7.33579 13.3358 7 13.75 7ZM17.75 7C18.1642 7 18.5 7.33579 18.5 7.75V10.0762C18.174 10.0258 17.8401 10 17.5 10C17.3317 10 17.1651 10.0079 17 10.0205V7.75C17 7.33579 17.3358 7 17.75 7ZM6.25 3C6.66421 3 7 3.33579 7 3.75C7 4.16421 6.66421 4.5 6.25 4.5H4.75C4.05964 4.5 3.5 5.05964 3.5 5.75V7.25C3.5 7.66421 3.16421 8 2.75 8C2.33579 8 2 7.66421 2 7.25V5.75C2 4.23122 3.23122 3 4.75 3H6.25ZM19.25 3C20.7688 3 22 4.23122 22 5.75V7.25C22 7.66421 21.6642 8 21.25 8C20.8358 8 20.5 7.66421 20.5 7.25V5.75C20.5 5.05964 19.9404 4.5 19.25 4.5H17.75C17.3358 4.5 17 4.16421 17 3.75C17 3.33579 17.3358 3 17.75 3H19.25Z" 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/barcode_scanner_dismiss_24_regular.svg";

Details