<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

$colors: #F44336 #E91E63 #9C27B0 #673AB7 #3F51B5 #2196F3 #03A9F4 #00BCD4 #009688 #4CAF50 #8BC34A #CDDC39 #FFEB3B #FFC107 #FF9800 #FF5722 #795548 #9E9E9E #607D8B #f36;

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --bg: url(//www.w3cplus.com/sites/default/files/blogs/2019/1905/icon-bell-black.svg);
}

body {
  width: 100vw;
  height: 100vh;
  padding: 2vw;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(calc((100vw - 10vw) / 10), 1fr));
  gap: 1vw;
  place-items: center;
}

div{
  height: 0;
  padding-top: 100%;
  width: 100%;
  
  &:nth-child(1) {
    background: var(--bg) no-repeat center;
    background-size: cover;
  }
  
  @for $i from 1 through length($colors) {
    &:nth-of-type(#{$i + 1}){
      mask: var(--bg) no-repeat center;
      mask-size: cover;
      background-color: nth($colors, $i);
      
      &:not(:nth-last-of-type(#{$i})) {
        background: linear-gradient(to right, nth($colors, $i), nth($colors, length($colors) - $i + 1));
      }
      
    }
  }
  
  &:not(:first-child):hover {
    background: orange;
    cursor: pointer;
  }
}