ICONYZ
日本語
Fluent Emoji の Books アイコン

Books アイコン

fluent-emoji:books

Books アイコン(fluent-emoji:books)は、Fluent Emoji セットの無料 SVG アイコンです(作者: Microsoft Corporation)。 32 × 32 のグリッドで描かれています。 Fluent Emoji icons は MIT ライセンス で公開されており、個人・商用プロジェクトで利用できます。 SVG・JSX・Vue・Svelte のコードとしてコピーするか、SVG ファイルをダウンロードできます。

アイコンセット
Fluent Emoji
作者
Microsoft Corporation
ライセンス
MIT
サイズ
32 × 32
タグ
book
SVG をダウンロード

SVG コード

<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><g fill="none"><g filter="url(#iNMZ4sc)"><path fill="url(#i8xwWLc)" d="M16.573 11.076h12.39c.744 0 1.348.604 1.348 1.348V28H16.573z"/><path fill="url(#iyy5Lgc)" d="M16.573 11.076h12.39c.744 0 1.348.604 1.348 1.348V28H16.573z"/><path fill="url(#iOlg6jb)" d="M16.573 11.076h12.39c.744 0 1.348.604 1.348 1.348V28H16.573z"/></g><path fill="url(#igpQMpc)" d="M15.814 27.596h14.497v1.685h-.337l-.337.338H15.814z"/><path fill="url(#ixd3V2d)" d="M15.814 27.596h14.497v1.685h-.337l-.337.338H15.814z"/><path fill="url(#iiiydwe)" d="M16.488 11.076a1.01 1.01 0 0 0-1.011 1.011v16.52h.674c0-.372.302-.674.674-.674h.675V11.076z"/><path fill="url(#icyTxhb)" d="M16.488 11.076a1.01 1.01 0 0 0-1.011 1.011v16.52h.674c0-.372.302-.674.674-.674h.675V11.076z"/><g filter="url(#i4MOdPz)"><path fill="url(#iXqBXme)" d="M16.488 27.259a1.01 1.01 0 0 0-1.011 1.011v.674c0 .559.453 1.012 1.011 1.012h13.087c.44 0 .736-.226.736-.675H16.825a.674.674 0 0 1 0-1.348h13.486v-.674z"/></g><path fill="url(#ieT5RAd)" d="M10.437 7.036H21.9c.745 0 1.349.604 1.349 1.349v14.834H10.437z"/><path fill="url(#ishvnle)" d="M10.437 7.036H21.9c.745 0 1.349.604 1.349 1.349v14.834H10.437z"/><path fill="url(#iQoF0fd)" d="M10.437 7.036H21.9c.745 0 1.349.604 1.349 1.349v14.834H10.437z"/><path fill="url(#ioROuVc)" d="M8.751 23.556H23.25v1.686h-.337l-.338.337H8.751z"/><path fill="url(#iAnXadW)" d="M8.751 23.556H23.25v1.686h-.337l-.338.337H8.751z"/><path fill="url(#iN3npsf)" d="M9.426 7.036c-.559 0-1.012.453-1.012 1.012v16.52h.675c0-.373.301-.675.674-.675h.674V7.036z"/><path fill="url(#iwJnB7b)" d="M9.426 7.036c-.559 0-1.012.453-1.012 1.012v16.52h.675c0-.373.301-.675.674-.675h.674V7.036z"/><path fill="url(#ipsgsBd)" d="M9.426 7.036c-.559 0-1.012.453-1.012 1.012v16.52h.675c0-.373.301-.675.674-.675h.674V7.036z"/><g filter="url(#ihkcnmc)"><path fill="url(#itpuv2c)" d="M9.426 23.22a1.01 1.01 0 0 0-1.012 1.01v.675c0 .558.453 1.011 1.012 1.011h13.086c.44 0 .737-.225.737-.674H9.763a.674.674 0 0 1 0-1.349h13.486v-.674z"/></g><g filter="url(#ixnZAVb)"><path fill="url(#i65VOeb)" d="M3.282 4h12.387c.744 0 1.348.604 1.348 1.348v14.83H3.282z"/><path fill="url(#izgOa7c)" d="M3.282 4h12.387c.744 0 1.348.604 1.348 1.348v14.83H3.282z"/></g><path fill="url(#icd7Dcc)" d="M2.524 20.516h14.493V22.2h-.337l-.337.337H2.523z"/><path fill="url(#iN9D1Qc)" d="M2.524 20.516h14.493V22.2h-.337l-.337.337H2.523z"/><path fill="url(#ihLKS0b)" d="M3.198 4a1.01 1.01 0 0 0-1.011 1.011v16.516h.674c0-.373.302-.674.674-.674h.674V4z"/><g filter="url(#ijiUcQb)"><path fill="url(#iXjgmne)" d="M3.198 20.179a1.01 1.01 0 0 0-1.011 1.01v.675a1.01 1.01 0 0 0 1.01 1.011h13.084c.44 0 .736-.226.736-.674H3.535a.674.674 0 1 1 0-1.348h13.482v-.674z"/></g><defs><linearGradient id="i8xwWLc" x1="23.905" x2="23.905" y1="11.076" y2="27.259" gradientUnits="userSpaceOnUse"><stop stop-color="#56D1F3"/><stop offset="1" stop-color="#39ADF1"/></linearGradient><linearGradient id="iyy5Lgc" x1="30.416" x2="29.089" y1="13.457" y2="13.646" gradientUnits="userSpaceOnUse"><stop offset=".014" stop-color="#7FECFF"/><stop offset="1" stop-color="#60DEFF" stop-opacity="0"/></linearGradient><linearGradient id="igpQMpc" x1="16.638" x2="30.189" y1="28.887" y2="28.887" gradientUnits="userSpaceOnUse"><stop stop-color="#D5BCEB"/><stop offset="1" stop-color="#DCCCED"/><stop offset="1" stop-color="#E3D3F2"/></linearGradient><linearGradient id="ixd3V2d" x1="23.063" x2="23.063" y1="27.756" y2="28.713" gradientUnits="userSpaceOnUse"><stop stop-color="#9F84AE"/><stop offset="1" stop-color="#C5B1D6" stop-opacity="0"/></linearGradient><linearGradient id="iiiydwe" x1="15.615" x2="17.205" y1="21.013" y2="21.021" gradientUnits="userSpaceOnUse"><stop stop-color="#44A3D2"/><stop offset="1" stop-color="#3C8FCC"/></linearGradient><linearGradient id="iXqBXme" x1="16.442" x2="30.311" y1="29.257" y2="29.235" gradientUnits="userSpaceOnUse"><stop stop-color="#3769C5"/><stop offset="1" stop-color="#3666C3"/></linearGradient><linearGradient id="ieT5RAd" x1="16.843" x2="16.843" y1="7.036" y2="23.219" gradientUnits="userSpaceOnUse"><stop stop-color="#E13074"/><stop offset="1" stop-color="#E0334C"/></linearGradient><linearGradient id="ishvnle" x1="24.388" x2="22.561" y1="9.317" y2="9.382" gradientUnits="userSpaceOnUse"><stop offset=".409" stop-color="#F76594"/><stop offset="1" stop-color="#FA6295" stop-opacity="0"/></linearGradient><linearGradient id="ioROuVc" x1="9.575" x2="23.127" y1="24.848" y2="24.848" gradientUnits="userSpaceOnUse"><stop stop-color="#D5BCEB"/><stop offset="1" stop-color="#DCCCED"/><stop offset="1" stop-color="#E3D3F2"/></linearGradient><linearGradient id="iAnXadW" x1="16" x2="16" y1="23.717" y2="24.674" gradientUnits="userSpaceOnUse"><stop stop-color="#9F84AE"/><stop offset="1" stop-color="#C5B1D6" stop-opacity="0"/></linearGradient><linearGradient id="iN3npsf" x1="8.553" x2="10.437" y1="16.974" y2="16.974" gradientUnits="userSpaceOnUse"><stop stop-color="#9A3E4F"/><stop offset="1" stop-color="#AA2C4D"/></linearGradient><linearGradient id="itpuv2c" x1="9.379" x2="23.249" y1="25.218" y2="25.196" gradientUnits="userSpaceOnUse"><stop stop-color="#AB1F5C"/><stop offset="1" stop-color="#A51E5A"/></linearGradient><linearGradient id="i65VOeb" x1="10.613" x2="10.613" y1="4" y2="20.179" gradientUnits="userSpaceOnUse"><stop stop-color="#A6E051"/><stop offset="1" stop-color="#74D891"/></linearGradient><linearGradient id="izgOa7c" x1="17.122" x2="15.795" y1="6.38" y2="6.57" gradientUnits="userSpaceOnUse"><stop offset=".014" stop-color="#C0FA7C"/><stop offset="1" stop-color="#B0ED5B" stop-opacity="0"/></linearGradient><linearGradient id="icd7Dcc" x1="3.347" x2="16.895" y1="21.807" y2="21.807" gradientUnits="userSpaceOnUse"><stop stop-color="#D5BCEB"/><stop offset="1" stop-color="#DCCCED"/><stop offset="1" stop-color="#E3D3F2"/></linearGradient><linearGradient id="iN9D1Qc" x1="9.77" x2="9.77" y1="20.676" y2="21.633" gradientUnits="userSpaceOnUse"><stop stop-color="#9F84AE"/><stop offset="1" stop-color="#C5B1D6" stop-opacity="0"/></linearGradient><linearGradient id="ihLKS0b" x1="2.325" x2="3.914" y1="13.935" y2="13.943" gradientUnits="userSpaceOnUse"><stop stop-color="#63B33B"/><stop offset="1" stop-color="#429B5B"/></linearGradient><linearGradient id="iXjgmne" x1="3.151" x2="17.017" y1="22.177" y2="22.155" gradientUnits="userSpaceOnUse"><stop stop-color="#2E7671"/><stop offset="1" stop-color="#2E7172"/></linearGradient><radialGradient id="iOlg6jb" cx="0" cy="0" r="1" gradientTransform="matrix(6.0275 0 0 5.11709 17.414 27.259)" gradientUnits="userSpaceOnUse"><stop stop-color="#2E7CD5"/><stop offset="1" stop-color="#2E7CD5" stop-opacity="0"/></radialGradient><radialGradient id="icyTxhb" cx="0" cy="0" r="1" gradientTransform="matrix(0 4.21875 -2.46036 0 17.5 25.625)" gradientUnits="userSpaceOnUse"><stop stop-color="#3163AE"/><stop offset="1" stop-color="#3163AE" stop-opacity="0"/></radialGradient><radialGradient id="iQoF0fd" cx="0" cy="0" r="1" gradientTransform="matrix(6.75 0 0 5.4622 11.008 22.813)" gradientUnits="userSpaceOnUse"><stop stop-color="#B21940"/><stop offset="1" stop-color="#B21940" stop-opacity="0"/></radialGradient><radialGradient id="iwJnB7b" cx="0" cy="0" r="1" gradientTransform="matrix(0 -4.4809 .78956 0 8.683 23.673)" gradientUnits="userSpaceOnUse"><stop stop-color="#9B3F51"/><stop offset="1" stop-color="#9B3F51" stop-opacity="0"/></radialGradient><radialGradient id="ipsgsBd" cx="0" cy="0" r="1" gradientTransform="matrix(0 3.28125 -1.86661 0 10.434 22.345)" gradientUnits="userSpaceOnUse"><stop offset=".267" stop-color="#8F163A"/><stop offset="1" stop-color="#8F163A" stop-opacity="0"/></radialGradient><filter id="iNMZ4sc" width="13.739" height="17.024" x="16.573" y="11.076" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy=".1"/><feGaussianBlur stdDeviation=".25"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.32549 0 0 0 0 0.807843 0 0 0 0 0.933333 0 0 0 1 0"/><feBlend in2="shape" result="effect1_innerShadow_18_20855"/></filter><filter id="i4MOdPz" width="14.834" height="2.797" x="15.477" y="27.259" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy=".1"/><feGaussianBlur stdDeviation=".15"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.168627 0 0 0 0 0.388235 0 0 0 0 0.74902 0 0 0 1 0"/><feBlend in2="shape" result="effect1_innerShadow_18_20855"/></filter><filter id="ihkcnmc" width="14.834" height="2.797" x="8.414" y="23.219" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy=".1"/><feGaussianBlur stdDeviation=".15"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.694118 0 0 0 0 0.192157 0 0 0 0 0.360784 0 0 0 1 0"/><feBlend in2="shape" result="effect1_innerShadow_18_20855"/></filter><filter id="ixnZAVb" width="13.735" height="16.279" x="3.282" y="4" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy=".1"/><feGaussianBlur stdDeviation=".25"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.623529 0 0 0 0 0.858824 0 0 0 0 0.290196 0 0 0 1 0"/><feBlend in2="shape" result="effect1_innerShadow_18_20855"/></filter><filter id="ijiUcQb" width="14.83" height="2.796" x="2.187" y="20.179" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy=".1"/><feGaussianBlur stdDeviation=".15"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.113725 0 0 0 0 0.435294 0 0 0 0 0.439216 0 0 0 1 0"/><feBlend in2="shape" result="effect1_innerShadow_18_20855"/></filter></defs></g></svg>

Books アイコンの使い方

React

import { Icon } from "@iconify/react";

<Icon icon="fluent-emoji:books" width="24" />

Vue

<script setup>
import { Icon } from "@iconify/vue";
</script>

<template>
  <Icon icon="fluent-emoji:books" width="24" />
</template>

Svelte

<script>
  import Icon from "@iconify/svelte";
</script>

<Icon icon="fluent-emoji:books" width="24" />

Tailwind CSS

<!-- @iconify/tailwind plugin -->
<span class="icon-[fluent-emoji--books]"></span>

UnoCSS

<!-- @unocss/preset-icons + @iconify-json/fluent-emoji -->
<div class="i-fluent-emoji:books"></div>

Web コンポーネント

<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>

<iconify-icon icon="fluent-emoji:books"></iconify-icon>

HTML 画像

<img src="https://iconyz.com/api/public/svg/fluent-emoji/books.svg" alt="Books アイコン" width="24" height="24">

他のアイコンセットの Books アイコン

Books アイコン のよくある質問

Books アイコンは商用利用でも無料ですか?

はい。Fluent Emoji icons は MIT ライセンス で公開されており、個人・商用プロジェクトで利用できます。

React で Books アイコンを使うには?

@iconify/react をインストールして <Icon icon="fluent-emoji:books" /> を描画するか、このページの「コードをコピー」で単体の React コンポーネントを取得します。

Books アイコンをウェブページに追加するには?

画像タグで SVG ファイルを読み込みます: <img src="https://iconyz.com/api/public/svg/fluent-emoji/books.svg" alt="Books アイコン">。CSS でスタイルを付けたい場合は SVG コードをページに直接貼り付けます。

Fluent Emoji アイコン をすべて見る →