Denotive Icons SVG: Forward Arrow

<!-- Forward Arrow Black -->
<svg width="48px" height="48px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
    <title>Arrow Forward</title>
    <style type="text/css">
        .arrow-forward--black {
            fill-rule: evenodd;
            clip-rule: evenodd;
            fill: #000000;
        }
    </style>
    <g>
        <path class="arrow-forward--black" d="M18.3,6l5.7,6l-5.7,6L17,16.6l3.4-3.6H0v-2h20.4L17,7.4L18.3,6z" />
    </g>
</svg>

<div style="background: #2774AE; display: inline-block;">
    <!-- Forward Arrow White -->
    <svg width="48px" height="48px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
        <title>Arrow Forward</title>
        <style type="text/css">
            .arrow-forward--white {
                fill-rule: evenodd;
                clip-rule: evenodd;
                fill: #FFFFFF;
            }
        </style>
        <g>
            <path class="arrow-forward--white" d="M18.3,6l5.7,6l-5.7,6L17,16.6l3.4-3.6H0v-2h20.4L17,7.4L18.3,6z" />
        </g>
    </svg>
</div>

<!-- Forward Arrow Blue -->
<svg width="48px" height="48px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
    <title>Arrow Forward</title>
    <style type="text/css">
        .arrow-forward--blue {
            fill-rule: evenodd;
            clip-rule: evenodd;
            fill: #00598C;
        }
    </style>
    <g>
        <path class="arrow-forward--blue" d="M18.3,6l5.7,6l-5.7,6L17,16.6l3.4-3.6H0v-2h20.4L17,7.4L18.3,6z" />
    </g>
</svg>