gentleface

Gentleface › People & accounts › log-in

log-in icon

Log in: log in, sign in, enter, login. Drawn on the 16 px grid. Free SVG, PNG and code, MIT licensed.

SVGPNG 16PNG 32PNG 48

SVGPNG 16PNG 32PNG 48

SVGPNG 16PNG 32PNG 48

SVGPNG 16PNG 32PNG 48

SVGPNG 16PNG 32PNG 48

SVGPNG 16PNG 32PNG 48

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="M12.707 1.293C12.902 1.488 13 1.724 13 2L13 13C13 13.276 12.902 13.512 12.707 13.707C12.512 13.902 12.276 14 12 14L8.5 14C8.359 14 8.241 13.952 8.144 13.856C8.048 13.759 8 13.641 8 13.5C8 13.359 8.048 13.241 8.144 13.144C8.241 13.048 8.359 13 8.5 13L12 13L12 2L8.5 2C8.359 2 8.241 1.952 8.144 1.856C8.048 1.759 8 1.641 8 1.5C8 1.359 8.048 1.241 8.144 1.144C8.241 1.048 8.359 1 8.5 1L12 1C12.276 1 12.512 1.098 12.707 1.293ZM9.854 7.146C9.953 7.246 10.003 7.364 10.003 7.5C10.003 7.636 9.953 7.754 9.854 7.854L6.854 10.854C6.756 10.951 6.638 11 6.5 11C6.362 11 6.244 10.951 6.146 10.854C6.047 10.754 5.997 10.636 5.997 10.5C5.997 10.364 6.047 10.246 6.146 10.146L8.293 8L2.5 8C2.359 8 2.241 7.952 2.144 7.856C2.048 7.759 2 7.641 2 7.5C2 7.359 2.048 7.241 2.144 7.144C2.241 7.048 2.359 7 2.5 7L8.293 7L6.146 4.854C6.047 4.754 5.997 4.636 5.997 4.5C5.997 4.364 6.047 4.246 6.146 4.146C6.246 4.047 6.364 3.997 6.5 3.997C6.636 3.997 6.754 4.047 6.854 4.146L9.854 7.146Z"/></svg>
React
// Gentleface "log-in" (line-round), MIT. https://gentleface.com/icons/log-in
import type { SVGProps } from 'react';

export function LogInIcon(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="M12.707 1.293C12.902 1.488 13 1.724 13 2L13 13C13 13.276 12.902 13.512 12.707 13.707C12.512 13.902 12.276 14 12 14L8.5 14C8.359 14 8.241 13.952 8.144 13.856C8.048 13.759 8 13.641 8 13.5C8 13.359 8.048 13.241 8.144 13.144C8.241 13.048 8.359 13 8.5 13L12 13L12 2L8.5 2C8.359 2 8.241 1.952 8.144 1.856C8.048 1.759 8 1.641 8 1.5C8 1.359 8.048 1.241 8.144 1.144C8.241 1.048 8.359 1 8.5 1L12 1C12.276 1 12.512 1.098 12.707 1.293ZM9.854 7.146C9.953 7.246 10.003 7.364 10.003 7.5C10.003 7.636 9.953 7.754 9.854 7.854L6.854 10.854C6.756 10.951 6.638 11 6.5 11C6.362 11 6.244 10.951 6.146 10.854C6.047 10.754 5.997 10.636 5.997 10.5C5.997 10.364 6.047 10.246 6.146 10.146L8.293 8L2.5 8C2.359 8 2.241 7.952 2.144 7.856C2.048 7.759 2 7.641 2 7.5C2 7.359 2.048 7.241 2.144 7.144C2.241 7.048 2.359 7 2.5 7L8.293 7L6.146 4.854C6.047 4.754 5.997 4.636 5.997 4.5C5.997 4.364 6.047 4.246 6.146 4.146C6.246 4.047 6.364 3.997 6.5 3.997C6.636 3.997 6.754 4.047 6.854 4.146L9.854 7.146Z" />
    </svg>
  );
}
Vue
Vue: see /icons/log-in.md
Svelte
Svelte: see /icons/log-in.md
HTML img
HTML img: see /icons/log-in.md
CSS
CSS: see /icons/log-in.md
Data URL
Data URL: see /icons/log-in.md
Sprite
Sprite: see /icons/log-in.md
SwiftUI
SwiftUI: see /icons/log-in.md
Compose
Compose: see /icons/log-in.md
Android XML
Android XML: see /icons/log-in.md
Flutter
Flutter: see /icons/log-in.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
log in, sign in, enter, login, signin
Alternatives
  • user-key: sign in with a passkey
  • mail-link: sign in with a magic link sent by email
  • door: the entrance of a building or room (door owns entrance)
  • corner-down-left: the keyboard Enter key (corner-down-left owns enter-key)
Also fits
  • magic link: sign in with a password
Not for
  • enter key (use corner-down-left): log-in owns the bare concept enter (sign in), not the Enter key
  • entrance (use door): log-in is signing in to an account, not a building entrance
  • open door (use door-open): log-in is signing in to an account
Tags
login, signin, enter, door, arrow
Category
People & accounts
Component name
LogInIcon
History
  • added

Family 1

log-out

More people & accounts icons

address-book baby baby-carriage contact-card gender-female gender-male gender-transgender id-badge id-card id-card-check non-binary user user-alert user-arrow-right user-ban user-check · all people & accounts icons

For agents

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

Feedback