Mail Template icon
Used to represent mail templates. The Mail Template 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 Template 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 { MailTemplate24Regular, MailTemplate24Filled } from "@fluentui/react-icons";
export function Example() {
return <MailTemplate24Regular aria-label="Mail Template" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_mail_template_24_regular.svg" width="24" height="24" alt="Mail Template"> 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="M2 5.25C2 3.45507 3.45507 2 5.25 2H15.75C17.5449 2 19 3.45507 19 5.25V10.0072C18.9173 10.0024 18.8339 10 18.75 10H17.5V5.25C17.5 4.2835 16.7165 3.5 15.75 3.5H5.25C4.2835 3.5 3.5 4.2835 3.5 5.25V16.75C3.5 17.7165 4.2835 18.5 5.25 18.5H6V18.75C6 19.185 6.06536 19.6048 6.1868 20H5.25C3.45508 20 2 18.5449 2 16.75V5.25ZM6.75 5C6.33579 5 6 5.33579 6 5.75C6 6.16421 6.33579 6.5 6.75 6.5H14.25C14.6642 6.5 15 6.16421 15 5.75C15 5.33579 14.6642 5 14.25 5H6.75ZM8 8.25C8 7.83579 8.33579 7.5 8.75 7.5H14.25C14.6642 7.5 15 7.83579 15 8.25C15 8.66421 14.6642 9 14.25 9H8.75C8.33579 9 8 8.66421 8 8.25ZM7 14.25C7 12.4551 8.45507 11 10.25 11H18.75C20.5449 11 22 12.4551 22 14.25V18.75C22 20.5449 20.5449 22 18.75 22H10.25C8.45507 22 7 20.5449 7 18.75V14.25ZM10.25 12.5C9.74571 12.5 9.29124 12.7133 8.9719 13.0546L14.5001 16.6084L20.0281 13.0546C19.7088 12.7133 19.2543 12.5 18.75 12.5H10.25ZM8.5 18.75C8.5 19.7165 9.2835 20.5 10.25 20.5H18.75C19.7165 20.5 20.5 19.7165 20.5 18.75V14.5345L14.9056 18.1309C14.6586 18.2897 14.3415 18.2897 14.0945 18.1309L8.5 14.5345V18.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_template_24_regular.svg";Details
| Name | Mail Template |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_mail_template_24_regular.svg |
| Filled file | ic_fluent_mail_template_24_filled.svg |
| React components | MailTemplate24Regular, MailTemplate24Filled |
| License | MIT (© Microsoft Corporation) |