circle logo
circle from Simple Icons by Simple Icons Collaborators · Brand · CC0-1.0 Free for personal and commercial use.
- Name
- circle
- Set
- Simple Icons
- Style
- Brand
- Viewbox
- 24×24
- License
- CC0 1.0
The same logo in other sets
circleAkar IconscircleBootstrap IconscircleBoxIcons v2circleBoxIcons v2 Solidcircle-filledCarboncircleCoreUI BrandscircleCodiconscircleFramework7 IconscircleFont Awesome 6 RegularcircleFont Awesome 6 SolidcircleFont Awesome RegularcircleFont Awesome SolidcircleFeather Iconscircle-12-filledFluent UI System IconscircleHuge IconscircleHumbleiconscircleIconoircircleJam IconscircleLine AwesomecircleMaterial Line IconscircleLucidecircleMaterial SymbolscircleMaterial Symbols LightcircleMaterial Design Icons
Use the circle logo
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M20.788 3.832c-.101-.105-.197-.213-.301-.317q-.155-.153-.32-.302A11.9 11.9 0 0 0 12 0a11.93 11.93 0 0 0-8.486 3.514C-1.062 8.09-1.16 15.47 3.213 20.168q.147.162.3.32c.104.103.21.2.317.3A11.92 11.92 0 0 0 12 24c3.206 0 6.22-1.247 8.487-3.512c4.576-4.576 4.673-11.956.301-16.656m-16.655.301A11.06 11.06 0 0 1 12 .874c2.825 0 5.49 1.048 7.55 2.958l-1.001 1.002A9.65 9.65 0 0 0 12 2.292a9.64 9.64 0 0 0-6.865 2.844A9.64 9.64 0 0 0 2.292 12c0 2.448.9 4.753 2.542 6.549L3.831 19.55C-.201 15.191-.101 8.367 4.133 4.133m13.798 1.318v.002l-1.015 1.014A7.35 7.35 0 0 0 12 4.589A7.36 7.36 0 0 0 6.761 6.76A7.36 7.36 0 0 0 4.589 12a7.34 7.34 0 0 0 1.877 4.913l-1.014 1.016A8.77 8.77 0 0 1 3.167 12a8.77 8.77 0 0 1 2.588-6.245A8.77 8.77 0 0 1 12 3.167c2.213 0 4.301.809 5.931 2.284M18.537 12c0 1.745-.681 3.387-1.916 4.622S13.746 18.538 12 18.538a6.5 6.5 0 0 1-4.296-1.621l-.001-.004c-.11-.094-.22-.188-.324-.291a6 6 0 0 1-.293-.326A6.47 6.47 0 0 1 5.466 12c0-1.746.679-3.387 1.914-4.621A6.5 6.5 0 0 1 12 5.465c1.599 0 3.105.576 4.295 1.62c.111.096.224.19.326.295q.154.157.295.324A6.48 6.48 0 0 1 18.537 12M7.084 17.534h.001A7.35 7.35 0 0 0 12 19.413a7.35 7.35 0 0 0 5.239-2.174A7.35 7.35 0 0 0 19.412 12a7.36 7.36 0 0 0-1.876-4.916l1.013-1.012A8.78 8.78 0 0 1 20.834 12a8.77 8.77 0 0 1-2.589 6.246A8.76 8.76 0 0 1 12 20.834a8.78 8.78 0 0 1-5.93-2.285zm12.783 2.333A11.05 11.05 0 0 1 12 23.125a11.04 11.04 0 0 1-7.551-2.957l1.004-1.001a9.64 9.64 0 0 0 6.549 2.542a9.64 9.64 0 0 0 6.865-2.846A9.64 9.64 0 0 0 21.71 12a9.64 9.64 0 0 0-2.543-6.548l1.001-1.002c4.031 4.359 3.935 11.182-.301 15.417"/></svg>
React
import type { SVGProps } from "react";
export function SimpleIconsCircle(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="M20.788 3.832c-.101-.105-.197-.213-.301-.317q-.155-.153-.32-.302A11.9 11.9 0 0 0 12 0a11.93 11.93 0 0 0-8.486 3.514C-1.062 8.09-1.16 15.47 3.213 20.168q.147.162.3.32c.104.103.21.2.317.3A11.92 11.92 0 0 0 12 24c3.206 0 6.22-1.247 8.487-3.512c4.576-4.576 4.673-11.956.301-16.656m-16.655.301A11.06 11.06 0 0 1 12 .874c2.825 0 5.49 1.048 7.55 2.958l-1.001 1.002A9.65 9.65 0 0 0 12 2.292a9.64 9.64 0 0 0-6.865 2.844A9.64 9.64 0 0 0 2.292 12c0 2.448.9 4.753 2.542 6.549L3.831 19.55C-.201 15.191-.101 8.367 4.133 4.133m13.798 1.318v.002l-1.015 1.014A7.35 7.35 0 0 0 12 4.589A7.36 7.36 0 0 0 6.761 6.76A7.36 7.36 0 0 0 4.589 12a7.34 7.34 0 0 0 1.877 4.913l-1.014 1.016A8.77 8.77 0 0 1 3.167 12a8.77 8.77 0 0 1 2.588-6.245A8.77 8.77 0 0 1 12 3.167c2.213 0 4.301.809 5.931 2.284M18.537 12c0 1.745-.681 3.387-1.916 4.622S13.746 18.538 12 18.538a6.5 6.5 0 0 1-4.296-1.621l-.001-.004c-.11-.094-.22-.188-.324-.291a6 6 0 0 1-.293-.326A6.47 6.47 0 0 1 5.466 12c0-1.746.679-3.387 1.914-4.621A6.5 6.5 0 0 1 12 5.465c1.599 0 3.105.576 4.295 1.62c.111.096.224.19.326.295q.154.157.295.324A6.48 6.48 0 0 1 18.537 12M7.084 17.534h.001A7.35 7.35 0 0 0 12 19.413a7.35 7.35 0 0 0 5.239-2.174A7.35 7.35 0 0 0 19.412 12a7.36 7.36 0 0 0-1.876-4.916l1.013-1.012A8.78 8.78 0 0 1 20.834 12a8.77 8.77 0 0 1-2.589 6.246A8.76 8.76 0 0 1 12 20.834a8.78 8.78 0 0 1-5.93-2.285zm12.783 2.333A11.05 11.05 0 0 1 12 23.125a11.04 11.04 0 0 1-7.551-2.957l1.004-1.001a9.64 9.64 0 0 0 6.549 2.542a9.64 9.64 0 0 0 6.865-2.846A9.64 9.64 0 0 0 21.71 12a9.64 9.64 0 0 0-2.543-6.548l1.001-1.002c4.031 4.359 3.935 11.182-.301 15.417"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M20.788 3.832c-.101-.105-.197-.213-.301-.317q-.155-.153-.32-.302A11.9 11.9 0 0 0 12 0a11.93 11.93 0 0 0-8.486 3.514C-1.062 8.09-1.16 15.47 3.213 20.168q.147.162.3.32c.104.103.21.2.317.3A11.92 11.92 0 0 0 12 24c3.206 0 6.22-1.247 8.487-3.512c4.576-4.576 4.673-11.956.301-16.656m-16.655.301A11.06 11.06 0 0 1 12 .874c2.825 0 5.49 1.048 7.55 2.958l-1.001 1.002A9.65 9.65 0 0 0 12 2.292a9.64 9.64 0 0 0-6.865 2.844A9.64 9.64 0 0 0 2.292 12c0 2.448.9 4.753 2.542 6.549L3.831 19.55C-.201 15.191-.101 8.367 4.133 4.133m13.798 1.318v.002l-1.015 1.014A7.35 7.35 0 0 0 12 4.589A7.36 7.36 0 0 0 6.761 6.76A7.36 7.36 0 0 0 4.589 12a7.34 7.34 0 0 0 1.877 4.913l-1.014 1.016A8.77 8.77 0 0 1 3.167 12a8.77 8.77 0 0 1 2.588-6.245A8.77 8.77 0 0 1 12 3.167c2.213 0 4.301.809 5.931 2.284M18.537 12c0 1.745-.681 3.387-1.916 4.622S13.746 18.538 12 18.538a6.5 6.5 0 0 1-4.296-1.621l-.001-.004c-.11-.094-.22-.188-.324-.291a6 6 0 0 1-.293-.326A6.47 6.47 0 0 1 5.466 12c0-1.746.679-3.387 1.914-4.621A6.5 6.5 0 0 1 12 5.465c1.599 0 3.105.576 4.295 1.62c.111.096.224.19.326.295q.154.157.295.324A6.48 6.48 0 0 1 18.537 12M7.084 17.534h.001A7.35 7.35 0 0 0 12 19.413a7.35 7.35 0 0 0 5.239-2.174A7.35 7.35 0 0 0 19.412 12a7.36 7.36 0 0 0-1.876-4.916l1.013-1.012A8.78 8.78 0 0 1 20.834 12a8.77 8.77 0 0 1-2.589 6.246A8.76 8.76 0 0 1 12 20.834a8.78 8.78 0 0 1-5.93-2.285zm12.783 2.333A11.05 11.05 0 0 1 12 23.125a11.04 11.04 0 0 1-7.551-2.957l1.004-1.001a9.64 9.64 0 0 0 6.549 2.542a9.64 9.64 0 0 0 6.865-2.846A9.64 9.64 0 0 0 21.71 12a9.64 9.64 0 0 0-2.543-6.548l1.001-1.002c4.031 4.359 3.935 11.182-.301 15.417"/></svg> </template>
CSS
.icon-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%22M20.788%203.832c-.101-.105-.197-.213-.301-.317q-.155-.153-.32-.302A11.9%2011.9%200%200%200%2012%200a11.93%2011.93%200%200%200-8.486%203.514C-1.062%208.09-1.16%2015.47%203.213%2020.168q.147.162.3.32c.104.103.21.2.317.3A11.92%2011.92%200%200%200%2012%2024c3.206%200%206.22-1.247%208.487-3.512c4.576-4.576%204.673-11.956.301-16.656m-16.655.301A11.06%2011.06%200%200%201%2012%20.874c2.825%200%205.49%201.048%207.55%202.958l-1.001%201.002A9.65%209.65%200%200%200%2012%202.292a9.64%209.64%200%200%200-6.865%202.844A9.64%209.64%200%200%200%202.292%2012c0%202.448.9%204.753%202.542%206.549L3.831%2019.55C-.201%2015.191-.101%208.367%204.133%204.133m13.798%201.318v.002l-1.015%201.014A7.35%207.35%200%200%200%2012%204.589A7.36%207.36%200%200%200%206.761%206.76A7.36%207.36%200%200%200%204.589%2012a7.34%207.34%200%200%200%201.877%204.913l-1.014%201.016A8.77%208.77%200%200%201%203.167%2012a8.77%208.77%200%200%201%202.588-6.245A8.77%208.77%200%200%201%2012%203.167c2.213%200%204.301.809%205.931%202.284M18.537%2012c0%201.745-.681%203.387-1.916%204.622S13.746%2018.538%2012%2018.538a6.5%206.5%200%200%201-4.296-1.621l-.001-.004c-.11-.094-.22-.188-.324-.291a6%206%200%200%201-.293-.326A6.47%206.47%200%200%201%205.466%2012c0-1.746.679-3.387%201.914-4.621A6.5%206.5%200%200%201%2012%205.465c1.599%200%203.105.576%204.295%201.62c.111.096.224.19.326.295q.154.157.295.324A6.48%206.48%200%200%201%2018.537%2012M7.084%2017.534h.001A7.35%207.35%200%200%200%2012%2019.413a7.35%207.35%200%200%200%205.239-2.174A7.35%207.35%200%200%200%2019.412%2012a7.36%207.36%200%200%200-1.876-4.916l1.013-1.012A8.78%208.78%200%200%201%2020.834%2012a8.77%208.77%200%200%201-2.589%206.246A8.76%208.76%200%200%201%2012%2020.834a8.78%208.78%200%200%201-5.93-2.285zm12.783%202.333A11.05%2011.05%200%200%201%2012%2023.125a11.04%2011.04%200%200%201-7.551-2.957l1.004-1.001a9.64%209.64%200%200%200%206.549%202.542a9.64%209.64%200%200%200%206.865-2.846A9.64%209.64%200%200%200%2021.71%2012a9.64%209.64%200%200%200-2.543-6.548l1.001-1.002c4.031%204.359%203.935%2011.182-.301%2015.417%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%22M20.788%203.832c-.101-.105-.197-.213-.301-.317q-.155-.153-.32-.302A11.9%2011.9%200%200%200%2012%200a11.93%2011.93%200%200%200-8.486%203.514C-1.062%208.09-1.16%2015.47%203.213%2020.168q.147.162.3.32c.104.103.21.2.317.3A11.92%2011.92%200%200%200%2012%2024c3.206%200%206.22-1.247%208.487-3.512c4.576-4.576%204.673-11.956.301-16.656m-16.655.301A11.06%2011.06%200%200%201%2012%20.874c2.825%200%205.49%201.048%207.55%202.958l-1.001%201.002A9.65%209.65%200%200%200%2012%202.292a9.64%209.64%200%200%200-6.865%202.844A9.64%209.64%200%200%200%202.292%2012c0%202.448.9%204.753%202.542%206.549L3.831%2019.55C-.201%2015.191-.101%208.367%204.133%204.133m13.798%201.318v.002l-1.015%201.014A7.35%207.35%200%200%200%2012%204.589A7.36%207.36%200%200%200%206.761%206.76A7.36%207.36%200%200%200%204.589%2012a7.34%207.34%200%200%200%201.877%204.913l-1.014%201.016A8.77%208.77%200%200%201%203.167%2012a8.77%208.77%200%200%201%202.588-6.245A8.77%208.77%200%200%201%2012%203.167c2.213%200%204.301.809%205.931%202.284M18.537%2012c0%201.745-.681%203.387-1.916%204.622S13.746%2018.538%2012%2018.538a6.5%206.5%200%200%201-4.296-1.621l-.001-.004c-.11-.094-.22-.188-.324-.291a6%206%200%200%201-.293-.326A6.47%206.47%200%200%201%205.466%2012c0-1.746.679-3.387%201.914-4.621A6.5%206.5%200%200%201%2012%205.465c1.599%200%203.105.576%204.295%201.62c.111.096.224.19.326.295q.154.157.295.324A6.48%206.48%200%200%201%2018.537%2012M7.084%2017.534h.001A7.35%207.35%200%200%200%2012%2019.413a7.35%207.35%200%200%200%205.239-2.174A7.35%207.35%200%200%200%2019.412%2012a7.36%207.36%200%200%200-1.876-4.916l1.013-1.012A8.78%208.78%200%200%201%2020.834%2012a8.77%208.77%200%200%201-2.589%206.246A8.76%208.76%200%200%201%2012%2020.834a8.78%208.78%200%200%201-5.93-2.285zm12.783%202.333A11.05%2011.05%200%200%201%2012%2023.125a11.04%2011.04%200%200%201-7.551-2.957l1.004-1.001a9.64%209.64%200%200%200%206.549%202.542a9.64%209.64%200%200%200%206.865-2.846A9.64%209.64%200%200%200%2021.71%2012a9.64%209.64%200%200%200-2.543-6.548l1.001-1.002c4.031%204.359%203.935%2011.182-.301%2015.417%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/simple-icons/circle.svg?color=%231a73e8&size=48
