Screen Search icon

Use the Screen 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 { ScreenSearch24Regular, ScreenSearch24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_screen_search_24_regular.svg" width="24" height="24" alt="Screen 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="M2 7.25C2 5.45507 3.45507 4 5.25 4H18.75C20.5449 4 22 5.45507 22 7.25V16.75C22 18.5449 20.5449 20 18.75 20H12.4749L10.9749 18.5H18.75C19.7165 18.5 20.5 17.7165 20.5 16.75V7.25C20.5 6.2835 19.7165 5.5 18.75 5.5H5.25C4.2835 5.5 3.5 6.2835 3.5 7.25V10.3749C2.95177 10.589 2.44631 10.8886 2 11.2572V7.25ZM5.5 20C6.47187 20 7.37179 19.6919 8.1074 19.1681L10.7197 21.7803C11.0126 22.0732 11.4874 22.0732 11.7803 21.7803C12.0732 21.4874 12.0732 21.0126 11.7803 20.7197L9.16806 18.1074C9.69191 17.3718 10 16.4719 10 15.5C10 13.0147 7.98528 11 5.5 11C3.01472 11 1 13.0147 1 15.5C1 17.9853 3.01472 20 5.5 20ZM5.5 18.5C3.84315 18.5 2.5 17.1569 2.5 15.5C2.5 13.8431 3.84315 12.5 5.5 12.5C7.15685 12.5 8.5 13.8431 8.5 15.5C8.5 17.1569 7.15685 18.5 5.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/screen_search_24_regular.svg";

Details

Keywords

camerascreenshotimagepicturecopy