UCLA Component Library

Denotive Icons SVG 

<!-- Default -->
<!-- PLEASE NOTE: Background styling with or without divs are added to better depict white icons. -->
<!-- 1. Extra styling with or without divs are added to better depict white icons -->
<!-- 2. SGV Icons: Extra div with background and display styling IS NOT REQUIRED for usage -->
<!-- 3. IMG Icons: Extra styling attribute IS NOT required for usage -->


<!-- Clear -->
<!-- Clear Grey-60-->
<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 48 48" style="enable-background:new 0 0 48 48;" xml:space="preserve">
    <title>Clear</title>
    <style type="text/css">
        .clear--grey60 {
            fill: #666666;
        }
    </style>
    <path class="clear--grey60" d="M24,4c11,0,20,9,20,20s-9,20-20,20S4,35,4,24S13,4,24,4z M31.1,14.1L24,21.2l-7.1-7.1l-2.8,2.8l7.1,7.1
	l-7.1,7.1l2.8,2.8l7.1-7.1l7.1,7.1l2.8-2.8L26.8,24l7.1-7.1L31.1,14.1L31.1,14.1z" />
</svg>

<!-- Clear 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 48 48" style="enable-background:new 0 0 48 48;" xml:space="preserve">
    <title>Clear</title>
    <style type="text/css">
        .clear--black {
            fill: #000;
        }
    </style>
    <path class="clear--black" d="M24,4c11,0,20,9,20,20s-9,20-20,20S4,35,4,24S13,4,24,4z M31.1,14.1L24,21.2l-7.1-7.1l-2.8,2.8l7.1,7.1
	l-7.1,7.1l2.8,2.8l7.1-7.1l7.1,7.1l2.8-2.8L26.8,24l7.1-7.1L31.1,14.1L31.1,14.1z" />
</svg>

<div style="background: #2774AE; display: inline-block;">
    <!-- Clear 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 48 48" style="enable-background:new 0 0 48 48;" xml:space="preserve">
        <title>Clear</title>
        <style type="text/css">
            .clear--white {
                fill: #fff;
            }
        </style>
        <path class="clear--white" d="M24,4c11,0,20,9,20,20s-9,20-20,20S4,35,4,24S13,4,24,4z M31.1,14.1L24,21.2l-7.1-7.1l-2.8,2.8l7.1,7.1
  	l-7.1,7.1l2.8,2.8l7.1-7.1l7.1,7.1l2.8-2.8L26.8,24l7.1-7.1L31.1,14.1L31.1,14.1z" />
    </svg>
</div>


<!-- Close -->
<!-- Close Icon 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 48 48" style="enable-background:new 0 0 48 48;" xml:space="preserve">
    <title>Close</title>
    <style type="text/css">
        .close--black {
            fill-rule: evenodd;
            clip-rule: evenodd;
        }
    </style>
    <path class="close--black" d="M38,12.8L35.2,10L24,21.2L12.8,10L10,12.8L21.2,24L10,35.2l2.8,2.8L24,26.8L35.2,38l2.8-2.8L26.8,24L38,12.8z" />
</svg>

<!-- Close Icon White -->
<div style="background: #2774AE; display: inline-block;">
    <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 48 48" style="enable-background:new 0 0 48 48;" xml:space="preserve">
        <title>Close</title>
        <style type="text/css">
            .close--white {
                fill-rule: evenodd;
                clip-rule: evenodd;
                fill: #FFFFFF;
            }
        </style>
        <path class="close--white" d="M38,12.8L35.2,10L24,21.2L12.8,10L10,12.8L21.2,24L10,35.2l2.8,2.8L24,26.8L35.2,38l2.8-2.8L26.8,24L38,12.8z" />
    </svg>
</div>

<!-- Close Icon 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 48 48" style="enable-background:new 0 0 48 48;" xml:space="preserve">
    <title>Close</title>
    <style type="text/css">
        .close--blue {
            fill-rule: evenodd;
            clip-rule: evenodd;
            fill: #00598C;
        }
    </style>
    <path class="close--blue" d="M38,12.8L35.2,10L24,21.2L12.8,10L10,12.8L21.2,24L10,35.2l2.8,2.8L24,26.8L35.2,38l2.8-2.8L26.8,24L38,12.8z" />
</svg>


<!-- Down Arrow -->
<!-- Down 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 48 48" style="enable-background:new 0 0 48 48;" xml:space="preserve">
    <title>Arrow Down</title>
    <style type="text/css">
        .down-arrow--black {
            fill-rule: evenodd;
            clip-rule: evenodd;
            fill: #000;
        }
    </style>
    <path class="down-arrow--black" d="M14.8,17.2l9.2,9.2l9.2-9.2L36,20L24,32L12,20L14.8,17.2z" />
</svg>

<!-- Down Arrow White -->
<div style="background: #2774AE; display: inline-block;">
    <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 48 48" style="enable-background:new 0 0 48 48;" xml:space="preserve">
        <title>Arrow Down</title>
        <style type="text/css">
            .down-arrow--white {
                fill-rule: evenodd;
                clip-rule: evenodd;
                fill: #FFFFFF;
            }
        </style>
        <path class="down-arrow--white" d="M14.8,17.2l9.2,9.2l9.2-9.2L36,20L24,32L12,20L14.8,17.2z" />
    </svg>
</div>

<!-- Down 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 48 48" style="enable-background:new 0 0 48 48;" xml:space="preserve">
    <title>Arrow Down</title>
    <style type="text/css">
        .down-arrow--blue {
            fill-rule: evenodd;
            clip-rule: evenodd;
            fill: #00598C;
        }
    </style>
    <path class="down-arrow--blue" d="M14.8,17.2l9.2,9.2l9.2-9.2L36,20L24,32L12,20L14.8,17.2z" />
</svg>


<!-- Download -->
<!-- Download 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 48 48" style="enable-background:new 0 0 48 48;" xml:space="preserve">
    <title>Download</title>
    <style type="text/css">
        .download--black {
            fill-rule: evenodd;
            clip-rule: evenodd;
            fill: #000;
        }
    </style>
    <path class="download--black" d="M24,4c11,0,20,9,20,20s-9,20-20,20S4,35,4,24S13,4,24,4z M24,7C14.6,7,7,14.6,7,24s7.6,17,17,17s17-7.6,17-17
	S33.4,7,24,7z M25.7,10.7V31l9.3-9.3l2.3,2.4L24,37.3L10.7,24l2.4-2.4l9.3,9.3V10.7H25.7z" />
</svg>

<div style="background: #2774AE; display: inline-block;">
    <!-- Download 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 48 48" style="enable-background:new 0 0 48 48;" xml:space="preserve">
        <title>Download</title>
        <style type="text/css">
            .download--white {
                fill-rule: evenodd;
                clip-rule: evenodd;
                fill: #fff;
            }
        </style>
        <path class="download--white" d="M24,4c11,0,20,9,20,20s-9,20-20,20S4,35,4,24S13,4,24,4z M24,7C14.6,7,7,14.6,7,24s7.6,17,17,17s17-7.6,17-17
  	S33.4,7,24,7z M25.7,10.7V31l9.3-9.3l2.3,2.4L24,37.3L10.7,24l2.4-2.4l9.3,9.3V10.7H25.7z" />
    </svg>
</div>

<!-- Download 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 48 48" style="enable-background:new 0 0 48 48;" xml:space="preserve">
    <title>Download</title>
    <style type="text/css">
        .download--blue {
            fill-rule: evenodd;
            clip-rule: evenodd;
            fill: #00598C;
        }
    </style>
    <path class="download--blue" d="M24,4c11,0,20,9,20,20s-9,20-20,20S4,35,4,24S13,4,24,4z M24,7C14.6,7,7,14.6,7,24s7.6,17,17,17s17-7.6,17-17
	S33.4,7,24,7z M25.7,10.7V31l9.3-9.3l2.3,2.4L24,37.3L10.7,24l2.4-2.4l9.3,9.3V10.7H25.7z" />
</svg>


<!-- External Link -->
<!-- External Link 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 48 48" style="enable-background:new 0 0 48 48;" xml:space="preserve">
    <title>External Link</title>
    <style type="text/css">
        .external-link--black {
            fill-rule: evenodd;
            clip-rule: evenodd;
            fill: #000000;
        }
    </style>
    <g>
        <path class="external-link--black" d="M35.7,39H9V12.3h15v-5H9c-2.7,0-5,2.3-5,5V39c0,2.7,2.3,5,5,5h26.7c2.7,0,5-2.3,5-5V24h-5V39z M26.7,4v5h9
  		l-22,22l3.7,3.7l22-22v9H44V4H26.7z" />
    </g>
</svg>

<div style="background: #2774AE; display: inline-block;">
    <!-- External Link 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 48 48" style="enable-background:new 0 0 48 48;" xml:space="preserve">
        <title>External Link</title>
        <style type="text/css">
            .external-link--white {
                fill-rule: evenodd;
                clip-rule: evenodd;
                fill: #ffffff;
            }
        </style>
        <g>
            <path class="external-link--white" d="M35.7,39H9V12.3h15v-5H9c-2.7,0-5,2.3-5,5V39c0,2.7,2.3,5,5,5h26.7c2.7,0,5-2.3,5-5V24h-5V39z M26.7,4v5h9
    		l-22,22l3.7,3.7l22-22v9H44V4H26.7z" />
        </g>
    </svg>
</div>

<!-- External Link Default 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 48 48" style="enable-background:new 0 0 48 48;" xml:space="preserve">
    <title>External Link</title>
    <style type="text/css">
        .external-link--defualtblue {
            fill-rule: evenodd;
            clip-rule: evenodd;
            fill: #00598C;
        }
    </style>
    <g>
        <path class="external-link--defualtblue" d="M35.7,39H9V12.3h15v-5H9c-2.7,0-5,2.3-5,5V39c0,2.7,2.3,5,5,5h26.7c2.7,0,5-2.3,5-5V24h-5V39z M26.7,4v5h9
  		l-22,22l3.7,3.7l22-22v9H44V4H26.7z" />
    </g>
</svg>

<!-- External Active 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 48 48" style="enable-background:new 0 0 48 48;" xml:space="preserve">
    <title>External Link</title>
    <style type="text/css">
        .external-link--activeblue {
            fill-rule: evenodd;
            clip-rule: evenodd;
            fill: #003B5C;
        }
    </style>
    <g>
        <path class="external-link--activeblue" d="M35.7,39H9V12.3h15v-5H9c-2.7,0-5,2.3-5,5V39c0,2.7,2.3,5,5,5h26.7c2.7,0,5-2.3,5-5V24h-5V39z M26.7,4v5h9
  		l-22,22l3.7,3.7l22-22v9H44V4H26.7z" />
    </g>
</svg>

<!-- External Disabeled Grey -->
<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 48 48" style="enable-background:new 0 0 48 48;" xml:space="preserve">
    <title>External Link</title>
    <style type="text/css">
        .external-link--disabeledgrey {
            fill-rule: evenodd;
            clip-rule: evenodd;
            fill: #757575;
        }
    </style>
    <g>
        <path class="external-link--disabeledgrey" d="M35.7,39H9V12.3h15v-5H9c-2.7,0-5,2.3-5,5V39c0,2.7,2.3,5,5,5h26.7c2.7,0,5-2.3,5-5V24h-5V39z M26.7,4v5h9
  		l-22,22l3.7,3.7l22-22v9H44V4H26.7z" />
    </g>
</svg>


<!-- Form Submission -->
<!-- Error Red-->
<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 48 48" style="enable-background:new 0 0 48 48;" xml:space="preserve">
    <title>Error</title>
    <style type="text/css">
        .error--red {
            fill-rule: evenodd;
            clip-rule: evenodd;
            fill: #D60000;
        }
    </style>
    <g>
        <path class="error--red" d="M24,4C13,4,4,13,4,24s9,20,20,20s20-9,20-20S35,4,24,4z M26,34h-4v-4h4V34z M26,26h-4V14h4V26z" />
    </g>
</svg>

<!-- Success Green -->
<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 48 48" style="enable-background:new 0 0 48 48;" xml:space="preserve">
    <title>Success</title>
    <style type="text/css">
        .success--green {
            fill-rule: evenodd;
            clip-rule: evenodd;
            fill: #007339;
        }
    </style>
    <g>
        <g transform="translate(4.000000, 4.000000)">
            <path class="success--green" d="M20,0c11,0,20,9,20,20s-9,20-20,20S0,31,0,20S9,0,20,0z M28.4,12.1L18.2,22.2l-4.6-4.6
      	c-0.2-0.2-0.4-0.2-0.6,0l-2.9,2.9c-0.2,0.2-0.2,0.4,0,0.6L18,29c0.1,0.1,0.2,0.1,0.3,0.1c0.1,0,0.2,0,0.3-0.1l13.3-13.3
      	c0.2-0.2,0.2-0.4,0-0.6L29,12.1C28.8,12,28.5,12,28.4,12.1z" />
        </g>
    </g>
</svg>

<!-- Warning Orange -->
<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 48 48" style="enable-background:new 0 0 48 48;" xml:space="preserve">
    <title>Warning</title>
    <style type="text/css">
        .warning--orange {
            fill-rule: evenodd;
            clip-rule: evenodd;
            fill: #F57F17;
        }
    </style>
    <g>
        <path class="warning--orange" d="M24,0l22,38H2L24,0z M26,28h-4v4h4V28z M26,16h-4v8h4V16z" />
    </g>
</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>


<!-- Left Arrow -->
<!-- Left 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 Left</title>
    <style type="text/css">
        .arrow-left--black {
            fill-rule: evenodd;
            clip-rule: evenodd;
            fill: #000000;
        }
    </style>
    <g>
        <polygon class="arrow-left--black" points="16,16.6 11.4,12 16,7.4 14.6,6 8.6,12 14.6,18 	" />
    </g>
</svg>

<div style="background: #2774AE; display: inline-block;">
    <!-- Left 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 Left</title>
        <style type="text/css">
            .arrow-left--white {
                fill-rule: evenodd;
                clip-rule: evenodd;
                fill: #FFFFFF;
            }
        </style>
        <g>
            <polygon class="arrow-left--white" points="16,16.6 11.4,12 16,7.4 14.6,6 8.6,12 14.6,18 	" />
        </g>
    </svg>
</div>

<!-- Left 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 Left</title>
    <style type="text/css">
        .arrow-left--blue {
            fill-rule: evenodd;
            clip-rule: evenodd;
            fill: #003B5C;
        }
    </style>
    <g>
        <polygon class="arrow-left--blue" points="16,16.6 11.4,12 16,7.4 14.6,6 8.6,12 14.6,18 	" />
    </g>
</svg>


<!-- Location -->
<!-- Location Grey60-->
<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>Location</title>
    <style type="text/css">
        .location--grey {
            fill: #666666;
        }
    </style>
    <g>
        <path class="location--grey" d="M12,2C8.1,2,5,5.1,5,9c0,5.2,7,13,7,13s7-7.8,7-13C19,5.1,15.9,2,12,2z M12,11.5
  		c-1.4,0-2.5-1.1-2.5-2.5s1.1-2.5,2.5-2.5s2.5,1.1,2.5,2.5S13.4,11.5,12,11.5z" />
    </g>
</svg>

<!-- Location 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>Location</title>
    <style type="text/css">
        .location--black {
            fill: #000;
        }
    </style>
    <g>
        <path class="location--black" d="M12,2C8.1,2,5,5.1,5,9c0,5.2,7,13,7,13s7-7.8,7-13C19,5.1,15.9,2,12,2z M12,11.5
  		c-1.4,0-2.5-1.1-2.5-2.5s1.1-2.5,2.5-2.5s2.5,1.1,2.5,2.5S13.4,11.5,12,11.5z" />
    </g>
</svg>

<div style="background: #2774AE; display: inline-block;">
    <!-- Location 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>Location</title>
        <style type="text/css">
            .location--white {
                fill: #FFFFFF;
            }
        </style>
        <g>
            <path class="location--white" d="M12,2C8.1,2,5,5.1,5,9c0,5.2,7,13,7,13s7-7.8,7-13C19,5.1,15.9,2,12,2z M12,11.5
    		c-1.4,0-2.5-1.1-2.5-2.5s1.1-2.5,2.5-2.5s2.5,1.1,2.5,2.5S13.4,11.5,12,11.5z" />
        </g>
    </svg>
</div>

<!-- Location 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>Location</title>
    <style type="text/css">
        .location--blue {
            fill: #2774AE;
        }
    </style>
    <g>
        <path class="location--blue" d="M12,2C8.1,2,5,5.1,5,9c0,5.2,7,13,7,13s7-7.8,7-13C19,5.1,15.9,2,12,2z M12,11.5
		c-1.4,0-2.5-1.1-2.5-2.5s1.1-2.5,2.5-2.5s2.5,1.1,2.5,2.5S13.4,11.5,12,11.5z" />
    </g>
</svg>


<!-- Menu -->
<!-- Menu 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>Menu</title>
    <style type="text/css">
        .menu--black {
            fill-rule: evenodd;
            clip-rule: evenodd;
            fill: #000000;
        }
    </style>
    <g>
        <g>
            <path class="menu--black" d="M4,18h16v-2H4V18z M4,13h16v-2H4V13z M4,6v2h16V6H4z" />
        </g>
    </g>
</svg>

<div style="background: #2774AE; display: inline-block;">
    <!-- Menu 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>Menu</title>
        <style type="text/css">
            .menu--white {
                fill-rule: evenodd;
                clip-rule: evenodd;
                fill: #FFFFFF;
            }
        </style>
        <g>
            <g>
                <path class="menu--white" d="M4,18h16v-2H4V18z M4,13h16v-2H4V13z M4,6v2h16V6H4z" />
            </g>
        </g>
    </svg>
</div>

<!-- Menu 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>Menu</title>
    <style type="text/css">
        .menu--blue {
            fill-rule: evenodd;
            clip-rule: evenodd;
            fill: #2774AE;
        }
    </style>
    <g>
        <g>
            <path class="menu--blue" d="M4,18h16v-2H4V18z M4,13h16v-2H4V13z M4,6v2h16V6H4z" />
        </g>
    </g>
</svg>


<!-- New Window -->
<!-- External Link 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 48 48" style="enable-background:new 0 0 48 48;" xml:space="preserve">
    <title>New Window</title>
    <style type="text/css">
        .new-window--black {
            fill-rule: evenodd;
            clip-rule: evenodd;
            fill: #000;
        }
    </style>
    <path class="new-window--black" d="M31,38H10V17h7v-7h21v21h-7V38z M34.5,13.5h-14v14h14V13.5z M17,31V20.5h-3.5v14h14V31H17z" />
</svg>

<div style="background: #2774AE; display: inline-block;">
    <!-- External Link 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 48 48" style="enable-background:new 0 0 48 48;" xml:space="preserve">
        <title>New Window</title>
        <style type="text/css">
            .new-window--white {
                fill-rule: evenodd;
                clip-rule: evenodd;
                fill: #fff;
            }
        </style>
        <path class="new-window--white" d="M31,38H10V17h7v-7h21v21h-7V38z M34.5,13.5h-14v14h14V13.5z M17,31V20.5h-3.5v14h14V31H17z" />
    </svg>
</div>

<!-- External Link 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 48 48" style="enable-background:new 0 0 48 48;" xml:space="preserve">
    <title>New Window</title>
    <style type="text/css">
        .new-window--blue {
            fill-rule: evenodd;
            clip-rule: evenodd;
            fill: #00598C;
        }
    </style>
    <path class="new-window--blue" d="M31,38H10V17h7v-7h21v21h-7V38z M34.5,13.5h-14v14h14V13.5z M17,31V20.5h-3.5v14h14V31H17z" />
</svg>


<!-- Play -->
<!-- Play 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 48 48" style="enable-background:new 0 0 48 48;" xml:space="preserve">
    <title>Play</title>
    <style type="text/css">
        .play--black {
            fill-rule: evenodd;
            clip-rule: evenodd;
            fill: #000;
        }
    </style>
    <g>
        <path class="play--black" d="M20,33l12-9l-12-9V33z M24,4C13,4,4,13,4,24s9,20,20,20s20-9,20-20S35,4,24,4z M24,41
      c-9.4,0-17-7.6-17-17S14.6,7,24,7s17,7.6,17,17S33.4,41,24,41z" />
    </g>
</svg>

<div style="background: #2774AE; display: inline-block;">
    <!-- Play 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 48 48" style="enable-background:new 0 0 48 48;" xml:space="preserve">
        <title>Play</title>
        <style type="text/css">
            .play--white {
                fill-rule: evenodd;
                clip-rule: evenodd;
                fill: #FFFFFF;
            }
        </style>
        <g>
            <path class="play--white" d="M20,33l12-9l-12-9V33z M24,4C13,4,4,13,4,24s9,20,20,20s20-9,20-20S35,4,24,4z M24,41
    		c-9.4,0-17-7.6-17-17S14.6,7,24,7s17,7.6,17,17S33.4,41,24,41z" />
        </g>
    </svg>
</div>

<!-- Play 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 48 48" style="enable-background:new 0 0 48 48;" xml:space="preserve">
    <title>Play</title>
    <style type="text/css">
        .play--blue {
            fill-rule: evenodd;
            clip-rule: evenodd;
            fill: #003B5C;
        }
    </style>
    <g>
        <path class="play--blue" d="M20,33l12-9l-12-9V33z M24,4C13,4,4,13,4,24s9,20,20,20s20-9,20-20S35,4,24,4z M24,41
      c-9.4,0-17-7.6-17-17S14.6,7,24,7s17,7.6,17,17S33.4,41,24,41z" />
    </g>
</svg>


<!-- Right Arrow -->
<!-- Right 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 Right</title>
    <style type="text/css">
        .arrow-right--white {
            fill-rule: evenodd;
            clip-rule: evenodd;
            fill: #000;
        }
    </style>
    <g>
        <polygon class="arrow-right--black" points="9,16.6 13.3,12 9,7.4 10.3,6 16,12 10.3,18 	" />
    </g>
</svg>

<div style="background: #2774AE; display: inline-block;">
    <!-- Right 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 Right</title>
        <style type="text/css">
            .arrow-right--white {
                fill-rule: evenodd;
                clip-rule: evenodd;
                fill: #FFFFFF;
            }
        </style>
        <g>
            <polygon class="arrow-right--white" points="9,16.6 13.3,12 9,7.4 10.3,6 16,12 10.3,18 	" />
        </g>
    </svg>
</div>

<!-- Right 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 Right</title>
    <style type="text/css">
        .arrow-right--blue {
            fill-rule: evenodd;
            clip-rule: evenodd;
            fill: #00598C;
        }
    </style>
    <g>
        <polygon class="arrow-right--blue" points="9,16.6 13.3,12 9,7.4 10.3,6 16,12 10.3,18 	" />
    </g>
</svg>


<!-- Search -->
<!-- Search Grey-60 -->
<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>Search</title>
    <style type="text/css">
        .search--grey {
            fill-rule: evenodd;
            clip-rule: evenodd;
            fill: #666;
        }
    </style>
    <g>
        <path class="search--grey" d="M15.5,14h-0.8l-0.3-0.3c1-1.1,1.6-2.6,1.6-4.2C16,5.9,13.1,3,9.5,3S3,5.9,3,9.5S5.9,16,9.5,16
  		c1.6,0,3.1-0.6,4.2-1.6l0.3,0.3v0.8l5,5l1.5-1.5L15.5,14z M9.5,14C7,14,5,12,5,9.5S7,5,9.5,5S14,7,14,9.5S12,14,9.5,14z" />
    </g>
</svg>

<!-- Search 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>Search</title>
    <style type="text/css">
        .search--black {
            fill-rule: evenodd;
            clip-rule: evenodd;
            fill: #000;
        }
    </style>
    <g>
        <path class="search--black" d="M15.5,14h-0.8l-0.3-0.3c1-1.1,1.6-2.6,1.6-4.2C16,5.9,13.1,3,9.5,3S3,5.9,3,9.5S5.9,16,9.5,16
  		c1.6,0,3.1-0.6,4.2-1.6l0.3,0.3v0.8l5,5l1.5-1.5L15.5,14z M9.5,14C7,14,5,12,5,9.5S7,5,9.5,5S14,7,14,9.5S12,14,9.5,14z" />
    </g>
</svg>

<div style="background: #2774AE; display: inline-block;">
    <!-- Search 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>Search</title>
        <style type="text/css">
            .search--white {
                fill-rule: evenodd;
                clip-rule: evenodd;
                fill: #FFF;
            }
        </style>
        <g>
            <path class="search--white" d="M15.5,14h-0.8l-0.3-0.3c1-1.1,1.6-2.6,1.6-4.2C16,5.9,13.1,3,9.5,3S3,5.9,3,9.5S5.9,16,9.5,16
    		c1.6,0,3.1-0.6,4.2-1.6l0.3,0.3v0.8l5,5l1.5-1.5L15.5,14z M9.5,14C7,14,5,12,5,9.5S7,5,9.5,5S14,7,14,9.5S12,14,9.5,14z" />
        </g>
    </svg>
</div>

<!-- Search 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>Search</title>
    <style type="text/css">
        .search--blue {
            fill-rule: evenodd;
            clip-rule: evenodd;
            fill: #003B5C;
        }
    </style>
    <g>
        <path class="search--blue" d="M15.5,14h-0.8l-0.3-0.3c1-1.1,1.6-2.6,1.6-4.2C16,5.9,13.1,3,9.5,3S3,5.9,3,9.5S5.9,16,9.5,16
  		c1.6,0,3.1-0.6,4.2-1.6l0.3,0.3v0.8l5,5l1.5-1.5L15.5,14z M9.5,14C7,14,5,12,5,9.5S7,5,9.5,5S14,7,14,9.5S12,14,9.5,14z" />
    </g>
</svg>


<!-- Sort -->
<!-- Sort Ascending -->
<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>Sort Ascending</title>
    <style type="text/css">
        .ascending-1 {
            fill: #666666;
        }

        .ascending-2 {
            fill-rule: evenodd;
            clip-rule: evenodd;
        }
    </style>
    <g>
        <g transform="translate(8.000000, 6.000000)">
            <polygon class="ascending-1" points="0,6 4,10 8,6 		" />
            <polygon class="ascending-2" points="8,4 4,0 0,4 		" />
        </g>
    </g>
</svg>

<!-- Sort Descending -->
<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>Sort Descending</title>
    <style type="text/css">
        .descending-1 {
            fill-rule: evenodd;
            clip-rule: evenodd;
        }

        .descending-2 {
            fill: #666666;
        }
    </style>
    <g>
        <g transform="translate(8.000000, 6.000000)">
            <polygon class="descending-1" points="0,6 4,10 8,6 		" />
            <polygon class="descending-2" points="8,4 4,0 0,4 		" />
        </g>
    </g>
</svg>


<!-- Time -->
<!-- Time Grey60 -->
<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>time</title>
    <style type="text/css">
        .time--grey {
            fill: #666666;
        }
    </style>
    <g>
        <path class="time--grey" d="M12,2c5.5,0,10,4.5,10,10s-4.5,10-10,10C6.5,22,2,17.5,2,12S6.5,2,12,2z M12,4
		c-4.4,0-8,3.6-8,8s3.6,8,8,8s8-3.6,8-8S16.4,4,12,4z M12.5,7v5.2l4.5,2.7l-0.8,1.2L11,13V7H12.5z" />
    </g>
</svg>

<!-- Time White -->
<div style="background: #2774AE; display: inline-block;">
    <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>time</title>
        <style type="text/css">
            .time--white {
                fill: #FFFFFF;
            }
        </style>
        <g>
            <path class="time--white" d="M12,2c5.5,0,10,4.5,10,10s-4.5,10-10,10C6.5,22,2,17.5,2,12S6.5,2,12,2z M12,4
    		c-4.4,0-8,3.6-8,8s3.6,8,8,8s8-3.6,8-8S16.4,4,12,4z M12.5,7v5.2l4.5,2.7l-0.8,1.2L11,13V7H12.5z" />
        </g>
    </svg>
</div>

<!-- Time 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>time</title>
    <style type="text/css">
        .time--black {
            fill: #000;
        }
    </style>
    <g>
        <path class="time--black" d="M12,2c5.5,0,10,4.5,10,10s-4.5,10-10,10C6.5,22,2,17.5,2,12S6.5,2,12,2z M12,4
		c-4.4,0-8,3.6-8,8s3.6,8,8,8s8-3.6,8-8S16.4,4,12,4z M12.5,7v5.2l4.5,2.7l-0.8,1.2L11,13V7H12.5z" />
    </g>
</svg>


<!-- Up Arrow -->
<!-- Up 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 Up</title>
    <style type="text/css">
        .arrow-up--black {
            fill-rule: evenodd;
            clip-rule: evenodd;
            fill: #000;
        }
    </style>
    <g>
        <polygon class="arrow-up--black" points="16.6,16 12,11.4 7.4,16 6,14.6 12,8.6 18,14.6 	" />
    </g>
</svg>

<div style="background: #2774AE; display: inline-block;">
    <!-- Up 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 Up</title>
        <style type="text/css">
            .arrow-up--white {
                fill-rule: evenodd;
                clip-rule: evenodd;
                fill: #FFFFFF;
            }
        </style>
        <g>
            <polygon class="arrow-up--white" points="16.6,16 12,11.4 7.4,16 6,14.6 12,8.6 18,14.6 	" />
        </g>
    </svg>
</div>

<!-- Up 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 Up</title>
    <style type="text/css">
        .arrow-up--blue {
            fill-rule: evenodd;
            clip-rule: evenodd;
            fill: #003B5C;
        }
    </style>
    <g>
        <polygon class="arrow-up--blue" points="16.6,16 12,11.4 7.4,16 6,14.6 12,8.6 18,14.6 	" />
    </g>
</svg>
  • Handle: @denotive-svg
  • Preview:
  • Filesystem Path: src/components/02-utilities/04-icons/01-denotive-icons/denotive-svg.hbs