Database Search icon

Use the Database 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 { DatabaseSearch24Regular, DatabaseSearch24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_database_search_24_regular.svg" width="24" height="24" alt="Database 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="M4 6C4 5.30945 4.3153 4.70664 4.77423 4.22025C5.2294 3.73784 5.85301 3.33745 6.56668 3.01752C7.99575 2.3769 9.91738 2 12 2C14.0826 2 16.0042 2.3769 17.4333 3.01752C18.147 3.33745 18.7706 3.73784 19.2258 4.22025C19.6847 4.70664 20 5.30945 20 6V12.2572C19.5537 11.8886 19.0482 11.589 18.5 11.3749V8.39242C18.1791 8.61282 17.8194 8.80942 17.4333 8.98248C16.0042 9.6231 14.0826 10 12 10C9.91738 10 7.99575 9.6231 6.56668 8.98248C6.18063 8.80942 5.82094 8.61282 5.5 8.39242V18C5.5 18.2069 5.59044 18.4591 5.86525 18.7503C6.14382 19.0456 6.58195 19.3455 7.18027 19.6137C8.37519 20.1494 10.0786 20.5 12 20.5C12.2396 20.5 12.4759 20.4945 12.7081 20.484C13.3109 21.0579 14.0438 21.4964 14.858 21.7507C13.9673 21.9127 13.0023 22 12 22C9.91738 22 7.99575 21.6231 6.56668 20.9825C5.85301 20.6626 5.2294 20.2622 4.77423 19.7798C4.3153 19.2934 4 18.6906 4 18V6ZM5.5 6C5.5 6.20691 5.59044 6.45909 5.86525 6.75034C6.14382 7.04559 6.58195 7.3455 7.18027 7.61372C8.37519 8.14937 10.0786 8.5 12 8.5C13.9214 8.5 15.6248 8.14937 16.8197 7.61372C17.418 7.3455 17.8562 7.04559 18.1348 6.75034C18.4096 6.45909 18.5 6.20691 18.5 6C18.5 5.79309 18.4096 5.54091 18.1348 5.24966C17.8562 4.95441 17.418 4.65449 16.8197 4.38628C15.6248 3.85063 13.9214 3.5 12 3.5C10.0786 3.5 8.37519 3.85063 7.18027 4.38628C6.58195 4.65449 6.14382 4.95441 5.86525 5.24966C5.59044 5.54091 5.5 5.79309 5.5 6ZM16.5 21C17.4719 21 18.3718 20.6919 19.1074 20.1681L21.7197 22.7803C22.0126 23.0732 22.4874 23.0732 22.7803 22.7803C23.0732 22.4874 23.0732 22.0126 22.7803 21.7197L20.1681 19.1074C20.6919 18.3718 21 17.4719 21 16.5C21 14.0147 18.9853 12 16.5 12C14.0147 12 12 14.0147 12 16.5C12 18.9853 14.0147 21 16.5 21ZM16.5 19.5C14.8431 19.5 13.5 18.1569 13.5 16.5C13.5 14.8431 14.8431 13.5 16.5 13.5C18.1569 13.5 19.5 14.8431 19.5 16.5C19.5 18.1569 18.1569 19.5 16.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/database_search_24_regular.svg";

Details

Keywords

datainformation