jQuery or javascript to determine if a list contains more than four elements

I want to use jQuery to determine if a list contains more than four elements. If there are more than four i want to add a "show-more" button. A click on said button should present the additional elements to the user.

Can anyone give me an idea how to solve this?

HTML structure:

<ul class="icons">
    <li class="icon"><a href="link01"><img src="img01" /></a></li>
    <li class="icon"><a href="link02"><img src="img02" /></a></li>
    <li class="icon"><a href="link03"><img src="img03" /></a></li>
    <li class="icon"><a href="link04"><img src="img04" /></a></li>
    <li class="icon"><a href="link05"><img src="img05" /></a></li>
    <li class="icon"><a href="link06"><img src="img06" /></a></li>
    <li class="icon"><a href="link07"><img src="img07" /></a></li>
    <li class="icon"><a href="link08"><img src="img08" /></a></li>
</ul>

tried jq:

$(".icons li").each( function (index) {
  index += 1;
  if(index > 3 ) {
    $(this).addClass("hide");
    $(this).append($('div',{
      class: 'blue',
      html: 'test'
    }))
  }
 });