Mail Data Bar icon

Use the Mail Data Bar 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 { MailDataBar24Regular, MailDataBar24Filled } from "@fluentui/react-icons";

export function Example() {
  return <MailDataBar24Regular aria-label="Mail Data Bar" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_mail_data_bar_24_regular.svg" width="24" height="24" alt="Mail Data Bar">

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="M5.25 4H18.75C20.483 4 21.8992 5.35645 21.9949 7.06558L22 7.25V12.05C21.8384 12.0172 21.6712 12 21.5 12C21.1444 12 20.8062 12.0742 20.5 12.208V9.373L18.7132 10.3136C18.3539 10.1138 17.9403 10 17.5 10C16.1994 10 15.1308 10.9932 15.0111 12.2624L12.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.5H11V20H5.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 4ZM18.75 5.5H5.25C4.33183 5.5 3.57881 6.20711 3.5058 7.10647L3.5 7.25V7.679L12 12.1525L20.5 7.678V7.25C20.5 6.33183 19.7929 5.57881 18.8935 5.5058L18.75 5.5ZM17.5 11C16.6716 11 16 11.6716 16 12.5V20.5C16 21.3284 16.6716 22 17.5 22C18.3284 22 19 21.3284 19 20.5V12.5C19 11.6716 18.3284 11 17.5 11ZM21.5 13C20.6716 13 20 13.6716 20 14.5V20.5C20 21.3284 20.6716 22 21.5 22C22.3284 22 23 21.3284 23 20.5V14.5C23 13.6716 22.3284 13 21.5 13ZM12 16.5C12 15.6716 12.6716 15 13.5 15C14.3284 15 15 15.6716 15 16.5V20.5C15 21.3284 14.3284 22 13.5 22C12.6716 22 12 21.3284 12 20.5V16.5Z" 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_data_bar_24_regular.svg";

Details