Tab Desktop Search icon

Use the Tab Desktop 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 { TabDesktopSearch24Regular, TabDesktopSearch24Filled } from "@fluentui/react-icons";

export function Example() {
  return <TabDesktopSearch24Regular aria-label="Tab Desktop Search" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_tab_desktop_search_24_regular.svg" width="24" height="24" alt="Tab Desktop 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="M3 5.75C3 4.23122 4.23122 3 5.75 3H18.25C19.7688 3 21 4.23122 21 5.75V18.25C21 19.7688 19.7688 21 18.25 21H13.9822C13.9303 20.6387 13.7654 20.2905 13.4874 20.0126L12.9749 19.5H18.25C18.9404 19.5 19.5 18.9404 19.5 18.25V8H13.25C12.0074 8 11 6.99264 11 5.75V4.5H5.75C5.05964 4.5 4.5 5.05964 4.5 5.75V10.3749C3.95177 10.589 3.44631 10.8886 3 11.2572V5.75ZM13.25 6.5H19.5V5.75C19.5 5.05964 18.9404 4.5 18.25 4.5H12.5V5.75C12.5 6.16421 12.8358 6.5 13.25 6.5ZM6.5 20C7.47187 20 8.37179 19.6919 9.1074 19.1681L11.7197 21.7803C12.0126 22.0732 12.4874 22.0732 12.7803 21.7803C13.0732 21.4874 13.0732 21.0126 12.7803 20.7197L10.1681 18.1074C10.6919 17.3718 11 16.4719 11 15.5C11 13.0147 8.98528 11 6.5 11C4.01472 11 2 13.0147 2 15.5C2 17.9853 4.01472 20 6.5 20ZM6.5 18.5C4.84315 18.5 3.5 17.1569 3.5 15.5C3.5 13.8431 4.84315 12.5 6.5 12.5C8.15685 12.5 9.5 13.8431 9.5 15.5C9.5 17.1569 8.15685 18.5 6.5 18.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/tab_desktop_search_24_regular.svg";

Details

Keywords

tabmobiledesktoprectanglebrowsersearchorganizefind