UCLA Component Library

Denotive Icons SVG: Forward Arrow 

<!-- Forward Arrow Black -->
<svg width="48px" height="48px" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <title>Arrow Forward</title>
    <g id="Icon/arrow-forward-white-Copy" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <path d="M36.6639676,12 L48,24 L36.6639676,36 L34,33.18 L40.768,26 L0,26 L0,22 L40.768,22 L34,14.82 L36.6639676,12 Z" id="Combined-Shape" fill="#000000"></path>
    </g>
</svg>

<div style="background: #2774AE; display: inline-block;">
    <!-- Forward Arrow White -->
    <svg width="48px" height="48px" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <title>Arrow Forward</title>
        <g id="Icon/arrow-forward-white-Copy" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
            <path d="M36.6639676,12 L48,24 L36.6639676,36 L34,33.18 L40.768,26 L0,26 L0,22 L40.768,22 L34,14.82 L36.6639676,12 Z" id="Combined-Shape" fill="#FFFFFF"></path>
        </g>
    </svg>
</div>

<!-- Forward Arrow Blue -->
<svg width="48px" height="48px" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <title>Arrow Forward</title>
    <g id="Icon/arrow-forward-white-Copy" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <path d="M36.6639676,12 L48,24 L36.6639676,36 L34,33.18 L40.768,26 L0,26 L0,22 L40.768,22 L34,14.82 L36.6639676,12 Z" id="Combined-Shape" fill="#00598C"></path>
    </g>
</svg>