Book Compass icon

Use the Book Compass 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 { BookCompass24Regular, BookCompass24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

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

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="M13 5.75C13 5.33579 12.6642 5 12.25 5C11.8358 5 11.5 5.33579 11.5 5.75V7.35352C10.3458 7.67998 9.50002 8.74122 9.50002 10C9.50002 10.7807 9.82535 11.4854 10.3478 11.986L9.05366 15.2215C8.89982 15.606 9.08689 16.0425 9.47147 16.1964C9.85606 16.3502 10.2925 16.1631 10.4464 15.7785L11.6813 12.6911C11.8648 12.7297 12.0551 12.75 12.25 12.75C12.445 12.75 12.6352 12.7297 12.8187 12.6911L14.0537 15.7785C14.2075 16.1631 14.644 16.3502 15.0286 16.1964C15.4131 16.0425 15.6002 15.606 15.4464 15.2215L14.1522 11.986C14.6747 11.4854 15 10.7807 15 10C15 8.74122 14.1543 7.67998 13 7.35352V5.75ZM11 10C11 9.30964 11.5597 8.75 12.25 8.75C12.9404 8.75 13.5 9.30964 13.5 10C13.5 10.6904 12.9404 11.25 12.25 11.25C11.5597 11.25 11 10.6904 11 10ZM6.5 2C5.11929 2 4 3.11929 4 4.5V19.5C4 20.8807 5.11929 22 6.5 22H19.75C20.1642 22 20.5 21.6642 20.5 21.25C20.5 20.8358 20.1642 20.5 19.75 20.5H6.5C5.94772 20.5 5.5 20.0523 5.5 19.5H19.75C20.1642 19.5 20.5 19.1642 20.5 18.75V4.5C20.5 3.11929 19.3807 2 18 2H6.5ZM19 18H5.5V4.5C5.5 3.94772 5.94772 3.5 6.5 3.5H18C18.5523 3.5 19 3.94772 19 4.5V18Z" 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_compass_24_regular.svg";

Details

Keywords

readformulas