Mail Off icon
Used in general mail scenarios. The Mail Off 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 Off 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 { MailOff24Regular, MailOff24Filled } from "@fluentui/react-icons";
export function Example() {
return <MailOff24Regular aria-label="Mail Off" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_mail_off_24_regular.svg" width="24" height="24" alt="Mail Off"> 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="M3.28034 2.21968C2.98745 1.92678 2.51257 1.92677 2.21968 2.21966C1.92678 2.51255 1.92677 2.98743 2.21966 3.28032L3.4698 4.53049C2.5846 5.11112 2 6.11229 2 7.25001V16.75L2.00514 16.9344C2.10075 18.6436 3.51697 20 5.25 20H18.75L18.9339 19.9949L20.7194 21.7805C21.0123 22.0734 21.4872 22.0734 21.7801 21.7805C22.073 21.4876 22.073 21.0127 21.7801 20.7198L3.28034 2.21968ZM17.439 18.5H5.25L5.10647 18.4942C4.20711 18.4212 3.5 17.6682 3.5 16.75V9.37401L11.6507 13.6637L11.7468 13.706C11.9431 13.7764 12.1619 13.7623 12.3493 13.6637L12.5154 13.5763L17.439 18.5ZM10.0825 11.1433L3.5 7.67901V7.25001L3.5058 7.10648C3.55977 6.44167 3.9853 5.88191 4.57445 5.63516L10.0825 11.1433ZM20.5 7.67801L14.1844 11.0026L15.2949 12.1131L20.5 9.37301V16.75L20.4942 16.8935C20.4843 17.0152 20.462 17.1334 20.4285 17.2468L21.5621 18.3804C21.8405 17.9012 22 17.3442 22 16.75V7.25001L21.9949 7.06559C21.8992 5.35646 20.483 4.00001 18.75 4.00001H7.18195L8.68192 5.50001H18.75L18.8935 5.50581C19.7929 5.57882 20.5 6.33184 20.5 7.25001V7.67801Z" 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_off_24_regular.svg";Details
| Name | Mail Off |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_mail_off_24_regular.svg |
| Filled file | ic_fluent_mail_off_24_filled.svg |
| React components | MailOff24Regular, MailOff24Filled |
| License | MIT (© Microsoft Corporation) |