Person Guest icon

Use the Person Guest 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 { PersonGuest24Regular, PersonGuest24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

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

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="M20.5 12C21.8807 12 23 13.1193 23 14.5V20.5C23 21.8807 21.8807 23 20.5 23H16.5C15.1193 23 14 21.8807 14 20.5V14.5C14 13.1193 15.1193 12 16.5 12H20.5ZM13.0361 14C13.0128 14.1633 13 14.3302 13 14.5V15.5H4.25293C3.83935 15.5 3.50392 15.8354 3.50391 16.249V16.8271C3.504 17.3627 3.6952 17.8808 4.04297 18.2881C5.29623 19.7556 7.262 20.5009 10 20.501C11.13 20.501 12.1283 20.3715 13 20.1191V20.5C13 20.8936 13.0657 21.2719 13.1855 21.625C12.2302 21.8755 11.1673 22.001 10 22.001C6.85432 22.0009 4.46859 21.0959 2.90234 19.2617C2.32269 18.5829 2.004 17.7198 2.00391 16.8271V16.249C2.00392 15.007 3.01092 14 4.25293 14H13.0361ZM17 14C16.7239 14 16.5 14.2239 16.5 14.5C16.5 14.7761 16.7239 15 17 15H20C20.2761 15 20.5 14.7761 20.5 14.5C20.5 14.2239 20.2761 14 20 14H17ZM10 2.00488C12.7614 2.00488 15 4.24346 15 7.00488C15 9.76631 12.7614 12.0049 10 12.0049C7.23874 12.0047 5 9.76618 5 7.00488C5 4.24358 7.23874 2.00508 10 2.00488ZM10 3.50488C8.06717 3.50508 6.5 5.07201 6.5 7.00488C6.5 8.93776 8.06717 10.5047 10 10.5049C11.933 10.5049 13.5 8.93788 13.5 7.00488C13.5 5.07189 11.933 3.50488 10 3.50488Z" 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_guest_24_regular.svg";

Details