Mail Open Person icon

Use the Mail Open Person 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 { MailOpenPerson24Regular, MailOpenPerson24Filled } from "@fluentui/react-icons";

export function Example() {
  return <MailOpenPerson24Regular aria-label="Mail Open Person" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_mail_open_person_24_regular.svg" width="24" height="24" alt="Mail Open Person">

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 3.61895V3.62269L3.908 8.43312L12 12.6542V12.6571L20.231 8.43231L12 3.61895ZM11.832 14.2311C11.8229 14.229 11.8139 14.2267 11.8049 14.2243C11.7915 14.2207 11.7781 14.2167 11.7649 14.2123C11.7232 14.1986 11.6827 14.1811 11.644 14.1603L3.5 9.91012V16.7501C3.5 17.6683 4.20711 18.4213 5.10647 18.4943L5.25 18.5001H13.3084C13.1113 18.881 13 19.3135 13 19.7721V19.8751C13 19.9168 13.0007 19.9585 13.002 20.0001H5.25C3.51697 20.0001 2.10075 18.6437 2.00514 16.9345L2 16.7501V9.10336C2 8.3665 2.36042 7.68024 2.95802 7.26125L3.10008 7.1694L11.6038 2.11316C11.6483 2.08553 11.6954 2.06275 11.7443 2.04505C11.7835 2.0308 11.8237 2.01994 11.8644 2.01247C12.0349 1.98104 12.2172 2.00828 12.3786 2.1027L21.3817 7.36755C22.2335 7.86566 22.1993 9.10806 21.3215 9.55865L18.5131 11.0001L18.5 11.0001C17.3236 11.0001 16.2827 11.5805 15.6481 12.4706L12.3425 14.1674C12.1787 14.2514 11.9984 14.2694 11.832 14.2311ZM21 14.5001C21 15.8808 19.8807 17.0001 18.5 17.0001C17.1193 17.0001 16 15.8808 16 14.5001C16 13.1194 17.1193 12.0001 18.5 12.0001C19.8807 12.0001 21 13.1194 21 14.5001ZM23 19.8751C23 21.4316 21.7143 23.0001 18.5 23.0001C15.2857 23.0001 14 21.4375 14 19.8751V19.7721C14 18.7931 14.7937 18.0001 15.7727 18.0001H21.2273C22.2063 18.0001 23 18.7931 23 19.7721V19.8751Z" 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/mail_open_person_24_regular.svg";

Details

Keywords

envelopeemaildeliverymessage