lock shield icon
lock-shield-48 from Fluent UI System Color Icons by Microsoft Corporation · 48 · MIT Free for personal and commercial use.
- Name
- lock-shield-48
- Set
- Fluent UI System Color Icons
- Style
- 48
- Viewbox
- 48×48
- 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 48 48"><g fill="none"><path fill="url(#SVGU9uwtWcB1)" d="M16 12v3h2.5v-3a5.5 5.5 0 1 1 11 0v3H32v-3a8 8 0 1 0-16 0"/><path fill="url(#SVGMgGfseRj1)" d="M40 20.25A6.25 6.25 0 0 0 33.75 14h-19.5A6.25 6.25 0 0 0 8 20.25v15.5A6.25 6.25 0 0 0 14.25 42h19.5A6.25 6.25 0 0 0 40 35.75z"/><path fill="url(#SVGfB6m0m0d1)" d="M27 28a3 3 0 1 1-6 0a3 3 0 0 1 6 0"/><path fill="url(#SVGwq0rkdAq1)" d="M40 20.25A6.25 6.25 0 0 0 33.75 14h-19.5A6.25 6.25 0 0 0 8 20.25v15.5A6.25 6.25 0 0 0 14.25 42h19.5A6.25 6.25 0 0 0 40 35.75z"/><path fill="url(#SVGEoXaX0RD1)" d="M41.556 26.773a14.7 14.7 0 0 1-2.778-1.153a18.5 18.5 0 0 1-2.278-1.455a.84.84 0 0 0-1 0c-2.825 2.097-5.707 3.135-8.667 3.135a.83.83 0 0 0-.833.825V33.9q.001 2.714 1.06 4.95a11.1 11.1 0 0 0 1.86 2.75c1.606 1.76 3.87 3.21 6.775 4.343a.84.84 0 0 0 .61 0C42.714 43.443 46 39.4 46 33.9v-5.775a.83.83 0 0 0-.833-.825q-1.825 0-3.611-.527"/><defs><linearGradient id="SVGU9uwtWcB1" x1="19.429" x2="31.67" y1="1.899" y2="22.113" gradientUnits="userSpaceOnUse"><stop stop-color="#ffc205"/><stop offset="1" stop-color="#fb5937"/></linearGradient><linearGradient id="SVGMgGfseRj1" x1="42.286" x2="13.084" y1="43.75" y2="16.556" gradientUnits="userSpaceOnUse"><stop stop-color="#ff6f47"/><stop offset="1" stop-color="#ffcd0f"/></linearGradient><linearGradient id="SVGEoXaX0RD1" x1="29.75" x2="46.026" y1="24" y2="45.23" gradientUnits="userSpaceOnUse"><stop stop-color="#62be55"/><stop offset="1" stop-color="#1e794a"/></linearGradient><radialGradient id="SVGfB6m0m0d1" cx="0" cy="0" r="1" gradientTransform="rotate(254.055 24.442 5.883)scale(10.9202 15.1517)" gradientUnits="userSpaceOnUse"><stop stop-color="#944600"/><stop offset="1" stop-color="#cd8e02"/></radialGradient><radialGradient id="SVGwq0rkdAq1" cx="0" cy="0" r="1" gradientTransform="rotate(150.441 12.372 22.606)scale(11.8247 12.9561)" 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 FluentColorLockShield48(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48"><g fill="none"><path fill="url(#SVGU9uwtWcB1)" d="M16 12v3h2.5v-3a5.5 5.5 0 1 1 11 0v3H32v-3a8 8 0 1 0-16 0"/><path fill="url(#SVGMgGfseRj1)" d="M40 20.25A6.25 6.25 0 0 0 33.75 14h-19.5A6.25 6.25 0 0 0 8 20.25v15.5A6.25 6.25 0 0 0 14.25 42h19.5A6.25 6.25 0 0 0 40 35.75z"/><path fill="url(#SVGfB6m0m0d1)" d="M27 28a3 3 0 1 1-6 0a3 3 0 0 1 6 0"/><path fill="url(#SVGwq0rkdAq1)" d="M40 20.25A6.25 6.25 0 0 0 33.75 14h-19.5A6.25 6.25 0 0 0 8 20.25v15.5A6.25 6.25 0 0 0 14.25 42h19.5A6.25 6.25 0 0 0 40 35.75z"/><path fill="url(#SVGEoXaX0RD1)" d="M41.556 26.773a14.7 14.7 0 0 1-2.778-1.153a18.5 18.5 0 0 1-2.278-1.455a.84.84 0 0 0-1 0c-2.825 2.097-5.707 3.135-8.667 3.135a.83.83 0 0 0-.833.825V33.9q.001 2.714 1.06 4.95a11.1 11.1 0 0 0 1.86 2.75c1.606 1.76 3.87 3.21 6.775 4.343a.84.84 0 0 0 .61 0C42.714 43.443 46 39.4 46 33.9v-5.775a.83.83 0 0 0-.833-.825q-1.825 0-3.611-.527"/><defs><linearGradient id="SVGU9uwtWcB1" x1="19.429" x2="31.67" y1="1.899" y2="22.113" gradientUnits="userSpaceOnUse"><stop stopColor="#ffc205"/><stop offset="1" stopColor="#fb5937"/></linearGradient><linearGradient id="SVGMgGfseRj1" x1="42.286" x2="13.084" y1="43.75" y2="16.556" gradientUnits="userSpaceOnUse"><stop stopColor="#ff6f47"/><stop offset="1" stopColor="#ffcd0f"/></linearGradient><linearGradient id="SVGEoXaX0RD1" x1="29.75" x2="46.026" y1="24" y2="45.23" gradientUnits="userSpaceOnUse"><stop stopColor="#62be55"/><stop offset="1" stopColor="#1e794a"/></linearGradient><radialGradient id="SVGfB6m0m0d1" cx="0" cy="0" r="1" gradientTransform="rotate(254.055 24.442 5.883)scale(10.9202 15.1517)" gradientUnits="userSpaceOnUse"><stop stopColor="#944600"/><stop offset="1" stopColor="#cd8e02"/></radialGradient><radialGradient id="SVGwq0rkdAq1" cx="0" cy="0" r="1" gradientTransform="rotate(150.441 12.372 22.606)scale(11.8247 12.9561)" 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 48 48"><g fill="none"><path fill="url(#SVGU9uwtWcB1)" d="M16 12v3h2.5v-3a5.5 5.5 0 1 1 11 0v3H32v-3a8 8 0 1 0-16 0"/><path fill="url(#SVGMgGfseRj1)" d="M40 20.25A6.25 6.25 0 0 0 33.75 14h-19.5A6.25 6.25 0 0 0 8 20.25v15.5A6.25 6.25 0 0 0 14.25 42h19.5A6.25 6.25 0 0 0 40 35.75z"/><path fill="url(#SVGfB6m0m0d1)" d="M27 28a3 3 0 1 1-6 0a3 3 0 0 1 6 0"/><path fill="url(#SVGwq0rkdAq1)" d="M40 20.25A6.25 6.25 0 0 0 33.75 14h-19.5A6.25 6.25 0 0 0 8 20.25v15.5A6.25 6.25 0 0 0 14.25 42h19.5A6.25 6.25 0 0 0 40 35.75z"/><path fill="url(#SVGEoXaX0RD1)" d="M41.556 26.773a14.7 14.7 0 0 1-2.778-1.153a18.5 18.5 0 0 1-2.278-1.455a.84.84 0 0 0-1 0c-2.825 2.097-5.707 3.135-8.667 3.135a.83.83 0 0 0-.833.825V33.9q.001 2.714 1.06 4.95a11.1 11.1 0 0 0 1.86 2.75c1.606 1.76 3.87 3.21 6.775 4.343a.84.84 0 0 0 .61 0C42.714 43.443 46 39.4 46 33.9v-5.775a.83.83 0 0 0-.833-.825q-1.825 0-3.611-.527"/><defs><linearGradient id="SVGU9uwtWcB1" x1="19.429" x2="31.67" y1="1.899" y2="22.113" gradientUnits="userSpaceOnUse"><stop stop-color="#ffc205"/><stop offset="1" stop-color="#fb5937"/></linearGradient><linearGradient id="SVGMgGfseRj1" x1="42.286" x2="13.084" y1="43.75" y2="16.556" gradientUnits="userSpaceOnUse"><stop stop-color="#ff6f47"/><stop offset="1" stop-color="#ffcd0f"/></linearGradient><linearGradient id="SVGEoXaX0RD1" x1="29.75" x2="46.026" y1="24" y2="45.23" gradientUnits="userSpaceOnUse"><stop stop-color="#62be55"/><stop offset="1" stop-color="#1e794a"/></linearGradient><radialGradient id="SVGfB6m0m0d1" cx="0" cy="0" r="1" gradientTransform="rotate(254.055 24.442 5.883)scale(10.9202 15.1517)" gradientUnits="userSpaceOnUse"><stop stop-color="#944600"/><stop offset="1" stop-color="#cd8e02"/></radialGradient><radialGradient id="SVGwq0rkdAq1" cx="0" cy="0" r="1" gradientTransform="rotate(150.441 12.372 22.606)scale(11.8247 12.9561)" gradientUnits="userSpaceOnUse"><stop stop-color="#eb4824"/><stop offset=".99" stop-color="#eb4824" stop-opacity="0"/></radialGradient></defs></g></svg> </template>
CSS
.icon-lock-shield-48 {
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%2048%2048%22%3E%3Cg%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22url(%23SVGU9uwtWcB1)%22%20d%3D%22M16%2012v3h2.5v-3a5.5%205.5%200%201%201%2011%200v3H32v-3a8%208%200%201%200-16%200%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGMgGfseRj1)%22%20d%3D%22M40%2020.25A6.25%206.25%200%200%200%2033.75%2014h-19.5A6.25%206.25%200%200%200%208%2020.25v15.5A6.25%206.25%200%200%200%2014.25%2042h19.5A6.25%206.25%200%200%200%2040%2035.75z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGfB6m0m0d1)%22%20d%3D%22M27%2028a3%203%200%201%201-6%200a3%203%200%200%201%206%200%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGwq0rkdAq1)%22%20d%3D%22M40%2020.25A6.25%206.25%200%200%200%2033.75%2014h-19.5A6.25%206.25%200%200%200%208%2020.25v15.5A6.25%206.25%200%200%200%2014.25%2042h19.5A6.25%206.25%200%200%200%2040%2035.75z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGEoXaX0RD1)%22%20d%3D%22M41.556%2026.773a14.7%2014.7%200%200%201-2.778-1.153a18.5%2018.5%200%200%201-2.278-1.455a.84.84%200%200%200-1%200c-2.825%202.097-5.707%203.135-8.667%203.135a.83.83%200%200%200-.833.825V33.9q.001%202.714%201.06%204.95a11.1%2011.1%200%200%200%201.86%202.75c1.606%201.76%203.87%203.21%206.775%204.343a.84.84%200%200%200%20.61%200C42.714%2043.443%2046%2039.4%2046%2033.9v-5.775a.83.83%200%200%200-.833-.825q-1.825%200-3.611-.527%22%2F%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22SVGU9uwtWcB1%22%20x1%3D%2219.429%22%20x2%3D%2231.67%22%20y1%3D%221.899%22%20y2%3D%2222.113%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%22SVGMgGfseRj1%22%20x1%3D%2242.286%22%20x2%3D%2213.084%22%20y1%3D%2243.75%22%20y2%3D%2216.556%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%22SVGEoXaX0RD1%22%20x1%3D%2229.75%22%20x2%3D%2246.026%22%20y1%3D%2224%22%20y2%3D%2245.23%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%22SVGfB6m0m0d1%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22rotate(254.055%2024.442%205.883)scale(10.9202%2015.1517)%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%22SVGwq0rkdAq1%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22rotate(150.441%2012.372%2022.606)scale(11.8247%2012.9561)%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%2048%2048%22%3E%3Cg%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22url(%23SVGU9uwtWcB1)%22%20d%3D%22M16%2012v3h2.5v-3a5.5%205.5%200%201%201%2011%200v3H32v-3a8%208%200%201%200-16%200%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGMgGfseRj1)%22%20d%3D%22M40%2020.25A6.25%206.25%200%200%200%2033.75%2014h-19.5A6.25%206.25%200%200%200%208%2020.25v15.5A6.25%206.25%200%200%200%2014.25%2042h19.5A6.25%206.25%200%200%200%2040%2035.75z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGfB6m0m0d1)%22%20d%3D%22M27%2028a3%203%200%201%201-6%200a3%203%200%200%201%206%200%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGwq0rkdAq1)%22%20d%3D%22M40%2020.25A6.25%206.25%200%200%200%2033.75%2014h-19.5A6.25%206.25%200%200%200%208%2020.25v15.5A6.25%206.25%200%200%200%2014.25%2042h19.5A6.25%206.25%200%200%200%2040%2035.75z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGEoXaX0RD1)%22%20d%3D%22M41.556%2026.773a14.7%2014.7%200%200%201-2.778-1.153a18.5%2018.5%200%200%201-2.278-1.455a.84.84%200%200%200-1%200c-2.825%202.097-5.707%203.135-8.667%203.135a.83.83%200%200%200-.833.825V33.9q.001%202.714%201.06%204.95a11.1%2011.1%200%200%200%201.86%202.75c1.606%201.76%203.87%203.21%206.775%204.343a.84.84%200%200%200%20.61%200C42.714%2043.443%2046%2039.4%2046%2033.9v-5.775a.83.83%200%200%200-.833-.825q-1.825%200-3.611-.527%22%2F%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22SVGU9uwtWcB1%22%20x1%3D%2219.429%22%20x2%3D%2231.67%22%20y1%3D%221.899%22%20y2%3D%2222.113%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%22SVGMgGfseRj1%22%20x1%3D%2242.286%22%20x2%3D%2213.084%22%20y1%3D%2243.75%22%20y2%3D%2216.556%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%22SVGEoXaX0RD1%22%20x1%3D%2229.75%22%20x2%3D%2246.026%22%20y1%3D%2224%22%20y2%3D%2245.23%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%22SVGfB6m0m0d1%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22rotate(254.055%2024.442%205.883)scale(10.9202%2015.1517)%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%22SVGwq0rkdAq1%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22rotate(150.441%2012.372%2022.606)scale(11.8247%2012.9561)%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-48.svg?color=%231a73e8&size=48
