Book Database icon

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

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

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_book_database_24_regular.svg" width="24" height="24" alt="Book Database">

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="M7 6C7 5.44772 7.44772 5 8 5H16C16.5523 5 17 5.44772 17 6V8C17 8.55228 16.5523 9 16 9H8C7.44772 9 7 8.55228 7 8V6ZM8.5 7.5H15.5V6.5H8.5V7.5ZM4 4.5C4 3.11929 5.11929 2 6.5 2H18C19.3807 2 20.5 3.11929 20.5 4.5V11.2986C20.2276 11.2296 19.9452 11.1721 19.6551 11.1266C19.4414 11.093 19.2227 11.0658 19 11.0454V4.5C19 3.94772 18.5523 3.5 18 3.5H6.5C5.94772 3.5 5.5 3.94772 5.5 4.5V18H12V19.5H5.5C5.5 20.0523 5.94772 20.5 6.5 20.5H12C12 21.0765 12.2158 21.5838 12.5338 22H6.5C5.11929 22 4 20.8807 4 19.5V4.5ZM19.5 12.1144C20.0464 12.2003 20.5523 12.3317 21 12.4998C22.2144 12.9559 23 13.6821 23 14.5C23 15.3179 22.2144 16.0441 21 16.5002C20.5523 16.6683 20.0464 16.7997 19.5 16.8855C19.0265 16.9599 18.5226 17 18 17C15.2386 17 13 15.8807 13 14.5C13 13.1193 15.2386 12 18 12C18.5226 12 19.0265 12.0401 19.5 12.1144ZM19.5 17.8965C20.0293 17.8219 20.5336 17.708 21 17.5585C21.3509 17.446 21.6803 17.3134 21.9827 17.1622C22.3368 16.9852 22.6902 16.7619 23 16.4917V20.5C23 21.8807 20.7614 23 18 23C15.9497 23 14.1876 22.383 13.416 21.5C13.1484 21.1938 13 20.8556 13 20.5V16.4917C13.3098 16.7619 13.6632 16.9852 14.0173 17.1622C15.0882 17.6977 16.4977 18 18 18C18.5141 18 19.0174 17.9646 19.5 17.8965Z" 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/book_database_24_regular.svg";

Details

Keywords

readformulasdatacatalog