Bookmark Search icon

Use the Bookmark 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 { BookmarkSearch24Regular, BookmarkSearch24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_bookmark_search_24_regular.svg" width="24" height="24" alt="Bookmark 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="M19.1069 9.16806C18.3713 9.69191 17.4714 10 16.4995 10C14.0142 10 11.9995 7.98528 11.9995 5.5C11.9995 3.01472 14.0142 1 16.4995 1C18.9848 1 20.9995 3.01472 20.9995 5.5C20.9995 6.47187 20.6914 7.37179 20.1676 8.1074L22.7798 10.7197C23.0727 11.0126 23.0727 11.4874 22.7798 11.7803C22.4869 12.0732 22.0121 12.0732 21.7192 11.7803L19.1069 9.16806ZM19.4995 5.5C19.4995 3.84315 18.1564 2.5 16.4995 2.5C14.8427 2.5 13.4995 3.84315 13.4995 5.5C13.4995 7.15685 14.8427 8.5 16.4995 8.5C18.1564 8.5 19.4995 7.15685 19.4995 5.5ZM19.0003 10.4757V21.2449C19.0003 21.8562 18.3085 22.2107 17.8123 21.8538L12.0011 17.6728L6.18997 21.8538C5.69383 22.2107 5.00195 21.8562 5.00195 21.2449V6.24902C5.00195 4.4541 6.45703 2.99902 8.25195 2.99902H11.5997C11.3616 3.46454 11.1879 3.96846 11.0904 4.49902H8.25195C7.28545 4.49902 6.50195 5.28253 6.50195 6.24902V19.7814L11.5631 16.1401C11.8248 15.9518 12.1775 15.9518 12.4392 16.1401L17.5003 19.7814V10.9092C18.0118 10.8151 18.4985 10.6503 18.9499 10.4253L19.0003 10.4757Z" 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/bookmark_search_24_regular.svg";

Details

Keywords

readplaceholder