Menu

Beta
Sign in
Mail SVG icon, rounded

Mail SVG icon, rounded

An envelope represents email and written correspondence. Place it in a website contact section or a mobile app account screen to link people to messages and email preferences.

Free · from Rounded Interface Icons

Similar SVGs

More from Rounded Interface Icons

Whole pack

How to use it

HTML <img>
<img src="https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/e3c40Sjq1-PT/amnt.svg" alt="Mail" width="48" height="48">
Inline SVG
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64"><g id="layer-1" data-name="Group 1"><path d="M14 16L50 16C52.21 16 54 17.79 54 20L54 44C54 46.21 52.21 48 50 48L14 48C11.79 48 10 46.21 10 44L10 20C10 17.79 11.79 16 14 16Z" fill="#a8dadc" stroke="#264653" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M12 46L25 33M52 46L39 33" fill="none" stroke="#264653" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M11 18L29.5 33C30.96 34.18 33.04 34.18 34.5 33L53 18" fill="none" stroke="#264653" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></g></svg>
CSS background-image
.mail {
  background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/e3c40Sjq1-PT/amnt.svg");
  background-size: contain;
}
CSS mask-image (takes the text colour)
.mail {
  width: 1.5em; height: 1.5em;
  background-color: currentColor;
  mask: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/e3c40Sjq1-PT/amnt.svg") center / contain no-repeat;
}
React
import MailSvg from "./mail.jsx"; // from the React tab above

<MailSvg width={48} height={48} />

Tags

mailemailenvelopemessage

Made with AMNT

AMNT SVG Pro 1.1 drew this from the words Mail. Flat, rounded icons in a consistent set. Use two colours and clean 2 px lines with rounded ends and corners. Keep the shapes simple, balanced, and easy to recognise at small sizes. Use the same proportions, line weight, and colour placement for every icon. as part of the pack Rounded Interface Icons. Want one like it? Make your own in the SVG studio.

Licence: free. A Free account may use it for personal work; Pro and Max download it with a commercial licence, fixed at download, forever. No credit needed. Read the licence

Settings