Person Alert icon
Used in a wide range of scenarios - representing a general person, a contact, contact lists, sharing, and managing access. The Person Alert 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 Alert 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 { PersonAlert24Regular, PersonAlert24Filled } from "@fluentui/react-icons";
export function Example() {
return <PersonAlert24Regular aria-label="Person Alert" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_person_alert_24_regular.svg" width="24" height="24" alt="Person Alert"> 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="M12.5255 15.4999C12.578 14.9714 12.7128 14.4671 12.9169 13.9999H4.25278C3.01076 13.9999 2.00391 15.0068 2.00391 16.2488V16.8265C2.00391 17.7193 2.32242 18.5828 2.90219 19.2617C4.46849 21.0959 6.8545 22.0011 10.0004 22.0011C10.6701 22.0011 11.3055 21.9601 11.9059 21.8778C11.8907 21.8714 11.8756 21.8647 11.8604 21.8576C11.3065 21.5973 10.9855 21.0412 10.9984 20.4656C10.6779 20.4893 10.3452 20.5011 10.0004 20.5011C7.26206 20.5011 5.29618 19.7553 4.04287 18.2876C3.69502 17.8802 3.50391 17.3622 3.50391 16.8265V16.2488C3.50391 15.8352 3.83919 15.4999 4.25278 15.4999H12.5255ZM10.0004 2.00464C12.7618 2.00464 15.0004 4.24321 15.0004 7.00464C15.0004 9.76606 12.7618 12.0046 10.0004 12.0046C7.23894 12.0046 5.00036 9.76606 5.00036 7.00464C5.00036 4.24321 7.23894 2.00464 10.0004 2.00464ZM10.0004 3.50464C8.06737 3.50464 6.50036 5.07164 6.50036 7.00464C6.50036 8.93764 8.06737 10.5046 10.0004 10.5046C11.9334 10.5046 13.5004 8.93764 13.5004 7.00464C13.5004 5.07164 11.9334 3.50464 10.0004 3.50464ZM17.5025 12C15.2934 12 13.5025 13.7909 13.5025 16L13.5023 19L12.5539 19.8004C12.2462 20.06 12.0923 20.1899 12.0457 20.2913C11.9312 20.5407 12.0391 20.8358 12.2875 20.9525C12.3885 21 12.5898 21 12.9925 21H22.0121C22.4148 21 22.6162 21 22.7172 20.9525C22.9656 20.8358 23.0735 20.5407 22.9589 20.2913C22.9123 20.1899 22.7584 20.06 22.4507 19.8003L21.5025 19V16C21.5025 13.7909 19.7116 12 17.5025 12ZM19.0025 22C18.7842 22.5826 18.195 23 17.5025 23C16.81 23 16.2208 22.5826 16.0025 22H19.0025Z" 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_alert_24_regular.svg";Details
| Name | Person Alert |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_person_alert_24_regular.svg |
| Filled file | ic_fluent_person_alert_24_filled.svg |
| React components | PersonAlert24Regular, PersonAlert24Filled |
| License | MIT (© Microsoft Corporation) |