Person Delete icon
Used in a wide range of scenarios - representing a general person, a contact, contact lists, sharing, and managing access. The Person Delete 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 Delete 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 { PersonDelete24Regular, PersonDelete24Filled } from "@fluentui/react-icons";
export function Example() {
return <PersonDelete24Regular aria-label="Person Delete" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_person_delete_24_regular.svg" width="24" height="24" alt="Person Delete"> 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.5004 12.0003C20.5379 12.0003 23.0004 14.4627 23.0004 17.5003C23.0004 20.5378 20.5379 23.0003 17.5004 23.0003C14.4628 23.0003 12.0004 20.5378 12.0004 17.5003C12.0004 14.4627 14.4628 12.0003 17.5004 12.0003ZM12.0226 13.9996C11.7259 14.4629 11.4864 14.9663 11.314 15.4999L4.25391 15.5002C3.83969 15.5002 3.50391 15.836 3.50391 16.2502V17.1575C3.50391 17.8132 3.7899 18.4362 4.28707 18.8636C5.54516 19.9453 7.44117 20.5013 10.0004 20.5013C10.5992 20.5013 11.1618 20.4709 11.6885 20.4104C11.9374 20.9105 12.2512 21.3743 12.6175 21.7908C11.8153 21.9315 10.9423 22.0013 10.0004 22.0013C7.11087 22.0013 4.87205 21.3447 3.30918 20.001C2.48056 19.2887 2.00391 18.2503 2.00391 17.1575V16.2502C2.00391 15.0075 3.01127 14.0002 4.25391 14.0002L12.0226 13.9996ZM15.0934 14.9665L15.0242 15.0244L14.9663 15.0936C14.8482 15.2642 14.8482 15.4917 14.9663 15.6623L15.0242 15.7315L16.7937 17.5009L15.0268 19.2677L14.9689 19.337C14.8508 19.5075 14.8508 19.7351 14.9689 19.9056L15.0268 19.9749L15.096 20.0327C15.2665 20.1508 15.4941 20.1508 15.6646 20.0327L15.7339 19.9749L17.5007 18.2079L19.2698 19.9771L19.339 20.035C19.5095 20.1531 19.7371 20.1531 19.9076 20.035L19.9769 19.9771L20.0347 19.9079C20.1528 19.7373 20.1528 19.5097 20.0347 19.3392L19.9769 19.27L18.2077 17.5009L19.9796 15.7316L20.0375 15.6623C20.1556 15.4918 20.1556 15.2642 20.0375 15.0937L19.9796 15.0244L19.9104 14.9666C19.7399 14.8485 19.5123 14.8485 19.3418 14.9666L19.2725 15.0244L17.5007 16.794L15.7313 15.0244L15.662 14.9665C15.5159 14.8653 15.3278 14.8508 15.1696 14.9231L15.0934 14.9665ZM10.0004 2.00488C12.7618 2.00488 15.0004 4.24346 15.0004 7.00488C15.0004 9.76631 12.7618 12.0049 10.0004 12.0049C7.23894 12.0049 5.00036 9.76631 5.00036 7.00488C5.00036 4.24346 7.23894 2.00488 10.0004 2.00488ZM10.0004 3.50488C8.06737 3.50488 6.50036 5.07189 6.50036 7.00488C6.50036 8.93788 8.06737 10.5049 10.0004 10.5049C11.9334 10.5049 13.5004 8.93788 13.5004 7.00488C13.5004 5.07189 11.9334 3.50488 10.0004 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_delete_24_regular.svg";Details
| Name | Person Delete |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_person_delete_24_regular.svg |
| Filled file | ic_fluent_person_delete_24_filled.svg |
| React components | PersonDelete24Regular, PersonDelete24Filled |
| License | MIT (© Microsoft Corporation) |