Book Arrow Clockwise icon

Use the Book Arrow Clockwise 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 { BookArrowClockwise24Regular, BookArrowClockwise24Filled } from "@fluentui/react-icons";

export function Example() {
  return <BookArrowClockwise24Regular aria-label="Book Arrow Clockwise" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_book_arrow_clockwise_24_regular.svg" width="24" height="24" alt="Book Arrow Clockwise">

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="M21.25 5C21.6642 5 22 4.66421 22 4.25V1.5C22 1.08579 21.6642 0.75 21.25 0.75C21.0121 0.75 20.8001 0.860765 20.6627 1.03354C20.5608 1.16158 20.5 1.32369 20.5 1.5V2.12612C19.5149 1.41764 18.3054 1 17 1C13.6863 1 11 3.68629 11 7C11 10.3137 13.6863 13 17 13C20.3137 13 23 10.3137 23 7C23 6.58579 22.6642 6.25 22.25 6.25C21.8358 6.25 21.5 6.58579 21.5 7C21.5 9.48528 19.4853 11.5 17 11.5C14.5147 11.5 12.5 9.48528 12.5 7C12.5 4.51472 14.5147 2.5 17 2.5C18.0649 2.5 19.0416 2.86897 19.8121 3.48666C19.8178 3.4912 19.8235 3.49565 19.8293 3.5H18.5C18.0858 3.5 17.75 3.83579 17.75 4.25C17.75 4.66421 18.0858 5 18.5 5H21.25ZM6.5 2H12.101C11.6485 2.44348 11.2558 2.9479 10.9365 3.5H6.5C5.94772 3.5 5.5 3.94772 5.5 4.5V18H19V13.7101C19.5289 13.5527 20.0316 13.3345 20.5 13.0635V18.75C20.5 19.1642 20.1642 19.5 19.75 19.5H5.5C5.5 20.0523 5.94772 20.5 6.5 20.5H19.75C20.1642 20.5 20.5 20.8358 20.5 21.25C20.5 21.6642 20.1642 22 19.75 22H6.5C5.11929 22 4 20.8807 4 19.5V4.5C4 3.11929 5.11929 2 6.5 2Z" 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_arrow_clockwise_24_regular.svg";

Details

Keywords

readreload