Key Multiple icon
Used for approved access or password. The Key Multiple 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 Key Multiple 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 { KeyMultiple24Regular, KeyMultiple24Filled } from "@fluentui/react-icons";
export function Example() {
return <KeyMultiple24Regular aria-label="Key Multiple" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_key_multiple_24_regular.svg" width="24" height="24" alt="Key Multiple"> 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="M12 2C12.3099 2 12.6132 2.02819 12.9075 2.08215C12.3012 2.48501 11.7664 2.98693 11.3261 3.56481C9.71557 3.87892 8.5 5.29751 8.5 7C8.5 7.31593 8.54167 7.62098 8.6194 7.91045C8.68892 8.16937 8.61495 8.44571 8.42538 8.63528L3.5 13.5607V16.5H5.5V14.75C5.5 14.3358 5.83579 14 6.25 14H8.5V12.75C8.5 12.5511 8.57902 12.3603 8.71967 12.2197L10.6346 10.3047C10.8579 10.7708 11.135 11.2061 11.458 11.6026L10 13.0607V14.75C10 15.1642 9.66421 15.5 9.25 15.5H7V17.25C7 17.6642 6.66421 18 6.25 18H2.75C2.33579 18 2 17.6642 2 17.25V13.25C2 13.0511 2.07902 12.8603 2.21967 12.7197L7.07463 7.86471C7.02553 7.58344 7 7.29445 7 7C7 4.23858 9.23858 2 12 2ZM16.5 3.5C14.2909 3.5 12.5 5.29086 12.5 7.5C12.5 9.02258 13.3504 10.3477 14.6058 11.0241C14.8486 11.1549 15 11.4085 15 11.6843V19.4182L17.0174 21.2522L19.1399 19.4535L18.2188 18.5295C17.9271 18.2368 17.9271 17.7632 18.2188 17.4705L19.1862 16.5L18.2188 15.5295C18.0787 15.3889 18 15.1985 18 15V11.6843C18 11.4085 18.1514 11.1549 18.3942 11.0241C19.6496 10.3477 20.5 9.02258 20.5 7.5C20.5 5.29086 18.7091 3.5 16.5 3.5ZM11 7.5C11 4.46243 13.4624 2 16.5 2C19.5376 2 22 4.46243 22 7.5C22 9.43177 21.0039 11.1299 19.5 12.1104V14.69L20.7764 15.9705C21.0682 16.2632 21.0682 16.7368 20.7764 17.0295L19.809 18L20.7764 18.9705C20.9243 19.1188 21.0034 19.3222 20.9946 19.5315C20.9858 19.7407 20.8899 19.9368 20.7301 20.0722L17.4849 22.8222C17.1975 23.0657 16.7742 23.0583 16.4955 22.805L13.7455 20.305C13.5891 20.1628 13.5 19.9613 13.5 19.75V12.1104C11.9961 11.1299 11 9.43177 11 7.5ZM17.5 6.5C17.5 7.05228 17.0523 7.5 16.5 7.5C15.9477 7.5 15.5 7.05228 15.5 6.5C15.5 5.94772 15.9477 5.5 16.5 5.5C17.0523 5.5 17.5 5.94772 17.5 6.5Z" 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/key_multiple_24_regular.svg";Details
| Name | Key Multiple |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_key_multiple_24_regular.svg |
| Filled file | ic_fluent_key_multiple_24_filled.svg |
| React components | KeyMultiple24Regular, KeyMultiple24Filled |
| License | MIT (© Microsoft Corporation) |