Guest icon

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

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

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_guest_24_regular.svg" width="24" height="24" alt="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="M16 15.2455C16 14.5552 15.4404 13.9955 14.75 13.9955H9.25C8.55964 13.9955 8 14.5552 8 15.2455V15.7428C8 17.5904 9.47204 18.4992 12 18.4992C14.5279 18.4992 16 17.5913 16 15.7448V15.2455ZM9.5 15.7428V15.4955H14.5V15.7448C14.5 16.5708 13.8054 16.9992 12 16.9992C10.1946 16.9992 9.5 16.5703 9.5 15.7428ZM14.5 10.4955C14.5 9.11481 13.3807 7.99552 12 7.99552C10.6193 7.99552 9.5 9.11481 9.5 10.4955C9.5 11.8762 10.6193 12.9955 12 12.9955C13.3807 12.9955 14.5 11.8762 14.5 10.4955ZM11 10.4955C11 9.94324 11.4477 9.49552 12 9.49552C12.5523 9.49552 13 9.94324 13 10.4955C13 11.0478 12.5523 11.4955 12 11.4955C11.4477 11.4955 11 11.0478 11 10.4955ZM10.75 5C10.3358 5 10 5.33579 10 5.75C10 6.16421 10.3358 6.5 10.75 6.5H13.25C13.6642 6.5 14 6.16421 14 5.75C14 5.33579 13.6642 5 13.25 5H10.75ZM19.9948 4.09595C19.9156 2.92516 18.9409 2 17.75 2H6.25L6.09595 2.00519C4.92516 2.08436 4 3.05914 4 4.25V19.7546L4.00519 19.9086C4.08436 21.0794 5.05914 22.0046 6.25 22.0046H17.75L17.904 21.9994C19.0748 21.9202 20 20.9455 20 19.7546V4.25L19.9948 4.09595ZM6.25 3.5H17.75L17.8518 3.50685C18.2178 3.55651 18.5 3.8703 18.5 4.25V19.7546L18.4932 19.8564C18.4435 20.2224 18.1297 20.5046 17.75 20.5046H6.25L6.14823 20.4977C5.78215 20.4481 5.5 20.1343 5.5 19.7546V4.25L5.50685 4.14823C5.55651 3.78215 5.8703 3.5 6.25 3.5Z" 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/guest_24_regular.svg";

Details

Keywords

personbadgevisitoremployee