People Community icon
Used in a wide range of scenarios - representing a general group, contacts, contact lists, sharing, and managing access. The People Community icon is part of Microsoft's Fluent UI System Icons, available here in filled and regular (outlined) styles on a 24 px grid. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.
Use the People Community icon in React
Install Microsoft's @fluentui/react-icons package, then import the component. Icons inherit the current text color, and you can size them with CSS.
npm install @fluentui/react-icons
import { PeopleCommunity24Regular, PeopleCommunity24Filled } from "@fluentui/react-icons";
export function Example() {
return <PeopleCommunity24Regular aria-label="People Community" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_people_community_24_regular.svg" width="24" height="24" alt="People Community"> Or paste the SVG markup inline. Setting fill="currentColor" makes the icon follow the text color of its parent:
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 4.5C11.0335 4.5 10.25 5.2835 10.25 6.25C10.25 7.2165 11.0335 8 12 8C12.9665 8 13.75 7.2165 13.75 6.25C13.75 5.2835 12.9665 4.5 12 4.5ZM8.75 6.25C8.75 4.45507 10.2051 3 12 3C13.7949 3 15.25 4.45507 15.25 6.25C15.25 8.04493 13.7949 9.5 12 9.5C10.2051 9.5 8.75 8.04493 8.75 6.25ZM5 6.5C4.17157 6.5 3.5 7.17157 3.5 8C3.5 8.82843 4.17157 9.5 5 9.5C5.82843 9.5 6.5 8.82843 6.5 8C6.5 7.17157 5.82843 6.5 5 6.5ZM2 8C2 6.34315 3.34315 5 5 5C6.65685 5 8 6.34315 8 8C8 9.65685 6.65685 11 5 11C3.34315 11 2 9.65685 2 8ZM17.5 8C17.5 7.17157 18.1716 6.5 19 6.5C19.8284 6.5 20.5 7.17157 20.5 8C20.5 8.82843 19.8284 9.5 19 9.5C18.1716 9.5 17.5 8.82843 17.5 8ZM19 5C17.3431 5 16 6.34315 16 8C16 9.65685 17.3431 11 19 11C20.6569 11 22 9.65685 22 8C22 6.34315 20.6569 5 19 5ZM7.5 12.75C7.5 11.7835 8.2835 11 9.25 11H14.75C15.7165 11 16.5 11.7835 16.5 12.75V16.5C16.5 18.9853 14.4853 21 12 21C9.51472 21 7.5 18.9853 7.5 16.5V12.75ZM9.25 12.5C9.11193 12.5 9 12.6119 9 12.75V16.5C9 18.1569 10.3431 19.5 12 19.5C13.6569 19.5 15 18.1569 15 16.5V12.75C15 12.6119 14.8881 12.5 14.75 12.5H9.25ZM6.60996 11.9776C6.53838 12.2227 6.5 12.4819 6.5 12.7501V13.56L3.68573 14.3141C3.55236 14.3498 3.47322 14.4869 3.50895 14.6203L4.22071 17.2766C4.60374 18.7061 5.9571 19.6165 7.38228 19.489C7.69735 19.9748 8.08697 20.4077 8.53496 20.7715C8.45229 20.7989 8.36834 20.824 8.28317 20.8468C5.88257 21.49 3.41505 20.0654 2.77182 17.6648L2.06006 15.0085C1.80992 14.075 2.36394 13.1154 3.2975 12.8652L6.60996 11.9776ZM15.4654 20.7712C15.5483 20.7987 15.6326 20.8239 15.718 20.8468C18.1186 21.49 20.5861 20.0654 21.2294 17.6648L21.9411 15.0085C22.1913 14.075 21.6373 13.1154 20.7037 12.8652L17.3899 11.9773C17.4616 12.2224 17.5 12.4818 17.5 12.7501V13.5597L20.3155 14.3141C20.4488 14.3498 20.528 14.4869 20.4923 14.6203L19.7805 17.2766C19.3974 18.7065 18.0434 19.617 16.6178 19.4889C16.3028 19.9746 15.9133 20.4074 15.4654 20.7712Z" fill="currentColor"/></svg>Use it from the SVG package
Microsoft's @fluentui/svg-icons package contains the raw SVG files, which works well with bundlers that import SVGs:
npm install @fluentui/svg-icons
import icon from "@fluentui/svg-icons/icons/people_community_24_regular.svg";Details
| Name | People Community |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_people_community_24_regular.svg |
| Filled file | ic_fluent_people_community_24_filled.svg |
| React components | PeopleCommunity24Regular, PeopleCommunity24Filled |
| License | MIT (© Microsoft Corporation) |