Mail icon

flat-ui:mail

The Mail icon (flat-ui:mail) is a free SVG icon from the Flat UI Icons set by Designmodo, Inc.. It is drawn on a 100 × 100 grid. Flat UI Icons are released under the MIT license, which allows use in personal and commercial projects. Copy it as SVG, JSX, Vue or Svelte code, or download the SVG file.

Icon set: Flat UI Icons
Author: Designmodo, Inc.
License: MIT
Size: 100 × 100

Download SVG

SVG code

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path fill="#D35400" fill-rule="evenodd" d="M96.015 38.988H4.006c-1.104 0-2 .897-2 2.005v57.001c0 1.108.896 2.006 2 2.006h92.009a2.003 2.003 0 0 0 2.001-2.006V40.993a2.003 2.003 0 0 0-2.001-2.005" clip-rule="evenodd"/><path fill="#ECF0F1" fill-rule="evenodd" d="M5 15.974v82.004C5 99.095 5.896 100 7 100h86.001A2.01 2.01 0 0 0 95 97.979V1.99a2.01 2.01 0 0 0-1.999-2.021l-71.997.008z" clip-rule="evenodd"/><path d="m40 72l54.997-33L95 45.98L51.028 72z" opacity=".1"/><path fill="#F39C12" fill-rule="evenodd" d="M2 97.991c0 1.11.895 2.009 2 2.009h92c1.104 0 2-.899 2-2.009V42L50 71L2 42z" clip-rule="evenodd"/><path fill="#F1C40F" fill-rule="evenodd" d="m5 15.974l16.001.01V0z" clip-rule="evenodd"/><path fill="#F1C40F" d="m2 42l.052 54L50 71z"/><path fill="#E57E22" d="M98 42L50 71l48 25z"/><path fill-rule="evenodd" d="M98 97.991V96L50 71l47.328 28.482c.409-.367.672-.896.672-1.491m-96 0V96l48-25L2.672 99.482A2 2 0 0 1 2 97.991" clip-rule="evenodd" opacity=".3"/></svg>

How to use the Mail icon

React

import { Icon } from "@iconify/react";

<Icon icon="flat-ui:mail" width="24" />

Vue

<script setup>
import { Icon } from "@iconify/vue";
</script>

<template>
  <Icon icon="flat-ui:mail" width="24" />
</template>

Svelte

<script>
  import Icon from "@iconify/svelte";
</script>

<Icon icon="flat-ui:mail" width="24" />

Tailwind CSS

<!-- @iconify/tailwind plugin -->
<span class="icon-[flat-ui--mail]"></span>

UnoCSS

<!-- @unocss/preset-icons + @iconify-json/flat-ui -->
<div class="i-flat-ui:mail"></div>

Web component

<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>

<iconify-icon icon="flat-ui:mail"></iconify-icon>

HTML image

<img src="https://iconyz.com/api/public/svg/flat-ui/mail.svg" alt="Mail icon" width="24" height="24">

Mail icon in other icon sets

Mail icon FAQ

Is the Mail icon free for commercial use?

Yes. Flat UI Icons are released under the MIT license, which allows use in personal and commercial projects.

How do I use the Mail icon in React?

Install @iconify/react and render <Icon icon="flat-ui:mail" />, or use “Copy code” on this page to get a standalone React component.

How do I add the Mail icon to a web page?

Link the SVG file in an image tag: <img src="https://iconyz.com/api/public/svg/flat-ui/mail.svg" alt="Mail icon">, or paste the SVG code inline to style it with CSS.

Browse all Flat UI Icons →