Fluent Icons

Shield Error icon

Used to represent security, safety & protection. The Shield Error icon is part of Microsoft's Fluent UI System Icons, available here in regular, filled and light styles in 6 sizes from 16 to 48 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
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_shield_error_24_regular.svg

Shield Error icon in React

npm install @fluentui/react-icons

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

export function Example() {
  return <ShieldError24Regular aria-label="Shield Error" />;
}

Shield Error icon in SVG

npm install @fluentui/svg-icons

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

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

Shield Error icon in Blazor

Microsoft's Fluent UI Blazor icons package:

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

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

Shield Error icon in Flutter

flutter pub add fluentui_system_icons

import 'package:fluentui_system_icons/fluentui_system_icons.dart';

Icon(FluentIcons.shield_error_24_regular)

Shield Error 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="&#xF6C3;" FontSize="24" />

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

Shield Error 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_shield_error_24_regular"></i>

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

Shield Error icon in Android

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

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

// Kotlin
R.drawable.ic_fluent_shield_error_24_regular

Shield Error icon in iOS

# Podfile
pod "FluentIcons", "1.1.341"

import FluentIcons

UIImage(fluent: .shieldError24Regular)

Shield Error 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 Shield Error 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 { ShieldError24Regular, ShieldError24Filled } from "@fluentui/react-icons";

export function Example() {
  return <ShieldError24Regular aria-label="Shield Error" />;
}

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_shield_error_24_regular.svg" width="24" height="24" alt="Shield Error">

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="M20.25 5C17.5866 5 14.992 4.05652 12.45 2.15C12.1833 1.95 11.8167 1.95 11.55 2.15C9.00797 4.05652 6.41341 5 3.75 5C3.33579 5 3 5.33579 3 5.75V11C3 16.0012 5.95756 19.6757 11.7251 21.9478C11.9018 22.0174 12.0982 22.0174 12.2749 21.9478C18.0424 19.6757 21 16.0012 21 11V5.75C21 5.33579 20.6642 5 20.25 5ZM4.5 6.47793C7.07735 6.32585 9.58084 5.38829 12 3.67782C14.4192 5.38829 16.9227 6.32585 19.5 6.47793V11C19.5 15.2556 17.0466 18.3789 12 20.4419C6.95337 18.3789 4.5 15.2556 4.5 11V6.47793ZM12.7432 7.65179C12.6935 7.28572 12.3797 7.00356 12 7.00356C11.5858 7.00356 11.25 7.33935 11.25 7.75356V14.2523L11.2568 14.3541C11.3065 14.7201 11.6203 15.0023 12 15.0023C12.4142 15.0023 12.75 14.6665 12.75 14.2523V7.75356L12.7432 7.65179ZM12 18C12.5523 18 13 17.5523 13 17C13 16.4477 12.5523 16 12 16C11.4477 16 11 16.4477 11 17C11 17.5523 11.4477 18 12 18Z" fill="currentColor"/></svg>

Details

NameShield Error
StylesRegular (outlined), Filled, Light
Sizes16 px, 20 px, 24 px, 28 px, 32 px, 48 px
Regular (outlined) fileic_fluent_shield_error_24_regular.svg
Filled fileic_fluent_shield_error_24_filled.svg
React (Regular)ShieldError16Regular, ShieldError20Regular, ShieldError24Regular, ShieldError28Regular, ShieldError32Regular, ShieldError48Regular
React (Filled)ShieldError16Filled, ShieldError20Filled, ShieldError24Filled, ShieldError28Filled, ShieldError32Filled, ShieldError48Filled
React (Light)ShieldError32Light
LicenseMIT (© Microsoft Corporation)

Keywords

securityprotectionsafety

Related icons

Lock ShieldPuzzle Piece ShieldShieldShield AddShield BadgeShield CheckmarkShield DismissShield Dismiss ShieldShield GlobeShield KeyholeShield LockShield Person