Изменить размер и центр выровнять значок внутри круга

Question

У меня есть список значков сети, которые я пытаюсь показать их по кругу на белом фоне.Вот что у меня сейчас.Я пытаюсь, чтобы значок вписался в круг.

.logo {
  display: -ms-flexbox;
  -ms-flex-align: center;
  -ms-justify-content: center;
  display: flex;
  align-items: center;
  overflow: hidden;
  color: #1e1e1e;
  width: 100%;
  height: 100%;
  max-height: 88px;
  max-width: 88px;
  margin: 0 auto;
  background: url('/networks/network-logo-bg@2x.png') center center no-repeat;
  background-size: contain;
  img {
    width: 80%;
    font-size: 10px;
    font-weight: 700;
    text-align: center;
    color: #000;
    margin: 0 auto;
    @include lazyLoad(null);
  }
}

HTML:

<div key={index} className="logo">
            <img  className="lazyload" src={logo.icon} alt={logo.name}/>
          </div>

Я хочузначок должен быть внутри круга и выровнен по центру.

Answer 1

Вы можете попробовать что-то вроде этого:

HTML:

<div class="circle">
  <img src="https://image.flaticon.com/icons/svg/826/826356.svg">
</div>

CSS:

.circle {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: black;
  display: flex;
  justify-content: center;
}

img {
  width: 50%;
}

Демо