Mail Attach icon

Use the Mail Attach 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 { MailAttach24Regular, MailAttach24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

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

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="M17.9543 4.09995C18.7656 3.28874 20.0809 3.28874 20.8921 4.09995C21.7034 4.91116 21.7034 6.22639 20.8921 7.0376C20.8655 7.06419 20.8414 7.09228 20.8196 7.12159L16.6389 11.3011C16.3766 11.5634 15.9513 11.5635 15.689 11.3012C15.4268 11.039 15.4267 10.614 15.6887 10.3517L19.5226 6.52906C19.8158 6.23671 19.8165 5.76204 19.5242 5.46885C19.2318 5.17566 18.7571 5.17498 18.4639 5.46732L14.6288 9.29122C13.7809 10.139 13.7809 11.5136 14.6288 12.3614C15.4766 13.2092 16.8512 13.2092 17.699 12.3615L22.0237 8.03801C22.0622 7.99947 22.0957 7.95779 22.1241 7.91378C23.3466 6.50875 23.2894 4.37669 21.9524 3.03975C20.5556 1.64301 18.2909 1.643 16.8941 3.03973L13.2159 6.71752C12.9231 7.01028 12.9231 7.48495 13.2159 7.77773C13.5087 8.0705 13.9833 8.07052 14.2761 7.77776L17.9543 4.09995ZM13.0823 11.5763L11.9962 12.148L3.49944 7.67647V7.24765L3.50523 7.10419C3.57821 6.20521 4.33095 5.4984 5.24878 5.4984H13.021L14.5205 3.99905H5.24878L5.06442 4.00419C3.35594 4.09976 2 5.51537 2 7.24765V16.7436L2.00514 16.9279C2.10072 18.6363 3.5164 19.9922 5.24878 19.9922H18.7437L18.9281 19.987C20.6365 19.8915 21.9925 18.4759 21.9925 16.7436V9.48222L20.493 10.9812V16.7436L20.4872 16.887C20.4143 17.786 19.6615 18.4928 18.7437 18.4928H5.24878L5.1053 18.487C4.20628 18.4141 3.49944 17.6614 3.49944 16.7436V9.37074L11.6471 13.6586L11.7431 13.7008C11.9394 13.7713 12.1581 13.7572 12.3454 13.6586L13.7717 12.9078C13.4285 12.5143 13.1987 12.0562 13.0823 11.5763Z" 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_attach_24_regular.svg";

Details

Keywords

envelopeemaildeliverymessageattachmentfile