Menu

Beta
Sign in
Lock SVG icon, rounded

Lock SVG icon, rounded

A padlock represents privacy, access control, or a protected connection. Use it on a website sign-in form or a mobile app security screen to identify secure actions and information.

Free · from Rounded Interface Icons

Similar SVGs

More from Rounded Interface Icons

Whole pack

How to use it

HTML <img>
<img src="https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/qZpA1_OrAA1Z/amnt.svg" alt="Lock" width="48" height="48">
Inline SVG
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64"><g id="layer-1" data-name="Group 1"><path d="M21 28L21 22C21 15.92 25.92 11 32 11C38.08 11 43 15.92 43 22L43 28" fill="none" stroke="#264653" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M18 28L46 28C48.21 28 50 29.79 50 32L50 49C50 51.21 48.21 53 46 53L18 53C15.79 53 14 51.21 14 49L14 32C14 29.79 15.79 28 18 28Z" fill="#a8dadc" stroke="#264653" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M35 38C35 39.66 33.66 41 32 41C30.34 41 29 39.66 29 38C29 36.34 30.34 35 32 35C33.66 35 35 36.34 35 38Z" fill="none" stroke="#264653" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M32 41L32 46" fill="none" stroke="#264653" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></g></svg>
CSS background-image
.lock {
  background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/qZpA1_OrAA1Z/amnt.svg");
  background-size: contain;
}
CSS mask-image (takes the text colour)
.lock {
  width: 1.5em; height: 1.5em;
  background-color: currentColor;
  mask: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/qZpA1_OrAA1Z/amnt.svg") center / contain no-repeat;
}
React
import LockSvg from "./lock.jsx"; // from the React tab above

<LockSvg width={48} height={48} />

Tags

locksecurityprivacyprotected

Made with AMNT

AMNT SVG Pro 1.1 drew this from the words Lock. Flat, rounded icons in a consistent set. Use two colours and clean 2 px lines with rounded ends and corners. Keep the shapes simple, balanced, and easy to recognise at small sizes. Use the same proportions, line weight, and colour placement for every icon. as part of the pack Rounded Interface Icons. Want one like it? Make your own in the SVG studio.

Licence: free. A Free account may use it for personal work; Pro and Max download it with a commercial licence, fixed at download, forever. No credit needed. Read the licence

Settings