Shield Globe icon
Used to represent the responsibility using AI. The Shield Globe 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 Globe 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 { ShieldGlobe24Regular, ShieldGlobe24Filled } from "@fluentui/react-icons";
export function Example() {
return <ShieldGlobe24Regular aria-label="Shield Globe" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_shield_globe_24_regular.svg" width="24" height="24" alt="Shield Globe"> 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="M3.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 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 5ZM4.5 11V6.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 11ZM10.0739 15.5066C9.78388 14.7364 9.58747 13.7894 9.52305 12.75H8.0702C8.29572 13.9389 9.04742 14.9416 10.0739 15.5066ZM11.5978 15.2684C11.7667 15.6399 11.9094 15.829 12 15.9232C12.0906 15.829 12.2333 15.6399 12.4022 15.2684C12.6817 14.6536 12.9005 13.7798 12.9737 12.75H11.0263C11.0995 13.7798 11.3183 14.6536 11.5978 15.2684ZM11.5978 8.73162C11.3183 9.34641 11.0995 10.2202 11.0263 11.25H12.9737C12.9005 10.2202 12.6817 9.34641 12.4022 8.73162C12.2333 8.3601 12.0906 8.17098 12 8.07684C11.9094 8.17098 11.7667 8.3601 11.5978 8.73162ZM13.9261 15.5066C14.9526 14.9416 15.7043 13.9389 15.9298 12.75H14.4769C14.4125 13.7894 14.2161 14.7364 13.9261 15.5066ZM14.4769 11.25H15.9298C15.7043 10.0611 14.9526 9.05844 13.9261 8.49341C14.2161 9.2636 14.4125 10.2106 14.4769 11.25ZM8.0702 11.25H9.52305C9.58747 10.2106 9.78388 9.2636 10.0739 8.49341C9.04742 9.05844 8.29572 10.0611 8.0702 11.25ZM12 6.5C15.0376 6.5 17.5 8.96243 17.5 12C17.5 15.0376 15.0376 17.5 12 17.5C8.96243 17.5 6.5 15.0376 6.5 12C6.5 8.96243 8.96243 6.5 12 6.5Z" 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_globe_24_regular.svg";Details
| Name | Shield Globe |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_shield_globe_24_regular.svg |
| Filled file | ic_fluent_shield_globe_24_filled.svg |
| React components | ShieldGlobe24Regular, ShieldGlobe24Filled |
| License | MIT (© Microsoft Corporation) |