The Phosphor lock key icon depicts a padlock with a key, commonly used to represent security, authentication, or access control in user interfaces.
Common uses
- Login or authentication buttons
- Security settings sections
- Indicating encrypted or private content
Use it in React
Install
npm i @phosphor-icons/reactImport & render
import { LockKey } from '@phosphor-icons/react';
<LockKey size={24} />Styles
Phosphor ships this icon in 6 styles — each its own import:
regular
<LockKey size={24} />thin
<LockKey size={24} weight="thin" />light
<LockKey size={24} weight="light" />bold
<LockKey size={24} weight="bold" />fill
<LockKey size={24} weight="fill" />duotone
<LockKey size={24} weight="duotone" />Details
- Library
- Phosphor (1,512 icons)
- License
- MIT
- viewBox
0 0 256 256- Category
- objects
- Keywords
- padlocksecuritysecuredauthenticationauthenticatedloginlockedencryptedencryptionprivacyprivateobjectssystemlockkeyaccess
FAQ
- What does the lock key icon represent?
- It symbolizes security, privacy, authentication, and access control, often used for login or to denote protected information.
- How do I use the lock key icon in React?
- Import it from the library and use the LockKey component: import { LockKey } from '@phosphor-icons/react'.
- What is the license for Phosphor icons?
- Phosphor icons are distributed under the MIT license, allowing for free use in both personal and commercial projects.
Related icons
The same idea in other libraries, and near matches in Phosphor.
Looking for something else? Search Phosphor and 4 more libraries by description →
The search behind these pages runs as a Claude Code skill. What skills are and how I ship them →