5Icons
Service Year icons
<div class="kss-icon-box">
<svg class="svg-icon svg-icon--black" role="img" ><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--angle-down"></use></svg>
<h6>angle-down</h6>
</div>
<div class="kss-icon-box">
<svg class="svg-icon svg-icon--black" role="img" ><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--angle-left"></use></svg>
<h6>angle-left</h6>
</div>
<div class="kss-icon-box">
<svg class="svg-icon svg-icon--black" role="img" ><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--angle-right"></use></svg>
<h6>angle-right</h6>
</div>
<div class="kss-icon-box">
<svg class="svg-icon svg-icon--black" role="img" ><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--angle-up"></use></svg>
<h6>angle-up</h6>
</div>
<div class="kss-icon-box">
<svg class="svg-icon svg-icon--black" role="img" ><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--angle-thin-right"></use></svg>
<h6>angle-thin-right</h6>
</div>
<div class="kss-icon-box">
<svg class="svg-icon svg-icon--black" role="img" ><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--angle-thin-left"></use></svg>
<h6>angle-thin-left</h6>
</div>
<div class="kss-icon-box">
<svg class="svg-icon svg-icon--black" role="img" ><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--affiliations"></use></svg>
<h6>affiliations</h6>
</div>
<div class="kss-icon-box">
<svg class="svg-icon svg-icon--black" role="img" ><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--badge-star"></use></svg>
<h6>badge-star</h6>
</div>
<div class="kss-icon-box">
<svg class="svg-icon svg-icon--black" role="img" ><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--badge"></use></svg>
<h6>badge</h6>
</div>
<div class="kss-icon-box">
<svg class="svg-icon svg-icon--black" role="img" ><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--binoculars"></use></svg>
<h6>binoculars</h6>
</div>
<div class="kss-icon-box">
<svg class="svg-icon svg-icon--black" role="img" ><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--calendar"></use></svg>
<h6>calendar</h6>
</div>
<div class="kss-icon-box">
<svg class="svg-icon svg-icon--black" role="img" ><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--camera"></use></svg>
<h6>camera</h6>
</div>
<div class="kss-icon-box">
<svg class="svg-icon svg-icon--black" role="img" ><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--cancel-circle"></use></svg>
<h6>cancel-circle</h6>
</div>
<div class="kss-icon-box">
<svg class="svg-icon svg-icon--black" role="img" ><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--check-circle"></use></svg>
<h6>check-circle</h6>
</div>
<div class="kss-icon-box">
<svg class="svg-icon svg-icon--black" role="img" ><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--check-open-circle"></use></svg>
<h6>check-open-circle</h6>
</div>
<div class="kss-icon-box">
<svg class="svg-icon svg-icon--black" role="img" ><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--check-outline"></use></svg>
<h6>check-outline</h6>
</div>
<div class="kss-icon-box">
<svg class="svg-icon svg-icon--black" role="img" ><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--check"></use></svg>
<h6>check</h6>
</div>
<div class="kss-icon-box">
<svg class="svg-icon svg-icon--black" role="img" ><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--clock"></use></svg>
<h6>clock</h6>
</div>
<div class="kss-icon-box">
<svg class="svg-icon svg-icon--black" role="img" ><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--close"></use></svg>
<h6>close</h6>
</div>
<div class="kss-icon-box">
<svg class="svg-icon svg-icon--black" role="img" ><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--context-menu"></use></svg>
<h6>context-menu</h6>
</div>
<div class="kss-icon-box">
<svg class="svg-icon svg-icon--black" role="img" ><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--docs"></use></svg>
<h6>docs</h6>
</div>
<div class="kss-icon-box">
<svg class="svg-icon svg-icon--black" role="img" ><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--edit"></use></svg>
<h6>edit</h6>
</div>
<div class="kss-icon-box">
<svg class="svg-icon svg-icon--black" role="img" ><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--envelope"></use></svg>
<h6>envelope</h6>
</div>
<div class="kss-icon-box">
<svg class="svg-icon svg-icon--black" role="img" ><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--exclamation"></use></svg>
<h6>exclamation</h6>
</div>
<div class="kss-icon-box">
<svg class="svg-icon svg-icon--black" role="img" ><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--exclamation-circle"></use></svg>
<h6>exclamation-circle</h6>
</div>
<div class="kss-icon-box">
<svg class="svg-icon svg-icon--black" role="img" ><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--exclamation-circle-inverse"></use></svg>
<h6>exclamation-circle-inverse</h6>
</div>
<div class="kss-icon-box">
<svg class="svg-icon svg-icon--black" role="img" ><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--exit"></use></svg>
<h6>exit</h6>
</div>
<div class="kss-icon-box">
<svg class="svg-icon svg-icon--black" role="img" ><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--eye-slash"></use></svg>
<h6>eye-slash</h6>
</div>
<div class="kss-icon-box">
<svg class="svg-icon svg-icon--black" role="img" ><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--eye"></use></svg>
<h6>eye</h6>
</div>
<div class="kss-icon-box">
<svg class="svg-icon svg-icon--black" role="img" ><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--facebook-sign-in"></use></svg>
<h6>facebook-sign-in</h6>
</div>
<div class="kss-icon-box">
<svg class="svg-icon svg-icon--black" role="img" ><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--filter"></use></svg>
<h6>filter</h6>
</div>
<div class="kss-icon-box">
<svg class="svg-icon svg-icon--black" role="img" ><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--flag"></use></svg>
<h6>flag</h6>
</div>
<div class="kss-icon-box">
<svg class="svg-icon svg-icon--black" role="img" ><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--flag-outline"></use></svg>
<h6>flag-outline</h6>
</div>
<div class="kss-icon-box">
<svg class="svg-icon svg-icon--black" role="img" ><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--globe"></use></svg>
<h6>globe</h6>
</div>
<div class="kss-icon-box">
<svg class="svg-icon svg-icon--black" role="img" ><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--graduation-outline"></use></svg>
<h6>graduation-outline</h6>
</div>
<div class="kss-icon-box">
<svg class="svg-icon svg-icon--black" role="img" ><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--graduation"></use></svg>
<h6>graduation</h6>
</div>
<div class="kss-icon-box">
<svg class="svg-icon svg-icon--black" role="img" ><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--heart"></use></svg>
<h6>heart</h6>
</div>
<div class="kss-icon-box">
<svg class="svg-icon svg-icon--black" role="img" ><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--info"></use></svg>
<h6>info</h6>
</div>
<div class="kss-icon-box">
<svg class="svg-icon svg-icon--black" role="img" ><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--listings"></use></svg>
<h6>listings</h6>
</div>
<div class="kss-icon-box">
<svg class="svg-icon svg-icon--black" role="img" ><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--lock"></use></svg>
<h6>lock</h6>
</div>
<div class="kss-icon-box">
<svg class="svg-icon svg-icon--black" role="img" ><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--megaphone"></use></svg>
<h6>megaphone</h6>
</div>
<div class="kss-icon-box">
<svg class="svg-icon svg-icon--black" role="img" ><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--menu-user"></use></svg>
<h6>menu-user</h6>
</div>
<div class="kss-icon-box">
<svg class="svg-icon svg-icon--black" role="img" ><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--menu"></use></svg>
<h6>menu</h6>
</div>
<div class="kss-icon-box">
<svg class="svg-icon svg-icon--black" role="img" ><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--message"></use></svg>
<h6>message</h6>
</div>
<div class="kss-icon-box">
<svg class="svg-icon svg-icon--black" role="img" ><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--add-message"></use></svg>
<h6>add-message</h6>
</div>
<div class="kss-icon-box">
<svg class="svg-icon svg-icon--black svg-icon--large" role="img" ><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--network"></use></svg>
<h6>network</h6>
</div>
<div class="kss-icon-box">
<svg class="svg-icon svg-icon--black" role="img" ><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--newspaper"></use></svg>
<h6>newspaper</h6>
</div>
<div class="kss-icon-box">
<svg class="svg-icon svg-icon--black" role="img" ><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--notebook"></use></svg>
<h6>notebook</h6>
</div>
<div class="kss-icon-box">
<svg class="svg-icon svg-icon--black" role="img" ><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--pencil"></use></svg>
<h6>pencil</h6>
</div>
<div class="kss-icon-box">
<svg class="svg-icon svg-icon--black" role="img" ><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--pencil-lock"></use></svg>
<h6>pencil-lock</h6>
</div>
<div class="kss-icon-box">
<svg class="svg-icon svg-icon--black" role="img" ><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--pencil-strike"></use></svg>
<h6>pencil-strike</h6>
</div>
<div class="kss-icon-box">
<svg class="svg-icon svg-icon--black" role="img" ><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--pending"></use></svg>
<h6>pending</h6>
</div>
<div class="kss-icon-box">
<svg class="svg-icon svg-icon--black" role="img" ><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--person"></use></svg>
<h6>person</h6>
</div>
<div class="kss-icon-box">
<svg class="svg-icon svg-icon--black" role="img" ><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--phone"></use></svg>
<h6>phone</h6>
</div>
<div class="kss-icon-box">
<svg class="svg-icon svg-icon--black" role="img" ><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--photo"></use></svg>
<h6>photo</h6>
</div>
<div class="kss-icon-box">
<svg class="svg-icon svg-icon--black" role="img" ><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--pin"></use></svg>
<h6>pin</h6>
</div>
<div class="kss-icon-box">
<svg class="svg-icon svg-icon--black" role="img" ><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--plus"></use></svg>
<h6>plus</h6>
</div>
<div class="kss-icon-box">
<svg class="svg-icon svg-icon--black" role="img" ><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--pointer"></use></svg>
<h6>pointer</h6>
</div>
<div class="kss-icon-box">
<svg class="svg-icon svg-icon--black" role="img" ><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--preferences"></use></svg>
<h6>preferences</h6>
</div>
<div class="kss-icon-box">
<svg class="svg-icon svg-icon--black" role="img" ><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--printer"></use></svg>
<h6>printer</h6>
</div>
<div class="kss-icon-box">
<svg class="svg-icon svg-icon--black" role="img" ><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--question"></use></svg>
<h6>question</h6>
</div>
<div class="kss-icon-box">
<svg class="svg-icon svg-icon--black" role="img" ><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--question-circle"></use></svg>
<h6>question-circle</h6>
</div>
<div class="kss-icon-box">
<svg class="svg-icon svg-icon--black" role="img" ><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--ribbon"></use></svg>
<h6>ribbon</h6>
</div>
<div class="kss-icon-box">
<svg class="svg-icon svg-icon--black" role="img" ><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--ribbon-outline"></use></svg>
<h6>ribbon-outline</h6>
</div>
<div class="kss-icon-box">
<svg class="svg-icon svg-icon--black" role="img" ><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--search"></use></svg>
<h6>search</h6>
</div>
<div class="kss-icon-box">
<svg class="svg-icon svg-icon--black" role="img" ><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--settings"></use></svg>
<h6>settings</h6>
</div>
<div class="kss-icon-box">
<svg class="svg-icon svg-icon--black" role="img" ><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--share"></use></svg>
<h6>share</h6>
</div>
<div class="kss-icon-box">
<svg class="svg-icon svg-icon--black" role="img" ><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--social-facebook"></use></svg>
<h6>social-facebook</h6>
</div>
<div class="kss-icon-box">
<svg class="svg-icon svg-icon--black" role="img" ><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--social-instagram"></use></svg>
<h6>social-instagram</h6>
</div>
<div class="kss-icon-box">
<svg class="svg-icon svg-icon--black" role="img" ><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--social-link"></use></svg>
<h6>social-link</h6>
</div>
<div class="kss-icon-box">
<svg class="svg-icon svg-icon--black" role="img" ><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--social-linkedin"></use></svg>
<h6>social-linkedin</h6>
</div>
<div class="kss-icon-box">
<svg class="svg-icon svg-icon--black" role="img" ><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--social-twitter"></use></svg>
<h6>social-twitter</h6>
</div>
<div class="kss-icon-box">
<svg class="svg-icon svg-icon--black" role="img" ><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--social-website"></use></svg>
<h6>social-website</h6>
</div>
<div class="kss-icon-box">
<svg class="svg-icon svg-icon--black" role="img" ><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--social-youtube"></use></svg>
<h6>social-youtube</h6>
</div>
<div class="kss-icon-box">
<svg class="svg-icon svg-icon--black" role="img" ><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--speedometer"></use></svg>
<h6>speedometer</h6>
</div>
<div class="kss-icon-box">
<svg class="svg-icon svg-icon--black" role="img" ><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--star"></use></svg>
<h6>star</h6>
</div>
<div class="kss-icon-box">
<svg class="svg-icon svg-icon--black" role="img" ><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--star-circle"></use></svg>
<h6>star-circle</h6>
</div>
<div class="kss-icon-box">
<svg class="svg-icon svg-icon--black" role="img" ><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--sub-nav--dashboard"></use></svg>
<h6>sub-nav--dashboard</h6>
</div>
<div class="kss-icon-box">
<svg class="svg-icon svg-icon--black" role="img" ><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--sub-nav--matches"></use></svg>
<h6>sub-nav--matches</h6>
</div>
<div class="kss-icon-box">
<svg class="svg-icon svg-icon--black" role="img" ><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--sub-nav--network"></use></svg>
<h6>sub-nav--network</h6>
</div>
<div class="kss-icon-box">
<svg class="svg-icon svg-icon--black" role="img" ><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--sy-mark"></use></svg>
<h6>sy-mark</h6>
</div>
<div class="kss-icon-box">
<svg class="svg-icon svg-icon--black" role="img" ><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--sy-mark-circle"></use></svg>
<h6>sy-mark-circle</h6>
</div>
<div class="kss-icon-box">
<svg class="svg-icon svg-icon--black" role="img" ><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--trash"></use></svg>
<h6>trash</h6>
</div>
<div class="kss-icon-box">
<svg class="svg-icon svg-icon--black" role="img" ><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--twitter-sign-in"></use></svg>
<h6>twitter-sign-in</h6>
</div>
<div class="kss-icon-box">
<svg class="svg-icon svg-icon--black" role="img" ><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--user-alternate"></use></svg>
<h6>user-alternate</h6>
</div>
<div class="kss-icon-box">
<svg class="svg-icon svg-icon--black" role="img" ><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--user"></use></svg>
<h6>user</h6>
</div>
<div class="kss-icon-box">
<svg class="svg-icon svg-icon--black" role="img" ><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--users"></use></svg>
<h6>users</h6>
</div>
5.1Colors of icons on buttons
Examples
<div class="kss-button-box">
<p>Primary Link Button</p>
<a class="link--primary" href="">
<svg class="svg-icon svg-icon--blue svg-icon--small" role="presentation">
<use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--angle-left"></use>
</svg>
Primary Link Button
</a>
</div>
<div class="kss-button-box">
<p>Deep Medium Navy Link with Icon</p>
<a class="link--medium-navy" href="">
<svg class="svg-icon svg-icon--deep-medium-navy mrh" role="presentation"><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--envelope"></use></svg>
<span>test@serviceyear.org</span>
</a>
</div>
<div class="kss-button-box">
<p>Secondary Button with Black Icon</p>
<button href="" class="button button--secondary">
<svg class="svg-icon svg-icon--black" role="presentation"><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--preferences"></use></svg>
<span>Secondary button</span>
</button>
</div>
<div class="kss-button-box">
<p>Secondary Button with Deep Medium Navy Icon</p>
<button href="" class="button button--secondary">
<svg class="svg-icon svg-icon--medium-navy" role="presentation"><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--preferences"></use></svg>
<span>Secondary button</span>
</button>
</div>