Mail List icon

Use the Mail List 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 { MailList24Regular, MailList24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

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

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.5253 4H5.25L5.06558 4.00514C3.35645 4.10075 2 5.51697 2 7.25V16.75L2.00514 16.9344C2.10075 18.6435 3.51697 20 5.25 20H18.75L18.9344 19.9949C20.6435 19.8992 22 18.483 22 16.75V9.33159C21.7727 9.43958 21.5184 9.5 21.25 9.5H20.5V16.75L20.4942 16.8935C20.4212 17.7929 19.6682 18.5 18.75 18.5H5.25L5.10647 18.4942C4.20711 18.4212 3.5 17.6682 3.5 16.75V9.374L11.6507 13.6637L11.7468 13.706C11.9431 13.7764 12.1619 13.7623 12.3493 13.6637L20.2587 9.5H17.0388L12 12.1525L3.5 7.679V7.25L3.5058 7.10647C3.57881 6.20711 4.33183 5.5 5.25 5.5H12.0177C12.006 5.41836 12 5.33489 12 5.25C12 4.76033 12.2011 4.31763 12.5253 4ZM21.25 2C21.6401 2 21.9607 2.29785 21.9966 2.67855C21.9989 2.70207 22 2.7259 22 2.75C22 2.80731 21.9936 2.86311 21.9814 2.91674C21.9056 3.2507 21.6069 3.5 21.25 3.5H13.75C13.6501 3.5 13.5548 3.48047 13.4677 3.44503C13.1934 3.3335 13 3.06433 13 2.75C13 2.42345 13.2087 2.14564 13.5 2.04268C13.5782 2.01504 13.6623 2 13.75 2H21.25ZM21.25 4.5C21.3201 4.5 21.3879 4.50961 21.4522 4.52757C21.7682 4.61583 22 4.90584 22 5.25C22 5.66421 21.6642 6 21.25 6H13.75C13.7131 6 13.6769 5.99734 13.6414 5.99219C13.2787 5.93958 13 5.62733 13 5.25C13 4.83579 13.3358 4.5 13.75 4.5H21.25ZM13 7.75C13 7.33579 13.3358 7 13.75 7H21.25C21.6642 7 22 7.33579 22 7.75C22 8.16421 21.6642 8.5 21.25 8.5H13.75C13.3358 8.5 13 8.16421 13 7.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_list_24_regular.svg";

Details

Keywords

envelopeemaildeliverymessage