<div style="display: none">
  <svg xmlns="http://www.w3.org/2000/svg"><defs><clipPath id="a"><path d="M0 31.92h31.92V0H0z"></path></clipPath><clipPath id="a"><path d="M0 48h48V0H0z"></path></clipPath></defs><symbol id="icon-contrast"><g clip-path="url(#a)" transform="matrix(1.33333 0 0 -1.33333 0 42.56)"><path d="M15.96 31.92C7.146 31.92 0 24.775 0 15.96 0 7.147 7.146 0 15.96 0s15.96 7.147 15.96 15.96c0 8.815-7.146 15.96-15.96 15.96m0-4c6.595 0 11.96-5.365 11.96-11.96C27.92 9.365 22.555 4 15.96 4 9.365 4 4 9.365 4 15.96c0 6.595 5.365 11.96 11.96 11.96"></path><path d="M15.96 7.629a8.519 8.519 0 0 1 8.52 8.52 8.518 8.518 0 0 1-8.52 8.518"></path></g></symbol><symbol id="icon-crop"><g clip-path="url(#a)" transform="matrix(1.33333 0 0 -1.33333 0 64)"><path d="M14 14v32h-4v-8H2v-4h8V14c0-2.21 1.79-4 4-4h20V2h4v8h8v4zm20 4h4v16c0 2.21-1.79 4-4 4H18v-4h16z"></path></g></symbol><symbol id="icon-fill"><path d="M50.667 30.667S45.333 36.44 45.333 40a5.332 5.332 0 0 0 5.334 5.333A5.332 5.332 0 0 0 56 40c0-3.56-5.333-9.333-5.333-9.333m-36.787-4l12.787-12.774 12.786 12.774zm30.28-2.827L20.32 0l-3.773 3.773 6.346 6.347-13.72 13.72a4 4 0 0 0 0 5.653L23.84 44.16a3.944 3.944 0 0 0 2.827 1.173 3.944 3.944 0 0 0 2.826-1.173L44.16 29.493a4 4 0 0 0 0-5.653M64 57.333H0v-4h64z"></path></symbol></svg>
</div>

<ul class="upload__filters-wrapper">
  <li class="upload__input-image upload__input-image--crop">
    <a href="javascript://0">
              <svg width="44" height="44" viewBox="0 0 58.67 58.67" class="upload__input-icon upload__input-icon--active">
                <use xlink:href="#icon-crop"></use>
              </svg>
            </a>
  </li>
  <li class="upload__input-image upload__input-image-fill">
    <a href="javascript://0">
              <svg width="48" height="43" viewBox="0 0 64 57.33" class="upload__input-icon">
                <use xlink:href="#icon-fill"></use>
              </svg>
            </a>
  </li>
  <li class="upload__input-image upload__input-image--contrast">
    <a href="javascript://0">
              <svg width="32" height="32" viewBox="0 0 42.56 42.56" class="upload__input-icon">
                <use xlink:href="#icon-contrast"></use>
              </svg>
            </a>
  </li>
</ul>
$main-blue: #283645;
$link-color: #d22856;

.upload__filters-wrapper {
  max-width: 280px;
  margin: 0 auto;
  display: flex;
  position: relative;
  justify-content: space-between;
  align-items: center;
  padding: 0 30px;
  list-style: none;
}
.upload__input-icon {
  fill: rgba($main-blue, 0.3);
  &--active {
    fill: $link-color;
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.