Fluent Icons

Vault icon

Used to represent a safe to protect valuables. The Vault icon is part of Microsoft's Fluent UI System Icons, available here in regular, filled and color styles in 3 sizes from 16 to 24 px. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.

Regular (outlined)

SVG

Filled

SVG
Vault Color

Color

SVG
Xceed Toolkit Plus for WPF logoXceed Toolkit Plus for WPFSponsorUpgrade Your WPF UI with Xceed Toolkit Plus

Every size and style

Microsoft draws each size separately so icons stay crisp, rather than scaling one drawing. Pick a style and size to preview it, download it, or copy the code for your platform.

Regular, 24 px

ic_fluent_vault_24_regular.svg

Vault icon in React

npm install @fluentui/react-icons

import { Vault24Regular } from "@fluentui/react-icons";

export function Example() {
  return <Vault24Regular aria-label="Vault" />;
}

Vault icon in SVG

npm install @fluentui/svg-icons

import icon from "@fluentui/svg-icons/icons/vault_24_regular.svg";

<!-- or load it from a CDN -->
<img src="https://cdn.jsdelivr.net/npm/@fluentui/svg-icons@1.1.341/icons/vault_24_regular.svg" width="24" height="24" alt="Vault">

Vault icon in Blazor

Microsoft's Fluent UI Blazor icons package:

dotnet add package Microsoft.FluentUI.AspNetCore.Components.Icons

<FluentIcon Value="@(new Icons.Regular.Size24.Vault())" />

Vault icon in Flutter

flutter pub add fluentui_system_icons

import 'package:fluentui_system_icons/fluentui_system_icons.dart';

Icon(FluentIcons.vault_24_regular)

Vault icon in WinUI / WPF

Add FluentSystemIcons-Regular.ttf from Microsoft's repository to your app, then use the glyph:

<!-- WinUI 3 (font in Assets/Fonts) -->
<FontIcon FontFamily="ms-appx:///Assets/Fonts/FluentSystemIcons-Regular.ttf#FluentSystemIcons-Regular" Glyph="&#xF843;" FontSize="24" />

<!-- WPF (font in Fonts/, Build Action: Resource) -->
<TextBlock FontFamily="pack://application:,,,/Fonts/#FluentSystemIcons-Regular" Text="&#xF843;" FontSize="24" />

Vault icon in Icon font

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/microsoft/fluentui-system-icons@9cf8af0f95a555918a60b8147a2f33a6a1248442/fonts/FluentSystemIcons-Regular.css">

<i class="icon-ic_fluent_vault_24_regular"></i>

/* or use the code point in your own CSS */
.icon::before {
  font-family: "FluentSystemIcons-Regular";
  content: "\f843";
  font-size: 24px;
}

Vault icon in Android

// build.gradle
implementation("com.microsoft.design:fluent-system-icons:1.1.341@aar")

<!-- layout XML -->
<ImageView android:src="@drawable/ic_fluent_vault_24_regular" />

// Kotlin
R.drawable.ic_fluent_vault_24_regular

Vault icon in iOS

# Podfile
pod "FluentIcons", "1.1.341"

import FluentIcons

UIImage(fluent: .vault24Regular)

Vault icon in Power Apps

Paste into an Image control's Image property. The Copy button copies the full formula with this icon's SVG.

"data:image/svg+xml;utf8, " & EncodeUrl("<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'>…</svg>")

Use the Vault icon in React

Install Microsoft's @fluentui/react-icons package, then import the component. Icons inherit the current text color, and you can size them with CSS. 

npm install @fluentui/react-icons

import { Vault24Regular, Vault24Filled } from "@fluentui/react-icons";

export function Example() {
  return <Vault24Regular aria-label="Vault" />;
}

Coding agents can look up this component through the Fluent Icons MCP server.

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_vault_24_regular.svg" width="24" height="24" alt="Vault">

Or paste the SVG markup inline. Setting fill="currentColor" makes the icon follow the text color of its parent: 

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16.5846 13.524C16.8486 13.0773 17 12.5564 17 12C17 11.4436 16.8486 10.9227 16.5846 10.476L17.7803 9.28033C18.0732 8.98744 18.0732 8.51256 17.7803 8.21967C17.4874 7.92678 17.0126 7.92678 16.7197 8.21967L15.524 9.41536C15.0773 9.15145 14.5564 9 14 9C13.4436 9 12.9227 9.15145 12.476 9.41536L11.2803 8.21967C10.9874 7.92678 10.5126 7.92678 10.2197 8.21967C9.92678 8.51256 9.92678 8.98744 10.2197 9.28033L11.4154 10.476C11.1514 10.9227 11 11.4436 11 12C11 12.5564 11.1514 13.0773 11.4154 13.524L10.2197 14.7197C9.92678 15.0126 9.92678 15.4874 10.2197 15.7803C10.5126 16.0732 10.9874 16.0732 11.2803 15.7803L12.476 14.5846C12.9227 14.8486 13.4436 15 14 15C14.5564 15 15.0773 14.8486 15.524 14.5846L16.7197 15.7803C17.0126 16.0732 17.4874 16.0732 17.7803 15.7803C18.0732 15.4874 18.0732 15.0126 17.7803 14.7197L16.5846 13.524ZM14 13.5C13.1716 13.5 12.5 12.8284 12.5 12C12.5 11.1716 13.1716 10.5 14 10.5C14.8284 10.5 15.5 11.1716 15.5 12C15.5 12.8284 14.8284 13.5 14 13.5ZM6.5 7.75C6.5 7.33579 6.16421 7 5.75 7C5.33579 7 5 7.33579 5 7.75V16.25C5 16.6642 5.33579 17 5.75 17C6.16421 17 6.5 16.6642 6.5 16.25V7.75ZM2 7.75C2 5.67893 3.67893 4 5.75 4H18.25C20.3211 4 22 5.67893 22 7.75V16.25C22 18.3211 20.3211 20 18.25 20H5.75C3.67893 20 2 18.3211 2 16.25V7.75ZM5.75 5.5C4.50736 5.5 3.5 6.50736 3.5 7.75V16.25C3.5 17.4926 4.50736 18.5 5.75 18.5H18.25C19.4926 18.5 20.5 17.4926 20.5 16.25V7.75C20.5 6.50736 19.4926 5.5 18.25 5.5H5.75Z" fill="currentColor"/></svg>

Details

NameVault
StylesRegular (outlined), Filled, Color
Sizes16 px, 20 px, 24 px
Regular (outlined) fileic_fluent_vault_24_regular.svg
Filled fileic_fluent_vault_24_filled.svg
Color fileic_fluent_vault_24_color.svg
React (Regular)Vault16Regular, Vault20Regular, Vault24Regular
React (Filled)Vault16Filled, Vault20Filled, Vault24Filled
React (Color)Vault16Color, Vault20Color, Vault24Color
LicenseMIT (© Microsoft Corporation)

Keywords

physicalsafetyprotectionstorage

Related icons

Hard DriveHard Drive CallLock ClosedLock Closed KeyLock MultipleLock OpenLock ShieldPuzzle Piece ShieldRAMShieldShield AddShield Badge