Person Mail icon
Used in a wide range of scenarios - representing a general person, a contact, contact lists, sharing, and managing access. The Person Mail 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 Mail 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 { PersonMail24Regular, PersonMail24Filled } from "@fluentui/react-icons";
export function Example() {
return <PersonMail24Regular aria-label="Person Mail" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_person_mail_24_regular.svg" width="24" height="24" alt="Person Mail"> 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="M11.0004 15.5002C11.0004 14.9374 11.1864 14.418 11.5002 14.0002H5.25278C4.01076 14.0002 3.00391 15.007 3.00391 16.2491V16.8267C3.00391 17.7195 3.32242 18.583 3.90219 19.2619C5.46849 21.0962 7.8545 22.0013 11.0004 22.0013L11.0506 22.0013C11.0177 21.8394 11.0004 21.6718 11.0004 21.5002L11.0004 20.5013C8.26206 20.5013 6.29618 19.7555 5.04287 18.2878C4.69502 17.8805 4.50391 17.3624 4.50391 16.8267V16.2491C4.50391 15.8355 4.83919 15.5002 5.25278 15.5002H11.0004ZM11.0004 2.00488C13.7618 2.00488 16.0004 4.24346 16.0004 7.00488C16.0004 9.76631 13.7618 12.0049 11.0004 12.0049C8.23894 12.0049 6.00036 9.76631 6.00036 7.00488C6.00036 4.24346 8.23894 2.00488 11.0004 2.00488ZM11.0004 3.50488C9.06737 3.50488 7.50036 5.07189 7.50036 7.00488C7.50036 8.93788 9.06737 10.5049 11.0004 10.5049C12.9334 10.5049 14.5004 8.93788 14.5004 7.00488C14.5004 5.07189 12.9334 3.50488 11.0004 3.50488ZM17.5103 18.9271L12.0194 15.7241C12.1539 14.7502 12.9896 14.0002 14.0005 14.0002H21.0005C22.0953 14.0002 22.9846 14.8799 23.0003 15.9709L17.5103 18.9271ZM17.7375 19.9405L23.0005 17.1066V21.0002C23.0005 22.1048 22.1051 23.0002 21.0005 23.0002H14.0005C12.8959 23.0002 12.0005 22.1048 12.0005 21.0002V16.8708L17.2486 19.9321C17.399 20.0199 17.5842 20.023 17.7375 19.9405Z" 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_mail_24_regular.svg";Details
| Name | Person Mail |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_person_mail_24_regular.svg |
| Filled file | ic_fluent_person_mail_24_filled.svg |
| React components | PersonMail24Regular, PersonMail24Filled |
| License | MIT (© Microsoft Corporation) |