実装手順

1.公式サイトからダウンロードする

useAnimations
ここには、ハンバーガーメニューやSNSアイコンなど、
あらゆるアイコンが無料で使用できます。

気になるアイコンにマウスオーバーすると、
Downloadボタンが出てきますので、それをクリックしてください。

2.ダウンロードしたzipから必要なファイルを抜き取る

zipの中には、

svg
json

の2種類が入っています。
静止しているアイコンが欲しい場合は、
svgをimgタグに普通に設置してください。

hoverやclickで動くようにするには、
svgは使わず、
jsonの方を使用します。

3.その他に必要なファイルを用意する

javaScriptで必要なもの

jQuery
公式は、jquery-3.3.1.min.jsを使用しています。
lottie-player.js
これ、どこから落としてくるのか分からなかったのですが、
公式のjavaScriptを調べると、URLがこれになっていました。
https://d33wubrfki0l68.cloudfront.net/js/6b61e0a7f8d311b0d8e7594ed9df369497d4dc9d/js/lottie-player.js
ダウンロードし、自分のサーバーに入れて使用されるのが良いかと思います。
（正規ルートからダウンロードする方法があれば、
　教えていただけると有難いです。）

4.実装する

Social media Instagram Facebookアイコン
Navigation Menu V3（ハンバーガーメニュー）

の実装例です。

html

アイコンを入れたいタグの直ぐ上の親に、
クラス（anim-〇〇）を設定してください。

<!--インスタグラム、facebookアイコン（hover時）-->
<ul>
  <li class="sociallink"><a class="anim-icon-instagram" href="インスタグラムへのリンク" target="_blank" rel=”noopener”></a></li>
  <li class="sociallink"><a class="anim-icon-facebook" href="フェイスブックへのリンク" target="_blank" rel=”noopener”></a></li>
</ul>

<!--ハンバーガーメニュ（クリック時）ー-->
<button class='header-burger-btn anim-icon-menu-003'></button>

javaScriptライブラリ

body締めタグの直ぐ上に入れても動作します。

<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
<script src="js/lottie-player.js" type="text/javascript"></script>

CSS

/*アイコンの大きさ変えたい時に入れてください-----------------*/
.sociallink a {
    height: 29px;
    width: 29px;
    display: block;
}
.sociallink svg {
    /*どちらかを100%,autoにする*/
    height: 100%;
    width: auto;
}

/*アイコンの色を変えたい時に入れてください-----------------*/
.header-burger svg * {
    stroke: #fff;
}

javaScript

javaScriptライブラリの後に入れてください。

//=========================
//  svg animation
//=========================
//絶対パス取得
//サイトに実装する際、相対パスだとページによってURLが変わる場合があるので、トップページURLを入れる
var homeUrl = 'サイトのトップページURLを入れる';

$(window).on('load',function(){

    //facebook(on hover)
    var iconFacebook = this.document.querySelector('.anim-icon-facebook');
    var animationFacebook = bodymovin.loadAnimation({
        container: iconFacebook,
        renderer: 'svg',
        loop: true,
        autoplay: false,
        path: homeUrl + "js/svg-animation/facebook.json"
    });
    animationFacebook.setSpeed(1);

    var directionFacebook = 1;
        iconFacebook.addEventListener('mouseenter', (e) => {
        animationFacebook.setDirection(directionFacebook);
        animationFacebook.play();
    });
        iconFacebook.addEventListener('mouseleave', (e) => {
        animationFacebook.stop();
    });

    //instagram(on hover)
    var iconInstagram = document.querySelector('.anim-icon-instagram');
    var animationInstagram = bodymovin.loadAnimation({
        container: iconInstagram,
        renderer: 'svg',
        loop: false,
        autoplay: false,
        path: homeUrl +  "js/svg-animation/instagram.json"
    });
    animationInstagram.setSpeed(1);

    var directionInstagram = 1;
        iconInstagram.addEventListener('mouseenter', (e) => {
        animationInstagram.setDirection(directionInstagram);
        animationInstagram.play();
    });
        iconInstagram.addEventListener('mouseleave', (e) => {
        animationInstagram.setDirection(-directionInstagram);
        animationInstagram.play();
    });

    //hamberger-button
    var icon6 = document.querySelector('.anim-icon-menu-003');
    var animation6 = bodymovin.loadAnimation({
                    container: icon6,
                    renderer: 'svg',
                    loop: false,
                    autoplay: false,
                    path: homeUrl +  "js/svg-animation/menu-003.json"
    });
    animation6.setSpeed(1);

    var direction6 = 1;
        icon6.addEventListener('click', (e) => {
        animation6.setDirection(direction6);
        animation6.play();
        direction6 = -direction6;
    });

});

補足

1ページで複数箇所に設置したい場合

1ページに表示する数の分、javaScriptの記述も増やす必要があります。
例えば、facebookアイコンを2つ表示させたい場合は
以下のようにします。

    //1つ目の記述
    //上と同じ内容です
    //facebook(on hover)
    var iconFacebook = this.document.querySelector('.anim-icon-facebook');
    var animationFacebook = bodymovin.loadAnimation({
        container: iconFacebook,
        renderer: 'svg',
        loop: true,
        autoplay: false,
        path: homeUrl + "js/svg-animation/facebook.json"
    });
    animationFacebook.setSpeed(1);

    var directionFacebook = 1;
        iconFacebook.addEventListener('mouseenter', (e) => {
        animationFacebook.setDirection(directionFacebook);
        animationFacebook.play();
    });
        iconFacebook.addEventListener('mouseleave', (e) => {
        animationFacebook.stop();
    });

    //2つ目の記述
    //1つ目の記述と関数・クラスが被らないように名前を変更してください。
    //facebook(on hover) footer
    var iconFacebook2 = this.document.querySelector('.anim-icon-facebook--footer');
    var animationFacebook2 = bodymovin.loadAnimation({
        container: iconFacebook2,
        renderer: 'svg',
        loop: true,
        autoplay: false,
        path: homeUrl + "js/svg-animation/facebook.json"
    });
    animationFacebook2.setSpeed(1);

    var directionFacebook2 = 1;
        iconFacebook2.addEventListener('mouseenter', (e) => {
        animationFacebook2.setDirection(directionFacebook2);
        animationFacebook2.play();
    });
        iconFacebook2.addEventListener('mouseleave', (e) => {
        animationFacebook2.stop();
    });

上記以外の「useAnimations」アイコンを使いたい場合

上では、Instagram、Facebook、ハンバーガーメニューの実装方法をご紹介しました。
これ以外のアイコンを実装したい場合、
javaScriptの部分を、
公式の以下のファイルから、該当部分をコピペし、改造してください。
https://d33wubrfki0l68.cloudfront.net/js/e09b5e0935c0a09877e0cea70a5360d1dd4ce169/js/lottie-settings.js

IE11では動作しないよ

IE11では、

-- addEventListener('mouseenter', (e)

-- addEventListener('mouseleave', (e)

-- addEventListener('click', (e)

でエラーが出て、アイコンそのものが消えました!!!
ほんとやめてくれ。。。。

回避策として、
IE11では、静止SVGを入れるように条件分岐する方が早いと思います。。
回避策は、
IE11でエラーが出るjavaScriptを条件分岐で読み込まなくする方法
をご参照ください！

svgアイコンが動く「useAnimations」の実装方法