Book Pulse icon

Use the Book Pulse 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 { BookPulse24Regular, BookPulse24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

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

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="M11.6907 7.45777C11.5767 7.18824 11.3163 7.00966 11.0238 7.00038C10.7313 6.9911 10.4601 7.15283 10.3292 7.41459L8.78647 10.5H7.75C7.33579 10.5 7 10.8358 7 11.25C7 11.6642 7.33579 12 7.75 12H9.25C9.53408 12 9.79378 11.8395 9.92082 11.5854L10.9432 9.54063L13.0593 14.5422C13.1699 14.8037 13.4187 14.9803 13.7021 14.9985C13.9855 15.0166 14.2548 14.8732 14.3978 14.6279L15.9308 12H16.75C17.1642 12 17.5 11.6642 17.5 11.25C17.5 10.8358 17.1642 10.5 16.75 10.5H15.5C15.2332 10.5 14.9866 10.6417 14.8522 10.8721L13.857 12.5781L11.6907 7.45777ZM6.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_pulse_24_regular.svg";

Details

Keywords

readformulas