Ícone de círculo com um contador no meio

Front-end
#1

Pessoal,

Precisava criar um ícone com círculo branco (uma bolinha) e colocar uma variável (contador) em cima, ou seja, ficaria um círculo com um número no meio.

O que está pegando é essa parte de css.

#2

Está assim, só que ele não pega um tamanho legal do círculo, ele como um pedaço (tamanho de 1 caracter)

<!DOCTYPE HTML>

<style>
	body{
		background-color:#0786c3;
	}
	
	#circulo {
	  background: radial-gradient(circle closest-side,#fff 0%,#fff 98%,rgba(0,0,0,0) 200%);
	  text-color: #0786c3;
	}


	

</style>

1