Segue uma alternativa.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

    div {
      clear: both;
    }

    .icon {
      position: absolute;
      top: 0px;
      left: 0px;  
      height: 32px;
      width: 32px;
      background-repeat: no-repeat;
      background-size: calc(100% - 4px);
      background-position: center;
    }

    .social {
      position: relative;
      float: left;
      width: 32px;
      padding-left: 32px;
      box-sizing: border-box;
      overflow: hidden;  
      line-height: 32px;
      border-radius: 5px;
      box-shadow: 0px 0px 5px black;
      white-space: nowrap;
      transition: width 0.5s linear;
      margin: 3px 0px;
    }

    .social:hover {
      width: 150px;
    }

    .icon-whatsapp {
      background-image: url('https://image.flaticon.com/icons/svg/220/220236.svg');
    }

    .icon-skype {
      background-image: url('https://image.flaticon.com/icons/svg/220/220235.svg');
    }

    .icon-tweet {
      background-image: url('https://image.flaticon.com/icons/svg/220/220233.svg');
    }

    .icon-facebook {
      background-image: url('https://image.flaticon.com/icons/svg/220/220200.svg');
    }




<!-- language: lang-html -->

    <div class="social">
      <div class="icon icon-whatsapp"></div>
      (99)99999-9999
    </div>
    <div class="social">
      <div class="icon icon-skype"></div>
      (99)99999-9999
    </div>
    <div class="social">
      <div class="icon icon-facebook"></div>
      (99)99999-9999
    </div>
    <div class="social">
      <div class="icon icon-tweet"></div>
      (99)99999-9999
    </div>

<!-- end snippet -->