Mail Inbox All icon
Used to represent mail inbox. The Mail Inbox All 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 Mail Inbox All 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 { MailInboxAll24Regular, MailInboxAll24Filled } from "@fluentui/react-icons";
export function Example() {
return <MailInboxAll24Regular aria-label="Mail Inbox All" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_mail_inbox_all_24_regular.svg" width="24" height="24" alt="Mail Inbox All"> 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 3ZM8.32501 14.5H4.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.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.5ZM6.75 9.5H17.25C17.6642 9.5 18 9.83579 18 10.25C18 10.6297 17.7178 10.9435 17.3518 10.9932L17.25 11H6.75C6.33579 11 6 10.6642 6 10.25C6 9.8703 6.28215 9.55651 6.64823 9.50685L6.75 9.5H17.25H6.75ZM6.75 6.5H17.25C17.6642 6.5 18 6.83579 18 7.25C18 7.6297 17.7178 7.94349 17.3518 7.99315L17.25 8H6.75C6.33579 8 6 7.66421 6 7.25C6 6.8703 6.28215 6.55651 6.64823 6.50685L6.75 6.5H17.25H6.75Z" 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_all_24_regular.svg";Details
| Name | Mail Inbox All |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_mail_inbox_all_24_regular.svg |
| Filled file | ic_fluent_mail_inbox_all_24_filled.svg |
| React components | MailInboxAll24Regular, MailInboxAll24Filled |
| License | MIT (© Microsoft Corporation) |