lock shield icon
lock-shield-28 from Fluent UI System Color Icons by Microsoft Corporation · 28 · MIT Free for personal and commercial use.
- Name
- lock-shield-28
- Set
- Fluent UI System Color Icons
- Style
- 28
- Viewbox
- 28×28
- License
- MIT
5 other variants in Fluent UI System Color Icons
The same icon in other sets
Related icons in Fluent UI System Color Icons
Use the lock shield icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 28 28"><g fill="none"><path fill="#d9d9d9" d="M13.5 2A4.5 4.5 0 0 0 9 6.5v2h1.5v-2a3 3 0 1 1 6 0v2H18v-2A4.5 4.5 0 0 0 13.5 2"/><path fill="url(#SVGQGPeIdOa)" d="M13.5 2A4.5 4.5 0 0 0 9 6.5v2h1.5v-2a3 3 0 1 1 6 0v2H18v-2A4.5 4.5 0 0 0 13.5 2"/><path fill="url(#SVGpr67ibxR)" d="M23 11.75A3.75 3.75 0 0 0 19.25 8H7.75A3.75 3.75 0 0 0 4 11.75v9.5A3.75 3.75 0 0 0 7.75 25h11.5A3.75 3.75 0 0 0 23 21.25z"/><path fill="url(#SVGgiM8BcuV)" d="M13.5 18a1.5 1.5 0 1 0 0-3a1.5 1.5 0 0 0 0 3"/><path fill="url(#SVG1gnIidSy)" d="M23 11.75A3.75 3.75 0 0 0 19.25 8H7.75A3.75 3.75 0 0 0 4 11.75v9.5A3.75 3.75 0 0 0 7.75 25h11.5A3.75 3.75 0 0 0 23 21.25z"/><path fill="url(#SVGFXsGAbKq)" d="M21.098 14.23c.798.77 2.331 1.992 4.216 2.243c.376.05.686.337.686.696v3.355c0 4.51-4.375 6.147-5.32 6.448a.6.6 0 0 1-.358 0C19.376 26.67 15 25.034 15 20.524v-3.355c0-.359.31-.646.686-.696c1.884-.25 3.418-1.474 4.215-2.243a.894.894 0 0 1 1.197 0"/><defs><linearGradient id="SVGQGPeIdOa" x1="10.929" x2="18.322" y1=".758" y2="12.38" gradientUnits="userSpaceOnUse"><stop stop-color="#ffc205"/><stop offset="1" stop-color="#fb5937"/></linearGradient><linearGradient id="SVGpr67ibxR" x1="24.357" x2="6.66" y1="26.063" y2="9.945" gradientUnits="userSpaceOnUse"><stop stop-color="#ff6f47"/><stop offset="1" stop-color="#ffcd0f"/></linearGradient><linearGradient id="SVGFXsGAbKq" x1="17.063" x2="26.837" y1="14" y2="25.867" gradientUnits="userSpaceOnUse"><stop stop-color="#62be55"/><stop offset="1" stop-color="#1e794a"/></linearGradient><radialGradient id="SVGgiM8BcuV" cx="0" cy="0" r="1" gradientTransform="matrix(-1.49996 -5.25 7.28439 -2.0812 14.25 18)" gradientUnits="userSpaceOnUse"><stop stop-color="#944600"/><stop offset="1" stop-color="#cd8e02"/></radialGradient><radialGradient id="SVG1gnIidSy" cx="0" cy="0" r="1" gradientTransform="rotate(140.993 6.003 14.201)scale(7.21573 8.02833)" gradientUnits="userSpaceOnUse"><stop stop-color="#eb4824"/><stop offset=".99" stop-color="#eb4824" stop-opacity="0"/></radialGradient></defs></g></svg>
React
import type { SVGProps } from "react";
export function FluentColorLockShield28(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 28 28"><g fill="none"><path fill="#d9d9d9" d="M13.5 2A4.5 4.5 0 0 0 9 6.5v2h1.5v-2a3 3 0 1 1 6 0v2H18v-2A4.5 4.5 0 0 0 13.5 2"/><path fill="url(#SVGQGPeIdOa)" d="M13.5 2A4.5 4.5 0 0 0 9 6.5v2h1.5v-2a3 3 0 1 1 6 0v2H18v-2A4.5 4.5 0 0 0 13.5 2"/><path fill="url(#SVGpr67ibxR)" d="M23 11.75A3.75 3.75 0 0 0 19.25 8H7.75A3.75 3.75 0 0 0 4 11.75v9.5A3.75 3.75 0 0 0 7.75 25h11.5A3.75 3.75 0 0 0 23 21.25z"/><path fill="url(#SVGgiM8BcuV)" d="M13.5 18a1.5 1.5 0 1 0 0-3a1.5 1.5 0 0 0 0 3"/><path fill="url(#SVG1gnIidSy)" d="M23 11.75A3.75 3.75 0 0 0 19.25 8H7.75A3.75 3.75 0 0 0 4 11.75v9.5A3.75 3.75 0 0 0 7.75 25h11.5A3.75 3.75 0 0 0 23 21.25z"/><path fill="url(#SVGFXsGAbKq)" d="M21.098 14.23c.798.77 2.331 1.992 4.216 2.243c.376.05.686.337.686.696v3.355c0 4.51-4.375 6.147-5.32 6.448a.6.6 0 0 1-.358 0C19.376 26.67 15 25.034 15 20.524v-3.355c0-.359.31-.646.686-.696c1.884-.25 3.418-1.474 4.215-2.243a.894.894 0 0 1 1.197 0"/><defs><linearGradient id="SVGQGPeIdOa" x1="10.929" x2="18.322" y1=".758" y2="12.38" gradientUnits="userSpaceOnUse"><stop stopColor="#ffc205"/><stop offset="1" stopColor="#fb5937"/></linearGradient><linearGradient id="SVGpr67ibxR" x1="24.357" x2="6.66" y1="26.063" y2="9.945" gradientUnits="userSpaceOnUse"><stop stopColor="#ff6f47"/><stop offset="1" stopColor="#ffcd0f"/></linearGradient><linearGradient id="SVGFXsGAbKq" x1="17.063" x2="26.837" y1="14" y2="25.867" gradientUnits="userSpaceOnUse"><stop stopColor="#62be55"/><stop offset="1" stopColor="#1e794a"/></linearGradient><radialGradient id="SVGgiM8BcuV" cx="0" cy="0" r="1" gradientTransform="matrix(-1.49996 -5.25 7.28439 -2.0812 14.25 18)" gradientUnits="userSpaceOnUse"><stop stopColor="#944600"/><stop offset="1" stopColor="#cd8e02"/></radialGradient><radialGradient id="SVG1gnIidSy" cx="0" cy="0" r="1" gradientTransform="rotate(140.993 6.003 14.201)scale(7.21573 8.02833)" gradientUnits="userSpaceOnUse"><stop stopColor="#eb4824"/><stop offset=".99" stopColor="#eb4824" stopOpacity="0"/></radialGradient></defs></g></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 28 28"><g fill="none"><path fill="#d9d9d9" d="M13.5 2A4.5 4.5 0 0 0 9 6.5v2h1.5v-2a3 3 0 1 1 6 0v2H18v-2A4.5 4.5 0 0 0 13.5 2"/><path fill="url(#SVGQGPeIdOa)" d="M13.5 2A4.5 4.5 0 0 0 9 6.5v2h1.5v-2a3 3 0 1 1 6 0v2H18v-2A4.5 4.5 0 0 0 13.5 2"/><path fill="url(#SVGpr67ibxR)" d="M23 11.75A3.75 3.75 0 0 0 19.25 8H7.75A3.75 3.75 0 0 0 4 11.75v9.5A3.75 3.75 0 0 0 7.75 25h11.5A3.75 3.75 0 0 0 23 21.25z"/><path fill="url(#SVGgiM8BcuV)" d="M13.5 18a1.5 1.5 0 1 0 0-3a1.5 1.5 0 0 0 0 3"/><path fill="url(#SVG1gnIidSy)" d="M23 11.75A3.75 3.75 0 0 0 19.25 8H7.75A3.75 3.75 0 0 0 4 11.75v9.5A3.75 3.75 0 0 0 7.75 25h11.5A3.75 3.75 0 0 0 23 21.25z"/><path fill="url(#SVGFXsGAbKq)" d="M21.098 14.23c.798.77 2.331 1.992 4.216 2.243c.376.05.686.337.686.696v3.355c0 4.51-4.375 6.147-5.32 6.448a.6.6 0 0 1-.358 0C19.376 26.67 15 25.034 15 20.524v-3.355c0-.359.31-.646.686-.696c1.884-.25 3.418-1.474 4.215-2.243a.894.894 0 0 1 1.197 0"/><defs><linearGradient id="SVGQGPeIdOa" x1="10.929" x2="18.322" y1=".758" y2="12.38" gradientUnits="userSpaceOnUse"><stop stop-color="#ffc205"/><stop offset="1" stop-color="#fb5937"/></linearGradient><linearGradient id="SVGpr67ibxR" x1="24.357" x2="6.66" y1="26.063" y2="9.945" gradientUnits="userSpaceOnUse"><stop stop-color="#ff6f47"/><stop offset="1" stop-color="#ffcd0f"/></linearGradient><linearGradient id="SVGFXsGAbKq" x1="17.063" x2="26.837" y1="14" y2="25.867" gradientUnits="userSpaceOnUse"><stop stop-color="#62be55"/><stop offset="1" stop-color="#1e794a"/></linearGradient><radialGradient id="SVGgiM8BcuV" cx="0" cy="0" r="1" gradientTransform="matrix(-1.49996 -5.25 7.28439 -2.0812 14.25 18)" gradientUnits="userSpaceOnUse"><stop stop-color="#944600"/><stop offset="1" stop-color="#cd8e02"/></radialGradient><radialGradient id="SVG1gnIidSy" cx="0" cy="0" r="1" gradientTransform="rotate(140.993 6.003 14.201)scale(7.21573 8.02833)" gradientUnits="userSpaceOnUse"><stop stop-color="#eb4824"/><stop offset=".99" stop-color="#eb4824" stop-opacity="0"/></radialGradient></defs></g></svg> </template>
CSS
.icon-lock-shield-28 {
width: 24px;
height: 24px;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2028%2028%22%3E%3Cg%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22%23d9d9d9%22%20d%3D%22M13.5%202A4.5%204.5%200%200%200%209%206.5v2h1.5v-2a3%203%200%201%201%206%200v2H18v-2A4.5%204.5%200%200%200%2013.5%202%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGQGPeIdOa)%22%20d%3D%22M13.5%202A4.5%204.5%200%200%200%209%206.5v2h1.5v-2a3%203%200%201%201%206%200v2H18v-2A4.5%204.5%200%200%200%2013.5%202%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGpr67ibxR)%22%20d%3D%22M23%2011.75A3.75%203.75%200%200%200%2019.25%208H7.75A3.75%203.75%200%200%200%204%2011.75v9.5A3.75%203.75%200%200%200%207.75%2025h11.5A3.75%203.75%200%200%200%2023%2021.25z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGgiM8BcuV)%22%20d%3D%22M13.5%2018a1.5%201.5%200%201%200%200-3a1.5%201.5%200%200%200%200%203%22%2F%3E%3Cpath%20fill%3D%22url(%23SVG1gnIidSy)%22%20d%3D%22M23%2011.75A3.75%203.75%200%200%200%2019.25%208H7.75A3.75%203.75%200%200%200%204%2011.75v9.5A3.75%203.75%200%200%200%207.75%2025h11.5A3.75%203.75%200%200%200%2023%2021.25z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGFXsGAbKq)%22%20d%3D%22M21.098%2014.23c.798.77%202.331%201.992%204.216%202.243c.376.05.686.337.686.696v3.355c0%204.51-4.375%206.147-5.32%206.448a.6.6%200%200%201-.358%200C19.376%2026.67%2015%2025.034%2015%2020.524v-3.355c0-.359.31-.646.686-.696c1.884-.25%203.418-1.474%204.215-2.243a.894.894%200%200%201%201.197%200%22%2F%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22SVGQGPeIdOa%22%20x1%3D%2210.929%22%20x2%3D%2218.322%22%20y1%3D%22.758%22%20y2%3D%2212.38%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23ffc205%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23fb5937%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGpr67ibxR%22%20x1%3D%2224.357%22%20x2%3D%226.66%22%20y1%3D%2226.063%22%20y2%3D%229.945%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23ff6f47%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23ffcd0f%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGFXsGAbKq%22%20x1%3D%2217.063%22%20x2%3D%2226.837%22%20y1%3D%2214%22%20y2%3D%2225.867%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%2362be55%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%231e794a%22%2F%3E%3C%2FlinearGradient%3E%3CradialGradient%20id%3D%22SVGgiM8BcuV%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22matrix(-1.49996%20-5.25%207.28439%20-2.0812%2014.25%2018)%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23944600%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23cd8e02%22%2F%3E%3C%2FradialGradient%3E%3CradialGradient%20id%3D%22SVG1gnIidSy%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22rotate(140.993%206.003%2014.201)scale(7.21573%208.02833)%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23eb4824%22%2F%3E%3Cstop%20offset%3D%22.99%22%20stop-color%3D%22%23eb4824%22%20stop-opacity%3D%220%22%2F%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2028%2028%22%3E%3Cg%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22%23d9d9d9%22%20d%3D%22M13.5%202A4.5%204.5%200%200%200%209%206.5v2h1.5v-2a3%203%200%201%201%206%200v2H18v-2A4.5%204.5%200%200%200%2013.5%202%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGQGPeIdOa)%22%20d%3D%22M13.5%202A4.5%204.5%200%200%200%209%206.5v2h1.5v-2a3%203%200%201%201%206%200v2H18v-2A4.5%204.5%200%200%200%2013.5%202%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGpr67ibxR)%22%20d%3D%22M23%2011.75A3.75%203.75%200%200%200%2019.25%208H7.75A3.75%203.75%200%200%200%204%2011.75v9.5A3.75%203.75%200%200%200%207.75%2025h11.5A3.75%203.75%200%200%200%2023%2021.25z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGgiM8BcuV)%22%20d%3D%22M13.5%2018a1.5%201.5%200%201%200%200-3a1.5%201.5%200%200%200%200%203%22%2F%3E%3Cpath%20fill%3D%22url(%23SVG1gnIidSy)%22%20d%3D%22M23%2011.75A3.75%203.75%200%200%200%2019.25%208H7.75A3.75%203.75%200%200%200%204%2011.75v9.5A3.75%203.75%200%200%200%207.75%2025h11.5A3.75%203.75%200%200%200%2023%2021.25z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGFXsGAbKq)%22%20d%3D%22M21.098%2014.23c.798.77%202.331%201.992%204.216%202.243c.376.05.686.337.686.696v3.355c0%204.51-4.375%206.147-5.32%206.448a.6.6%200%200%201-.358%200C19.376%2026.67%2015%2025.034%2015%2020.524v-3.355c0-.359.31-.646.686-.696c1.884-.25%203.418-1.474%204.215-2.243a.894.894%200%200%201%201.197%200%22%2F%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22SVGQGPeIdOa%22%20x1%3D%2210.929%22%20x2%3D%2218.322%22%20y1%3D%22.758%22%20y2%3D%2212.38%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23ffc205%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23fb5937%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGpr67ibxR%22%20x1%3D%2224.357%22%20x2%3D%226.66%22%20y1%3D%2226.063%22%20y2%3D%229.945%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23ff6f47%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23ffcd0f%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGFXsGAbKq%22%20x1%3D%2217.063%22%20x2%3D%2226.837%22%20y1%3D%2214%22%20y2%3D%2225.867%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%2362be55%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%231e794a%22%2F%3E%3C%2FlinearGradient%3E%3CradialGradient%20id%3D%22SVGgiM8BcuV%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22matrix(-1.49996%20-5.25%207.28439%20-2.0812%2014.25%2018)%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23944600%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23cd8e02%22%2F%3E%3C%2FradialGradient%3E%3CradialGradient%20id%3D%22SVG1gnIidSy%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22rotate(140.993%206.003%2014.201)scale(7.21573%208.02833)%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23eb4824%22%2F%3E%3Cstop%20offset%3D%22.99%22%20stop-color%3D%22%23eb4824%22%20stop-opacity%3D%220%22%2F%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/fluent-color/lock-shield-28.svg?color=%231a73e8&size=48
