Mail Link icon

Use the Mail Link 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 { MailLink24Regular, MailLink24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

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

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="M23 6.75C23 4.67893 21.3211 3 19.25 3L19.1482 3.00685C18.7822 3.05651 18.5 3.3703 18.5 3.75C18.5 4.16421 18.8358 4.5 19.25 4.5L19.404 4.50519C20.5748 4.58435 21.5 5.55914 21.5 6.75C21.5 7.99264 20.4926 9 19.25 9L19.2466 9.0046L19.1448 9.01191C18.779 9.06326 18.4983 9.37834 18.5 9.75803C18.5019 10.1722 18.8392 10.5065 19.2534 10.5046V10.5L19.4523 10.4948C21.4276 10.3913 23 8.75426 23 6.75ZM16.5 3.75C16.5 3.33579 16.1642 3 15.75 3L15.5508 3.0052C13.5724 3.10873 12 4.74574 12 6.75C12 8.82107 13.6789 10.5 15.75 10.5L15.8518 10.4932C16.2178 10.4435 16.5 10.1297 16.5 9.75C16.5 9.33579 16.1642 9 15.75 9L15.596 8.99481C14.4252 8.91565 13.5 7.94086 13.5 6.75C13.5 5.50736 14.5074 4.5 15.75 4.5L15.8518 4.49315C16.2178 4.44349 16.5 4.1297 16.5 3.75ZM20 6.75C20 6.33579 19.6642 6 19.25 6H15.75L15.6482 6.00685C15.2822 6.05651 15 6.3703 15 6.75C15 7.16421 15.3358 7.5 15.75 7.5H19.25L19.3518 7.49315C19.7178 7.44349 20 7.1297 20 6.75ZM5.25 4H11.8766C11.5576 4.44848 11.3145 4.95473 11.1662 5.5H5.25C4.33183 5.5 3.57881 6.20711 3.5058 7.10647L3.5 7.25V7.679L12 12.1525L13.9275 11.1378C14.4887 11.3712 15.1043 11.5 15.75 11.5H16.4595L12.3493 13.6637C12.1619 13.7623 11.9431 13.7764 11.7468 13.706L11.6507 13.6637L3.5 9.374V16.75C3.5 17.6682 4.20711 18.4212 5.10647 18.4942L5.25 18.5H18.75C19.6682 18.5 20.4212 17.7929 20.4942 16.8935L20.5 16.75V11.3338C21.0453 11.1855 21.5515 10.9424 22 10.6234V16.75C22 18.483 20.6435 19.8992 18.9344 19.9949L18.75 20H5.25C3.51697 20 2.10075 18.6435 2.00514 16.9344L2 16.75V7.25C2 5.51697 3.35645 4.10075 5.06558 4.00514L5.25 4Z" 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_link_24_regular.svg";

Details

Keywords

envelopeemaildeliverymessage