JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
<div class="icons"></div>
<div class="icons"></div>
<div class="icons"></div>
<div class="icons"></div>
<div class="icons"></div>
<div class="icons"></div>
<div class="icons"></div>

<div class="gap"></div>
<div class="gap"></div>
</div>

CSS

.container
{
    text-align : justify ;
    font-size : 0 ;
    background-color : #C0C0C0 ;
    padding : 2% 2% 0
}

.container:after
{
  content : '' ;
  display : inline-block ;
  width : 100%
}

.icons
{
  display : inline-block ;
  text-align : center ;
  margin-bottom : 2% ; 
  width : 49% ;
  background-color : blue 
}

.icons:before
{
  content : '' ;
  display : inline-block ;
  padding-top : 60%
}

.gap
{
  display : inline-block ;
  width : 49%
}

@media screen and (min-width: 480px) {

.gap,
.icons
{
  width : 31%  
}  

}

@media screen and (min-width: 640px){
.icons,
.gap
{
 width: 23.5%;
}
  }