Person Swap icon
Used in a wide range of scenarios - representing a general person, a contact, contact lists, sharing, and managing access. The Person 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 Person 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 { PersonSwap24Regular, PersonSwap24Filled } from "@fluentui/react-icons";
export function Example() {
return <PersonSwap24Regular aria-label="Person Swap" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_person_swap_24_regular.svg" width="24" height="24" alt="Person 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="M15.7506 13.9972C16.7312 13.9972 17.5652 14.6248 17.8728 15.5002H15.8174C15.7954 15.4982 15.7731 15.4972 15.7506 15.4972H4.24888C3.83528 15.4972 3.5 15.8325 3.5 16.2461V16.8238C3.5 17.3595 3.69111 17.8776 4.03897 18.2849C5.29228 19.7526 7.25815 20.4984 9.99646 20.4984C10.0526 20.4984 10.1085 20.4981 10.164 20.4975C10.2496 20.6809 10.3672 20.8499 10.5133 20.9957L11.4478 21.9288C10.9836 21.9752 10.4997 21.9984 9.99646 21.9984C6.8506 21.9984 4.46458 21.0932 2.89828 19.259C2.31852 18.5801 2 17.7166 2 16.8238V16.2461C2 15.0041 3.00686 13.9972 4.24888 13.9972H15.7506ZM9.99646 2.00195C12.7579 2.00195 14.9965 4.24053 14.9965 7.00195C14.9965 9.76338 12.7579 12.002 9.99646 12.002C7.23503 12.002 4.99646 9.76338 4.99646 7.00195C4.99646 4.24053 7.23503 2.00195 9.99646 2.00195ZM9.99646 3.50195C8.06346 3.50195 6.49646 5.06896 6.49646 7.00195C6.49646 8.93495 8.06346 10.502 9.99646 10.502C11.9295 10.502 13.4965 8.93495 13.4965 7.00195C13.4965 5.06896 11.9295 3.50195 9.99646 3.50195ZM14.7802 17.7835C15.073 17.4906 15.0729 17.0157 14.78 16.7229C14.487 16.4301 14.0121 16.4302 13.7193 16.7231L11.2193 19.2242C11.0787 19.3649 10.9997 19.5557 10.9998 19.7546C10.9998 19.9535 11.0789 20.1442 11.2195 20.2849L13.7195 22.7838C14.0125 23.0766 14.4874 23.0765 14.7802 22.7835C15.073 22.4906 15.0729 22.0157 14.78 21.7229L13.5599 20.5033H20.4399L19.2196 21.7228C18.9266 22.0156 18.9265 22.4905 19.2193 22.7835C19.5121 23.0765 19.9869 23.0766 20.2799 22.7838L22.7799 20.2854C22.9206 20.1448 22.9997 19.9541 22.9998 19.7552C22.9998 19.5563 22.9209 19.3655 22.7803 19.2248L20.2803 16.7232C19.9875 16.4302 19.5126 16.43 19.2196 16.7228C18.9266 17.0156 18.9265 17.4905 19.2193 17.7835L20.4383 19.0033H13.5609L14.7802 17.7835Z" 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/person_swap_24_regular.svg";Details
| Name | Person Swap |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_person_swap_24_regular.svg |
| Filled file | ic_fluent_person_swap_24_filled.svg |
| React components | PersonSwap24Regular, PersonSwap24Filled |
| License | MIT (© Microsoft Corporation) |