<div class="menu icon"></div>

/* get the styles for both icon*/
@import "https://cssicon.space/css/icons.css";
.icon{
  cursor:pointer;
  width:50px;
  height:50px;
}
.icon, .icon:before, .icon:after, .icon i, .icon i:before, .icon i:after { 
  transition: all 0.4s ease;
}
/* this is merely a rough demo to showcase the potential of CSS ICON on animation, more crafted animation can go from here */
$('.icon').click(function(){
  $(this)
    .toggleClass('menu')
    .toggleClass('close');
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js