Person Warning icon
Used in a wide range of scenarios - representing a general person, a contact, contact lists, sharing, and managing access. The Person Warning 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 Person Warning 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 { PersonWarning24Regular, PersonWarning24Filled } from "@fluentui/react-icons";
export function Example() {
return <PersonWarning24Regular aria-label="Person Warning" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_person_warning_24_regular.svg" width="24" height="24" alt="Person Warning"> 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="M13.7089 15.4999L14.4583 13.9999H6.25278C5.01076 13.9999 4.00391 15.0068 4.00391 16.2488V16.8265C4.00391 17.7193 4.32242 18.5828 4.90219 19.2617C6.30664 20.9064 8.37015 21.8041 11.0496 21.9721C10.9554 21.4917 11.0014 20.975 11.2234 20.48C8.88648 20.3492 7.17431 19.6126 6.04287 18.2876C5.69502 17.8802 5.50391 17.3622 5.50391 16.8265V16.2488C5.50391 15.8352 5.83919 15.4999 6.25278 15.4999H13.7089ZM12.0004 2.00464C14.7618 2.00464 17.0004 4.24321 17.0004 7.00464C17.0004 9.76606 14.7618 12.0046 12.0004 12.0046C9.23894 12.0046 7.00036 9.76606 7.00036 7.00464C7.00036 4.24321 9.23894 2.00464 12.0004 2.00464ZM12.0004 3.50464C10.0674 3.50464 8.50036 5.07164 8.50036 7.00464C8.50036 8.93764 10.0674 10.5046 12.0004 10.5046C13.9334 10.5046 15.5004 8.93764 15.5004 7.00464C15.5004 5.07164 13.9334 3.50464 12.0004 3.50464ZM16.161 12.8301L12.1641 20.8284C11.6654 21.8262 12.3913 23 13.507 23H21.5008C22.6165 23 23.3424 21.8263 22.8437 20.8284L18.8468 12.8301C18.2938 11.7233 16.7141 11.7233 16.161 12.8301ZM18.0043 15.4956V18.4974C18.0043 18.7737 17.7803 18.9976 17.5039 18.9976C17.2276 18.9976 17.0035 18.7737 17.0035 18.4974V15.4956C17.0035 15.2193 17.2276 14.9954 17.5039 14.9954C17.7803 14.9954 18.0043 15.2193 18.0043 15.4956ZM17.5039 20.9988C17.2276 20.9988 17.0035 20.7748 17.0035 20.4985C17.0035 20.2222 17.2276 19.9982 17.5039 19.9982C17.7803 19.9982 18.0043 20.2222 18.0043 20.4985C18.0043 20.7748 17.7803 20.9988 17.5039 20.9988Z" 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_warning_24_regular.svg";Details
| Name | Person Warning |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_person_warning_24_regular.svg |
| Filled file | ic_fluent_person_warning_24_filled.svg |
| React components | PersonWarning24Regular, PersonWarning24Filled |
| License | MIT (© Microsoft Corporation) |