email icon
email from IonIcons by Ben Sperry · Regular · MIT Free for personal and commercial use.
- Name
- Set
- IonIcons
- Style
- Regular
- Viewbox
- 512×512
- License
- MIT
The same icon in other sets
Related icons in IonIcons
Use the email icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path d="M67 148.7c11 5.8 163.8 89.1 169.5 92.1 5.7 3 11.5 4.4 20.5 4.4s14.8-1.4 20.5-4.4c5.7-3 158.5-86.3 169.5-92.1 4.1-2.1 11-5.9 12.5-10.2 2.6-7.6-.2-10.5-11.3-10.5H65.8c-11.1 0-13.9 3-11.3 10.5 1.5 4.4 8.4 8.1 12.5 10.2z" fill="currentColor"/><path d="M455.7 153.2c-8.2 4.2-81.8 56.6-130.5 88.1l82.2 92.5c2 2 2.9 4.4 1.8 5.6-1.2 1.1-3.8.5-5.9-1.4l-98.6-83.2c-14.9 9.6-25.4 16.2-27.2 17.2-7.7 3.9-13.1 4.4-20.5 4.4s-12.8-.5-20.5-4.4c-1.9-1-12.3-7.6-27.2-17.2L110.7 338c-2 2-4.7 2.6-5.9 1.4-1.2-1.1-.3-3.6 1.7-5.6l82.1-92.5c-48.7-31.5-123.1-83.9-131.3-88.1-8.8-4.5-9.3.8-9.3 4.9v205c0 9.3 13.7 20.9 23.5 20.9h371c9.8 0 21.5-11.7 21.5-20.9v-205c0-4.2.6-9.4-8.3-4.9z" fill="currentColor"/></svg>
React
import type { SVGProps } from "react";
export function IonEmail(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path d="M67 148.7c11 5.8 163.8 89.1 169.5 92.1 5.7 3 11.5 4.4 20.5 4.4s14.8-1.4 20.5-4.4c5.7-3 158.5-86.3 169.5-92.1 4.1-2.1 11-5.9 12.5-10.2 2.6-7.6-.2-10.5-11.3-10.5H65.8c-11.1 0-13.9 3-11.3 10.5 1.5 4.4 8.4 8.1 12.5 10.2z" fill="currentColor"/><path d="M455.7 153.2c-8.2 4.2-81.8 56.6-130.5 88.1l82.2 92.5c2 2 2.9 4.4 1.8 5.6-1.2 1.1-3.8.5-5.9-1.4l-98.6-83.2c-14.9 9.6-25.4 16.2-27.2 17.2-7.7 3.9-13.1 4.4-20.5 4.4s-12.8-.5-20.5-4.4c-1.9-1-12.3-7.6-27.2-17.2L110.7 338c-2 2-4.7 2.6-5.9 1.4-1.2-1.1-.3-3.6 1.7-5.6l82.1-92.5c-48.7-31.5-123.1-83.9-131.3-88.1-8.8-4.5-9.3.8-9.3 4.9v205c0 9.3 13.7 20.9 23.5 20.9h371c9.8 0 21.5-11.7 21.5-20.9v-205c0-4.2.6-9.4-8.3-4.9z" fill="currentColor"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path d="M67 148.7c11 5.8 163.8 89.1 169.5 92.1 5.7 3 11.5 4.4 20.5 4.4s14.8-1.4 20.5-4.4c5.7-3 158.5-86.3 169.5-92.1 4.1-2.1 11-5.9 12.5-10.2 2.6-7.6-.2-10.5-11.3-10.5H65.8c-11.1 0-13.9 3-11.3 10.5 1.5 4.4 8.4 8.1 12.5 10.2z" fill="currentColor"/><path d="M455.7 153.2c-8.2 4.2-81.8 56.6-130.5 88.1l82.2 92.5c2 2 2.9 4.4 1.8 5.6-1.2 1.1-3.8.5-5.9-1.4l-98.6-83.2c-14.9 9.6-25.4 16.2-27.2 17.2-7.7 3.9-13.1 4.4-20.5 4.4s-12.8-.5-20.5-4.4c-1.9-1-12.3-7.6-27.2-17.2L110.7 338c-2 2-4.7 2.6-5.9 1.4-1.2-1.1-.3-3.6 1.7-5.6l82.1-92.5c-48.7-31.5-123.1-83.9-131.3-88.1-8.8-4.5-9.3.8-9.3 4.9v205c0 9.3 13.7 20.9 23.5 20.9h371c9.8 0 21.5-11.7 21.5-20.9v-205c0-4.2.6-9.4-8.3-4.9z" fill="currentColor"/></svg> </template>
CSS
.icon-email {
width: 24px;
height: 24px;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M67%20148.7c11%205.8%20163.8%2089.1%20169.5%2092.1%205.7%203%2011.5%204.4%2020.5%204.4s14.8-1.4%2020.5-4.4c5.7-3%20158.5-86.3%20169.5-92.1%204.1-2.1%2011-5.9%2012.5-10.2%202.6-7.6-.2-10.5-11.3-10.5H65.8c-11.1%200-13.9%203-11.3%2010.5%201.5%204.4%208.4%208.1%2012.5%2010.2z%22%20fill%3D%22currentColor%22%2F%3E%3Cpath%20d%3D%22M455.7%20153.2c-8.2%204.2-81.8%2056.6-130.5%2088.1l82.2%2092.5c2%202%202.9%204.4%201.8%205.6-1.2%201.1-3.8.5-5.9-1.4l-98.6-83.2c-14.9%209.6-25.4%2016.2-27.2%2017.2-7.7%203.9-13.1%204.4-20.5%204.4s-12.8-.5-20.5-4.4c-1.9-1-12.3-7.6-27.2-17.2L110.7%20338c-2%202-4.7%202.6-5.9%201.4-1.2-1.1-.3-3.6%201.7-5.6l82.1-92.5c-48.7-31.5-123.1-83.9-131.3-88.1-8.8-4.5-9.3.8-9.3%204.9v205c0%209.3%2013.7%2020.9%2023.5%2020.9h371c9.8%200%2021.5-11.7%2021.5-20.9v-205c0-4.2.6-9.4-8.3-4.9z%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M67%20148.7c11%205.8%20163.8%2089.1%20169.5%2092.1%205.7%203%2011.5%204.4%2020.5%204.4s14.8-1.4%2020.5-4.4c5.7-3%20158.5-86.3%20169.5-92.1%204.1-2.1%2011-5.9%2012.5-10.2%202.6-7.6-.2-10.5-11.3-10.5H65.8c-11.1%200-13.9%203-11.3%2010.5%201.5%204.4%208.4%208.1%2012.5%2010.2z%22%20fill%3D%22currentColor%22%2F%3E%3Cpath%20d%3D%22M455.7%20153.2c-8.2%204.2-81.8%2056.6-130.5%2088.1l82.2%2092.5c2%202%202.9%204.4%201.8%205.6-1.2%201.1-3.8.5-5.9-1.4l-98.6-83.2c-14.9%209.6-25.4%2016.2-27.2%2017.2-7.7%203.9-13.1%204.4-20.5%204.4s-12.8-.5-20.5-4.4c-1.9-1-12.3-7.6-27.2-17.2L110.7%20338c-2%202-4.7%202.6-5.9%201.4-1.2-1.1-.3-3.6%201.7-5.6l82.1-92.5c-48.7-31.5-123.1-83.9-131.3-88.1-8.8-4.5-9.3.8-9.3%204.9v205c0%209.3%2013.7%2020.9%2023.5%2020.9h371c9.8%200%2021.5-11.7%2021.5-20.9v-205c0-4.2.6-9.4-8.3-4.9z%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/ion/email.svg?color=%231a73e8&size=48
