vault icon
vault-20 from Fluent UI System Color Icons by Microsoft Corporation · 20 · MIT Free for personal and commercial use.
- Name
- vault-20
- Set
- Fluent UI System Color Icons
- Style
- 20
- Viewbox
- 20×20
- License
- MIT
2 other variants in Fluent UI System Color Icons
The same icon in other sets
Use the vault icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20"><g fill="none"><path fill="url(#SVGloJvodvO)" d="M2 7a3 3 0 0 1 3-3h10a3 3 0 0 1 3 3v6a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3z"/><path fill="url(#SVG8M67YbNA)" fill-opacity=".5" d="M2 7a3 3 0 0 1 3-3h10a3 3 0 0 1 3 3v6a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3z"/><path fill="url(#SVGhLwhdeaq)" fill-opacity=".5" d="M2 7a3 3 0 0 1 3-3h10a3 3 0 0 1 3 3v6a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3z"/><path fill="url(#SVG6zWaGeWO)" fill-rule="evenodd" d="M14.354 7.646a.5.5 0 0 0-.708 0l-.63.63A2 2 0 0 0 12 8c-.37 0-.718.101-1.016.277l-.63-.63a.5.5 0 0 0-.708.707l.63.63A2 2 0 0 0 10 10c0 .37.101.718.277 1.016l-.63.63a.5.5 0 0 0 .707.708l.63-.63a2 2 0 0 0 2.032-.001l.63.63a.5.5 0 0 0 .708-.707l-.63-.63a2 2 0 0 0-.001-2.032l.63-.63a.5.5 0 0 0 0-.708M12 11a1 1 0 1 0 0-2a1 1 0 0 0 0 2" clip-rule="evenodd"/><path fill="url(#SVGa29J5dAp)" fill-rule="evenodd" d="M5.5 7a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-1 0v-5a.5.5 0 0 1 .5-.5" clip-rule="evenodd"/><defs><linearGradient id="SVGloJvodvO" x1="1.5" x2="8.485" y1="3" y2="20.581" gradientUnits="userSpaceOnUse"><stop offset=".005" stop-color="#88e06c"/><stop offset="1" stop-color="#0078d4"/></linearGradient><linearGradient id="SVG6zWaGeWO" x1="9.937" x2="10.769" y1="7.588" y2="12.947" gradientUnits="userSpaceOnUse"><stop stop-color="#fdfdfd"/><stop offset="1" stop-color="#cceaff"/></linearGradient><linearGradient id="SVGa29J5dAp" x1="5.087" x2="8.372" y1="7.105" y2="10.634" gradientUnits="userSpaceOnUse"><stop stop-color="#fdfdfd"/><stop offset="1" stop-color="#cceaff"/></linearGradient><radialGradient id="SVG8M67YbNA" cx="0" cy="0" r="1" gradientTransform="matrix(2.85714 2.4 -1.79729 2.13962 12.857 10.6)" gradientUnits="userSpaceOnUse"><stop stop-color="#4a43cb"/><stop offset="1" stop-color="#4a43cb" stop-opacity="0"/></radialGradient><radialGradient id="SVGhLwhdeaq" cx="0" cy="0" r="1" gradientTransform="matrix(0 3.6 -1.39306 0 6.571 10.6)" gradientUnits="userSpaceOnUse"><stop offset=".024" stop-color="#4a43cb" stop-opacity=".7"/><stop offset="1" stop-color="#4a43cb" stop-opacity="0"/></radialGradient></defs></g></svg>
React
import type { SVGProps } from "react";
export function FluentColorVault20(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20"><g fill="none"><path fill="url(#SVGloJvodvO)" d="M2 7a3 3 0 0 1 3-3h10a3 3 0 0 1 3 3v6a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3z"/><path fill="url(#SVG8M67YbNA)" fillOpacity=".5" d="M2 7a3 3 0 0 1 3-3h10a3 3 0 0 1 3 3v6a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3z"/><path fill="url(#SVGhLwhdeaq)" fillOpacity=".5" d="M2 7a3 3 0 0 1 3-3h10a3 3 0 0 1 3 3v6a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3z"/><path fill="url(#SVG6zWaGeWO)" fillRule="evenodd" d="M14.354 7.646a.5.5 0 0 0-.708 0l-.63.63A2 2 0 0 0 12 8c-.37 0-.718.101-1.016.277l-.63-.63a.5.5 0 0 0-.708.707l.63.63A2 2 0 0 0 10 10c0 .37.101.718.277 1.016l-.63.63a.5.5 0 0 0 .707.708l.63-.63a2 2 0 0 0 2.032-.001l.63.63a.5.5 0 0 0 .708-.707l-.63-.63a2 2 0 0 0-.001-2.032l.63-.63a.5.5 0 0 0 0-.708M12 11a1 1 0 1 0 0-2a1 1 0 0 0 0 2" clipRule="evenodd"/><path fill="url(#SVGa29J5dAp)" fillRule="evenodd" d="M5.5 7a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-1 0v-5a.5.5 0 0 1 .5-.5" clipRule="evenodd"/><defs><linearGradient id="SVGloJvodvO" x1="1.5" x2="8.485" y1="3" y2="20.581" gradientUnits="userSpaceOnUse"><stop offset=".005" stopColor="#88e06c"/><stop offset="1" stopColor="#0078d4"/></linearGradient><linearGradient id="SVG6zWaGeWO" x1="9.937" x2="10.769" y1="7.588" y2="12.947" gradientUnits="userSpaceOnUse"><stop stopColor="#fdfdfd"/><stop offset="1" stopColor="#cceaff"/></linearGradient><linearGradient id="SVGa29J5dAp" x1="5.087" x2="8.372" y1="7.105" y2="10.634" gradientUnits="userSpaceOnUse"><stop stopColor="#fdfdfd"/><stop offset="1" stopColor="#cceaff"/></linearGradient><radialGradient id="SVG8M67YbNA" cx="0" cy="0" r="1" gradientTransform="matrix(2.85714 2.4 -1.79729 2.13962 12.857 10.6)" gradientUnits="userSpaceOnUse"><stop stopColor="#4a43cb"/><stop offset="1" stopColor="#4a43cb" stopOpacity="0"/></radialGradient><radialGradient id="SVGhLwhdeaq" cx="0" cy="0" r="1" gradientTransform="matrix(0 3.6 -1.39306 0 6.571 10.6)" gradientUnits="userSpaceOnUse"><stop offset=".024" stopColor="#4a43cb" stopOpacity=".7"/><stop offset="1" stopColor="#4a43cb" stopOpacity="0"/></radialGradient></defs></g></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20"><g fill="none"><path fill="url(#SVGloJvodvO)" d="M2 7a3 3 0 0 1 3-3h10a3 3 0 0 1 3 3v6a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3z"/><path fill="url(#SVG8M67YbNA)" fill-opacity=".5" d="M2 7a3 3 0 0 1 3-3h10a3 3 0 0 1 3 3v6a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3z"/><path fill="url(#SVGhLwhdeaq)" fill-opacity=".5" d="M2 7a3 3 0 0 1 3-3h10a3 3 0 0 1 3 3v6a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3z"/><path fill="url(#SVG6zWaGeWO)" fill-rule="evenodd" d="M14.354 7.646a.5.5 0 0 0-.708 0l-.63.63A2 2 0 0 0 12 8c-.37 0-.718.101-1.016.277l-.63-.63a.5.5 0 0 0-.708.707l.63.63A2 2 0 0 0 10 10c0 .37.101.718.277 1.016l-.63.63a.5.5 0 0 0 .707.708l.63-.63a2 2 0 0 0 2.032-.001l.63.63a.5.5 0 0 0 .708-.707l-.63-.63a2 2 0 0 0-.001-2.032l.63-.63a.5.5 0 0 0 0-.708M12 11a1 1 0 1 0 0-2a1 1 0 0 0 0 2" clip-rule="evenodd"/><path fill="url(#SVGa29J5dAp)" fill-rule="evenodd" d="M5.5 7a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-1 0v-5a.5.5 0 0 1 .5-.5" clip-rule="evenodd"/><defs><linearGradient id="SVGloJvodvO" x1="1.5" x2="8.485" y1="3" y2="20.581" gradientUnits="userSpaceOnUse"><stop offset=".005" stop-color="#88e06c"/><stop offset="1" stop-color="#0078d4"/></linearGradient><linearGradient id="SVG6zWaGeWO" x1="9.937" x2="10.769" y1="7.588" y2="12.947" gradientUnits="userSpaceOnUse"><stop stop-color="#fdfdfd"/><stop offset="1" stop-color="#cceaff"/></linearGradient><linearGradient id="SVGa29J5dAp" x1="5.087" x2="8.372" y1="7.105" y2="10.634" gradientUnits="userSpaceOnUse"><stop stop-color="#fdfdfd"/><stop offset="1" stop-color="#cceaff"/></linearGradient><radialGradient id="SVG8M67YbNA" cx="0" cy="0" r="1" gradientTransform="matrix(2.85714 2.4 -1.79729 2.13962 12.857 10.6)" gradientUnits="userSpaceOnUse"><stop stop-color="#4a43cb"/><stop offset="1" stop-color="#4a43cb" stop-opacity="0"/></radialGradient><radialGradient id="SVGhLwhdeaq" cx="0" cy="0" r="1" gradientTransform="matrix(0 3.6 -1.39306 0 6.571 10.6)" gradientUnits="userSpaceOnUse"><stop offset=".024" stop-color="#4a43cb" stop-opacity=".7"/><stop offset="1" stop-color="#4a43cb" stop-opacity="0"/></radialGradient></defs></g></svg> </template>
CSS
.icon-vault-20 {
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%2020%2020%22%3E%3Cg%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22url(%23SVGloJvodvO)%22%20d%3D%22M2%207a3%203%200%200%201%203-3h10a3%203%200%200%201%203%203v6a3%203%200%200%201-3%203H5a3%203%200%200%201-3-3z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVG8M67YbNA)%22%20fill-opacity%3D%22.5%22%20d%3D%22M2%207a3%203%200%200%201%203-3h10a3%203%200%200%201%203%203v6a3%203%200%200%201-3%203H5a3%203%200%200%201-3-3z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGhLwhdeaq)%22%20fill-opacity%3D%22.5%22%20d%3D%22M2%207a3%203%200%200%201%203-3h10a3%203%200%200%201%203%203v6a3%203%200%200%201-3%203H5a3%203%200%200%201-3-3z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVG6zWaGeWO)%22%20fill-rule%3D%22evenodd%22%20d%3D%22M14.354%207.646a.5.5%200%200%200-.708%200l-.63.63A2%202%200%200%200%2012%208c-.37%200-.718.101-1.016.277l-.63-.63a.5.5%200%200%200-.708.707l.63.63A2%202%200%200%200%2010%2010c0%20.37.101.718.277%201.016l-.63.63a.5.5%200%200%200%20.707.708l.63-.63a2%202%200%200%200%202.032-.001l.63.63a.5.5%200%200%200%20.708-.707l-.63-.63a2%202%200%200%200-.001-2.032l.63-.63a.5.5%200%200%200%200-.708M12%2011a1%201%200%201%200%200-2a1%201%200%200%200%200%202%22%20clip-rule%3D%22evenodd%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGa29J5dAp)%22%20fill-rule%3D%22evenodd%22%20d%3D%22M5.5%207a.5.5%200%200%201%20.5.5v5a.5.5%200%200%201-1%200v-5a.5.5%200%200%201%20.5-.5%22%20clip-rule%3D%22evenodd%22%2F%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22SVGloJvodvO%22%20x1%3D%221.5%22%20x2%3D%228.485%22%20y1%3D%223%22%20y2%3D%2220.581%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%22.005%22%20stop-color%3D%22%2388e06c%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%230078d4%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVG6zWaGeWO%22%20x1%3D%229.937%22%20x2%3D%2210.769%22%20y1%3D%227.588%22%20y2%3D%2212.947%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23fdfdfd%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23cceaff%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGa29J5dAp%22%20x1%3D%225.087%22%20x2%3D%228.372%22%20y1%3D%227.105%22%20y2%3D%2210.634%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23fdfdfd%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23cceaff%22%2F%3E%3C%2FlinearGradient%3E%3CradialGradient%20id%3D%22SVG8M67YbNA%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22matrix(2.85714%202.4%20-1.79729%202.13962%2012.857%2010.6)%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%234a43cb%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%234a43cb%22%20stop-opacity%3D%220%22%2F%3E%3C%2FradialGradient%3E%3CradialGradient%20id%3D%22SVGhLwhdeaq%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22matrix(0%203.6%20-1.39306%200%206.571%2010.6)%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%22.024%22%20stop-color%3D%22%234a43cb%22%20stop-opacity%3D%22.7%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%234a43cb%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%2020%2020%22%3E%3Cg%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22url(%23SVGloJvodvO)%22%20d%3D%22M2%207a3%203%200%200%201%203-3h10a3%203%200%200%201%203%203v6a3%203%200%200%201-3%203H5a3%203%200%200%201-3-3z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVG8M67YbNA)%22%20fill-opacity%3D%22.5%22%20d%3D%22M2%207a3%203%200%200%201%203-3h10a3%203%200%200%201%203%203v6a3%203%200%200%201-3%203H5a3%203%200%200%201-3-3z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGhLwhdeaq)%22%20fill-opacity%3D%22.5%22%20d%3D%22M2%207a3%203%200%200%201%203-3h10a3%203%200%200%201%203%203v6a3%203%200%200%201-3%203H5a3%203%200%200%201-3-3z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVG6zWaGeWO)%22%20fill-rule%3D%22evenodd%22%20d%3D%22M14.354%207.646a.5.5%200%200%200-.708%200l-.63.63A2%202%200%200%200%2012%208c-.37%200-.718.101-1.016.277l-.63-.63a.5.5%200%200%200-.708.707l.63.63A2%202%200%200%200%2010%2010c0%20.37.101.718.277%201.016l-.63.63a.5.5%200%200%200%20.707.708l.63-.63a2%202%200%200%200%202.032-.001l.63.63a.5.5%200%200%200%20.708-.707l-.63-.63a2%202%200%200%200-.001-2.032l.63-.63a.5.5%200%200%200%200-.708M12%2011a1%201%200%201%200%200-2a1%201%200%200%200%200%202%22%20clip-rule%3D%22evenodd%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGa29J5dAp)%22%20fill-rule%3D%22evenodd%22%20d%3D%22M5.5%207a.5.5%200%200%201%20.5.5v5a.5.5%200%200%201-1%200v-5a.5.5%200%200%201%20.5-.5%22%20clip-rule%3D%22evenodd%22%2F%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22SVGloJvodvO%22%20x1%3D%221.5%22%20x2%3D%228.485%22%20y1%3D%223%22%20y2%3D%2220.581%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%22.005%22%20stop-color%3D%22%2388e06c%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%230078d4%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVG6zWaGeWO%22%20x1%3D%229.937%22%20x2%3D%2210.769%22%20y1%3D%227.588%22%20y2%3D%2212.947%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23fdfdfd%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23cceaff%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGa29J5dAp%22%20x1%3D%225.087%22%20x2%3D%228.372%22%20y1%3D%227.105%22%20y2%3D%2210.634%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23fdfdfd%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23cceaff%22%2F%3E%3C%2FlinearGradient%3E%3CradialGradient%20id%3D%22SVG8M67YbNA%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22matrix(2.85714%202.4%20-1.79729%202.13962%2012.857%2010.6)%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%234a43cb%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%234a43cb%22%20stop-opacity%3D%220%22%2F%3E%3C%2FradialGradient%3E%3CradialGradient%20id%3D%22SVGhLwhdeaq%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22matrix(0%203.6%20-1.39306%200%206.571%2010.6)%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%22.024%22%20stop-color%3D%22%234a43cb%22%20stop-opacity%3D%22.7%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%234a43cb%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/vault-20.svg?color=%231a73e8&size=48
