Mail Inbox icon

Use the Mail Inbox 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 { MailInbox24Regular, MailInbox24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

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

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="M6.25 3H17.75C19.483 3 20.8992 4.35645 20.9949 6.06558L21 6.25V17.75C21 19.483 19.6435 20.8992 17.9344 20.9949L17.75 21H6.25C4.51697 21 3.10075 19.6435 3.00514 17.9344L3 17.75V6.25C3 4.51697 4.35645 3.10075 6.06558 3.00514L6.25 3H17.75H6.25ZM4.5 14.5V17.75C4.5 18.6682 5.20711 19.4212 6.10647 19.4942L6.25 19.5H17.75C18.6682 19.5 19.4212 18.7929 19.4942 17.8935L19.5 17.75V14.5H15.675C15.3404 16.1483 13.9247 17.404 12.2003 17.4947L12 17.5C10.253 17.5 8.78498 16.3053 8.36837 14.6884L8.32501 14.5H4.5V17.75V14.5ZM17.75 4.5H6.25C5.33183 4.5 4.57881 5.20711 4.5058 6.10647L4.5 6.25V13H9C9.3797 13 9.69349 13.2822 9.74315 13.6482L9.75 13.75C9.75 14.9926 10.7574 16 12 16C13.1909 16 14.1656 15.0748 14.2448 13.904L14.25 13.75C14.25 13.3703 14.5322 13.0565 14.8982 13.0068L15 13H19.5V6.25C19.5 5.33183 18.7929 4.57881 17.8935 4.5058L17.75 4.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_inbox_24_regular.svg";

Details

Keywords

envelopeemaildeliverymessage