Person Link icon
Used in a wide range of scenarios - representing a general person, a contact, contact lists, sharing, and managing access. The Person Link 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 Link 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 { PersonLink24Regular, PersonLink24Filled } from "@fluentui/react-icons";
export function Example() {
return <PersonLink24Regular aria-label="Person Link" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_person_link_24_regular.svg" width="24" height="24" alt="Person Link"> 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="M16.7545 13.9992C17.5348 13.9992 18.2223 14.3966 18.6256 15H15.7539C14.9912 15 14.2705 15.1798 13.6319 15.4992H5.25278C4.83919 15.4992 4.50391 15.8345 4.50391 16.2481V16.8258C4.50391 17.3614 4.69502 17.8795 5.04287 18.2869C6.29618 19.7546 8.26206 20.5004 11.0004 20.5004L11.0628 20.5002C11.1471 21.0314 11.3194 21.5332 11.5644 21.9904C11.3792 21.997 11.1912 22.0004 11.0004 22.0004C7.8545 22.0004 5.46849 21.0952 3.90219 19.2609C3.32242 18.582 3.00391 17.7185 3.00391 16.8258V16.2481C3.00391 15.0061 4.01076 13.9992 5.25278 13.9992H16.7545ZM11.0004 2.00391C13.7618 2.00391 16.0004 4.24248 16.0004 7.00391C16.0004 9.76533 13.7618 12.0039 11.0004 12.0039C8.23894 12.0039 6.00036 9.76533 6.00036 7.00391C6.00036 4.24248 8.23894 2.00391 11.0004 2.00391ZM11.0004 3.50391C9.06737 3.50391 7.50036 5.07091 7.50036 7.00391C7.50036 8.9369 9.06737 10.5039 11.0004 10.5039C12.9334 10.5039 14.5004 8.9369 14.5004 7.00391C14.5004 5.07091 12.9334 3.50391 11.0004 3.50391ZM23 19.75C23 17.6789 21.3211 16 19.25 16L19.1482 16.0068C18.7822 16.0565 18.5 16.3703 18.5 16.75C18.5 17.1642 18.8358 17.5 19.25 17.5L19.404 17.5052C20.5748 17.5844 21.5 18.5591 21.5 19.75C21.5 20.9926 20.4926 22 19.25 22L19.2466 22.0046L19.1448 22.0119C18.779 22.0633 18.4983 22.3783 18.5 22.758C18.5019 23.1722 18.8392 23.5065 19.2534 23.5046V23.5L19.4523 23.4948C21.4276 23.3913 23 21.7543 23 19.75ZM16.5 16.75C16.5 16.3358 16.1642 16 15.75 16L15.5508 16.0052C13.5724 16.1087 12 17.7457 12 19.75C12 21.8211 13.6789 23.5 15.75 23.5L15.8518 23.4932C16.2178 23.4435 16.5 23.1297 16.5 22.75C16.5 22.3358 16.1642 22 15.75 22L15.596 21.9948C14.4252 21.9156 13.5 20.9409 13.5 19.75C13.5 18.5074 14.5074 17.5 15.75 17.5L15.8518 17.4932C16.2178 17.4435 16.5 17.1297 16.5 16.75ZM20 19.75C20 19.3358 19.6642 19 19.25 19H15.75L15.6482 19.0068C15.2822 19.0565 15 19.3703 15 19.75C15 20.1642 15.3358 20.5 15.75 20.5H19.25L19.3518 20.4932C19.7178 20.4435 20 20.1297 20 19.75Z" 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_link_24_regular.svg";Details
| Name | Person Link |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_person_link_24_regular.svg |
| Filled file | ic_fluent_person_link_24_filled.svg |
| React components | PersonLink24Regular, PersonLink24Filled |
| License | MIT (© Microsoft Corporation) |