Phone Key icon
Used to represent unlock through device scenarios. The Phone 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 Phone 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 { PhoneKey24Regular, PhoneKey24Filled } from "@fluentui/react-icons";
export function Example() {
return <PhoneKey24Regular aria-label="Phone Key" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_phone_key_24_regular.svg" width="24" height="24" alt="Phone 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.75 2C16.9926 2 18 3.00736 18 4.25V11.2561C17.4411 11.4536 16.9328 11.7585 16.5 12.1458V4.25C16.5 3.83579 16.1642 3.5 15.75 3.5H8.25C7.83579 3.5 7.5 3.83579 7.5 4.25V19.75C7.5 20.1642 7.83579 20.5 8.25 20.5H11.0278C11.0094 20.6018 11 20.7058 11 20.8107V22H8.25C7.00736 22 6 20.9926 6 19.75V4.25C6 3.00736 7.00736 2 8.25 2H15.75ZM13.2489 17.5C13.3487 17.4999 13.4441 17.5192 13.5313 17.5545L12.084 19.0018L10.7511 19.0038C10.3369 19.0044 10.0006 18.6691 10 18.2549C9.99938 17.8407 10.3347 17.5044 10.7489 17.5038L13.2489 17.5ZM19.5 19C21.433 19 23 17.433 23 15.5C23 13.567 21.433 12 19.5 12C17.567 12 16 13.567 16 15.5C16 15.8161 16.0419 16.1223 16.1204 16.4136C16.0666 16.4452 16.0159 16.4841 15.9697 16.5303L12.2197 20.2803C12.079 20.421 12 20.6117 12 20.8107V22.25C12 22.6642 12.3358 23 12.75 23H14.5C14.7761 23 15 22.7761 15 22.5V22H16C16.2761 22 16.5 21.7761 16.5 21.5V20.5H17.5C17.7761 20.5 18 20.2761 18 20V19H19.5ZM21 15C21 15.5523 20.5523 16 20 16C19.4477 16 19 15.5523 19 15C19 14.4477 19.4477 14 20 14C20.5523 14 21 14.4477 21 15Z" 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/phone_key_24_regular.svg";Details
| Name | Phone Key |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_phone_key_24_regular.svg |
| Filled file | ic_fluent_phone_key_24_filled.svg |
| React components | PhoneKey24Regular, PhoneKey24Filled |
| License | MIT (© Microsoft Corporation) |