how to put img inside circle in html and css?

Issue

Image should be inside the circle and circle should have white background.

and Image size should be less than the circle and in center.

I try this:

.icon i {
  color: #fff;
  width: 40px;
  height: 40px;
  border-radius: 20px;
  font-size: 25px;
  text-align: center;
  margin-right: 10px;
  padding-top: 15%;
}

<li><a href="#"><i class="icon" style="background: red;"> <img src="http://www.pngdot.com/wp-content/uploads/2015/11/Free_Arrow_Png_01.png"  style="width:50px;height:45px;"></i></a></li>

Solution

If I understand you correctly can use border-radius for the circle.

body {
  background:#000;  
}

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

i {
  background: white;
  border-radius: 20px;
  font-size: 25px;
  text-align: center;
  margin-right: 10px;
  border-radius:50%;
  display:inline-block;
  padding:10px;
}

img {
  display:block;
}

<i><img src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/410.svg" width="30" /></i>

Answered By - Mosh Feu