People Search icon

Use the People Search 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 { PeopleSearch24Regular, PeopleSearch24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

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

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="M11.9091 13.9988L19.7531 14.0002C20.9957 14.0002 22.0031 15.0075 22.0031 16.2502V17.1553C22.0031 18.2489 21.5256 19.2881 20.6958 20.0005C19.1303 21.3445 16.89 22.0013 14 22.0013L13.821 22.0002C14.0547 21.5296 14.0634 20.9758 13.8473 20.499L14 20.5013C16.56 20.5013 18.4578 19.9449 19.7187 18.8624C20.2166 18.435 20.5031 17.8115 20.5031 17.1553V16.2502C20.5031 15.836 20.1673 15.5002 19.7531 15.5002L11.9775 15.5002C11.9924 15.335 12 15.1682 12 15.0003C12 14.6583 11.9688 14.3236 11.9091 13.9988ZM6.5 10.5003C8.98528 10.5003 11 12.515 11 15.0003C11 16.0941 10.6097 17.0967 9.96089 17.8766L12.7827 20.6909C13.076 20.9834 13.0766 21.4583 12.784 21.7515C12.5181 22.0181 12.1014 22.0428 11.8076 21.8253L11.7234 21.7528L8.82025 18.8567C8.14274 19.2652 7.34881 19.5003 6.5 19.5003C4.01472 19.5003 2 17.4855 2 15.0003C2 12.515 4.01472 10.5003 6.5 10.5003ZM6.5 12.0003C4.84315 12.0003 3.5 13.3434 3.5 15.0003C3.5 16.6571 4.84315 18.0003 6.5 18.0003C8.15685 18.0003 9.5 16.6571 9.5 15.0003C9.5 13.3434 8.15685 12.0003 6.5 12.0003ZM14 2.00488C16.7614 2.00488 19 4.24346 19 7.00488C19 9.76631 16.7614 12.0049 14 12.0049C11.2386 12.0049 9 9.76631 9 7.00488C9 4.24346 11.2386 2.00488 14 2.00488ZM14 3.50488C12.067 3.50488 10.5 5.07189 10.5 7.00488C10.5 8.93788 12.067 10.5049 14 10.5049C15.933 10.5049 17.5 8.93788 17.5 7.00488C17.5 5.07189 15.933 3.50488 14 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/people_search_24_regular.svg";

Details