How can I replicate this tick mark on the thumbnail for an ecommerce website? Specifically, the tick on the top right

Question

[

What's happening here is that when I click on a particular thumbnail, the tick appears on it. It's basically a label for an input field. How can i replicate something like this? What I need is when I click on a particular shoe thumbnail, a tick appears on its top right indicating it's selected.

I pulled the HTML markup from the source. An SVG is being used here but I need to use it as a label for an input field. This is what the HTML looks like:

<div class="variation">
  <div class="tick_icon">
    <svg class="gl-icon">
      <use xlink:href="#checkmark">
       <symbol id="checkmark" viewBox="0 0 19 19">
         <path fill="none" stroke="currentColor" stroke-linecap="square" stroke-miterlimit="10" d="M2.5 10.5l4 4 10-10">
         </path>
       </symbol>
      </use>
    </svg>
  </div>
  <div class="image_holder" style="background-image: url('url_here.com');">
  </div>
</div>

The CSS for the same is here:

.variation{
 max-width: 70px;
 margin: 0 10px 10px 0;
 display: block;
 position: relative;
 height: 70px;
}
.tick_icon{
 border-radius: 50%;
 background-color: #000;
 position: absolute;
 right: 0;
 width: 24px;
 height: 24px;
 display: flex;
 align-items: center;
 justify-content: center;
}
.gl_icon{
 height: 19px;
 width: 19px;
 display: inline-block;
 color: #fff;
}

My own code (simplified) is set up like this:

<input>
 <label style="border;1px solid black;border-radius:50%">
  <i style="background-image:url('image-url-here');border-radius:50%"></i>
 </label>

So, essentially, I need to switch my label CSS to make it look like a tick.
This is what my output looks like:

Answer 1

.wrapper ul li {
  display: inline-block;
  width: 50px;
  height: 50px;
  position: relative;
  background: #ccc;
  margin: auto 5px;
  border-radius: 50%;
}

.wrapper ul li span img {
  width: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.wrapper span i {
  font-size: 16px;
  position: absolute;
  right: 0;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="wrapper">
  <ul>
    <li>
      <span>
                  <i class="fa fa-check-circle"></i>
                </span>
      <span>
                    <img src="https://img.favpng.com/9/17/9/blue-symbol-sphere-logo-png-favpng-ZucUN8smxTCWFbeFNrT4JybTT.jpg">
                </span>
    </li>
    <li>
      <span>
                   <i class="fa fa-check-circle"></i>
                </span>
      <span>
                    <img src="https://img.favpng.com/9/17/9/blue-symbol-sphere-logo-png-favpng-ZucUN8smxTCWFbeFNrT4JybTT.jpg">
                </span>
    </li>
  </ul>
</div>

Hello, check if you have any luck with this but from the next time provide your snippet as well so everyone will be more helpful...