Book Theta icon

Use the Book Theta 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 { BookTheta24Regular, BookTheta24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

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

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="M12.5 16.5C14.7091 16.5 16.5 14.0376 16.5 11C16.5 7.96243 14.7091 5.5 12.5 5.5C10.2909 5.5 8.5 7.96243 8.5 11C8.5 14.0376 10.2909 16.5 12.5 16.5ZM14.1153 14.0068C13.5961 14.7207 13.0064 15 12.5 15C11.9936 15 11.4039 14.7207 10.8847 14.0068C10.5127 13.4954 10.2189 12.8058 10.0827 12H14.9173C14.7811 12.8058 14.4873 13.4954 14.1153 14.0068ZM14.1153 7.99317C14.5621 8.60751 14.8962 9.479 14.9797 10.5H10.0203C10.1038 9.479 10.4379 8.60751 10.8847 7.99317C11.4039 7.27928 11.9936 7 12.5 7C13.0064 7 13.5961 7.27928 14.1153 7.99317ZM6.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_theta_24_regular.svg";

Details

Keywords

readformulas