Box Search icon

Use the Box 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 { BoxSearch24Regular, BoxSearch24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_box_search_24_regular.svg" width="24" height="24" alt="Box 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="M13.4089 2.51203C12.5053 2.14573 11.4947 2.14573 10.5911 2.51203L3.09252 5.552C2.43211 5.81973 2 6.46118 2 7.1738V11.5997C2.46553 11.3617 2.96945 11.1881 3.5 11.0907V7.74881L11.2503 10.7628L11.25 20.7751L11.4874 21.0126C11.7038 21.2289 11.8517 21.4878 11.931 21.7624C12.4325 21.7716 12.9354 21.6802 13.4089 21.4883L20.9075 18.4483C21.5679 18.1806 22 17.5391 22 16.8265V7.1738C22 6.46118 21.5679 5.81973 20.9075 5.552L13.4089 2.51203ZM11.1547 3.90214C11.6968 3.68236 12.3032 3.68236 12.8453 3.90214L19.437 6.57444L16.7678 7.60506L9.24097 4.67796L11.1547 3.90214ZM7.21472 5.49941L14.6911 8.40689L12.0013 9.44545L4.59029 6.56338L7.21472 5.49941ZM20.3439 17.0582L12.8453 20.0982C12.8139 20.1109 12.7822 20.1229 12.7503 20.1342V10.7642L20.5 7.77194V16.8265C20.5 16.9283 20.4383 17.0199 20.3439 17.0582ZM4.5 21C5.47187 21 6.37179 20.6919 7.1074 20.1681L9.71967 22.7803C10.0126 23.0732 10.4874 23.0732 10.7803 22.7803C11.0732 22.4874 11.0732 22.0126 10.7803 21.7197L8.16806 19.1074C8.69191 18.3718 9 17.4719 9 16.5C9 14.0147 6.98528 12 4.5 12C2.01472 12 0 14.0147 0 16.5C0 18.9853 2.01472 21 4.5 21ZM4.5 19.5C2.84315 19.5 1.5 18.1569 1.5 16.5C1.5 14.8431 2.84315 13.5 4.5 13.5C6.15685 13.5 7.5 14.8431 7.5 16.5C7.5 18.1569 6.15685 19.5 4.5 19.5Z" 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_search_24_regular.svg";

Details

Keywords

packageshippingcargoproduction