book open icon
book-open-48 from Fluent UI System Color Icons by Microsoft Corporation · 48 · MIT Free for personal and commercial use.
- Name
- book-open-48
- Set
- Fluent UI System Color Icons
- Style
- 48
- Viewbox
- 48×48
- License
- MIT
5 other variants in Fluent UI System Color Icons
The same icon in other sets
book-openAkar Iconsbook-openBoxIcons v2book-openBoxIcons v2 Solidbook-open-fillEva Iconsbook-openFont Awesome 6 Solidbook-openFont Awesome Solidbook-openFeather Iconsbook-open-outlineFlowbite Iconsbook-open-16-filledFluent UI System Iconsbook-openHeroIconsbook-openHumbleiconsbook-openIconParkbook-openIconPark Outlinebook-openIconPark Solidbook-openIconPark TwoTonebook-openLine Awesomebook-openLucidebook-openMajesticonsbook-openMaterial Design Iconsbook-openMyna UI Iconsbook-openPhosphorbook-openPixelarticonsbook-open-fillRemix Iconbook-openTDesign Icons
Related icons in Fluent UI System Color Icons
Use the book open icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48"><g fill="none"><path fill="url(#SVGMcHdPukX1)" d="M24 9.725A5.5 5.5 0 0 0 20 8H7a3 3 0 0 0-3 3v26a3 3 0 0 0 3 3h13a5.5 5.5 0 0 0 4-1.725L25 23z"/><path fill="url(#SVGUPoqCcPS1)" d="M24 9.725A5.5 5.5 0 0 1 28 8h13a3 3 0 0 1 3 3v26a3 3 0 0 1-3 3H28a5.5 5.5 0 0 1-4-1.725L23 23z"/><path fill="url(#SVGFQgR32Px1)" d="M6.5 9a1 1 0 0 1 1-1h15A1.5 1.5 0 0 1 24 9.5l.5 15L24 34a3.5 3.5 0 0 1-3.5 3.5h-13a1 1 0 0 1-1-1z"/><path fill="url(#SVG2ajRrsrn1)" d="M41.5 9a1 1 0 0 0-1-1h-15A1.5 1.5 0 0 0 24 9.5V34a3.5 3.5 0 0 0 3.5 3.5h13a1 1 0 0 0 1-1z"/><defs><linearGradient id="SVGMcHdPukX1" x1="11.246" x2="17.19" y1="13.987" y2="48.12" gradientUnits="userSpaceOnUse"><stop stop-color="#20ac9d"/><stop offset="1" stop-color="#2052cb"/></linearGradient><linearGradient id="SVGUPoqCcPS1" x1="36.754" x2="30.81" y1="13.987" y2="48.12" gradientUnits="userSpaceOnUse"><stop stop-color="#20ac9d"/><stop offset="1" stop-color="#2052cb"/></linearGradient><linearGradient id="SVGFQgR32Px1" x1="4" x2="56.016" y1="6.865" y2="31.284" gradientUnits="userSpaceOnUse"><stop stop-color="#b6efff"/><stop offset=".851" stop-color="#58aafe"/></linearGradient><linearGradient id="SVG2ajRrsrn1" x1="35.25" x2="7.225" y1="9.375" y2="14.885" gradientUnits="userSpaceOnUse"><stop offset=".123" stop-color="#9deaff"/><stop offset=".616" stop-color="#4894fe"/></linearGradient></defs></g></svg>
React
import type { SVGProps } from "react";
export function FluentColorBookOpen48(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48"><g fill="none"><path fill="url(#SVGMcHdPukX1)" d="M24 9.725A5.5 5.5 0 0 0 20 8H7a3 3 0 0 0-3 3v26a3 3 0 0 0 3 3h13a5.5 5.5 0 0 0 4-1.725L25 23z"/><path fill="url(#SVGUPoqCcPS1)" d="M24 9.725A5.5 5.5 0 0 1 28 8h13a3 3 0 0 1 3 3v26a3 3 0 0 1-3 3H28a5.5 5.5 0 0 1-4-1.725L23 23z"/><path fill="url(#SVGFQgR32Px1)" d="M6.5 9a1 1 0 0 1 1-1h15A1.5 1.5 0 0 1 24 9.5l.5 15L24 34a3.5 3.5 0 0 1-3.5 3.5h-13a1 1 0 0 1-1-1z"/><path fill="url(#SVG2ajRrsrn1)" d="M41.5 9a1 1 0 0 0-1-1h-15A1.5 1.5 0 0 0 24 9.5V34a3.5 3.5 0 0 0 3.5 3.5h13a1 1 0 0 0 1-1z"/><defs><linearGradient id="SVGMcHdPukX1" x1="11.246" x2="17.19" y1="13.987" y2="48.12" gradientUnits="userSpaceOnUse"><stop stopColor="#20ac9d"/><stop offset="1" stopColor="#2052cb"/></linearGradient><linearGradient id="SVGUPoqCcPS1" x1="36.754" x2="30.81" y1="13.987" y2="48.12" gradientUnits="userSpaceOnUse"><stop stopColor="#20ac9d"/><stop offset="1" stopColor="#2052cb"/></linearGradient><linearGradient id="SVGFQgR32Px1" x1="4" x2="56.016" y1="6.865" y2="31.284" gradientUnits="userSpaceOnUse"><stop stopColor="#b6efff"/><stop offset=".851" stopColor="#58aafe"/></linearGradient><linearGradient id="SVG2ajRrsrn1" x1="35.25" x2="7.225" y1="9.375" y2="14.885" gradientUnits="userSpaceOnUse"><stop offset=".123" stopColor="#9deaff"/><stop offset=".616" stopColor="#4894fe"/></linearGradient></defs></g></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48"><g fill="none"><path fill="url(#SVGMcHdPukX1)" d="M24 9.725A5.5 5.5 0 0 0 20 8H7a3 3 0 0 0-3 3v26a3 3 0 0 0 3 3h13a5.5 5.5 0 0 0 4-1.725L25 23z"/><path fill="url(#SVGUPoqCcPS1)" d="M24 9.725A5.5 5.5 0 0 1 28 8h13a3 3 0 0 1 3 3v26a3 3 0 0 1-3 3H28a5.5 5.5 0 0 1-4-1.725L23 23z"/><path fill="url(#SVGFQgR32Px1)" d="M6.5 9a1 1 0 0 1 1-1h15A1.5 1.5 0 0 1 24 9.5l.5 15L24 34a3.5 3.5 0 0 1-3.5 3.5h-13a1 1 0 0 1-1-1z"/><path fill="url(#SVG2ajRrsrn1)" d="M41.5 9a1 1 0 0 0-1-1h-15A1.5 1.5 0 0 0 24 9.5V34a3.5 3.5 0 0 0 3.5 3.5h13a1 1 0 0 0 1-1z"/><defs><linearGradient id="SVGMcHdPukX1" x1="11.246" x2="17.19" y1="13.987" y2="48.12" gradientUnits="userSpaceOnUse"><stop stop-color="#20ac9d"/><stop offset="1" stop-color="#2052cb"/></linearGradient><linearGradient id="SVGUPoqCcPS1" x1="36.754" x2="30.81" y1="13.987" y2="48.12" gradientUnits="userSpaceOnUse"><stop stop-color="#20ac9d"/><stop offset="1" stop-color="#2052cb"/></linearGradient><linearGradient id="SVGFQgR32Px1" x1="4" x2="56.016" y1="6.865" y2="31.284" gradientUnits="userSpaceOnUse"><stop stop-color="#b6efff"/><stop offset=".851" stop-color="#58aafe"/></linearGradient><linearGradient id="SVG2ajRrsrn1" x1="35.25" x2="7.225" y1="9.375" y2="14.885" gradientUnits="userSpaceOnUse"><stop offset=".123" stop-color="#9deaff"/><stop offset=".616" stop-color="#4894fe"/></linearGradient></defs></g></svg> </template>
CSS
.icon-book-open-48 {
width: 24px;
height: 24px;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cg%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22url(%23SVGMcHdPukX1)%22%20d%3D%22M24%209.725A5.5%205.5%200%200%200%2020%208H7a3%203%200%200%200-3%203v26a3%203%200%200%200%203%203h13a5.5%205.5%200%200%200%204-1.725L25%2023z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGUPoqCcPS1)%22%20d%3D%22M24%209.725A5.5%205.5%200%200%201%2028%208h13a3%203%200%200%201%203%203v26a3%203%200%200%201-3%203H28a5.5%205.5%200%200%201-4-1.725L23%2023z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGFQgR32Px1)%22%20d%3D%22M6.5%209a1%201%200%200%201%201-1h15A1.5%201.5%200%200%201%2024%209.5l.5%2015L24%2034a3.5%203.5%200%200%201-3.5%203.5h-13a1%201%200%200%201-1-1z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVG2ajRrsrn1)%22%20d%3D%22M41.5%209a1%201%200%200%200-1-1h-15A1.5%201.5%200%200%200%2024%209.5V34a3.5%203.5%200%200%200%203.5%203.5h13a1%201%200%200%200%201-1z%22%2F%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22SVGMcHdPukX1%22%20x1%3D%2211.246%22%20x2%3D%2217.19%22%20y1%3D%2213.987%22%20y2%3D%2248.12%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%2320ac9d%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%232052cb%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGUPoqCcPS1%22%20x1%3D%2236.754%22%20x2%3D%2230.81%22%20y1%3D%2213.987%22%20y2%3D%2248.12%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%2320ac9d%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%232052cb%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGFQgR32Px1%22%20x1%3D%224%22%20x2%3D%2256.016%22%20y1%3D%226.865%22%20y2%3D%2231.284%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23b6efff%22%2F%3E%3Cstop%20offset%3D%22.851%22%20stop-color%3D%22%2358aafe%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVG2ajRrsrn1%22%20x1%3D%2235.25%22%20x2%3D%227.225%22%20y1%3D%229.375%22%20y2%3D%2214.885%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%22.123%22%20stop-color%3D%22%239deaff%22%2F%3E%3Cstop%20offset%3D%22.616%22%20stop-color%3D%22%234894fe%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cg%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22url(%23SVGMcHdPukX1)%22%20d%3D%22M24%209.725A5.5%205.5%200%200%200%2020%208H7a3%203%200%200%200-3%203v26a3%203%200%200%200%203%203h13a5.5%205.5%200%200%200%204-1.725L25%2023z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGUPoqCcPS1)%22%20d%3D%22M24%209.725A5.5%205.5%200%200%201%2028%208h13a3%203%200%200%201%203%203v26a3%203%200%200%201-3%203H28a5.5%205.5%200%200%201-4-1.725L23%2023z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGFQgR32Px1)%22%20d%3D%22M6.5%209a1%201%200%200%201%201-1h15A1.5%201.5%200%200%201%2024%209.5l.5%2015L24%2034a3.5%203.5%200%200%201-3.5%203.5h-13a1%201%200%200%201-1-1z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVG2ajRrsrn1)%22%20d%3D%22M41.5%209a1%201%200%200%200-1-1h-15A1.5%201.5%200%200%200%2024%209.5V34a3.5%203.5%200%200%200%203.5%203.5h13a1%201%200%200%200%201-1z%22%2F%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22SVGMcHdPukX1%22%20x1%3D%2211.246%22%20x2%3D%2217.19%22%20y1%3D%2213.987%22%20y2%3D%2248.12%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%2320ac9d%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%232052cb%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGUPoqCcPS1%22%20x1%3D%2236.754%22%20x2%3D%2230.81%22%20y1%3D%2213.987%22%20y2%3D%2248.12%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%2320ac9d%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%232052cb%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGFQgR32Px1%22%20x1%3D%224%22%20x2%3D%2256.016%22%20y1%3D%226.865%22%20y2%3D%2231.284%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23b6efff%22%2F%3E%3Cstop%20offset%3D%22.851%22%20stop-color%3D%22%2358aafe%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVG2ajRrsrn1%22%20x1%3D%2235.25%22%20x2%3D%227.225%22%20y1%3D%229.375%22%20y2%3D%2214.885%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%22.123%22%20stop-color%3D%22%239deaff%22%2F%3E%3Cstop%20offset%3D%22.616%22%20stop-color%3D%22%234894fe%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/fluent-color/book-open-48.svg?color=%231a73e8&size=48
