Show/Hide Content with multiple checkboxes

I need to hide a SVG graphic and display an icon. The event must be handled by an invisible checkbox. The issue is that all checkboxes gets selected when the onchange event is fired, so all icons shows up and all inputs gets selected.

Any idea how to set the event handler individually for each input[type="checkbox"]?

var $checkbox = $('.form-control'),
  $iconCheck = $('.check-circle'),
  $imgSVG = $('.img');

  $($checkbox).on('change', function() {
    if ($(this).is(':checked')) {
      $iconCheck.removeClass('d-none');
      $imgSVG.addClass('d-none');
    } else {
      $iconCheck.addClass('d-none');
      $imgSVG.removeClass('d-none');
    }
  });

img {
  display: block;
  width: 40px;
  height: 40px;
}
.d-none {
  display: none;
}

<script src="http://ift.tt/1oMJErh"></script>
<div class="card">
  <figure>
    <img class="img" src="http://ift.tt/2AtiPqw" alt="">
    <i class="check-circle d-none">CHECKED!</i>
  </figure>
  <label for="checkboxTerror">Terror</label>
  <input id="checkboxTerror" type="checkbox" class="form-control">
</div>


<div class="card">
  <figure>
    <img class="img" src="http://ift.tt/2ydyS5M" alt="">
    <i class="check-circle d-none">CHECKED!</i>
  </figure>
  <label for="checkboxTerror">Comedy</label>
  <input id="checkboxTerror" type="checkbox" class="form-control">
</div>

CURRENT EXAMPLE