Box Multiple Search icon

Use the Box Multiple Search 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 { BoxMultipleSearch24Regular, BoxMultipleSearch24Filled } from "@fluentui/react-icons";

export function Example() {
  return <BoxMultipleSearch24Regular aria-label="Box Multiple Search" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_box_multiple_search_24_regular.svg" width="24" height="24" alt="Box Multiple Search">

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="M14.22 3.73716C14.7234 3.55115 15.2766 3.55115 15.78 3.73716L20.0867 5.32875C20.1848 5.36503 20.25 5.4586 20.25 5.56325V12.4756C20.9384 13.1176 21.462 13.9341 21.75 14.8547V5.56325C21.75 4.83071 21.2937 4.17569 20.6066 3.92175L16.2999 2.33017C15.461 2.02015 14.539 2.02015 13.7001 2.33017L9.39337 3.92175C8.70625 4.17569 8.25 4.83071 8.25 5.56325V8.35645C8.7468 8.27702 9.25319 8.27702 9.75 8.35645V5.56325C9.75 5.4586 9.81518 5.36503 9.91334 5.32875L14.22 3.73716ZM14.8707 11.2444C14.7872 11.1965 14.699 11.1551 14.6066 11.121L10.2999 9.52939C9.46103 9.21937 8.53897 9.21937 7.70008 9.52939L3.39337 11.121C2.70625 11.3749 2.25 12.0299 2.25 12.7625V18.4325C2.25 19.165 2.70625 19.8201 3.39337 20.074L7.70008 21.6656C8.53897 21.9756 9.46103 21.9756 10.2999 21.6656L12.9386 20.6904C12.5294 20.3424 12.1719 19.9355 11.879 19.4829L9.77995 20.2586C9.27662 20.4446 8.72338 20.4446 8.22005 20.2586L3.91334 18.667C3.81518 18.6307 3.75 18.5371 3.75 18.4325V12.7625C3.75 12.6578 3.81518 12.5642 3.91334 12.528L8.22005 10.9364C8.72338 10.7504 9.27662 10.7504 9.77995 10.9364L13.1106 12.1672C13.6302 11.76 14.225 11.4443 14.8707 11.2444ZM12.0866 13.2164C11.9711 13.1993 11.8498 13.209 11.7318 13.2499L8.99959 14.1966L6.25925 13.2494C5.86776 13.114 5.4407 13.3217 5.30538 13.7132C5.17006 14.1047 5.37772 14.5317 5.76921 14.6671L8.24989 15.5245V18.2234C8.24989 18.6376 8.58567 18.9734 8.99989 18.9734C9.4141 18.9734 9.74989 18.6376 9.74989 18.2234V15.5241L11.2008 15.0214C11.3844 14.3614 11.688 13.7514 12.0866 13.2164ZM11.3054 6.71319C11.1701 7.10468 11.3777 7.53174 11.7692 7.66706L14.4278 8.58602C14.7986 8.7142 15.2017 8.71404 15.5725 8.58558L18.2229 7.66718C18.6143 7.53157 18.8216 7.10435 18.686 6.71297C18.5504 6.32158 18.1232 6.11424 17.7318 6.24986L15.0813 7.16826C15.0284 7.18661 14.9708 7.18663 14.9178 7.16832L12.2593 6.24936C11.8678 6.11404 11.4407 6.32171 11.3054 6.71319ZM20.1681 19.1064C20.6919 18.3708 21 17.4709 21 16.499C21 14.0137 18.9853 11.999 16.5 11.999C14.0147 11.999 12 14.0137 12 16.499C12 18.9843 14.0147 20.999 16.5 20.999C17.4719 20.999 18.3718 20.6909 19.1074 20.1671L21.7197 22.7794C22.0126 23.0722 22.4874 23.0722 22.7803 22.7794C23.0732 22.4865 23.0732 22.0116 22.7803 21.7187L20.1681 19.1064ZM19.5 16.499C19.5 18.1559 18.1569 19.499 16.5 19.499C14.8431 19.499 13.5 18.1559 13.5 16.499C13.5 14.8422 14.8431 13.499 16.5 13.499C18.1569 13.499 19.5 14.8422 19.5 16.499Z" 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/box_multiple_search_24_regular.svg";

Details

Keywords

packageshippingcargoproduction