Shield Badge icon
Used to represent security, safety & protection. The Shield Badge icon is part of Microsoft's Fluent UI System Icons, available here in filled and regular (outlined) styles on a 24 px grid. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.
Use the Shield Badge 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 { ShieldBadge24Regular, ShieldBadge24Filled } from "@fluentui/react-icons";
export function Example() {
return <ShieldBadge24Regular aria-label="Shield Badge" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_shield_badge_24_regular.svg" width="24" height="24" alt="Shield Badge"> 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="M4.75 5C3.23122 5 2 6.23122 2 7.75V12.25C2 13.7688 3.23122 15 4.75 15H11V13.5H4.75C4.05964 13.5 3.5 12.9404 3.5 12.25V7.75C3.5 7.05964 4.05964 6.5 4.75 6.5H17.25C17.9404 6.5 18.5 7.05964 18.5 7.75V9.08315C18.9563 9.63256 19.4918 9.98613 20 10.215V7.75C20 6.23122 18.7688 5 17.25 5H4.75ZM17 9.25C16.7567 9.25 16.5286 9.36798 16.3881 9.56638L16.3796 9.57789C16.355 9.61104 16.2782 9.71144 16.1538 9.84946C15.9872 10.0343 15.7387 10.2829 15.4169 10.5312C14.7697 11.0304 13.8646 11.5 12.75 11.5C12.3358 11.5 12 11.8358 12 12.25V15C12 16.6426 12.438 17.9471 13.2988 18.9801C14.1452 19.9957 15.3432 20.6797 16.7367 21.2022C16.9064 21.2659 17.0936 21.2659 17.2633 21.2022C18.6568 20.6797 19.8548 19.9957 20.7012 18.9801C21.562 17.9471 22 16.6426 22 15V12.25C22 11.8358 21.6642 11.5 21.25 11.5C20.1354 11.5 19.2303 11.0304 18.5831 10.5312C18.2613 10.2829 18.0128 10.0343 17.8462 9.84946C17.7218 9.71144 17.645 9.61104 17.6204 9.57789L17.613 9.56792C17.4725 9.36859 17.2439 9.25 17 9.25ZM16.3331 11.7188C16.5945 11.5172 16.8174 11.3158 17 11.1346C17.1826 11.3158 17.4055 11.5172 17.6669 11.7188C18.3425 12.24 19.3016 12.7818 20.5 12.9483V15C20.5 16.3574 20.1463 17.3029 19.5488 18.0198C18.9798 18.7026 18.1386 19.2399 17 19.6957C15.8614 19.2399 15.0202 18.7026 14.4512 18.0198C13.8537 17.3029 13.5 16.3574 13.5 15V12.9483C14.6984 12.7818 15.6575 12.24 16.3331 11.7188ZM16.3881 9.56638C16.3877 9.5669 16.3873 9.56741 16.387 9.56793Z" fill="currentColor"/></svg>Use it from the SVG package
Microsoft's @fluentui/svg-icons package contains the raw SVG files, which works well with bundlers that import SVGs:
npm install @fluentui/svg-icons
import icon from "@fluentui/svg-icons/icons/shield_badge_24_regular.svg";Details
| Name | Shield Badge |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_shield_badge_24_regular.svg |
| Filled file | ic_fluent_shield_badge_24_filled.svg |
| React components | ShieldBadge24Regular, ShieldBadge24Filled |
| License | MIT (© Microsoft Corporation) |