<!-- 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>
  • Handle: @denotive-svg--external-link
  • Preview:
  • Filesystem Path: src/components/02-utilities/04-icons/01-denotive-icons/denotive-svg--external-link.hbs