Shield Settings icon

Use the Shield Settings 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 { ShieldSettings24Regular, ShieldSettings24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_shield_settings_24_regular.svg" width="24" height="24" alt="Shield Settings">

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.0605 12.9018C16.8488 13.7313 18.1714 13.731 18.96 12.9018L19.4531 12.3833C19.9977 12.6061 20.4984 12.9194 20.9375 13.3051L20.751 13.936C20.4271 15.0335 21.0887 16.1788 22.2012 16.4467L22.7402 16.5766C22.7893 16.8768 22.8145 17.1858 22.8145 17.5004C22.8144 17.801 22.7909 18.0958 22.7461 18.3832L22.1621 18.5278C21.0609 18.8004 20.4072 19.9338 20.7217 21.0238L20.9189 21.7104C20.4798 22.0927 19.98 22.4032 19.4365 22.6234L18.9375 22.0981C18.1492 21.2689 16.8275 21.269 16.0391 22.0981L15.5459 22.6166C15.0014 22.3938 14.5007 22.0804 14.0615 21.6947L14.248 21.0639C14.5719 19.9664 13.9103 18.8211 12.7979 18.5532L12.2578 18.4233C12.2088 18.1232 12.1836 17.8149 12.1836 17.5004C12.1836 17.1997 12.2071 16.9042 12.252 16.6166L12.8359 16.4721C13.9373 16.1996 14.5918 15.0661 14.2773 13.976L14.0791 13.2895C14.5183 12.9072 15.0181 12.5966 15.5615 12.3764L16.0605 12.9018ZM11.5498 2.14994C11.8165 1.94994 12.1835 1.94994 12.4502 2.14994C14.9922 4.05639 17.5866 5.00051 20.25 5.00051C20.6642 5.00051 21 5.33629 21 5.7505V11.0005C21 11.3386 20.985 11.6706 20.958 11.9966C20.5047 11.7111 20.0138 11.4803 19.4941 11.313C19.4971 11.2095 19.5 11.1053 19.5 11.0005V6.47804C16.9227 6.32596 14.4191 5.38861 12 3.67825C9.58091 5.38861 7.07727 6.32596 4.5 6.47804V11.0005C4.50021 15.1489 6.83225 18.2206 11.625 20.2836C11.888 20.8377 12.2282 21.3478 12.6299 21.8022C12.5125 21.8506 12.3942 21.9005 12.2744 21.9477C12.098 22.017 11.902 22.017 11.7256 21.9477C5.95826 19.6757 3.00022 16.0013 3 11.0005V5.7505C3 5.33629 3.33579 5.00051 3.75 5.00051C6.41337 5.00051 9.00781 4.05639 11.5498 2.14994ZM17.499 16.0004C16.6984 16.0005 16.0498 16.672 16.0498 17.5004C16.05 18.3286 16.6986 19.0004 17.499 19.0004C18.2995 19.0004 18.949 18.3286 18.9492 17.5004C18.9492 16.672 18.2997 16.0004 17.499 16.0004Z" 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_settings_24_regular.svg";

Details