Person Lock icon
Used in a wide range of scenarios - representing a general person, a contact, contact lists, sharing, and managing access. The Person Lock icon is part of Microsoft's Fluent UI System Icons, available here in filled and regular (outlined) styles on a 24 px grid. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.
Use the Person 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 { PersonLock24Regular, PersonLock24Filled } from "@fluentui/react-icons";
export function Example() {
return <PersonLock24Regular aria-label="Person Lock" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_person_lock_24_regular.svg" width="24" height="24" alt="Person 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="M14 14.0002H4.25278C3.01076 14.0002 2.00391 15.007 2.00391 16.2491V16.8267C2.00391 17.7195 2.32242 18.583 2.90219 19.2619C4.46849 21.0962 6.8545 22.0013 10.0004 22.0013C10.7149 22.0013 11.3903 21.9546 12.0258 21.861C12.0088 21.7432 12 21.6227 12 21.5002V20.3473C11.3859 20.4499 10.7197 20.5013 10.0004 20.5013C7.26206 20.5013 5.29618 19.7555 4.04287 18.2878C3.69502 17.8805 3.50391 17.3624 3.50391 16.8267V16.2491C3.50391 15.8355 3.83919 15.5002 4.25278 15.5002H12.208C12.5294 14.7647 13.1944 14.2138 14 14.0503V14.0002ZM10.0004 2.00488C12.7618 2.00488 15.0004 4.24346 15.0004 7.00488C15.0004 9.76631 12.7618 12.0049 10.0004 12.0049C7.23894 12.0049 5.00036 9.76631 5.00036 7.00488C5.00036 4.24346 7.23894 2.00488 10.0004 2.00488ZM10.0004 3.50488C8.06737 3.50488 6.50036 5.07189 6.50036 7.00488C6.50036 8.93788 8.06737 10.5049 10.0004 10.5049C11.9334 10.5049 13.5004 8.93788 13.5004 7.00488C13.5004 5.07189 11.9334 3.50488 10.0004 3.50488ZM15 15.0002H14.5C13.6716 15.0002 13 15.6718 13 16.5002V21.5002C13 22.3287 13.6716 23.0002 14.5 23.0002H20.5C21.3284 23.0002 22 22.3287 22 21.5002V16.5002C22 15.6718 21.3284 15.0002 20.5 15.0002H20V14.0002C20 12.6195 18.8807 11.5002 17.5 11.5002C16.1193 11.5002 15 12.6195 15 14.0002V15.0002ZM16.5 14.0002C16.5 13.448 16.9477 13.0002 17.5 13.0002C18.0523 13.0002 18.5 13.448 18.5 14.0002V15.0002H16.5V14.0002ZM18.5 19.0002C18.5 19.5525 18.0523 20.0002 17.5 20.0002C16.9477 20.0002 16.5 19.5525 16.5 19.0002C16.5 18.448 16.9477 18.0002 17.5 18.0002C18.0523 18.0002 18.5 18.448 18.5 19.0002Z" 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_lock_24_regular.svg";Details
| Name | Person Lock |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_person_lock_24_regular.svg |
| Filled file | ic_fluent_person_lock_24_filled.svg |
| React components | PersonLock24Regular, PersonLock24Filled |
| License | MIT (© Microsoft Corporation) |