Gentleface › People & accounts › id-card-mail

id-card-mail icon

Id card mail: contact email, email contact. Drawn on the 16 px grid. Free SVG, PNG and code, MIT licensed.

Code line-round

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M1.14 2.264C1.242 2.007 1.391 1.781 1.586 1.586C1.781 1.391 2.007 1.242 2.264 1.14C2.5 1.047 2.746 1 3 1L13 1C13.254 1 13.5 1.047 13.736 1.14C13.993 1.242 14.219 1.391 14.414 1.586C14.609 1.781 14.758 2.007 14.86 2.264C14.953 2.5 15 2.746 15 3L15 8.5C15 8.641 14.952 8.759 14.856 8.856C14.759 8.952 14.641 9 14.5 9C14.359 9 14.241 8.952 14.144 8.856C14.048 8.759 14 8.641 14 8.5L14 3C14 2.724 13.902 2.488 13.707 2.293C13.512 2.098 13.276 2 13 2L3 2C2.724 2 2.488 2.098 2.293 2.293C2.098 2.488 2 2.724 2 3L2 9C2 9.276 2.098 9.512 2.293 9.707C2.488 9.902 2.724 10 3 10L7.5 10C7.641 10 7.759 10.048 7.856 10.144C7.952 10.241 8 10.359 8 10.5C8 10.641 7.952 10.759 7.856 10.856C7.759 10.952 7.641 11 7.5 11L3 11C2.746 11 2.5 10.953 2.264 10.86C2.007 10.758 1.781 10.609 1.586 10.414C1.391 10.219 1.242 9.993 1.14 9.736C1.047 9.5 1 9.254 1 9L1 3C1 2.746 1.047 2.5 1.14 2.264ZM6.561 3.439C6.854 3.732 7 4.086 7 4.5C7 4.914 6.854 5.268 6.561 5.561C6.268 5.854 5.914 6 5.5 6C5.086 6 4.732 5.854 4.439 5.561C4.146 5.268 4 4.914 4 4.5C4 4.086 4.146 3.732 4.439 3.439C4.732 3.146 5.086 3 5.5 3C5.914 3 6.268 3.146 6.561 3.439ZM9.144 4.856C9.048 4.759 9 4.641 9 4.5C9 4.359 9.048 4.241 9.144 4.144C9.241 4.048 9.359 4 9.5 4L12.5 4C12.641 4 12.759 4.048 12.856 4.144C12.952 4.241 13 4.359 13 4.5C13 4.641 12.952 4.759 12.856 4.856C12.759 4.952 12.641 5 12.5 5L9.5 5C9.359 5 9.241 4.952 9.144 4.856ZM3.732 7.586C3.976 7.391 4.259 7.242 4.58 7.14C4.875 7.047 5.182 7 5.5 7C5.818 7 6.125 7.047 6.42 7.14C6.741 7.242 7.024 7.391 7.268 7.586C7.512 7.781 7.697 8.007 7.824 8.264C7.843 8.302 7.861 8.341 7.877 8.38C7.971 8.61 7.861 8.872 7.631 8.967C7.577 8.989 7.519 9 7.46 9L3.54 9C3.291 9 3.09 8.799 3.09 8.55C3.09 8.492 3.101 8.434 3.123 8.38C3.139 8.341 3.157 8.302 3.176 8.264C3.303 8.007 3.488 7.781 3.732 7.586ZM9.144 7.856C9.048 7.759 9 7.641 9 7.5C9 7.359 9.048 7.241 9.144 7.144C9.241 7.048 9.359 7 9.5 7L11.5 7C11.641 7 11.759 7.048 11.856 7.144C11.952 7.241 12 7.359 12 7.5C12 7.641 11.952 7.759 11.856 7.856C11.759 7.952 11.641 8 11.5 8L9.5 8C9.359 8 9.241 7.952 9.144 7.856ZM13.732 10.768L12.854 11.646C12.754 11.746 12.636 11.796 12.5 11.796C12.364 11.796 12.246 11.746 12.146 11.646L11.268 10.768C11.092 10.592 11.092 10.308 11.268 10.132C11.353 10.047 11.467 10 11.586 10L13.414 10C13.662 10 13.864 10.201 13.864 10.45C13.864 10.569 13.816 10.684 13.732 10.768ZM14.691 11.745C14.786 11.784 14.861 11.845 14.916 11.929C14.972 12.012 15 12.105 15 12.207L15 14.5C15 14.641 14.952 14.759 14.856 14.856C14.759 14.952 14.641 15 14.5 15L10.5 15C10.359 15 10.241 14.952 10.144 14.856C10.048 14.759 10 14.641 10 14.5L10 12.207C10 12.105 10.028 12.012 10.084 11.929C10.139 11.845 10.214 11.784 10.309 11.745C10.403 11.706 10.499 11.696 10.598 11.716C10.696 11.735 10.781 11.781 10.854 11.854L12.146 13.146C12.244 13.244 12.362 13.293 12.5 13.293C12.638 13.293 12.756 13.244 12.854 13.146L14.146 11.854C14.219 11.781 14.304 11.735 14.402 11.716C14.501 11.696 14.597 11.706 14.691 11.745Z"/></svg>

React

// Gentleface "id-card-mail" (line-round), MIT. https://gentleface.com/icons/id-card-mail
import type { SVGProps } from 'react';

export function IdCardMailIcon(props: SVGProps<SVGSVGElement>) {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" {...props}>
      <path d="M1.14 2.264C1.242 2.007 1.391 1.781 1.586 1.586C1.781 1.391 2.007 1.242 2.264 1.14C2.5 1.047 2.746 1 3 1L13 1C13.254 1 13.5 1.047 13.736 1.14C13.993 1.242 14.219 1.391 14.414 1.586C14.609 1.781 14.758 2.007 14.86 2.264C14.953 2.5 15 2.746 15 3L15 8.5C15 8.641 14.952 8.759 14.856 8.856C14.759 8.952 14.641 9 14.5 9C14.359 9 14.241 8.952 14.144 8.856C14.048 8.759 14 8.641 14 8.5L14 3C14 2.724 13.902 2.488 13.707 2.293C13.512 2.098 13.276 2 13 2L3 2C2.724 2 2.488 2.098 2.293 2.293C2.098 2.488 2 2.724 2 3L2 9C2 9.276 2.098 9.512 2.293 9.707C2.488 9.902 2.724 10 3 10L7.5 10C7.641 10 7.759 10.048 7.856 10.144C7.952 10.241 8 10.359 8 10.5C8 10.641 7.952 10.759 7.856 10.856C7.759 10.952 7.641 11 7.5 11L3 11C2.746 11 2.5 10.953 2.264 10.86C2.007 10.758 1.781 10.609 1.586 10.414C1.391 10.219 1.242 9.993 1.14 9.736C1.047 9.5 1 9.254 1 9L1 3C1 2.746 1.047 2.5 1.14 2.264ZM6.561 3.439C6.854 3.732 7 4.086 7 4.5C7 4.914 6.854 5.268 6.561 5.561C6.268 5.854 5.914 6 5.5 6C5.086 6 4.732 5.854 4.439 5.561C4.146 5.268 4 4.914 4 4.5C4 4.086 4.146 3.732 4.439 3.439C4.732 3.146 5.086 3 5.5 3C5.914 3 6.268 3.146 6.561 3.439ZM9.144 4.856C9.048 4.759 9 4.641 9 4.5C9 4.359 9.048 4.241 9.144 4.144C9.241 4.048 9.359 4 9.5 4L12.5 4C12.641 4 12.759 4.048 12.856 4.144C12.952 4.241 13 4.359 13 4.5C13 4.641 12.952 4.759 12.856 4.856C12.759 4.952 12.641 5 12.5 5L9.5 5C9.359 5 9.241 4.952 9.144 4.856ZM3.732 7.586C3.976 7.391 4.259 7.242 4.58 7.14C4.875 7.047 5.182 7 5.5 7C5.818 7 6.125 7.047 6.42 7.14C6.741 7.242 7.024 7.391 7.268 7.586C7.512 7.781 7.697 8.007 7.824 8.264C7.843 8.302 7.861 8.341 7.877 8.38C7.971 8.61 7.861 8.872 7.631 8.967C7.577 8.989 7.519 9 7.46 9L3.54 9C3.291 9 3.09 8.799 3.09 8.55C3.09 8.492 3.101 8.434 3.123 8.38C3.139 8.341 3.157 8.302 3.176 8.264C3.303 8.007 3.488 7.781 3.732 7.586ZM9.144 7.856C9.048 7.759 9 7.641 9 7.5C9 7.359 9.048 7.241 9.144 7.144C9.241 7.048 9.359 7 9.5 7L11.5 7C11.641 7 11.759 7.048 11.856 7.144C11.952 7.241 12 7.359 12 7.5C12 7.641 11.952 7.759 11.856 7.856C11.759 7.952 11.641 8 11.5 8L9.5 8C9.359 8 9.241 7.952 9.144 7.856ZM13.732 10.768L12.854 11.646C12.754 11.746 12.636 11.796 12.5 11.796C12.364 11.796 12.246 11.746 12.146 11.646L11.268 10.768C11.092 10.592 11.092 10.308 11.268 10.132C11.353 10.047 11.467 10 11.586 10L13.414 10C13.662 10 13.864 10.201 13.864 10.45C13.864 10.569 13.816 10.684 13.732 10.768ZM14.691 11.745C14.786 11.784 14.861 11.845 14.916 11.929C14.972 12.012 15 12.105 15 12.207L15 14.5C15 14.641 14.952 14.759 14.856 14.856C14.759 14.952 14.641 15 14.5 15L10.5 15C10.359 15 10.241 14.952 10.144 14.856C10.048 14.759 10 14.641 10 14.5L10 12.207C10 12.105 10.028 12.012 10.084 11.929C10.139 11.845 10.214 11.784 10.309 11.745C10.403 11.706 10.499 11.696 10.598 11.716C10.696 11.735 10.781 11.781 10.854 11.854L12.146 13.146C12.244 13.244 12.362 13.293 12.5 13.293C12.638 13.293 12.756 13.244 12.854 13.146L14.146 11.854C14.219 11.781 14.304 11.735 14.402 11.716C14.501 11.696 14.597 11.706 14.691 11.745Z" />
    </svg>
  );
}

Vue

Vue: see /icons/id-card-mail.md

Svelte

Svelte: see /icons/id-card-mail.md

HTML img

HTML img: see /icons/id-card-mail.md

CSS

CSS: see /icons/id-card-mail.md

Data URL

Data URL: see /icons/id-card-mail.md

Sprite

Sprite: see /icons/id-card-mail.md

SwiftUI

SwiftUI: see /icons/id-card-mail.md

Compose

Compose: see /icons/id-card-mail.md

Android XML

Android XML: see /icons/id-card-mail.md

Flutter

Flutter: see /icons/id-card-mail.md

Each SVG is 16 × 16 with fill="currentColor". Keep it at 16 px or an exact multiple (32, 48) on whole pixels: a fractional size or position blurs it. The snippets are decorative (aria-hidden). For an icon that carries meaning on its own, such as an icon-only button, label the button, or give the SVG role="img" and an aria-label. More in how to use.

With npm: import { IdCardMailIcon } from '@gentleface/react'; (setup).

Meaning

Use it for

contact email, email contact

Tags

contact, email, mail, envelope, id, card, vcard, address, profile, person

Category

People & accounts

Component name

IdCardMailIcon

History

2026-10-29 released in 0.2.0
2026-10-30 added

Since

version 0.2.0

Family 4

contact-card id-card id-card-check id-card-phone

More people & accounts icons

address-book baby baby-carriage diversity elderly family family-outline gender-female gender-male gender-transgender id-badge log-in log-out non-binary user user-alert · all people & accounts icons

For agents

Metadata: /icons/id-card-mail.json · Markdown: /icons/id-card-mail.md · SVG: https://gentleface.com/svg/{style}/16/id-card-mail.svg · PNG: https://gentleface.com/png/{style}/{16|32|48}/id-card-mail.png

id-card-mail icon Copy name

line-round

line-soft

line-sharp

solid-round

solid-soft

solid-sharp