People Queue icon

Use the People Queue 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 { PeopleQueue24Regular, PeopleQueue24Filled } from "@fluentui/react-icons";

export function Example() {
  return <PeopleQueue24Regular aria-label="People Queue" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_people_queue_24_regular.svg" width="24" height="24" alt="People Queue">

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="M7.5 9C9.15685 9 10.5 7.65685 10.5 6C10.5 4.34315 9.15685 3 7.5 3C5.84315 3 4.5 4.34315 4.5 6C4.5 7.65685 5.84315 9 7.5 9ZM7.5 7.5C6.67157 7.5 6 6.82843 6 6C6 5.17157 6.67157 4.5 7.5 4.5C8.32843 4.5 9 5.17157 9 6C9 6.82843 8.32843 7.5 7.5 7.5ZM3 11.75C3 10.7835 3.7835 10 4.75 10H10.25C11.2165 10 12 10.7835 12 11.75V16.5C12 18.9853 9.98528 21 7.5 21C5.01472 21 3 18.9853 3 16.5V11.75ZM4.75 11.5C4.61193 11.5 4.5 11.6119 4.5 11.75V16.5C4.5 18.1569 5.84315 19.5 7.5 19.5C9.15685 19.5 10.5 18.1569 10.5 16.5V11.75C10.5 11.6119 10.3881 11.5 10.25 11.5H4.75ZM10.5273 8.61436C10.9623 8.85989 11.4647 9 11.9999 9C13.6567 9 14.9999 7.65685 14.9999 6C14.9999 4.34315 13.6567 3 11.9999 3C11.4647 3 10.9623 3.14011 10.5273 3.38564C10.8539 3.76346 11.1109 4.20305 11.2785 4.68452C11.4925 4.5669 11.7384 4.5 11.9999 4.5C12.8283 4.5 13.4999 5.17157 13.4999 6C13.4999 6.82843 12.8283 7.5 11.9999 7.5C11.7384 7.5 11.4925 7.4331 11.2785 7.31548C11.1109 7.79695 10.8539 8.23654 10.5273 8.61436ZM10.8602 20.8544C11.2242 20.9494 11.6061 21 11.9999 21C14.4851 21 16.4999 18.9853 16.4999 16.5V11.75C16.4999 10.7835 15.7164 10 14.7499 10H12.3713C12.7142 10.4152 12.9375 10.9328 12.9887 11.5H14.7499C14.8879 11.5 14.9999 11.6119 14.9999 11.75V16.5C14.9999 18.1194 13.7168 19.4391 12.1117 19.4979C11.7733 20.0175 11.3495 20.4763 10.8602 20.8544ZM15.0273 8.61436C15.4623 8.85989 15.9647 9 16.4999 9C18.1567 9 19.4999 7.65685 19.4999 6C19.4999 4.34315 18.1567 3 16.4999 3C15.9647 3 15.4623 3.14011 15.0273 3.38564C15.3539 3.76346 15.6109 4.20305 15.7785 4.68452C15.9925 4.5669 16.2384 4.5 16.4999 4.5C17.3283 4.5 17.9999 5.17157 17.9999 6C17.9999 6.82843 17.3283 7.5 16.4999 7.5C16.2384 7.5 15.9925 7.4331 15.7785 7.31548C15.6109 7.79695 15.3539 8.23654 15.0273 8.61436ZM15.3602 20.8544C15.7242 20.9494 16.1061 21 16.4999 21C18.9851 21 20.9999 18.9853 20.9999 16.5V11.75C20.9999 10.7835 20.2164 10 19.2499 10H16.8713C17.2142 10.4152 17.4375 10.9328 17.4887 11.5H19.2499C19.3879 11.5 19.4999 11.6119 19.4999 11.75V16.5C19.4999 18.1194 18.2168 19.4391 16.6117 19.4979C16.2733 20.0175 15.8495 20.4763 15.3602 20.8544Z" 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/people_queue_24_regular.svg";

Details

Keywords

groupteamorganizationcontactguestlinewaitingorder