People Swap icon
Used in a wide range of scenarios - representing a general group, contacts, contact lists, sharing, and managing access. The People Swap 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 Swap 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 { PeopleSwap24Regular, PeopleSwap24Filled } from "@fluentui/react-icons";
export function Example() {
return <PeopleSwap24Regular aria-label="People Swap" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_people_swap_24_regular.svg" width="24" height="24" alt="People Swap"> 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="M8 5.5C6.61929 5.5 5.5 6.61929 5.5 8C5.5 9.38071 6.61929 10.5 8 10.5C9.38071 10.5 10.5 9.38071 10.5 8C10.5 6.61929 9.38071 5.5 8 5.5ZM4 8C4 5.79086 5.79086 4 8 4C10.2091 4 12 5.79086 12 8C12 10.2091 10.2091 12 8 12C5.79086 12 4 10.2091 4 8ZM17 7.5C16.1716 7.5 15.5 8.17157 15.5 9C15.5 9.82843 16.1716 10.5 17 10.5C17.8284 10.5 18.5 9.82843 18.5 9C18.5 8.17157 17.8284 7.5 17 7.5ZM14 9C14 7.34315 15.3431 6 17 6C18.6569 6 20 7.34315 20 9C20 10.6569 18.6569 12 17 12C15.3431 12 14 10.6569 14 9ZM12.7774 14.2477C12.4694 14.0894 12.1201 14 11.75 14H4.25C3.00736 14 2 15.0074 2 16.25V16.5011L2 16.5022L2.00001 16.5048L2.00007 16.5111L2.00035 16.5277C2.00064 16.5406 2.00117 16.5571 2.0021 16.5771C2.00396 16.6169 2.00745 16.6705 2.01398 16.7358C2.02701 16.8661 2.05233 17.045 2.10165 17.2564C2.19995 17.6776 2.39654 18.2404 2.79183 18.8051C3.61066 19.9749 5.17178 21 8 21C9.60845 21 10.8071 20.6684 11.6924 20.1673L10.5747 19.0496C9.95683 19.3166 9.1249 19.5 8 19.5C5.57822 19.5 4.51434 18.6501 4.02067 17.9449C3.75971 17.5721 3.62818 17.1974 3.56241 16.9155C3.5297 16.7753 3.514 16.6612 3.50653 16.5865C3.50281 16.5493 3.50117 16.5222 3.50047 16.5072L3.5 16.4947V16.25C3.5 15.8358 3.83579 15.5 4.25 15.5H11.5251L12.7774 14.2477ZM20.2809 14.7202C19.988 14.4273 19.5131 14.4273 19.2202 14.7202C18.9273 15.013 18.9273 15.4879 19.2202 15.7808L20.4394 17H13.5607L14.7798 15.7809C15.0727 15.488 15.0727 15.0131 14.7798 14.7202C14.4869 14.4273 14.012 14.4273 13.7191 14.7202L11.2197 17.2197C10.9268 17.5125 10.9268 17.9874 11.2197 18.2803L13.7191 20.7798C14.012 21.0726 14.4869 21.0726 14.7798 20.7798C15.0727 20.4869 15.0727 20.012 14.7798 19.7191L13.5607 18.5H20.4393L19.2202 19.7191C18.9273 20.012 18.9273 20.4869 19.2202 20.7798C19.5131 21.0726 19.988 21.0726 20.2809 20.7798L22.7803 18.2803C23.0732 17.9874 23.0732 17.5126 22.7803 17.2197L20.2809 14.7202Z" 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_swap_24_regular.svg";Details
| Name | People Swap |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_people_swap_24_regular.svg |
| Filled file | ic_fluent_people_swap_24_filled.svg |
| React components | PeopleSwap24Regular, PeopleSwap24Filled |
| License | MIT (© Microsoft Corporation) |