Book Open Globe icon

Use the Book Open Globe 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 { BookOpenGlobe24Regular, BookOpenGlobe24Filled } from "@fluentui/react-icons";

export function Example() {
  return <BookOpenGlobe24Regular aria-label="Book Open Globe" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_book_open_globe_24_regular.svg" width="24" height="24" alt="Book Open Globe">

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="M3.5 5.75C3.5 5.61193 3.61193 5.5 3.75 5.5H10C10.6904 5.5 11.25 6.05964 11.25 6.75V15.7086C11.5366 14.7067 12.0577 13.8037 12.75 13.0629V6.75C12.75 6.05964 13.3096 5.5 14 5.5H20.25C20.3881 5.5 20.5 5.61193 20.5 5.75V11.7322C21.051 12.0194 21.5557 12.3832 22 12.8096V5.75C22 4.7835 21.2165 4 20.25 4H14C13.212 4 12.5014 4.33145 12 4.86253C11.4986 4.33145 10.788 4 10 4H3.75C2.7835 4 2 4.7835 2 5.75V18.25C2 19.2165 2.7835 20 3.75 20H10C10.495 20 10.9594 19.8692 11.3606 19.6404C11.1769 19.1134 11.0592 18.5555 11.0172 17.9767C10.7905 18.2935 10.4193 18.5 10 18.5H3.75C3.61193 18.5 3.5 18.3881 3.5 18.25V5.75Z" fill="currentColor"/>
<path d="M16.0071 17C16.0471 15.5855 16.2549 14.3312 16.5602 13.4155C16.7314 12.9017 16.9243 12.522 17.1143 12.281C17.3086 12.0344 17.4428 12 17.5 12C17.5573 12 17.6915 12.0344 17.8858 12.281C18.0757 12.522 18.2687 12.9017 18.4399 13.4155C18.7452 14.3312 18.953 15.5855 18.993 17H16.0071Z" fill="currentColor"/>
<path d="M15.6115 13.0992C15.7189 12.7771 15.8413 12.4781 15.9793 12.2129C13.8357 12.8284 12.2286 14.7122 12.0225 17H15.0067C15.0468 15.4998 15.2664 14.1345 15.6115 13.0992Z" fill="currentColor"/>
<path d="M19.3886 13.0992C19.2812 12.7771 19.1588 12.4781 19.0208 12.2129C21.1644 12.8284 22.7715 14.7122 22.9776 17H19.9934C19.9532 15.4998 19.7337 14.1345 19.3886 13.0992Z" fill="currentColor"/>
<path d="M19.9934 18H22.9776C22.7715 20.2878 21.1644 22.1716 19.0208 22.7871C19.1588 22.5219 19.2812 22.2229 19.3886 21.9008C19.7337 20.8655 19.9532 19.5002 19.9934 18Z" fill="currentColor"/>
<path d="M17.8858 22.719C17.6915 22.9656 17.5573 23 17.5 23C17.4428 23 17.3086 22.9656 17.1143 22.719C16.9243 22.478 16.7314 22.0983 16.5602 21.5845C16.2549 20.6688 16.0471 19.4145 16.0071 18H18.993C18.953 19.4145 18.7452 20.6688 18.4399 21.5845C18.2687 22.0983 18.0757 22.478 17.8858 22.719Z" fill="currentColor"/>
<path d="M12.0225 18C12.2286 20.2878 13.8357 22.1716 15.9793 22.7871C15.8413 22.5219 15.7189 22.2229 15.6115 21.9008C15.2664 20.8655 15.0468 19.5002 15.0067 18H12.0225Z" 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_open_globe_24_regular.svg";

Details

Keywords

readworld