People Lock icon

Use the People Lock 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 { PeopleLock24Regular, PeopleLock24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

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

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="M8 4.5C6.61929 4.5 5.5 5.61929 5.5 7C5.5 8.38071 6.61929 9.5 8 9.5C9.38071 9.5 10.5 8.38071 10.5 7C10.5 5.61929 9.38071 4.5 8 4.5ZM4 7C4 4.79086 5.79086 3 8 3C10.2091 3 12 4.79086 12 7C12 9.20914 10.2091 11 8 11C5.79086 11 4 9.20914 4 7ZM17 6.5C16.1716 6.5 15.5 7.17157 15.5 8C15.5 8.82843 16.1716 9.5 17 9.5C17.8284 9.5 18.5 8.82843 18.5 8C18.5 7.17157 17.8284 6.5 17 6.5ZM14 8C14 6.34315 15.3431 5 17 5C18.6569 5 20 6.34315 20 8C20 9.13267 19.3723 10.1187 18.4458 10.6293C18.1449 10.545 17.8277 10.5 17.5 10.5C16.9668 10.5 16.4614 10.6192 16.0091 10.8325C14.8392 10.4233 14 9.30963 14 8ZM13.7019 14.1301C13.3136 13.4548 12.5849 13 11.75 13H4.25C3.00736 13 2 14.0074 2 15.25V15.5011L2 15.5022L2.00001 15.5048L2.00007 15.5111L2.00035 15.5277C2.00064 15.5406 2.00117 15.5571 2.0021 15.5771C2.00396 15.6169 2.00745 15.6705 2.01398 15.7358C2.02701 15.8661 2.05233 16.045 2.10165 16.2564C2.19995 16.6776 2.39654 17.2404 2.79183 17.8051C3.61066 18.9749 5.17178 20 8 20C9.80294 20 11.091 19.5834 12 18.9783V16.915L11.9793 16.9449C11.4857 17.6501 10.4218 18.5 8 18.5C5.57822 18.5 4.51434 17.6501 4.02067 16.9449C3.75971 16.5721 3.62818 16.1974 3.56241 15.9155C3.5297 15.7753 3.514 15.6612 3.50653 15.5865C3.50281 15.5493 3.50117 15.5222 3.50047 15.5072L3.5 15.4947V15.25C3.5 14.8358 3.83579 14.5 4.25 14.5H11.75C12.0914 14.5 12.3795 14.7281 12.4703 15.0402C12.7726 14.6205 13.2019 14.2984 13.7019 14.1301ZM14.5 15H15V14C15 12.6193 16.1193 11.5 17.5 11.5C18.8807 11.5 20 12.6193 20 14V15H20.5C21.3284 15 22 15.6716 22 16.5V21.5C22 22.3284 21.3284 23 20.5 23H14.5C13.6716 23 13 22.3284 13 21.5V16.5C13 15.6716 13.6716 15 14.5 15ZM16.5 14V15H18.5V14C18.5 13.4477 18.0523 13 17.5 13C16.9477 13 16.5 13.4477 16.5 14ZM18.5 19C18.5 18.4477 18.0523 18 17.5 18C16.9477 18 16.5 18.4477 16.5 19C16.5 19.5523 16.9477 20 17.5 20C18.0523 20 18.5 19.5523 18.5 19Z" 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_lock_24_regular.svg";

Details

Keywords

groupteamorganizationcontactguestsecuritysafetyaccess