book contacts icon
book-contacts-32 from Fluent UI System Color Icons by Microsoft Corporation · 32 · MIT Free for personal and commercial use.
- Name
- book-contacts-32
- Set
- Fluent UI System Color Icons
- Style
- 32
- Viewbox
- 32×32
- License
- MIT
5 other variants in Fluent UI System Color Icons
The same icon in other sets
Related icons in Fluent UI System Color Icons
Use the book contacts icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><g fill="none"><path fill="url(#SVGybQiheuV2)" d="M6 25h20.688S26 25.4 26 27s.688 2 .688 2H9a3 3 0 0 1-3-3z"/><path fill="url(#SVG6upNGdOm2)" d="M9 28a2 2 0 0 1-2-2h18.25A1.75 1.75 0 0 0 27 24.25V6a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v20a4 4 0 0 0 4 4h17a1 1 0 1 0 0-2z"/><path fill="url(#SVGATjivcFG2)" fill-opacity=".3" d="M9 28a2 2 0 0 1-2-2h18.25A1.75 1.75 0 0 0 27 24.25V6a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v20a4 4 0 0 0 4 4h17a1 1 0 1 0 0-2z"/><path fill="url(#SVGsAvmNAKw2)" fill-opacity=".3" d="M9 28a2 2 0 0 1-2-2h18.25A1.75 1.75 0 0 0 27 24.25V6a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v20a4 4 0 0 0 4 4h17a1 1 0 1 0 0-2z"/><path fill="url(#SVGyqoxZGBP2)" fill-opacity=".9" d="M19 10.5a3 3 0 1 1-6 0a3 3 0 0 1 6 0m2.5 6.75c0 1.868-1.571 3.75-5.5 3.75s-5.5-1.875-5.5-3.75v-.205c0-1.13.916-2.045 2.046-2.045h6.909c1.13 0 2.045.915 2.045 2.045z"/><defs><linearGradient id="SVGybQiheuV2" x1="15.565" x2="15.565" y1="28.2" y2="25" gradientUnits="userSpaceOnUse"><stop stop-color="#9deaff"/><stop offset=".716" stop-color="#58aafe"/></linearGradient><linearGradient id="SVG6upNGdOm2" x1="12.828" x2="17.084" y1="7.239" y2="37.41" gradientUnits="userSpaceOnUse"><stop stop-color="#20ac9d"/><stop offset="1" stop-color="#2052cb"/></linearGradient><linearGradient id="SVGyqoxZGBP2" x1="24.255" x2=".713" y1="32.571" y2="-2.607" gradientUnits="userSpaceOnUse"><stop stop-color="#9deaff"/><stop offset="1" stop-color="#fff"/></linearGradient><radialGradient id="SVGATjivcFG2" cx="0" cy="0" r="1" gradientTransform="matrix(8.5 0 0 4.26316 16 18.5)" gradientUnits="userSpaceOnUse"><stop stop-color="#171155"/><stop offset="1" stop-color="#4a43cb" stop-opacity="0"/></radialGradient><radialGradient id="SVGsAvmNAKw2" cx="0" cy="0" r="1" gradientTransform="matrix(3.5 0 0 3.40447 17 10.5)" gradientUnits="userSpaceOnUse"><stop stop-color="#171155"/><stop offset="1" stop-color="#4a43cb" stop-opacity="0"/></radialGradient></defs></g></svg>
React
import type { SVGProps } from "react";
export function FluentColorBookContacts32(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><g fill="none"><path fill="url(#SVGybQiheuV2)" d="M6 25h20.688S26 25.4 26 27s.688 2 .688 2H9a3 3 0 0 1-3-3z"/><path fill="url(#SVG6upNGdOm2)" d="M9 28a2 2 0 0 1-2-2h18.25A1.75 1.75 0 0 0 27 24.25V6a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v20a4 4 0 0 0 4 4h17a1 1 0 1 0 0-2z"/><path fill="url(#SVGATjivcFG2)" fillOpacity=".3" d="M9 28a2 2 0 0 1-2-2h18.25A1.75 1.75 0 0 0 27 24.25V6a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v20a4 4 0 0 0 4 4h17a1 1 0 1 0 0-2z"/><path fill="url(#SVGsAvmNAKw2)" fillOpacity=".3" d="M9 28a2 2 0 0 1-2-2h18.25A1.75 1.75 0 0 0 27 24.25V6a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v20a4 4 0 0 0 4 4h17a1 1 0 1 0 0-2z"/><path fill="url(#SVGyqoxZGBP2)" fillOpacity=".9" d="M19 10.5a3 3 0 1 1-6 0a3 3 0 0 1 6 0m2.5 6.75c0 1.868-1.571 3.75-5.5 3.75s-5.5-1.875-5.5-3.75v-.205c0-1.13.916-2.045 2.046-2.045h6.909c1.13 0 2.045.915 2.045 2.045z"/><defs><linearGradient id="SVGybQiheuV2" x1="15.565" x2="15.565" y1="28.2" y2="25" gradientUnits="userSpaceOnUse"><stop stopColor="#9deaff"/><stop offset=".716" stopColor="#58aafe"/></linearGradient><linearGradient id="SVG6upNGdOm2" x1="12.828" x2="17.084" y1="7.239" y2="37.41" gradientUnits="userSpaceOnUse"><stop stopColor="#20ac9d"/><stop offset="1" stopColor="#2052cb"/></linearGradient><linearGradient id="SVGyqoxZGBP2" x1="24.255" x2=".713" y1="32.571" y2="-2.607" gradientUnits="userSpaceOnUse"><stop stopColor="#9deaff"/><stop offset="1" stopColor="#fff"/></linearGradient><radialGradient id="SVGATjivcFG2" cx="0" cy="0" r="1" gradientTransform="matrix(8.5 0 0 4.26316 16 18.5)" gradientUnits="userSpaceOnUse"><stop stopColor="#171155"/><stop offset="1" stopColor="#4a43cb" stopOpacity="0"/></radialGradient><radialGradient id="SVGsAvmNAKw2" cx="0" cy="0" r="1" gradientTransform="matrix(3.5 0 0 3.40447 17 10.5)" gradientUnits="userSpaceOnUse"><stop stopColor="#171155"/><stop offset="1" stopColor="#4a43cb" stopOpacity="0"/></radialGradient></defs></g></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><g fill="none"><path fill="url(#SVGybQiheuV2)" d="M6 25h20.688S26 25.4 26 27s.688 2 .688 2H9a3 3 0 0 1-3-3z"/><path fill="url(#SVG6upNGdOm2)" d="M9 28a2 2 0 0 1-2-2h18.25A1.75 1.75 0 0 0 27 24.25V6a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v20a4 4 0 0 0 4 4h17a1 1 0 1 0 0-2z"/><path fill="url(#SVGATjivcFG2)" fill-opacity=".3" d="M9 28a2 2 0 0 1-2-2h18.25A1.75 1.75 0 0 0 27 24.25V6a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v20a4 4 0 0 0 4 4h17a1 1 0 1 0 0-2z"/><path fill="url(#SVGsAvmNAKw2)" fill-opacity=".3" d="M9 28a2 2 0 0 1-2-2h18.25A1.75 1.75 0 0 0 27 24.25V6a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v20a4 4 0 0 0 4 4h17a1 1 0 1 0 0-2z"/><path fill="url(#SVGyqoxZGBP2)" fill-opacity=".9" d="M19 10.5a3 3 0 1 1-6 0a3 3 0 0 1 6 0m2.5 6.75c0 1.868-1.571 3.75-5.5 3.75s-5.5-1.875-5.5-3.75v-.205c0-1.13.916-2.045 2.046-2.045h6.909c1.13 0 2.045.915 2.045 2.045z"/><defs><linearGradient id="SVGybQiheuV2" x1="15.565" x2="15.565" y1="28.2" y2="25" gradientUnits="userSpaceOnUse"><stop stop-color="#9deaff"/><stop offset=".716" stop-color="#58aafe"/></linearGradient><linearGradient id="SVG6upNGdOm2" x1="12.828" x2="17.084" y1="7.239" y2="37.41" gradientUnits="userSpaceOnUse"><stop stop-color="#20ac9d"/><stop offset="1" stop-color="#2052cb"/></linearGradient><linearGradient id="SVGyqoxZGBP2" x1="24.255" x2=".713" y1="32.571" y2="-2.607" gradientUnits="userSpaceOnUse"><stop stop-color="#9deaff"/><stop offset="1" stop-color="#fff"/></linearGradient><radialGradient id="SVGATjivcFG2" cx="0" cy="0" r="1" gradientTransform="matrix(8.5 0 0 4.26316 16 18.5)" gradientUnits="userSpaceOnUse"><stop stop-color="#171155"/><stop offset="1" stop-color="#4a43cb" stop-opacity="0"/></radialGradient><radialGradient id="SVGsAvmNAKw2" cx="0" cy="0" r="1" gradientTransform="matrix(3.5 0 0 3.40447 17 10.5)" gradientUnits="userSpaceOnUse"><stop stop-color="#171155"/><stop offset="1" stop-color="#4a43cb" stop-opacity="0"/></radialGradient></defs></g></svg> </template>
CSS
.icon-book-contacts-32 {
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%2032%2032%22%3E%3Cg%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22url(%23SVGybQiheuV2)%22%20d%3D%22M6%2025h20.688S26%2025.4%2026%2027s.688%202%20.688%202H9a3%203%200%200%201-3-3z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVG6upNGdOm2)%22%20d%3D%22M9%2028a2%202%200%200%201-2-2h18.25A1.75%201.75%200%200%200%2027%2024.25V6a4%204%200%200%200-4-4H9a4%204%200%200%200-4%204v20a4%204%200%200%200%204%204h17a1%201%200%201%200%200-2z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGATjivcFG2)%22%20fill-opacity%3D%22.3%22%20d%3D%22M9%2028a2%202%200%200%201-2-2h18.25A1.75%201.75%200%200%200%2027%2024.25V6a4%204%200%200%200-4-4H9a4%204%200%200%200-4%204v20a4%204%200%200%200%204%204h17a1%201%200%201%200%200-2z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGsAvmNAKw2)%22%20fill-opacity%3D%22.3%22%20d%3D%22M9%2028a2%202%200%200%201-2-2h18.25A1.75%201.75%200%200%200%2027%2024.25V6a4%204%200%200%200-4-4H9a4%204%200%200%200-4%204v20a4%204%200%200%200%204%204h17a1%201%200%201%200%200-2z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGyqoxZGBP2)%22%20fill-opacity%3D%22.9%22%20d%3D%22M19%2010.5a3%203%200%201%201-6%200a3%203%200%200%201%206%200m2.5%206.75c0%201.868-1.571%203.75-5.5%203.75s-5.5-1.875-5.5-3.75v-.205c0-1.13.916-2.045%202.046-2.045h6.909c1.13%200%202.045.915%202.045%202.045z%22%2F%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22SVGybQiheuV2%22%20x1%3D%2215.565%22%20x2%3D%2215.565%22%20y1%3D%2228.2%22%20y2%3D%2225%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%239deaff%22%2F%3E%3Cstop%20offset%3D%22.716%22%20stop-color%3D%22%2358aafe%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVG6upNGdOm2%22%20x1%3D%2212.828%22%20x2%3D%2217.084%22%20y1%3D%227.239%22%20y2%3D%2237.41%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%22SVGyqoxZGBP2%22%20x1%3D%2224.255%22%20x2%3D%22.713%22%20y1%3D%2232.571%22%20y2%3D%22-2.607%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%239deaff%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23fff%22%2F%3E%3C%2FlinearGradient%3E%3CradialGradient%20id%3D%22SVGATjivcFG2%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22matrix(8.5%200%200%204.26316%2016%2018.5)%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23171155%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%234a43cb%22%20stop-opacity%3D%220%22%2F%3E%3C%2FradialGradient%3E%3CradialGradient%20id%3D%22SVGsAvmNAKw2%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22matrix(3.5%200%200%203.40447%2017%2010.5)%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23171155%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%234a43cb%22%20stop-opacity%3D%220%22%2F%3E%3C%2FradialGradient%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%2032%2032%22%3E%3Cg%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22url(%23SVGybQiheuV2)%22%20d%3D%22M6%2025h20.688S26%2025.4%2026%2027s.688%202%20.688%202H9a3%203%200%200%201-3-3z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVG6upNGdOm2)%22%20d%3D%22M9%2028a2%202%200%200%201-2-2h18.25A1.75%201.75%200%200%200%2027%2024.25V6a4%204%200%200%200-4-4H9a4%204%200%200%200-4%204v20a4%204%200%200%200%204%204h17a1%201%200%201%200%200-2z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGATjivcFG2)%22%20fill-opacity%3D%22.3%22%20d%3D%22M9%2028a2%202%200%200%201-2-2h18.25A1.75%201.75%200%200%200%2027%2024.25V6a4%204%200%200%200-4-4H9a4%204%200%200%200-4%204v20a4%204%200%200%200%204%204h17a1%201%200%201%200%200-2z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGsAvmNAKw2)%22%20fill-opacity%3D%22.3%22%20d%3D%22M9%2028a2%202%200%200%201-2-2h18.25A1.75%201.75%200%200%200%2027%2024.25V6a4%204%200%200%200-4-4H9a4%204%200%200%200-4%204v20a4%204%200%200%200%204%204h17a1%201%200%201%200%200-2z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGyqoxZGBP2)%22%20fill-opacity%3D%22.9%22%20d%3D%22M19%2010.5a3%203%200%201%201-6%200a3%203%200%200%201%206%200m2.5%206.75c0%201.868-1.571%203.75-5.5%203.75s-5.5-1.875-5.5-3.75v-.205c0-1.13.916-2.045%202.046-2.045h6.909c1.13%200%202.045.915%202.045%202.045z%22%2F%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22SVGybQiheuV2%22%20x1%3D%2215.565%22%20x2%3D%2215.565%22%20y1%3D%2228.2%22%20y2%3D%2225%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%239deaff%22%2F%3E%3Cstop%20offset%3D%22.716%22%20stop-color%3D%22%2358aafe%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVG6upNGdOm2%22%20x1%3D%2212.828%22%20x2%3D%2217.084%22%20y1%3D%227.239%22%20y2%3D%2237.41%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%22SVGyqoxZGBP2%22%20x1%3D%2224.255%22%20x2%3D%22.713%22%20y1%3D%2232.571%22%20y2%3D%22-2.607%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%239deaff%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23fff%22%2F%3E%3C%2FlinearGradient%3E%3CradialGradient%20id%3D%22SVGATjivcFG2%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22matrix(8.5%200%200%204.26316%2016%2018.5)%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23171155%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%234a43cb%22%20stop-opacity%3D%220%22%2F%3E%3C%2FradialGradient%3E%3CradialGradient%20id%3D%22SVGsAvmNAKw2%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22matrix(3.5%200%200%203.40447%2017%2010.5)%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23171155%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%234a43cb%22%20stop-opacity%3D%220%22%2F%3E%3C%2FradialGradient%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-contacts-32.svg?color=%231a73e8&size=48
