at-sign icon

At sign: mention, at, email address, at mention. 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="M13.514 5.634C13.156 4.8 12.636 4.085 11.955 3.488C11.273 2.89 10.495 2.469 9.623 2.224C8.831 2.001 8.028 1.944 7.213 2.052C6.398 2.16 5.637 2.424 4.931 2.845C4.152 3.308 3.511 3.917 3.008 4.672C2.505 5.426 2.189 6.252 2.061 7.149C1.944 7.963 1.993 8.767 2.207 9.561C2.421 10.355 2.782 11.074 3.292 11.719C3.854 12.431 4.542 12.986 5.356 13.386C6.169 13.785 7.03 13.99 7.936 14C8.758 14.008 9.549 13.855 10.308 13.538C10.438 13.484 10.566 13.483 10.692 13.535C10.817 13.587 10.907 13.678 10.962 13.808C11.016 13.938 11.017 14.066 10.965 14.192C10.913 14.317 10.822 14.407 10.692 14.462C9.807 14.83 8.885 15.01 7.926 15C6.868 14.988 5.864 14.75 4.915 14.283C3.965 13.817 3.163 13.169 2.507 12.339C1.913 11.587 1.491 10.747 1.241 9.821C0.992 8.895 0.935 7.957 1.071 7.008C1.221 5.961 1.589 4.997 2.176 4.117C2.762 3.237 3.51 2.526 4.419 1.985C5.243 1.495 6.131 1.186 7.081 1.061C8.032 0.935 8.969 1.001 9.893 1.261C10.911 1.547 11.818 2.038 12.614 2.736C13.409 3.433 14.015 4.267 14.433 5.239C14.811 6.121 15 7.041 15 8L15 9.5C15 9.818 14.941 10.125 14.824 10.42C14.697 10.741 14.512 11.024 14.268 11.268C14.024 11.512 13.741 11.697 13.42 11.824C13.125 11.941 12.818 12 12.5 12C12.182 12 11.875 11.941 11.58 11.824C11.259 11.697 10.976 11.512 10.732 11.268C10.488 11.024 10.303 10.741 10.176 10.42C10.141 10.333 10.111 10.244 10.087 10.155C9.802 10.431 9.474 10.643 9.104 10.789C8.75 10.93 8.381 11 8 11C7.619 11 7.25 10.93 6.896 10.789C6.511 10.637 6.172 10.414 5.879 10.121C5.586 9.828 5.363 9.489 5.211 9.104C5.07 8.75 5 8.381 5 8C5 7.619 5.07 7.25 5.211 6.896C5.363 6.511 5.586 6.172 5.879 5.879C6.172 5.586 6.511 5.363 6.896 5.211C7.25 5.07 7.619 5 8 5C8.381 5 8.75 5.07 9.104 5.211C9.437 5.342 9.736 5.527 10 5.764L10 5.5C10 5.359 10.048 5.241 10.144 5.144C10.241 5.048 10.359 5 10.5 5C10.641 5 10.759 5.048 10.856 5.144C10.952 5.241 11 5.359 11 5.5L11 9.5C11 9.691 11.035 9.875 11.105 10.052C11.182 10.245 11.293 10.414 11.439 10.561C11.586 10.707 11.755 10.818 11.948 10.895C12.125 10.965 12.309 11 12.5 11C12.691 11 12.875 10.965 13.052 10.895C13.245 10.818 13.414 10.707 13.561 10.561C13.707 10.414 13.818 10.245 13.895 10.052C13.965 9.875 14 9.691 14 9.5L14 8C14 7.178 13.838 6.389 13.514 5.634ZM10 8C10 7.746 9.953 7.5 9.86 7.264C9.758 7.007 9.609 6.781 9.414 6.586C9.219 6.391 8.993 6.242 8.736 6.14C8.5 6.047 8.254 6 8 6C7.746 6 7.5 6.047 7.264 6.14C7.007 6.242 6.781 6.391 6.586 6.586C6.391 6.781 6.242 7.007 6.14 7.264C6.047 7.5 6 7.746 6 8C6 8.254 6.047 8.5 6.14 8.736C6.242 8.993 6.391 9.219 6.586 9.414C6.781 9.609 7.007 9.758 7.264 9.86C7.5 9.953 7.746 10 8 10C8.254 10 8.5 9.953 8.736 9.86C8.993 9.758 9.219 9.609 9.414 9.414C9.609 9.219 9.758 8.993 9.86 8.736C9.953 8.5 10 8.254 10 8Z"/></svg>

React

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

export function AtSignIcon(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="M13.514 5.634C13.156 4.8 12.636 4.085 11.955 3.488C11.273 2.89 10.495 2.469 9.623 2.224C8.831 2.001 8.028 1.944 7.213 2.052C6.398 2.16 5.637 2.424 4.931 2.845C4.152 3.308 3.511 3.917 3.008 4.672C2.505 5.426 2.189 6.252 2.061 7.149C1.944 7.963 1.993 8.767 2.207 9.561C2.421 10.355 2.782 11.074 3.292 11.719C3.854 12.431 4.542 12.986 5.356 13.386C6.169 13.785 7.03 13.99 7.936 14C8.758 14.008 9.549 13.855 10.308 13.538C10.438 13.484 10.566 13.483 10.692 13.535C10.817 13.587 10.907 13.678 10.962 13.808C11.016 13.938 11.017 14.066 10.965 14.192C10.913 14.317 10.822 14.407 10.692 14.462C9.807 14.83 8.885 15.01 7.926 15C6.868 14.988 5.864 14.75 4.915 14.283C3.965 13.817 3.163 13.169 2.507 12.339C1.913 11.587 1.491 10.747 1.241 9.821C0.992 8.895 0.935 7.957 1.071 7.008C1.221 5.961 1.589 4.997 2.176 4.117C2.762 3.237 3.51 2.526 4.419 1.985C5.243 1.495 6.131 1.186 7.081 1.061C8.032 0.935 8.969 1.001 9.893 1.261C10.911 1.547 11.818 2.038 12.614 2.736C13.409 3.433 14.015 4.267 14.433 5.239C14.811 6.121 15 7.041 15 8L15 9.5C15 9.818 14.941 10.125 14.824 10.42C14.697 10.741 14.512 11.024 14.268 11.268C14.024 11.512 13.741 11.697 13.42 11.824C13.125 11.941 12.818 12 12.5 12C12.182 12 11.875 11.941 11.58 11.824C11.259 11.697 10.976 11.512 10.732 11.268C10.488 11.024 10.303 10.741 10.176 10.42C10.141 10.333 10.111 10.244 10.087 10.155C9.802 10.431 9.474 10.643 9.104 10.789C8.75 10.93 8.381 11 8 11C7.619 11 7.25 10.93 6.896 10.789C6.511 10.637 6.172 10.414 5.879 10.121C5.586 9.828 5.363 9.489 5.211 9.104C5.07 8.75 5 8.381 5 8C5 7.619 5.07 7.25 5.211 6.896C5.363 6.511 5.586 6.172 5.879 5.879C6.172 5.586 6.511 5.363 6.896 5.211C7.25 5.07 7.619 5 8 5C8.381 5 8.75 5.07 9.104 5.211C9.437 5.342 9.736 5.527 10 5.764L10 5.5C10 5.359 10.048 5.241 10.144 5.144C10.241 5.048 10.359 5 10.5 5C10.641 5 10.759 5.048 10.856 5.144C10.952 5.241 11 5.359 11 5.5L11 9.5C11 9.691 11.035 9.875 11.105 10.052C11.182 10.245 11.293 10.414 11.439 10.561C11.586 10.707 11.755 10.818 11.948 10.895C12.125 10.965 12.309 11 12.5 11C12.691 11 12.875 10.965 13.052 10.895C13.245 10.818 13.414 10.707 13.561 10.561C13.707 10.414 13.818 10.245 13.895 10.052C13.965 9.875 14 9.691 14 9.5L14 8C14 7.178 13.838 6.389 13.514 5.634ZM10 8C10 7.746 9.953 7.5 9.86 7.264C9.758 7.007 9.609 6.781 9.414 6.586C9.219 6.391 8.993 6.242 8.736 6.14C8.5 6.047 8.254 6 8 6C7.746 6 7.5 6.047 7.264 6.14C7.007 6.242 6.781 6.391 6.586 6.586C6.391 6.781 6.242 7.007 6.14 7.264C6.047 7.5 6 7.746 6 8C6 8.254 6.047 8.5 6.14 8.736C6.242 8.993 6.391 9.219 6.586 9.414C6.781 9.609 7.007 9.758 7.264 9.86C7.5 9.953 7.746 10 8 10C8.254 10 8.5 9.953 8.736 9.86C8.993 9.758 9.219 9.609 9.414 9.414C9.609 9.219 9.758 8.993 9.86 8.736C9.953 8.5 10 8.254 10 8Z" />
    </svg>
  );
}

Vue

Vue: see /icons/at-sign.md

Svelte

Svelte: see /icons/at-sign.md

HTML img

HTML img: see /icons/at-sign.md

CSS

CSS: see /icons/at-sign.md

Data URL

Data URL: see /icons/at-sign.md

Sprite

Sprite: see /icons/at-sign.md

SwiftUI

SwiftUI: see /icons/at-sign.md

Compose

Compose: see /icons/at-sign.md

Android XML

Android XML: see /icons/at-sign.md

Flutter

Flutter: see /icons/at-sign.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.

Meaning

Use it for

mention, at, email address, at mention, mentions

Alternatives

user-tag: tag people in a photo
mail: email as a channel, or the mailbox
mail-plus: add an email address to an account

Also fits

edit email: the email address field itself
add email address: an email address field (at-sign owns email-address)
tag people: mention someone in text

Tags

at, mention, email, address, tag

Category

Communication

Component name

AtSignIcon

History

2026-10-14 added

More communication icons

broadcast broadcast-off dialpad forward inbox inbox-arrow-down inbox-arrow-up inbox-check inbox-user mail mail-alert mail-bolt mail-check mail-clock mail-dot mail-gear · all communication icons

For agents

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

at-sign icon Copy name

line-round

line-soft

line-sharp

solid-round

solid-soft

solid-sharp

Code line-round

Meaning

More communication icons

For agents

at-sign icon