Problema com imagens de redes sociais

Meu código repete três vezes os icones de redes sociais no meu de navegação, estou tendo um pouco de dificuldade em identificar o por quê.

<aside class="menu-navegacao">
  <h1>Mateus Ramos</h1>
               <nav>
               <ul>
                   <li><a href="index.html">Home</a></li>
                   <li><a href= "porfolio.html">Portfólio</a></li>
                   <li><a href= "bio.html">Sobre Mim</a></li>
                   <li><a href="blog.html">Blog</a></li>
                   <li><a href="contato.html">Contato</a></li>
                   </ul>
               </nav>
               <ul class= "icones">
                 <li><a class= "github" href="http://github.com">Git</li>
                   <li><a class= "twitter" href="http://twitter.com">Twitter</li>
                     <li><a class= "linkedin" href= "https://br.linkedin.com/pub/linkedin-joao-da-silva/32/4/508" alt="Linkedin">linkedin</li>
               </ul>
      </aside>
      <footer> &copy; João da Siva

</footer>
  </body>
</html>

Css

}
.icones a {
  width: 40px;
  height: 40px;
  display: inline-block;
  text-indent: -99999px;
}
.twitter{
  background-image: url(twitter.png);
}
.github{
  background-image: url(github.png);
}
.linkedin{
  background-image: url(linkedin.png);
}