Lock Multiple icon
Used in generic access, security, or safety scenarios. The Lock 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 Lock 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 { LockMultiple24Regular, LockMultiple24Filled } from "@fluentui/react-icons";
export function Example() {
return <LockMultiple24Regular aria-label="Lock Multiple" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_lock_multiple_24_regular.svg" width="24" height="24" alt="Lock 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="M18.4902 10.0078C19.3958 10.5847 19.9971 11.5967 19.9971 12.75V16.25C19.9971 19.4256 17.4227 22 14.2471 22H9.74707C8.59332 22 7.58064 21.3984 7.00391 20.4922C7.08472 20.4968 7.16609 20.5 7.24805 20.5H14.248C16.5953 20.5 18.498 18.5972 18.498 16.25V10.25C18.498 10.1687 18.4947 10.088 18.4902 10.0078ZM10.75 1C13.0972 1 15 2.90279 15 5.25V7.08789C16.4332 7.42655 17.5 8.71328 17.5 10.25V16.25C17.5 18.0449 16.0449 19.5 14.25 19.5H7.25C5.45507 19.5 4 18.0449 4 16.25V10.25C4 8.71328 5.06675 7.42655 6.5 7.08789V5.25C6.5 2.90279 8.40279 1 10.75 1ZM7.25 8.5C6.2835 8.5 5.5 9.2835 5.5 10.25V16.25C5.5 17.2165 6.2835 18 7.25 18H14.25C15.2165 18 16 17.2165 16 16.25V10.25C16 9.2835 15.2165 8.5 14.25 8.5H7.25ZM10.75 12C11.4404 12 12 12.5596 12 13.25C12 13.9404 11.4404 14.5 10.75 14.5C10.0596 14.5 9.5 13.9404 9.5 13.25C9.5 12.5596 10.0596 12 10.75 12ZM10.75 2.5C9.23122 2.5 8 3.73122 8 5.25V7H13.5V5.25C13.5 3.73122 12.2688 2.5 10.75 2.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/lock_multiple_24_regular.svg";Details
| Name | Lock Multiple |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_lock_multiple_24_regular.svg |
| Filled file | ic_fluent_lock_multiple_24_filled.svg |
| React components | LockMultiple24Regular, LockMultiple24Filled |
| License | MIT (© Microsoft Corporation) |