account circle icon

account-circle from Material Symbols Light by Google · Regular · Actions · Apache-2.0 Free for personal and commercial use.

Name: account-circle
Set: Material Symbols Light
Style: Regular
Category: Actions
Viewbox: 24×24
License: Apache 2.0
Aliases: account-circle-rounded, account-circle-sharp

1 other variant in Material Symbols Light

account-circle-outline

The same icon in other sets

account-circleMaterial Symbols account-circleMaterial Design Icons account-circle-fillRemix Icon

More actions icons from Material Symbols Light

Use the account circle icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M6.196 17.485q1.275-.918 2.706-1.451Q10.332 15.5 12 15.5t3.098.534t2.706 1.45q.99-1.025 1.593-2.42Q20 13.667 20 12q0-3.325-2.337-5.663T12 4T6.337 6.338T4 12q0 1.667.603 3.064q.603 1.396 1.593 2.42m3.672-5.852Q9 10.764 9 9.5t.868-2.132T12 6.5t2.132.868T15 9.5t-.868 2.132T12 12.5t-2.132-.868M12 21q-1.883 0-3.525-.701t-2.858-1.916t-1.916-2.858T3 12t.701-3.525t1.916-2.858q1.216-1.215 2.858-1.916T12 3t3.525.701t2.858 1.916t1.916 2.858T21 12t-.701 3.525t-1.916 2.858q-1.216 1.215-2.858 1.916T12 21"/></svg>

React

import type { SVGProps } from "react";

export function MaterialSymbolsLightAccountCircle(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="M6.196 17.485q1.275-.918 2.706-1.451Q10.332 15.5 12 15.5t3.098.534t2.706 1.45q.99-1.025 1.593-2.42Q20 13.667 20 12q0-3.325-2.337-5.663T12 4T6.337 6.338T4 12q0 1.667.603 3.064q.603 1.396 1.593 2.42m3.672-5.852Q9 10.764 9 9.5t.868-2.132T12 6.5t2.132.868T15 9.5t-.868 2.132T12 12.5t-2.132-.868M12 21q-1.883 0-3.525-.701t-2.858-1.916t-1.916-2.858T3 12t.701-3.525t1.916-2.858q1.216-1.215 2.858-1.916T12 3t3.525.701t2.858 1.916t1.916 2.858T21 12t-.701 3.525t-1.916 2.858q-1.216 1.215-2.858 1.916T12 21"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M6.196 17.485q1.275-.918 2.706-1.451Q10.332 15.5 12 15.5t3.098.534t2.706 1.45q.99-1.025 1.593-2.42Q20 13.667 20 12q0-3.325-2.337-5.663T12 4T6.337 6.338T4 12q0 1.667.603 3.064q.603 1.396 1.593 2.42m3.672-5.852Q9 10.764 9 9.5t.868-2.132T12 6.5t2.132.868T15 9.5t-.868 2.132T12 12.5t-2.132-.868M12 21q-1.883 0-3.525-.701t-2.858-1.916t-1.916-2.858T3 12t.701-3.525t1.916-2.858q1.216-1.215 2.858-1.916T12 3t3.525.701t2.858 1.916t1.916 2.858T21 12t-.701 3.525t-1.916 2.858q-1.216 1.215-2.858 1.916T12 21"/></svg>
</template>

CSS

.icon-account-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%22M6.196%2017.485q1.275-.918%202.706-1.451Q10.332%2015.5%2012%2015.5t3.098.534t2.706%201.45q.99-1.025%201.593-2.42Q20%2013.667%2020%2012q0-3.325-2.337-5.663T12%204T6.337%206.338T4%2012q0%201.667.603%203.064q.603%201.396%201.593%202.42m3.672-5.852Q9%2010.764%209%209.5t.868-2.132T12%206.5t2.132.868T15%209.5t-.868%202.132T12%2012.5t-2.132-.868M12%2021q-1.883%200-3.525-.701t-2.858-1.916t-1.916-2.858T3%2012t.701-3.525t1.916-2.858q1.216-1.215%202.858-1.916T12%203t3.525.701t2.858%201.916t1.916%202.858T21%2012t-.701%203.525t-1.916%202.858q-1.216%201.215-2.858%201.916T12%2021%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%22M6.196%2017.485q1.275-.918%202.706-1.451Q10.332%2015.5%2012%2015.5t3.098.534t2.706%201.45q.99-1.025%201.593-2.42Q20%2013.667%2020%2012q0-3.325-2.337-5.663T12%204T6.337%206.338T4%2012q0%201.667.603%203.064q.603%201.396%201.593%202.42m3.672-5.852Q9%2010.764%209%209.5t.868-2.132T12%206.5t2.132.868T15%209.5t-.868%202.132T12%2012.5t-2.132-.868M12%2021q-1.883%200-3.525-.701t-2.858-1.916t-1.916-2.858T3%2012t.701-3.525t1.916-2.858q1.216-1.215%202.858-1.916T12%203t3.525.701t2.858%201.916t1.916%202.858T21%2012t-.701%203.525t-1.916%202.858q-1.216%201.215-2.858%201.916T12%2021%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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