Mail Multiple icon

Use the Mail Multiple 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 { MailMultiple24Regular, MailMultiple24Filled } from "@fluentui/react-icons";

export function Example() {
  return <MailMultiple24Regular aria-label="Mail Multiple" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_mail_multiple_24_regular.svg" width="24" height="24" alt="Mail Multiple">

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="M21.0005 7.51126C21.9023 8.08885 22.5 9.09963 22.5 10.25V16.25C22.5 19.1495 20.1495 21.5 17.25 21.5H8.25C7.09963 21.5 6.08885 20.9023 5.51126 20.0005L17.25 20C19.3211 20 21 18.3211 21 16.25L21.0005 7.51126ZM5.25 4H16.75C18.483 4 19.8992 5.35645 19.9949 7.06558L20 7.25V15.75C20 17.483 18.6435 18.8992 16.9344 18.9949L16.75 19H5.25C3.51697 19 2.10075 17.6435 2.00514 15.9344L2 15.75V7.25C2 5.51697 3.35645 4.10075 5.06558 4.00514L5.25 4ZM18.5 8.899L11.3493 12.6637C11.1619 12.7623 10.9431 12.7764 10.7468 12.706L10.6507 12.6637L3.5 8.9V15.75C3.5 16.6682 4.20711 17.4212 5.10647 17.4942L5.25 17.5H16.75C17.6682 17.5 18.4212 16.7929 18.4942 15.8935L18.5 15.75V8.899ZM16.75 5.5H5.25C4.33183 5.5 3.57881 6.20711 3.5058 7.10647L3.502 7.206L11 11.1525L18.4994 7.20483C18.4755 6.25921 17.7014 5.5 16.75 5.5Z" 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_multiple_24_regular.svg";

Details

Keywords

envelopeemaildeliverymessagelibrarystackcollection