Person Error icon

Use the Person Error 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 { PersonError24Regular, PersonError24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

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

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.5 12C20.5376 12 23 14.4624 23 17.5C23 20.5376 20.5376 23 17.5 23C14.4624 23 12 20.5376 12 17.5C12 14.4624 14.4624 12 17.5 12ZM12.0225 14C11.7259 14.4632 11.4868 14.9666 11.3145 15.5H4.25391C3.83975 15.5 3.504 15.8359 3.50391 16.25V17.1572C3.50391 17.8128 3.79003 18.4358 4.28711 18.8633C5.54513 19.9449 7.44099 20.5009 10 20.501C10.5988 20.501 11.1618 20.4707 11.6885 20.4102C11.9374 20.9103 12.2509 21.3745 12.6172 21.791C11.8151 21.9318 10.9418 22.001 10 22.001C7.1108 22.0009 4.87236 21.3445 3.30957 20.001C2.48095 19.2886 2.00391 18.25 2.00391 17.1572V16.25C2.004 15.0074 3.01133 14 4.25391 14H12.0225ZM17.5 19.875C17.1548 19.875 16.875 20.1548 16.875 20.5C16.875 20.8452 17.1548 21.125 17.5 21.125C17.8452 21.125 18.125 20.8452 18.125 20.5C18.125 20.1548 17.8452 19.875 17.5 19.875ZM17.5 14C17.2239 14 17 14.2239 17 14.5V18.5C17 18.7761 17.2239 19 17.5 19C17.7761 19 18 18.7761 18 18.5V14.5C18 14.2239 17.7761 14 17.5 14ZM10 2.00488C12.7614 2.00488 15 4.24346 15 7.00488C15 9.76631 12.7614 12.0049 10 12.0049C7.23874 12.0047 5 9.76619 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.5 8.93776 8.06717 10.5047 10 10.5049C11.933 10.5049 13.5 8.93788 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_error_24_regular.svg";

Details