alternate email icon

alternate-email from Material Symbols Light by Google · Regular · Communicate · Apache-2.0 Free for personal and commercial use.

Name: alternate-email
Set: Material Symbols Light
Style: Regular
Category: Communicate
Viewbox: 24×24
License: Apache 2.0
Aliases: alternate-email-outline, alternate-email-outline-sharp, alternate-email-sharp

1 other variant in Material Symbols Light

alternate-email-rounded

The same icon in other sets

alternate-emailMaterial Symbols

More communicate icons from Material Symbols Light

Use the alternate email icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M12 21q-1.864 0-3.506-.71q-1.642-.711-2.857-1.926q-1.216-1.216-1.926-2.858Q3 13.864 3 12t.71-3.506t1.927-2.857T8.494 3.71Q10.137 3 12 3t3.506.71q1.642.711 2.857 1.927q1.216 1.215 1.926 2.857Q21 10.137 21 12v.989q0 1.263-.868 2.137T18 16q-.894 0-1.63-.49q-.737-.49-1.09-1.306q-.57.821-1.425 1.308T12 16q-1.671 0-2.835-1.164Q8 13.67 8 12t1.165-2.835T12 8t2.836 1.165T16 12v.989q0 .822.589 1.417T18 15t1.412-.594t.588-1.418V12q0-3.35-2.325-5.675T12 4T6.325 6.325T4 12t2.325 5.675T12 20h5v1zm2.125-6.875Q15 13.25 15 12t-.875-2.125T12 9t-2.125.875T9 12t.875 2.125T12 15t2.125-.875"/></svg>

React

import type { SVGProps } from "react";

export function MaterialSymbolsLightAlternateEmail(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M12 21q-1.864 0-3.506-.71q-1.642-.711-2.857-1.926q-1.216-1.216-1.926-2.858Q3 13.864 3 12t.71-3.506t1.927-2.857T8.494 3.71Q10.137 3 12 3t3.506.71q1.642.711 2.857 1.927q1.216 1.215 1.926 2.857Q21 10.137 21 12v.989q0 1.263-.868 2.137T18 16q-.894 0-1.63-.49q-.737-.49-1.09-1.306q-.57.821-1.425 1.308T12 16q-1.671 0-2.835-1.164Q8 13.67 8 12t1.165-2.835T12 8t2.836 1.165T16 12v.989q0 .822.589 1.417T18 15t1.412-.594t.588-1.418V12q0-3.35-2.325-5.675T12 4T6.325 6.325T4 12t2.325 5.675T12 20h5v1zm2.125-6.875Q15 13.25 15 12t-.875-2.125T12 9t-2.125.875T9 12t.875 2.125T12 15t2.125-.875"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M12 21q-1.864 0-3.506-.71q-1.642-.711-2.857-1.926q-1.216-1.216-1.926-2.858Q3 13.864 3 12t.71-3.506t1.927-2.857T8.494 3.71Q10.137 3 12 3t3.506.71q1.642.711 2.857 1.927q1.216 1.215 1.926 2.857Q21 10.137 21 12v.989q0 1.263-.868 2.137T18 16q-.894 0-1.63-.49q-.737-.49-1.09-1.306q-.57.821-1.425 1.308T12 16q-1.671 0-2.835-1.164Q8 13.67 8 12t1.165-2.835T12 8t2.836 1.165T16 12v.989q0 .822.589 1.417T18 15t1.412-.594t.588-1.418V12q0-3.35-2.325-5.675T12 4T6.325 6.325T4 12t2.325 5.675T12 20h5v1zm2.125-6.875Q15 13.25 15 12t-.875-2.125T12 9t-2.125.875T9 12t.875 2.125T12 15t2.125-.875"/></svg>
</template>

CSS

.icon-alternate-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%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M12%2021q-1.864%200-3.506-.71q-1.642-.711-2.857-1.926q-1.216-1.216-1.926-2.858Q3%2013.864%203%2012t.71-3.506t1.927-2.857T8.494%203.71Q10.137%203%2012%203t3.506.71q1.642.711%202.857%201.927q1.216%201.215%201.926%202.857Q21%2010.137%2021%2012v.989q0%201.263-.868%202.137T18%2016q-.894%200-1.63-.49q-.737-.49-1.09-1.306q-.57.821-1.425%201.308T12%2016q-1.671%200-2.835-1.164Q8%2013.67%208%2012t1.165-2.835T12%208t2.836%201.165T16%2012v.989q0%20.822.589%201.417T18%2015t1.412-.594t.588-1.418V12q0-3.35-2.325-5.675T12%204T6.325%206.325T4%2012t2.325%205.675T12%2020h5v1zm2.125-6.875Q15%2013.25%2015%2012t-.875-2.125T12%209t-2.125.875T9%2012t.875%202.125T12%2015t2.125-.875%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%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M12%2021q-1.864%200-3.506-.71q-1.642-.711-2.857-1.926q-1.216-1.216-1.926-2.858Q3%2013.864%203%2012t.71-3.506t1.927-2.857T8.494%203.71Q10.137%203%2012%203t3.506.71q1.642.711%202.857%201.927q1.216%201.215%201.926%202.857Q21%2010.137%2021%2012v.989q0%201.263-.868%202.137T18%2016q-.894%200-1.63-.49q-.737-.49-1.09-1.306q-.57.821-1.425%201.308T12%2016q-1.671%200-2.835-1.164Q8%2013.67%208%2012t1.165-2.835T12%208t2.836%201.165T16%2012v.989q0%20.822.589%201.417T18%2015t1.412-.594t.588-1.418V12q0-3.35-2.325-5.675T12%204T6.325%206.325T4%2012t2.325%205.675T12%2020h5v1zm2.125-6.875Q15%2013.25%2015%2012t-.875-2.125T12%209t-2.125.875T9%2012t.875%202.125T12%2015t2.125-.875%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/material-symbols-light/alternate-email.svg?color=%231a73e8&size=48