people community icon
people-community-48 from Fluent UI System Color Icons by Microsoft Corporation · 48 · MIT Free for personal and commercial use.
- Name
- people-community-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
Related icons in Fluent UI System Color Icons
Use the people community 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(#SVGM0JdfeZV)" d="M24 5a6.5 6.5 0 1 0 0 13a6.5 6.5 0 0 0 0-13"/><path fill="url(#SVGIHdlMLge)" d="M9.5 9a5.5 5.5 0 1 0 0 11a5.5 5.5 0 0 0 0-11"/><path fill="url(#SVGVJK0ubBZ)" d="M38.5 9a5.5 5.5 0 1 0 0 11a5.5 5.5 0 0 0 0-11"/><path fill="url(#SVGFyfNjdba)" d="M30.478 21.818a3.25 3.25 0 0 0-3.98 2.298l-1.489 5.554a9 9 0 1 0 17.387 4.659l1.488-5.554a3.25 3.25 0 0 0-2.298-3.98z"/><path fill="url(#SVGb8y0xb1O)" d="M17.522 21.818a3.25 3.25 0 0 1 3.98 2.298l1.488 5.554a9 9 0 1 1-17.386 4.66l-1.489-5.554a3.25 3.25 0 0 1 2.299-3.98z"/><path fill="url(#SVGpuHNKb0b)" d="M18.25 21A3.25 3.25 0 0 0 15 24.25V32a9 9 0 1 0 18 0v-7.75A3.25 3.25 0 0 0 29.75 21z"/><defs><radialGradient id="SVGM0JdfeZV" cx="0" cy="0" r="1" gradientTransform="rotate(59.931 3.08 24.51)scale(8.11995)" gradientUnits="userSpaceOnUse"><stop offset=".339" stop-color="#3dcbff"/><stop offset="1" stop-color="#14b1ff"/></radialGradient><radialGradient id="SVGIHdlMLge" cx="0" cy="0" r="1" gradientTransform="rotate(47.573 -10.4 14.318)scale(9.01943)" gradientUnits="userSpaceOnUse"><stop stop-color="#008ce2"/><stop offset="1" stop-color="#0068c6"/></radialGradient><radialGradient id="SVGVJK0ubBZ" cx="0" cy="0" r="1" gradientTransform="rotate(78.837 11.016 28.388)scale(8.06859)" gradientUnits="userSpaceOnUse"><stop stop-color="#0078d4"/><stop offset="1" stop-color="#004695"/></radialGradient><radialGradient id="SVGFyfNjdba" cx="0" cy="0" r="1" gradientTransform="rotate(78.837 -.87 32.568)scale(14.1533)" gradientUnits="userSpaceOnUse"><stop stop-color="#0078d4"/><stop offset="1" stop-color="#004695"/></radialGradient><radialGradient id="SVGb8y0xb1O" cx="0" cy="0" r="1" gradientTransform="rotate(61.056 -14.804 18.71)scale(21.017 15.1281)" gradientUnits="userSpaceOnUse"><stop stop-color="#008ce2"/><stop offset="1" stop-color="#0068c6"/></radialGradient><radialGradient id="SVGpuHNKb0b" cx="0" cy="0" r="1" gradientTransform="rotate(62.478 -11.966 32.366)scale(12.1907 11.5211)" gradientUnits="userSpaceOnUse"><stop offset=".339" stop-color="#3dcbff"/><stop offset="1" stop-color="#14b1ff"/></radialGradient></defs></g></svg>
React
import type { SVGProps } from "react";
export function FluentColorPeopleCommunity48(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(#SVGM0JdfeZV)" d="M24 5a6.5 6.5 0 1 0 0 13a6.5 6.5 0 0 0 0-13"/><path fill="url(#SVGIHdlMLge)" d="M9.5 9a5.5 5.5 0 1 0 0 11a5.5 5.5 0 0 0 0-11"/><path fill="url(#SVGVJK0ubBZ)" d="M38.5 9a5.5 5.5 0 1 0 0 11a5.5 5.5 0 0 0 0-11"/><path fill="url(#SVGFyfNjdba)" d="M30.478 21.818a3.25 3.25 0 0 0-3.98 2.298l-1.489 5.554a9 9 0 1 0 17.387 4.659l1.488-5.554a3.25 3.25 0 0 0-2.298-3.98z"/><path fill="url(#SVGb8y0xb1O)" d="M17.522 21.818a3.25 3.25 0 0 1 3.98 2.298l1.488 5.554a9 9 0 1 1-17.386 4.66l-1.489-5.554a3.25 3.25 0 0 1 2.299-3.98z"/><path fill="url(#SVGpuHNKb0b)" d="M18.25 21A3.25 3.25 0 0 0 15 24.25V32a9 9 0 1 0 18 0v-7.75A3.25 3.25 0 0 0 29.75 21z"/><defs><radialGradient id="SVGM0JdfeZV" cx="0" cy="0" r="1" gradientTransform="rotate(59.931 3.08 24.51)scale(8.11995)" gradientUnits="userSpaceOnUse"><stop offset=".339" stopColor="#3dcbff"/><stop offset="1" stopColor="#14b1ff"/></radialGradient><radialGradient id="SVGIHdlMLge" cx="0" cy="0" r="1" gradientTransform="rotate(47.573 -10.4 14.318)scale(9.01943)" gradientUnits="userSpaceOnUse"><stop stopColor="#008ce2"/><stop offset="1" stopColor="#0068c6"/></radialGradient><radialGradient id="SVGVJK0ubBZ" cx="0" cy="0" r="1" gradientTransform="rotate(78.837 11.016 28.388)scale(8.06859)" gradientUnits="userSpaceOnUse"><stop stopColor="#0078d4"/><stop offset="1" stopColor="#004695"/></radialGradient><radialGradient id="SVGFyfNjdba" cx="0" cy="0" r="1" gradientTransform="rotate(78.837 -.87 32.568)scale(14.1533)" gradientUnits="userSpaceOnUse"><stop stopColor="#0078d4"/><stop offset="1" stopColor="#004695"/></radialGradient><radialGradient id="SVGb8y0xb1O" cx="0" cy="0" r="1" gradientTransform="rotate(61.056 -14.804 18.71)scale(21.017 15.1281)" gradientUnits="userSpaceOnUse"><stop stopColor="#008ce2"/><stop offset="1" stopColor="#0068c6"/></radialGradient><radialGradient id="SVGpuHNKb0b" cx="0" cy="0" r="1" gradientTransform="rotate(62.478 -11.966 32.366)scale(12.1907 11.5211)" gradientUnits="userSpaceOnUse"><stop offset=".339" stopColor="#3dcbff"/><stop offset="1" stopColor="#14b1ff"/></radialGradient></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(#SVGM0JdfeZV)" d="M24 5a6.5 6.5 0 1 0 0 13a6.5 6.5 0 0 0 0-13"/><path fill="url(#SVGIHdlMLge)" d="M9.5 9a5.5 5.5 0 1 0 0 11a5.5 5.5 0 0 0 0-11"/><path fill="url(#SVGVJK0ubBZ)" d="M38.5 9a5.5 5.5 0 1 0 0 11a5.5 5.5 0 0 0 0-11"/><path fill="url(#SVGFyfNjdba)" d="M30.478 21.818a3.25 3.25 0 0 0-3.98 2.298l-1.489 5.554a9 9 0 1 0 17.387 4.659l1.488-5.554a3.25 3.25 0 0 0-2.298-3.98z"/><path fill="url(#SVGb8y0xb1O)" d="M17.522 21.818a3.25 3.25 0 0 1 3.98 2.298l1.488 5.554a9 9 0 1 1-17.386 4.66l-1.489-5.554a3.25 3.25 0 0 1 2.299-3.98z"/><path fill="url(#SVGpuHNKb0b)" d="M18.25 21A3.25 3.25 0 0 0 15 24.25V32a9 9 0 1 0 18 0v-7.75A3.25 3.25 0 0 0 29.75 21z"/><defs><radialGradient id="SVGM0JdfeZV" cx="0" cy="0" r="1" gradientTransform="rotate(59.931 3.08 24.51)scale(8.11995)" gradientUnits="userSpaceOnUse"><stop offset=".339" stop-color="#3dcbff"/><stop offset="1" stop-color="#14b1ff"/></radialGradient><radialGradient id="SVGIHdlMLge" cx="0" cy="0" r="1" gradientTransform="rotate(47.573 -10.4 14.318)scale(9.01943)" gradientUnits="userSpaceOnUse"><stop stop-color="#008ce2"/><stop offset="1" stop-color="#0068c6"/></radialGradient><radialGradient id="SVGVJK0ubBZ" cx="0" cy="0" r="1" gradientTransform="rotate(78.837 11.016 28.388)scale(8.06859)" gradientUnits="userSpaceOnUse"><stop stop-color="#0078d4"/><stop offset="1" stop-color="#004695"/></radialGradient><radialGradient id="SVGFyfNjdba" cx="0" cy="0" r="1" gradientTransform="rotate(78.837 -.87 32.568)scale(14.1533)" gradientUnits="userSpaceOnUse"><stop stop-color="#0078d4"/><stop offset="1" stop-color="#004695"/></radialGradient><radialGradient id="SVGb8y0xb1O" cx="0" cy="0" r="1" gradientTransform="rotate(61.056 -14.804 18.71)scale(21.017 15.1281)" gradientUnits="userSpaceOnUse"><stop stop-color="#008ce2"/><stop offset="1" stop-color="#0068c6"/></radialGradient><radialGradient id="SVGpuHNKb0b" cx="0" cy="0" r="1" gradientTransform="rotate(62.478 -11.966 32.366)scale(12.1907 11.5211)" gradientUnits="userSpaceOnUse"><stop offset=".339" stop-color="#3dcbff"/><stop offset="1" stop-color="#14b1ff"/></radialGradient></defs></g></svg> </template>
CSS
.icon-people-community-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(%23SVGM0JdfeZV)%22%20d%3D%22M24%205a6.5%206.5%200%201%200%200%2013a6.5%206.5%200%200%200%200-13%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGIHdlMLge)%22%20d%3D%22M9.5%209a5.5%205.5%200%201%200%200%2011a5.5%205.5%200%200%200%200-11%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGVJK0ubBZ)%22%20d%3D%22M38.5%209a5.5%205.5%200%201%200%200%2011a5.5%205.5%200%200%200%200-11%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGFyfNjdba)%22%20d%3D%22M30.478%2021.818a3.25%203.25%200%200%200-3.98%202.298l-1.489%205.554a9%209%200%201%200%2017.387%204.659l1.488-5.554a3.25%203.25%200%200%200-2.298-3.98z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGb8y0xb1O)%22%20d%3D%22M17.522%2021.818a3.25%203.25%200%200%201%203.98%202.298l1.488%205.554a9%209%200%201%201-17.386%204.66l-1.489-5.554a3.25%203.25%200%200%201%202.299-3.98z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGpuHNKb0b)%22%20d%3D%22M18.25%2021A3.25%203.25%200%200%200%2015%2024.25V32a9%209%200%201%200%2018%200v-7.75A3.25%203.25%200%200%200%2029.75%2021z%22%2F%3E%3Cdefs%3E%3CradialGradient%20id%3D%22SVGM0JdfeZV%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22rotate(59.931%203.08%2024.51)scale(8.11995)%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%22.339%22%20stop-color%3D%22%233dcbff%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%2314b1ff%22%2F%3E%3C%2FradialGradient%3E%3CradialGradient%20id%3D%22SVGIHdlMLge%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22rotate(47.573%20-10.4%2014.318)scale(9.01943)%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23008ce2%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%230068c6%22%2F%3E%3C%2FradialGradient%3E%3CradialGradient%20id%3D%22SVGVJK0ubBZ%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22rotate(78.837%2011.016%2028.388)scale(8.06859)%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%230078d4%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23004695%22%2F%3E%3C%2FradialGradient%3E%3CradialGradient%20id%3D%22SVGFyfNjdba%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22rotate(78.837%20-.87%2032.568)scale(14.1533)%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%230078d4%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23004695%22%2F%3E%3C%2FradialGradient%3E%3CradialGradient%20id%3D%22SVGb8y0xb1O%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22rotate(61.056%20-14.804%2018.71)scale(21.017%2015.1281)%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23008ce2%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%230068c6%22%2F%3E%3C%2FradialGradient%3E%3CradialGradient%20id%3D%22SVGpuHNKb0b%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22rotate(62.478%20-11.966%2032.366)scale(12.1907%2011.5211)%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%22.339%22%20stop-color%3D%22%233dcbff%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%2314b1ff%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%2048%2048%22%3E%3Cg%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22url(%23SVGM0JdfeZV)%22%20d%3D%22M24%205a6.5%206.5%200%201%200%200%2013a6.5%206.5%200%200%200%200-13%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGIHdlMLge)%22%20d%3D%22M9.5%209a5.5%205.5%200%201%200%200%2011a5.5%205.5%200%200%200%200-11%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGVJK0ubBZ)%22%20d%3D%22M38.5%209a5.5%205.5%200%201%200%200%2011a5.5%205.5%200%200%200%200-11%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGFyfNjdba)%22%20d%3D%22M30.478%2021.818a3.25%203.25%200%200%200-3.98%202.298l-1.489%205.554a9%209%200%201%200%2017.387%204.659l1.488-5.554a3.25%203.25%200%200%200-2.298-3.98z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGb8y0xb1O)%22%20d%3D%22M17.522%2021.818a3.25%203.25%200%200%201%203.98%202.298l1.488%205.554a9%209%200%201%201-17.386%204.66l-1.489-5.554a3.25%203.25%200%200%201%202.299-3.98z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGpuHNKb0b)%22%20d%3D%22M18.25%2021A3.25%203.25%200%200%200%2015%2024.25V32a9%209%200%201%200%2018%200v-7.75A3.25%203.25%200%200%200%2029.75%2021z%22%2F%3E%3Cdefs%3E%3CradialGradient%20id%3D%22SVGM0JdfeZV%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22rotate(59.931%203.08%2024.51)scale(8.11995)%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%22.339%22%20stop-color%3D%22%233dcbff%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%2314b1ff%22%2F%3E%3C%2FradialGradient%3E%3CradialGradient%20id%3D%22SVGIHdlMLge%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22rotate(47.573%20-10.4%2014.318)scale(9.01943)%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23008ce2%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%230068c6%22%2F%3E%3C%2FradialGradient%3E%3CradialGradient%20id%3D%22SVGVJK0ubBZ%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22rotate(78.837%2011.016%2028.388)scale(8.06859)%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%230078d4%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23004695%22%2F%3E%3C%2FradialGradient%3E%3CradialGradient%20id%3D%22SVGFyfNjdba%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22rotate(78.837%20-.87%2032.568)scale(14.1533)%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%230078d4%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23004695%22%2F%3E%3C%2FradialGradient%3E%3CradialGradient%20id%3D%22SVGb8y0xb1O%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22rotate(61.056%20-14.804%2018.71)scale(21.017%2015.1281)%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23008ce2%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%230068c6%22%2F%3E%3C%2FradialGradient%3E%3CradialGradient%20id%3D%22SVGpuHNKb0b%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22rotate(62.478%20-11.966%2032.366)scale(12.1907%2011.5211)%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%22.339%22%20stop-color%3D%22%233dcbff%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%2314b1ff%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/people-community-48.svg?color=%231a73e8&size=48
