email unread icon
email-unread from IonIcons by Ben Sperry · Regular · MIT Free for personal and commercial use.
- Name
- email-unread
- Set
- IonIcons
- Style
- Regular
- Viewbox
- 512×512
- License
- MIT
Use the email unread icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><circle cx="432" cy="160" r="64" fill="currentColor"/><path d="M225 160H33.799c-11.1 0-13.898 3-11.299 10.5 1.5 4.4 8.4 8.1 12.5 10.2 11 5.8 163.799 89.1 169.5 92.1 5.699 3 11.5 4.4 20.5 4.4s14.799-1.4 20.5-4.4c3.79-1.995 72.625-39.497 121.559-66.107C357.594 193.551 352 177.433 352 160H225z" fill="currentColor"/><path d="M293.199 273.3l82.201 92.5c2 2 2.898 4.4 1.799 5.601-1.199 1.1-3.799.5-5.9-1.4l-98.6-83.2c-14.9 9.601-25.4 16.2-27.199 17.2-7.701 3.9-13.1 4.4-20.5 4.4s-12.801-.5-20.5-4.4c-1.9-1-12.301-7.6-27.201-17.2l-98.6 83.2c-2 2-4.699 2.6-5.9 1.4C71.6 370.3 72.5 367.8 74.5 365.8l82.1-92.5c-48.7-31.5-123.1-83.9-131.301-88.1C16.5 180.7 16 186 16 190.1v205c0 9.3 13.699 20.9 23.5 20.9h371c9.799 0 21.5-11.7 21.5-20.9V240c-21.726 0-41.416-8.673-55.832-22.729-26.001 17.902-57.808 39.754-82.969 56.029z" fill="currentColor"/></svg>
React
import type { SVGProps } from "react";
export function IonEmailUnread(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><circle cx="432" cy="160" r="64" fill="currentColor"/><path d="M225 160H33.799c-11.1 0-13.898 3-11.299 10.5 1.5 4.4 8.4 8.1 12.5 10.2 11 5.8 163.799 89.1 169.5 92.1 5.699 3 11.5 4.4 20.5 4.4s14.799-1.4 20.5-4.4c3.79-1.995 72.625-39.497 121.559-66.107C357.594 193.551 352 177.433 352 160H225z" fill="currentColor"/><path d="M293.199 273.3l82.201 92.5c2 2 2.898 4.4 1.799 5.601-1.199 1.1-3.799.5-5.9-1.4l-98.6-83.2c-14.9 9.601-25.4 16.2-27.199 17.2-7.701 3.9-13.1 4.4-20.5 4.4s-12.801-.5-20.5-4.4c-1.9-1-12.301-7.6-27.201-17.2l-98.6 83.2c-2 2-4.699 2.6-5.9 1.4C71.6 370.3 72.5 367.8 74.5 365.8l82.1-92.5c-48.7-31.5-123.1-83.9-131.301-88.1C16.5 180.7 16 186 16 190.1v205c0 9.3 13.699 20.9 23.5 20.9h371c9.799 0 21.5-11.7 21.5-20.9V240c-21.726 0-41.416-8.673-55.832-22.729-26.001 17.902-57.808 39.754-82.969 56.029z" fill="currentColor"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><circle cx="432" cy="160" r="64" fill="currentColor"/><path d="M225 160H33.799c-11.1 0-13.898 3-11.299 10.5 1.5 4.4 8.4 8.1 12.5 10.2 11 5.8 163.799 89.1 169.5 92.1 5.699 3 11.5 4.4 20.5 4.4s14.799-1.4 20.5-4.4c3.79-1.995 72.625-39.497 121.559-66.107C357.594 193.551 352 177.433 352 160H225z" fill="currentColor"/><path d="M293.199 273.3l82.201 92.5c2 2 2.898 4.4 1.799 5.601-1.199 1.1-3.799.5-5.9-1.4l-98.6-83.2c-14.9 9.601-25.4 16.2-27.199 17.2-7.701 3.9-13.1 4.4-20.5 4.4s-12.801-.5-20.5-4.4c-1.9-1-12.301-7.6-27.201-17.2l-98.6 83.2c-2 2-4.699 2.6-5.9 1.4C71.6 370.3 72.5 367.8 74.5 365.8l82.1-92.5c-48.7-31.5-123.1-83.9-131.301-88.1C16.5 180.7 16 186 16 190.1v205c0 9.3 13.699 20.9 23.5 20.9h371c9.799 0 21.5-11.7 21.5-20.9V240c-21.726 0-41.416-8.673-55.832-22.729-26.001 17.902-57.808 39.754-82.969 56.029z" fill="currentColor"/></svg> </template>
CSS
.icon-email-unread {
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%3Ccircle%20cx%3D%22432%22%20cy%3D%22160%22%20r%3D%2264%22%20fill%3D%22currentColor%22%2F%3E%3Cpath%20d%3D%22M225%20160H33.799c-11.1%200-13.898%203-11.299%2010.5%201.5%204.4%208.4%208.1%2012.5%2010.2%2011%205.8%20163.799%2089.1%20169.5%2092.1%205.699%203%2011.5%204.4%2020.5%204.4s14.799-1.4%2020.5-4.4c3.79-1.995%2072.625-39.497%20121.559-66.107C357.594%20193.551%20352%20177.433%20352%20160H225z%22%20fill%3D%22currentColor%22%2F%3E%3Cpath%20d%3D%22M293.199%20273.3l82.201%2092.5c2%202%202.898%204.4%201.799%205.601-1.199%201.1-3.799.5-5.9-1.4l-98.6-83.2c-14.9%209.601-25.4%2016.2-27.199%2017.2-7.701%203.9-13.1%204.4-20.5%204.4s-12.801-.5-20.5-4.4c-1.9-1-12.301-7.6-27.201-17.2l-98.6%2083.2c-2%202-4.699%202.6-5.9%201.4C71.6%20370.3%2072.5%20367.8%2074.5%20365.8l82.1-92.5c-48.7-31.5-123.1-83.9-131.301-88.1C16.5%20180.7%2016%20186%2016%20190.1v205c0%209.3%2013.699%2020.9%2023.5%2020.9h371c9.799%200%2021.5-11.7%2021.5-20.9V240c-21.726%200-41.416-8.673-55.832-22.729-26.001%2017.902-57.808%2039.754-82.969%2056.029z%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%3Ccircle%20cx%3D%22432%22%20cy%3D%22160%22%20r%3D%2264%22%20fill%3D%22currentColor%22%2F%3E%3Cpath%20d%3D%22M225%20160H33.799c-11.1%200-13.898%203-11.299%2010.5%201.5%204.4%208.4%208.1%2012.5%2010.2%2011%205.8%20163.799%2089.1%20169.5%2092.1%205.699%203%2011.5%204.4%2020.5%204.4s14.799-1.4%2020.5-4.4c3.79-1.995%2072.625-39.497%20121.559-66.107C357.594%20193.551%20352%20177.433%20352%20160H225z%22%20fill%3D%22currentColor%22%2F%3E%3Cpath%20d%3D%22M293.199%20273.3l82.201%2092.5c2%202%202.898%204.4%201.799%205.601-1.199%201.1-3.799.5-5.9-1.4l-98.6-83.2c-14.9%209.601-25.4%2016.2-27.199%2017.2-7.701%203.9-13.1%204.4-20.5%204.4s-12.801-.5-20.5-4.4c-1.9-1-12.301-7.6-27.201-17.2l-98.6%2083.2c-2%202-4.699%202.6-5.9%201.4C71.6%20370.3%2072.5%20367.8%2074.5%20365.8l82.1-92.5c-48.7-31.5-123.1-83.9-131.301-88.1C16.5%20180.7%2016%20186%2016%20190.1v205c0%209.3%2013.699%2020.9%2023.5%2020.9h371c9.799%200%2021.5-11.7%2021.5-20.9V240c-21.726%200-41.416-8.673-55.832-22.729-26.001%2017.902-57.808%2039.754-82.969%2056.029z%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-unread.svg?color=%231a73e8&size=48
