Scan Thumb Up icon

Use the Scan Thumb Up 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 { ScanThumbUp24Regular, ScanThumbUp24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

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

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.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 20.8358 15.3358 20.5 15.75 20.5H18.75ZM11.2893 6.42443C11.5541 5.80875 12.353 5.01977 13.4686 5.30926C14.1689 5.49097 14.673 5.91031 14.9577 6.48687C15.2056 6.98912 15.2488 7.53737 15.2574 7.95324C15.2656 8.35004 15.2018 8.78147 15.1201 9.1673H15.314C16.8715 9.1673 18.1361 10.6 17.646 12.1584L16.4968 15.8123C16.0306 17.2945 14.3968 18.0623 12.9186 17.6288L8.40692 16.3057C7.70619 16.1002 7.12335 15.5979 6.84997 14.9187L6.41194 13.8302C5.97322 12.7401 6.45244 11.5441 7.46691 10.9854L9.00926 10.1358C9.01671 10.1303 9.02669 10.1227 9.03901 10.113C9.09004 10.0726 9.18198 9.99414 9.30196 9.86779C9.54095 9.61612 9.89773 9.16758 10.2644 8.43916C10.4416 8.08696 10.5909 7.80987 10.7227 7.56523L10.7236 7.56346C10.9364 7.16847 11.1007 6.86292 11.2893 6.42443ZM9.739 11.4464L8.19059 12.2992C7.79566 12.5168 7.66665 12.9302 7.80348 13.2702L8.24151 14.3586C8.33272 14.5853 8.54081 14.7818 8.82903 14.8663L13.3407 16.1894C14.1112 16.4153 14.868 15.9914 15.0659 15.3622L16.2151 11.7083C16.3585 11.2522 16.0054 10.6673 15.314 10.6673H14.1474C13.9089 10.6673 13.6846 10.5539 13.5433 10.3618C13.402 10.1697 13.3604 9.92191 13.4313 9.69423C13.4832 9.52751 13.5362 9.34285 13.5839 9.15255C13.6901 8.72938 13.7643 8.30279 13.7577 7.98414C13.7502 7.61805 13.7089 7.34576 13.6127 7.15091C13.5281 6.97958 13.3861 6.83751 13.0919 6.76117C12.9994 6.73717 12.9283 6.75336 12.8566 6.79834C12.7696 6.85288 12.6992 6.94288 12.6672 7.01714C12.4513 7.5191 12.2599 7.87445 12.0478 8.26815L12.0442 8.27482C11.9125 8.51932 11.7717 8.78082 11.6042 9.11353C11.1719 9.97251 10.7303 10.542 10.3897 10.9007C10.2195 11.0799 10.075 11.206 9.97005 11.2891C9.91759 11.3306 9.87505 11.3614 9.84419 11.3826L9.83799 11.3868L9.82439 11.396L9.81195 11.4041L9.8043 11.4091L9.80272 11.4101C9.78186 11.4233 9.76059 11.4354 9.739 11.4464Z" 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_thumb_up_24_regular.svg";

Details

Keywords

cameraapertureimagepicturescanai