Person Key icon
Used in a wide range of scenarios - representing a general person, a contact, contact lists, sharing, and managing access. The Person Key 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 Key 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 { PersonKey24Regular, PersonKey24Filled } from "@fluentui/react-icons";
export function Example() {
return <PersonKey24Regular aria-label="Person Key" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_person_key_24_regular.svg" width="24" height="24" alt="Person Key"> 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="M15.0002 15.4997C15.0003 14.9737 15.0905 14.4689 15.2564 13.9997H6.25278C5.01076 13.9997 4.00391 15.0065 4.00391 16.2486V16.8262C4.00391 17.719 4.32242 18.5825 4.90219 19.2614C6.29801 20.896 8.34482 21.7928 11.0002 21.9686V20.9142C11.0002 20.7631 11.0173 20.6138 11.0505 20.4688C8.8018 20.312 7.14621 19.5794 6.04287 18.2874C5.69502 17.88 5.50391 17.3619 5.50391 16.8262V16.2486C5.50391 15.835 5.83919 15.4997 6.25278 15.4997H15.0002ZM12.0004 2.00439C14.7618 2.00439 17.0004 4.24297 17.0004 7.00439C17.0004 9.76582 14.7618 12.0044 12.0004 12.0044C9.23894 12.0044 7.00036 9.76582 7.00036 7.00439C7.00036 4.24297 9.23894 2.00439 12.0004 2.00439ZM12.0004 3.50439C10.0674 3.50439 8.50036 5.0714 8.50036 7.00439C8.50036 8.93739 10.0674 10.5044 12.0004 10.5044C13.9334 10.5044 15.5004 8.93739 15.5004 7.00439C15.5004 5.0714 13.9334 3.50439 12.0004 3.50439ZM19.5002 19C21.4332 19 23.0002 17.433 23.0002 15.5C23.0002 13.567 21.4332 12 19.5002 12C17.5672 12 16.0002 13.567 16.0002 15.5C16.0002 15.8064 16.0396 16.1035 16.1135 16.3867L12.2931 20.2071C12.1056 20.3946 12.0002 20.649 12.0002 20.9142V22.5C12.0002 22.7761 12.2241 23 12.5002 23H14.5002C14.7764 23 15.0002 22.7761 15.0002 22.5V22H16.0002C16.2764 22 16.5002 21.7761 16.5002 21.5V20.5H17.5002C17.7764 20.5 18.0002 20.2761 18.0002 20V19H19.5002ZM20.0002 14C20.5525 14 21.0002 14.4477 21.0002 15C21.0002 15.5523 20.5525 16 20.0002 16C19.448 16 19.0002 15.5523 19.0002 15C19.0002 14.4477 19.448 14 20.0002 14Z" 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_key_24_regular.svg";Details
| Name | Person Key |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_person_key_24_regular.svg |
| Filled file | ic_fluent_person_key_24_filled.svg |
| React components | PersonKey24Regular, PersonKey24Filled |
| License | MIT (© Microsoft Corporation) |