Navigation Person icon

Use the Navigation 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 { NavigationPerson24Regular, NavigationPerson24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_navigation_person_24_regular.svg" width="24" height="24" alt="Navigation 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="M2.75086 17.9997H17.0502L16.7727 18C15.7004 18 14.7698 18.6086 14.3085 19.4997H2.75086C2.33665 19.4997 2.00086 19.1639 2.00086 18.7497C2.00086 18.37 2.28301 18.0562 2.64909 18.0065L2.75086 17.9997ZM2.75086 13.0027H17.0478C17.6793 12.3825 18.545 12 19.5 12C20.355 12 21.1384 12.3066 21.7463 12.8158C21.9024 12.6784 22.0009 12.477 22.0009 12.2527C22.0009 11.8385 21.6651 11.5027 21.2509 11.5027H2.75086L2.64909 11.5095C2.28301 11.5592 2.00086 11.873 2.00086 12.2527C2.00086 12.6669 2.33665 13.0027 2.75086 13.0027ZM2.75 5.00293H21.25C21.6642 5.00293 22 5.33872 22 5.75293C22 6.13263 21.7178 6.44642 21.3518 6.49608L21.25 6.50293H2.75C2.33579 6.50293 2 6.16714 2 5.75293C2 5.37323 2.28215 5.05944 2.64823 5.00978L2.75 5.00293ZM22 15.5C22 16.8807 20.8807 18 19.5 18C18.1193 18 17 16.8807 17 15.5C17 14.1193 18.1193 13 19.5 13C20.8807 13 22 14.1193 22 15.5ZM24 20.875C24 22.4315 22.7143 24 19.5 24C16.2857 24 15 22.4374 15 20.875V20.772C15 19.7929 15.7937 19 16.7727 19H22.2273C23.2063 19 24 19.793 24 20.772V20.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/navigation_person_24_regular.svg";

Details