log in circle icon

log-in-circle from BoxIcons v2 by Boxicons · Regular · MIT Free for personal and commercial use.

Name
log-in-circle
Set
BoxIcons v2
Style
Regular
Viewbox
24×24
License
MIT
Aliases
bx-log-in-circle

The same icon in other sets

log-in-circleBoxIcons v2 Solid

Related icons in BoxIcons v2

log-inlog-outlog-out-circle

Use the log in circle icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="m10.998 16l5-4l-5-4v3h-9v2h9z"/><path fill="currentColor" d="M12.999 2.999a8.94 8.94 0 0 0-6.364 2.637L8.049 7.05c1.322-1.322 3.08-2.051 4.95-2.051s3.628.729 4.95 2.051S20 10.13 20 12s-.729 3.628-2.051 4.95s-3.08 2.051-4.95 2.051s-3.628-.729-4.95-2.051l-1.414 1.414c1.699 1.7 3.959 2.637 6.364 2.637s4.665-.937 6.364-2.637C21.063 16.665 22 14.405 22 12s-.937-4.665-2.637-6.364a8.94 8.94 0 0 0-6.364-2.637"/></svg>

React

import type { SVGProps } from "react";

export function BxLogInCircle(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="m10.998 16l5-4l-5-4v3h-9v2h9z"/><path fill="currentColor" d="M12.999 2.999a8.94 8.94 0 0 0-6.364 2.637L8.049 7.05c1.322-1.322 3.08-2.051 4.95-2.051s3.628.729 4.95 2.051S20 10.13 20 12s-.729 3.628-2.051 4.95s-3.08 2.051-4.95 2.051s-3.628-.729-4.95-2.051l-1.414 1.414c1.699 1.7 3.959 2.637 6.364 2.637s4.665-.937 6.364-2.637C21.063 16.665 22 14.405 22 12s-.937-4.665-2.637-6.364a8.94 8.94 0 0 0-6.364-2.637"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="m10.998 16l5-4l-5-4v3h-9v2h9z"/><path fill="currentColor" d="M12.999 2.999a8.94 8.94 0 0 0-6.364 2.637L8.049 7.05c1.322-1.322 3.08-2.051 4.95-2.051s3.628.729 4.95 2.051S20 10.13 20 12s-.729 3.628-2.051 4.95s-3.08 2.051-4.95 2.051s-3.628-.729-4.95-2.051l-1.414 1.414c1.699 1.7 3.959 2.637 6.364 2.637s4.665-.937 6.364-2.637C21.063 16.665 22 14.405 22 12s-.937-4.665-2.637-6.364a8.94 8.94 0 0 0-6.364-2.637"/></svg>
</template>

CSS

.icon-log-in-circle {
  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%22m10.998%2016l5-4l-5-4v3h-9v2h9z%22%2F%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M12.999%202.999a8.94%208.94%200%200%200-6.364%202.637L8.049%207.05c1.322-1.322%203.08-2.051%204.95-2.051s3.628.729%204.95%202.051S20%2010.13%2020%2012s-.729%203.628-2.051%204.95s-3.08%202.051-4.95%202.051s-3.628-.729-4.95-2.051l-1.414%201.414c1.699%201.7%203.959%202.637%206.364%202.637s4.665-.937%206.364-2.637C21.063%2016.665%2022%2014.405%2022%2012s-.937-4.665-2.637-6.364a8.94%208.94%200%200%200-6.364-2.637%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%22m10.998%2016l5-4l-5-4v3h-9v2h9z%22%2F%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M12.999%202.999a8.94%208.94%200%200%200-6.364%202.637L8.049%207.05c1.322-1.322%203.08-2.051%204.95-2.051s3.628.729%204.95%202.051S20%2010.13%2020%2012s-.729%203.628-2.051%204.95s-3.08%202.051-4.95%202.051s-3.628-.729-4.95-2.051l-1.414%201.414c1.699%201.7%203.959%202.637%206.364%202.637s4.665-.937%206.364-2.637C21.063%2016.665%2022%2014.405%2022%2012s-.937-4.665-2.637-6.364a8.94%208.94%200%200%200-6.364-2.637%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/bx/log-in-circle.svg?color=%231a73e8&size=48