Guardian icon

Use the Guardian 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 { Guardian24Regular, Guardian24Filled } from "@fluentui/react-icons";

export function Example() {
  return <Guardian24Regular aria-label="Guardian" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_guardian_24_regular.svg" width="24" height="24" alt="Guardian">

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="M10.5 5C10.5 6.65685 9.15685 8 7.5 8C5.84315 8 4.5 6.65685 4.5 5C4.5 3.34315 5.84315 2 7.5 2C9.15685 2 10.5 3.34315 10.5 5ZM9 5C9 4.17157 8.32843 3.5 7.5 3.5C6.67157 3.5 6 4.17157 6 5C6 5.82843 6.67157 6.5 7.5 6.5C8.32843 6.5 9 5.82843 9 5ZM19 7.5C19 8.88071 17.8807 10 16.5 10C15.1193 10 14 8.88071 14 7.5C14 6.11929 15.1193 5 16.5 5C17.8807 5 19 6.11929 19 7.5ZM17.5 7.5C17.5 6.94772 17.0523 6.5 16.5 6.5C15.9477 6.5 15.5 6.94772 15.5 7.5C15.5 8.05228 15.9477 8.5 16.5 8.5C17.0523 8.5 17.5 8.05228 17.5 7.5ZM13.3965 10.75C13.07 9.59575 12.0088 8.75 10.75 8.75H4.75C3.23122 8.75 2 9.98122 2 11.5V14.5C2 15.6046 2.89543 16.5 4 16.5C4.17265 16.5 4.34019 16.4781 4.5 16.437V20C4.5 21.1046 5.39543 22 6.5 22C6.97297 22 7.4076 21.8358 7.75 21.5613C8.0924 21.8358 8.52703 22 9 22C10.1046 22 11 21.1046 11 20V16.437C11.1598 16.4781 11.3274 16.5 11.5 16.5C12.4319 16.5 13.215 15.8626 13.437 15H13.5V20C13.5 21.1046 14.3954 22 15.5 22C15.973 22 16.4076 21.8358 16.75 21.5613C17.0924 21.8358 17.527 22 18 22C19.1046 22 20 21.1046 20 20V17.187C20.1598 17.2281 20.3274 17.25 20.5 17.25C21.6046 17.25 22.5 16.3546 22.5 15.25V13.5C22.5 11.9812 21.2688 10.75 19.75 10.75H13.3965ZM11 14.5V12C11 11.5858 10.6642 11.25 10.25 11.25C9.83579 11.25 9.5 11.5858 9.5 12V20C9.5 20.2761 9.27614 20.5 9 20.5C8.72386 20.5 8.5 20.2761 8.5 20V16.5C8.5 16.0858 8.16421 15.75 7.75 15.75C7.33579 15.75 7 16.0858 7 16.5V20C7 20.2761 6.77614 20.5 6.5 20.5C6.22386 20.5 6 20.2761 6 20V12C6 11.5858 5.66421 11.25 5.25 11.25C4.83579 11.25 4.5 11.5858 4.5 12V14.5C4.5 14.7761 4.27614 15 4 15C3.72386 15 3.5 14.7761 3.5 14.5V11.5C3.5 10.8096 4.05964 10.25 4.75 10.25H10.75C11.4404 10.25 12 10.8096 12 11.5V14.5C12 14.7761 11.7761 15 11.5 15C11.2239 15 11 14.7761 11 14.5ZM13.5 12.25H19.75C20.4404 12.25 21 12.8096 21 13.5V15.25C21 15.5261 20.7761 15.75 20.5 15.75C20.2239 15.75 20 15.5261 20 15.25V14C20 13.5858 19.6642 13.25 19.25 13.25C18.8358 13.25 18.5 13.5858 18.5 14V20C18.5 20.2761 18.2761 20.5 18 20.5C17.7239 20.5 17.5 20.2761 17.5 20V17.5C17.5 17.0858 17.1642 16.75 16.75 16.75C16.3358 16.75 16 17.0858 16 17.5V20C16 20.2761 15.7761 20.5 15.5 20.5C15.2239 20.5 15 20.2761 15 20V14.25C15 13.8358 14.6642 13.5 14.25 13.5H13.5V12.25Z" 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/guardian_24_regular.svg";

Details

Keywords

parentchildprotector