Folder Mail icon

Use the Folder Mail 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 { FolderMail24Regular, FolderMail24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

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

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.5 6.25V8H8.12868C8.32759 8 8.51836 7.92098 8.65901 7.78033L10.1893 6.25L8.65901 4.71967C8.51836 4.57902 8.32759 4.5 8.12868 4.5H5.25C4.2835 4.5 3.5 5.2835 3.5 6.25ZM2 6.25C2 4.45507 3.45507 3 5.25 3H8.12868C8.72542 3 9.29771 3.23705 9.71967 3.65901L11.5607 5.5H18.75C20.5449 5.5 22 6.95507 22 8.75V12.1707C21.6872 12.0602 21.3506 12 21 12H20.5V8.75C20.5 7.7835 19.7165 7 18.75 7H11.5607L9.71967 8.84099C9.29771 9.26295 8.72542 9.5 8.12868 9.5H3.5V17.75C3.5 18.7165 4.2835 19.5 5.25 19.5H11V20C11 20.3506 11.0602 20.6872 11.1707 21H5.25C3.45507 21 2 19.5449 2 17.75V6.25ZM12.0189 14.7238L17.5098 17.9269L22.9998 14.9707C22.9841 13.8796 22.0948 13 21 13H14C12.9891 13 12.1534 13.75 12.0189 14.7238ZM23 16.1063L17.737 18.9402C17.5837 19.0228 17.3985 19.0196 17.2481 18.9319L12 15.8705V20C12 21.1046 12.8954 22 14 22H21C22.1046 22 23 21.1046 23 20V16.1063Z" 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/folder_mail_24_regular.svg";

Details

Keywords

analogcollection