Link Person icon

Use the Link Person 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 { LinkPerson24Regular, LinkPerson24Filled } from "@fluentui/react-icons";

export function Example() {
  return <LinkPerson24Regular aria-label="Link Person" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_link_person_24_regular.svg" width="24" height="24" alt="Link Person">

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="M10 5.75C10 5.33579 9.66421 5 9.25 5H7L6.75045 5.00612C4.10496 5.13615 2 7.32226 2 10C2 12.7614 4.23858 15 7 15H9.25L9.36083 14.9919C9.72249 14.9383 10 14.6266 10 14.25C10 13.8358 9.66421 13.5 9.25 13.5H7L6.79435 13.4941C4.95707 13.3876 3.5 11.864 3.5 10C3.5 8.067 5.067 6.5 7 6.5H9.25L9.36083 6.49187C9.72249 6.4383 10 6.12656 10 5.75ZM22 10C22 7.23858 19.7614 5 17 5H14.75L14.6392 5.00813C14.2775 5.0617 14 5.37344 14 5.75C14 6.16421 14.3358 6.5 14.75 6.5H17L17.2057 6.50594C19.0429 6.6124 20.5 8.13604 20.5 10C20.5 10.7243 20.28 11.3971 19.9032 11.9555C20.2879 12.319 20.5903 12.7688 20.7792 13.2739C21.5398 12.3967 22 11.2521 22 10ZM17 9.25H7L6.89823 9.25685C6.53215 9.30651 6.25 9.6203 6.25 10C6.25 10.4142 6.58579 10.75 7 10.75H17L17.1018 10.7432C17.4678 10.6935 17.75 10.3797 17.75 10C17.75 9.58579 17.4142 9.25 17 9.25ZM20 14.5C20 15.8807 18.8807 17 17.5 17C16.1193 17 15 15.8807 15 14.5C15 13.1193 16.1193 12 17.5 12C18.8807 12 20 13.1193 20 14.5ZM22 19.875C22 21.4315 20.7143 23 17.5 23C14.2857 23 13 21.4374 13 19.875V19.772C13 18.7929 13.7937 18 14.7727 18H20.2273C21.2063 18 22 18.793 22 19.772V19.875Z" 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/link_person_24_regular.svg";

Details

Keywords

linksharewebinternetpersonguest