Barcode Scanner Add icon

Use the Barcode Scanner Add 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 { BarcodeScannerAdd24Regular, BarcodeScannerAdd24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

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

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 16ZM17.5 12.999C17.2239 12.999 17.0001 13.223 17 13.499V16H14.4951C14.2195 16.0003 13.9961 16.224 13.9961 16.5C13.9961 16.776 14.2195 16.9997 14.4951 17H17.001V19.5039C17.0012 19.7798 17.225 20.0038 17.501 20.0039C17.777 20.0039 18.0008 19.7799 18.001 19.5039V17H20.4971C20.7727 16.9997 20.9961 16.776 20.9961 16.5C20.9961 16.224 20.7727 16.0003 20.4971 16H18V13.499C17.9999 13.223 17.7761 12.999 17.5 12.999ZM5.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_add_24_regular.svg";

Details