how to put img inside circle in html and css?

Question

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>

Answer 1

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>

Answer 2

You can do this:

CSS

body{
  background: #f1f1f1;
}

figure{
    display:block;
    width:50px;
    height: 50px;
    border-radius: 50px;
    font-size: 25px;
    text-align: center;
    margin-right: 10px;
    background: #fff;
    line-height: 1.7em;
}

figure img{
   display:inline-block;
   width: 30px;
   height: auto;
}

HTML

<li>
  <a href="#">
    <figure>
      <img src="http://www.pngdot.com/wp-content/uploads/2015/11/Free_Arrow_Png_01.png" alt="image">
    </figure>
  </a>
</li>

DEMO HERE