People Sync icon
Used in a wide range of scenarios - representing a general group, contacts, contact lists, sharing, and managing access. The People Sync 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 Sync 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 { PeopleSync24Regular, PeopleSync24Filled } from "@fluentui/react-icons";
export function Example() {
return <PeopleSync24Regular aria-label="People Sync" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_people_sync_24_regular.svg" width="24" height="24" alt="People Sync"> 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="M4 7C4 4.79086 5.79086 3 8 3C10.2091 3 12 4.79086 12 7C12 9.20914 10.2091 11 8 11C5.79086 11 4 9.20914 4 7ZM8 4.5C6.61929 4.5 5.5 5.61929 5.5 7C5.5 8.38071 6.61929 9.5 8 9.5C9.38071 9.5 10.5 8.38071 10.5 7C10.5 5.61929 9.38071 4.5 8 4.5ZM14 8C14 6.34315 15.3431 5 17 5C18.6569 5 20 6.34315 20 8C20 9.65685 18.6569 11 17 11C15.3431 11 14 9.65685 14 8ZM17 6.5C16.1716 6.5 15.5 7.17157 15.5 8C15.5 8.82843 16.1716 9.5 17 9.5C17.8284 9.5 18.5 8.82843 18.5 8C18.5 7.17157 17.8284 6.5 17 6.5ZM2 15.25C2 14.0074 3.00736 13 4.25 13H11.75C12.0663 13 12.3674 13.0653 12.6405 13.1831C12.2865 13.5813 11.9807 14.0233 11.7322 14.5H4.25C3.83579 14.5 3.5 14.8358 3.5 15.25V15.4947L3.50047 15.5072C3.50117 15.5222 3.50281 15.5493 3.50653 15.5865C3.514 15.6612 3.5297 15.7753 3.56241 15.9155C3.62818 16.1974 3.75971 16.5721 4.02067 16.9449C4.51434 17.6501 5.57822 18.5 8 18.5C9.41267 18.5 10.3633 18.2108 11.0082 17.8299C11.035 18.366 11.1268 18.8851 11.2758 19.3793C10.4411 19.7598 9.36897 20 8 20C5.17178 20 3.61066 18.9749 2.79183 17.8051C2.39654 17.2404 2.19995 16.6776 2.10165 16.2564C2.05233 16.045 2.02701 15.8661 2.01398 15.7358C2.00745 15.6705 2.00396 15.6169 2.0021 15.5771C2.00117 15.5571 2.00064 15.5406 2.00035 15.5277L2.00007 15.5111L2.00001 15.5048L2 15.5022L2 15.5011V15.25ZM12 17.5C12 20.5376 14.4624 23 17.5 23C20.5376 23 23 20.5376 23 17.5C23 14.4624 20.5376 12 17.5 12C14.4624 12 12 14.4624 12 17.5ZM20.5 14C20.7761 14 21 14.2239 21 14.5V16.5C21 16.7761 20.7761 17 20.5 17H18.5C18.2239 17 18 16.7761 18 16.5C18 16.2239 18.2239 16 18.5 16H19.5003C19.0436 15.392 18.3174 15 17.5 15C16.6666 15 15.9283 15.4073 15.4733 16.036C15.3113 16.2597 14.9987 16.3098 14.775 16.1478C14.5514 15.9859 14.5013 15.6733 14.6632 15.4496C15.2982 14.5724 16.3323 14 17.5 14C18.4798 14 19.3651 14.4027 20 15.0506V14.5C20 14.2239 20.2239 14 20.5 14ZM15 19.9494V20.5C15 20.7761 14.7761 21 14.5 21C14.2239 21 14 20.7761 14 20.5V18.5C14 18.2239 14.2239 18 14.5 18H16.5C16.7761 18 17 18.2239 17 18.5C17 18.7761 16.7761 19 16.5 19H15.4998C15.9564 19.608 16.6827 20 17.5 20C18.2663 20 18.9518 19.6558 19.4112 19.1118C19.5893 18.9008 19.9048 18.8742 20.1158 19.0523C20.3268 19.2305 20.3534 19.546 20.1752 19.7569C19.534 20.5164 18.5732 21 17.5 21C16.5203 21 15.6349 20.5973 15 19.9494Z" 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_sync_24_regular.svg";Details
| Name | People Sync |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_people_sync_24_regular.svg |
| Filled file | ic_fluent_people_sync_24_filled.svg |
| React components | PeopleSync24Regular, PeopleSync24Filled |
| License | MIT (© Microsoft Corporation) |