people community icon
people-community-24 from Fluent UI System Color Icons by Microsoft Corporation · 24 · MIT Free for personal and commercial use.
- Name
- people-community-24
- Set
- Fluent UI System Color Icons
- Style
- 24
- Viewbox
- 24×24
- 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 24 24"><g fill="none"><path fill="url(#SVGTBUDEbor)" d="M12 3a3.25 3.25 0 1 0 0 6.5A3.25 3.25 0 0 0 12 3"/><path fill="url(#SVGsO6IIbeO)" d="M5 5a3 3 0 1 0 0 6a3 3 0 0 0 0-6"/><path fill="url(#SVGkU6VibAn)" d="M19 5a3 3 0 1 0 0 6a3 3 0 0 0 0-6"/><path fill="url(#SVGNxpkddXF)" d="M15.39 11.442a1.75 1.75 0 0 0-2.143 1.237l-.712 2.656a4.5 4.5 0 0 0 8.694 2.33l.711-2.657a1.75 1.75 0 0 0-1.237-2.143z"/><path fill="url(#SVG2dmUQb6L)" d="M8.61 11.442a1.75 1.75 0 0 1 2.142 1.237l.712 2.656a4.5 4.5 0 0 1-8.693 2.33l-.712-2.657a1.75 1.75 0 0 1 1.238-2.143z"/><path fill="url(#SVG0s0oFcwL)" d="M9.25 11a1.75 1.75 0 0 0-1.75 1.75v3.75a4.5 4.5 0 1 0 9 0v-3.75A1.75 1.75 0 0 0 14.75 11z"/><defs><radialGradient id="SVGTBUDEbor" cx="0" cy="0" r="1" gradientTransform="rotate(59.931 1.106 12.505)scale(4.05997)" gradientUnits="userSpaceOnUse"><stop offset=".339" stop-color="#3dcbff"/><stop offset="1" stop-color="#14b1ff"/></radialGradient><radialGradient id="SVGsO6IIbeO" cx="0" cy="0" r="1" gradientTransform="rotate(47.573 -5.867 7.649)scale(4.91969)" gradientUnits="userSpaceOnUse"><stop stop-color="#008ce2"/><stop offset="1" stop-color="#0068c6"/></radialGradient><radialGradient id="SVGkU6VibAn" cx="0" cy="0" r="1" gradientTransform="rotate(78.837 4.954 14.313)scale(4.40105)" gradientUnits="userSpaceOnUse"><stop stop-color="#0078d4"/><stop offset="1" stop-color="#004695"/></radialGradient><radialGradient id="SVGNxpkddXF" cx="0" cy="0" r="1" gradientTransform="rotate(78.837 -.741 16.557)scale(7.05605)" gradientUnits="userSpaceOnUse"><stop stop-color="#0078d4"/><stop offset="1" stop-color="#004695"/></radialGradient><radialGradient id="SVG2dmUQb6L" cx="0" cy="0" r="1" gradientTransform="rotate(61.056 -7.854 9.61)scale(10.478 7.54206)" gradientUnits="userSpaceOnUse"><stop stop-color="#008ce2"/><stop offset="1" stop-color="#0068c6"/></radialGradient><radialGradient id="SVG0s0oFcwL" cx="0" cy="0" r="1" gradientTransform="rotate(62.478 -6.395 16.433)scale(6.09533 5.76056)" 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 FluentColorPeopleCommunity24(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none"><path fill="url(#SVGTBUDEbor)" d="M12 3a3.25 3.25 0 1 0 0 6.5A3.25 3.25 0 0 0 12 3"/><path fill="url(#SVGsO6IIbeO)" d="M5 5a3 3 0 1 0 0 6a3 3 0 0 0 0-6"/><path fill="url(#SVGkU6VibAn)" d="M19 5a3 3 0 1 0 0 6a3 3 0 0 0 0-6"/><path fill="url(#SVGNxpkddXF)" d="M15.39 11.442a1.75 1.75 0 0 0-2.143 1.237l-.712 2.656a4.5 4.5 0 0 0 8.694 2.33l.711-2.657a1.75 1.75 0 0 0-1.237-2.143z"/><path fill="url(#SVG2dmUQb6L)" d="M8.61 11.442a1.75 1.75 0 0 1 2.142 1.237l.712 2.656a4.5 4.5 0 0 1-8.693 2.33l-.712-2.657a1.75 1.75 0 0 1 1.238-2.143z"/><path fill="url(#SVG0s0oFcwL)" d="M9.25 11a1.75 1.75 0 0 0-1.75 1.75v3.75a4.5 4.5 0 1 0 9 0v-3.75A1.75 1.75 0 0 0 14.75 11z"/><defs><radialGradient id="SVGTBUDEbor" cx="0" cy="0" r="1" gradientTransform="rotate(59.931 1.106 12.505)scale(4.05997)" gradientUnits="userSpaceOnUse"><stop offset=".339" stopColor="#3dcbff"/><stop offset="1" stopColor="#14b1ff"/></radialGradient><radialGradient id="SVGsO6IIbeO" cx="0" cy="0" r="1" gradientTransform="rotate(47.573 -5.867 7.649)scale(4.91969)" gradientUnits="userSpaceOnUse"><stop stopColor="#008ce2"/><stop offset="1" stopColor="#0068c6"/></radialGradient><radialGradient id="SVGkU6VibAn" cx="0" cy="0" r="1" gradientTransform="rotate(78.837 4.954 14.313)scale(4.40105)" gradientUnits="userSpaceOnUse"><stop stopColor="#0078d4"/><stop offset="1" stopColor="#004695"/></radialGradient><radialGradient id="SVGNxpkddXF" cx="0" cy="0" r="1" gradientTransform="rotate(78.837 -.741 16.557)scale(7.05605)" gradientUnits="userSpaceOnUse"><stop stopColor="#0078d4"/><stop offset="1" stopColor="#004695"/></radialGradient><radialGradient id="SVG2dmUQb6L" cx="0" cy="0" r="1" gradientTransform="rotate(61.056 -7.854 9.61)scale(10.478 7.54206)" gradientUnits="userSpaceOnUse"><stop stopColor="#008ce2"/><stop offset="1" stopColor="#0068c6"/></radialGradient><radialGradient id="SVG0s0oFcwL" cx="0" cy="0" r="1" gradientTransform="rotate(62.478 -6.395 16.433)scale(6.09533 5.76056)" 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 24 24"><g fill="none"><path fill="url(#SVGTBUDEbor)" d="M12 3a3.25 3.25 0 1 0 0 6.5A3.25 3.25 0 0 0 12 3"/><path fill="url(#SVGsO6IIbeO)" d="M5 5a3 3 0 1 0 0 6a3 3 0 0 0 0-6"/><path fill="url(#SVGkU6VibAn)" d="M19 5a3 3 0 1 0 0 6a3 3 0 0 0 0-6"/><path fill="url(#SVGNxpkddXF)" d="M15.39 11.442a1.75 1.75 0 0 0-2.143 1.237l-.712 2.656a4.5 4.5 0 0 0 8.694 2.33l.711-2.657a1.75 1.75 0 0 0-1.237-2.143z"/><path fill="url(#SVG2dmUQb6L)" d="M8.61 11.442a1.75 1.75 0 0 1 2.142 1.237l.712 2.656a4.5 4.5 0 0 1-8.693 2.33l-.712-2.657a1.75 1.75 0 0 1 1.238-2.143z"/><path fill="url(#SVG0s0oFcwL)" d="M9.25 11a1.75 1.75 0 0 0-1.75 1.75v3.75a4.5 4.5 0 1 0 9 0v-3.75A1.75 1.75 0 0 0 14.75 11z"/><defs><radialGradient id="SVGTBUDEbor" cx="0" cy="0" r="1" gradientTransform="rotate(59.931 1.106 12.505)scale(4.05997)" gradientUnits="userSpaceOnUse"><stop offset=".339" stop-color="#3dcbff"/><stop offset="1" stop-color="#14b1ff"/></radialGradient><radialGradient id="SVGsO6IIbeO" cx="0" cy="0" r="1" gradientTransform="rotate(47.573 -5.867 7.649)scale(4.91969)" gradientUnits="userSpaceOnUse"><stop stop-color="#008ce2"/><stop offset="1" stop-color="#0068c6"/></radialGradient><radialGradient id="SVGkU6VibAn" cx="0" cy="0" r="1" gradientTransform="rotate(78.837 4.954 14.313)scale(4.40105)" gradientUnits="userSpaceOnUse"><stop stop-color="#0078d4"/><stop offset="1" stop-color="#004695"/></radialGradient><radialGradient id="SVGNxpkddXF" cx="0" cy="0" r="1" gradientTransform="rotate(78.837 -.741 16.557)scale(7.05605)" gradientUnits="userSpaceOnUse"><stop stop-color="#0078d4"/><stop offset="1" stop-color="#004695"/></radialGradient><radialGradient id="SVG2dmUQb6L" cx="0" cy="0" r="1" gradientTransform="rotate(61.056 -7.854 9.61)scale(10.478 7.54206)" gradientUnits="userSpaceOnUse"><stop stop-color="#008ce2"/><stop offset="1" stop-color="#0068c6"/></radialGradient><radialGradient id="SVG0s0oFcwL" cx="0" cy="0" r="1" gradientTransform="rotate(62.478 -6.395 16.433)scale(6.09533 5.76056)" gradientUnits="userSpaceOnUse"><stop offset=".339" stop-color="#3dcbff"/><stop offset="1" stop-color="#14b1ff"/></radialGradient></defs></g></svg> </template>
CSS
.icon-people-community-24 {
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%2024%2024%22%3E%3Cg%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22url(%23SVGTBUDEbor)%22%20d%3D%22M12%203a3.25%203.25%200%201%200%200%206.5A3.25%203.25%200%200%200%2012%203%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGsO6IIbeO)%22%20d%3D%22M5%205a3%203%200%201%200%200%206a3%203%200%200%200%200-6%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGkU6VibAn)%22%20d%3D%22M19%205a3%203%200%201%200%200%206a3%203%200%200%200%200-6%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGNxpkddXF)%22%20d%3D%22M15.39%2011.442a1.75%201.75%200%200%200-2.143%201.237l-.712%202.656a4.5%204.5%200%200%200%208.694%202.33l.711-2.657a1.75%201.75%200%200%200-1.237-2.143z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVG2dmUQb6L)%22%20d%3D%22M8.61%2011.442a1.75%201.75%200%200%201%202.142%201.237l.712%202.656a4.5%204.5%200%200%201-8.693%202.33l-.712-2.657a1.75%201.75%200%200%201%201.238-2.143z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVG0s0oFcwL)%22%20d%3D%22M9.25%2011a1.75%201.75%200%200%200-1.75%201.75v3.75a4.5%204.5%200%201%200%209%200v-3.75A1.75%201.75%200%200%200%2014.75%2011z%22%2F%3E%3Cdefs%3E%3CradialGradient%20id%3D%22SVGTBUDEbor%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22rotate(59.931%201.106%2012.505)scale(4.05997)%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%22SVGsO6IIbeO%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22rotate(47.573%20-5.867%207.649)scale(4.91969)%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%22SVGkU6VibAn%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22rotate(78.837%204.954%2014.313)scale(4.40105)%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%22SVGNxpkddXF%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22rotate(78.837%20-.741%2016.557)scale(7.05605)%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%22SVG2dmUQb6L%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22rotate(61.056%20-7.854%209.61)scale(10.478%207.54206)%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%22SVG0s0oFcwL%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22rotate(62.478%20-6.395%2016.433)scale(6.09533%205.76056)%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%2024%2024%22%3E%3Cg%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22url(%23SVGTBUDEbor)%22%20d%3D%22M12%203a3.25%203.25%200%201%200%200%206.5A3.25%203.25%200%200%200%2012%203%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGsO6IIbeO)%22%20d%3D%22M5%205a3%203%200%201%200%200%206a3%203%200%200%200%200-6%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGkU6VibAn)%22%20d%3D%22M19%205a3%203%200%201%200%200%206a3%203%200%200%200%200-6%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGNxpkddXF)%22%20d%3D%22M15.39%2011.442a1.75%201.75%200%200%200-2.143%201.237l-.712%202.656a4.5%204.5%200%200%200%208.694%202.33l.711-2.657a1.75%201.75%200%200%200-1.237-2.143z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVG2dmUQb6L)%22%20d%3D%22M8.61%2011.442a1.75%201.75%200%200%201%202.142%201.237l.712%202.656a4.5%204.5%200%200%201-8.693%202.33l-.712-2.657a1.75%201.75%200%200%201%201.238-2.143z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVG0s0oFcwL)%22%20d%3D%22M9.25%2011a1.75%201.75%200%200%200-1.75%201.75v3.75a4.5%204.5%200%201%200%209%200v-3.75A1.75%201.75%200%200%200%2014.75%2011z%22%2F%3E%3Cdefs%3E%3CradialGradient%20id%3D%22SVGTBUDEbor%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22rotate(59.931%201.106%2012.505)scale(4.05997)%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%22SVGsO6IIbeO%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22rotate(47.573%20-5.867%207.649)scale(4.91969)%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%22SVGkU6VibAn%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22rotate(78.837%204.954%2014.313)scale(4.40105)%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%22SVGNxpkddXF%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22rotate(78.837%20-.741%2016.557)scale(7.05605)%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%22SVG2dmUQb6L%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22rotate(61.056%20-7.854%209.61)scale(10.478%207.54206)%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%22SVG0s0oFcwL%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22rotate(62.478%20-6.395%2016.433)scale(6.09533%205.76056)%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-24.svg?color=%231a73e8&size=48
