Key Icon
Free SVG icon from the Mage Icons collection. Download or copy for use in any project.
The Key icon is commonly used in password managers, authentication screens and security panels. Available as a free SVG - copy the code or download directly.
img tag
<img src="https://proicons.com/icon/310790.svg" alt="Key icon" width="24" height="24">
React JSX
<img src="https://proicons.com/icon/310790.svg" alt="Key icon" width={24} height={24} />
Vue template
<img src="https://proicons.com/icon/310790.svg" alt="Key icon" :width="24" :height="24" />
CSS background
.icon-key {
background-image: url('https://proicons.com/icon/310790.svg');
background-size: contain;
background-repeat: no-repeat;
width: 24px;
height: 24px;
display: inline-block;
}
SVG markup
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M19.5431 4.47107C18.4756 3.37243 17.0551 2.68603 15.5319 2.53268C14.0086 2.37933 12.4802 2.76886 11.2155 3.63271C9.95088 4.49656 9.03108 5.77936 8.61802 7.25533C8.20496 8.73131 8.32511 10.3059 8.95734 11.7019L2.5 18.179V21.5H5.86393L5.54636 19.5098L7.51061 19.8395L9.18081 18.179L8.86324 16.1888L10.8393 16.5067L12.3095 15.0347C13.7038 15.6677 15.2764 15.788 16.7506 15.3744C18.2247 14.9608 19.5059 14.0399 20.3687 12.7737C21.2315 11.5074 21.6205 9.97708 21.4674 8.45195C21.3142 6.92681 20.6286 5.50464 19.5314 4.43574L19.5431 4.47107Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M16.9908 10.2298C16.6753 10.5469 16.2729 10.7631 15.8346 10.8511C15.3963 10.9391 14.9418 10.8948 14.5286 10.7239C14.1155 10.553 13.7622 10.2632 13.5137 9.89121C13.2652 9.51918 13.1325 9.08167 13.1325 8.63409C13.1325 8.18651 13.2652 7.749 13.5137 7.37697C13.7622 7.00495 14.1155 6.71514 14.5286 6.54426C14.9418 6.37338 15.3963 6.32912 15.8346 6.41708C16.2729 6.50504 16.6753 6.72126 16.9908 7.03836C17.4095 7.46365 17.6443 8.03687 17.6443 8.63409C17.6443 9.23131 17.4095 9.80453 16.9908 10.2298Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg>
Copied!