Person Shield icon

Use the Person Shield 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 { PersonShield24Regular, PersonShield24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

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

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="M17.0107 12.1943C17.2708 11.9354 17.7292 11.9353 17.9893 12.1943C18.642 12.8452 19.897 13.8804 21.4395 14.0928C21.7468 14.1353 21.9999 14.378 22 14.6816V17.5205C21.9998 21.3364 18.4203 22.7208 17.6465 22.9756C17.5496 23.0075 17.4504 23.0075 17.3535 22.9756C16.5785 22.7203 13.0002 21.3355 13 17.5205V14.6816C13.0001 14.378 13.2532 14.1353 13.5605 14.0928C15.1027 13.8804 16.3579 12.8452 17.0107 12.1943ZM12.1611 14C12.0607 14.2004 12 14.4297 12 14.6855V15.5H4.25293C3.83934 15.5 3.50391 15.8354 3.50391 16.249V16.8262C3.50391 17.3617 3.69524 17.8798 4.04297 18.2871C5.29622 19.7547 7.26189 20.5009 10 20.501C10.9587 20.501 11.8224 20.4064 12.5947 20.2246C12.8174 20.6943 13.1016 21.1372 13.4453 21.5498C12.4237 21.8485 11.2745 22.001 10 22.001C6.85438 22.0009 4.46859 21.0958 2.90234 19.2617C2.32258 18.5828 2.00391 17.719 2.00391 16.8262V16.249C2.00391 15.007 3.01091 14 4.25293 14H12.1611ZM10 2.00488C12.7614 2.00488 15 4.24346 15 7.00488C14.9999 9.76619 12.7613 12.0049 10 12.0049C7.23883 12.0047 5.00013 9.76607 5 7.00488C5 4.24358 7.23874 2.00508 10 2.00488ZM10 3.50488C8.06717 3.50508 6.5 5.07201 6.5 7.00488C6.50013 8.93765 8.06725 10.5047 10 10.5049C11.9329 10.5049 13.4999 8.93777 13.5 7.00488C13.5 5.07189 11.933 3.50488 10 3.50488Z" 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/person_shield_24_regular.svg";

Details