sei que faz um tempo que este tópico não é abordado, mas pensei em acrescentar que é possível controlar o grau de arredondamento dos avatares no CSS com a configuração border-radius (eu deixei o nosso em 6px):
img.avatar {
border-radius: 6px;
}
quanto maior o número, mais arredondados os cantos. definir como 0 torna os avatares perfeitamente quadrados. acho que 24px os torna perfeitamente redondos. assim, você pode ser bastante granular em como deseja que os avatares apareçam. você pode fazer com que avatares quadrados pareçam telas de TV antigas e retrô. lol
observação: o arredondamento de avatares pode parecer um pouco diferente entre as visualizações de desktop e mobile, então talvez você queira controlá-lo separadamente lá.