Resize and center align an icon inside a circle

Question

I have a list of network icons I am trying to show them in a circle with a white background. Here is what I have right now. I am trying to get the icon to fit into the circle .

.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>

I want the icon to be inside the circle and aligned to the center.

Answer 1

You can try something like this:

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%;
}

Demo