5Icons

Service Year icons

angle-down
angle-left
angle-right
angle-up
angle-thin-right
angle-thin-left
affiliations
badge-star
badge
binoculars
calendar
camera
cancel-circle
check-circle
check-open-circle
check-outline
check
clock
close
context-menu
docs
edit
envelope
exclamation
exclamation-circle
exclamation-circle-inverse
exit
eye-slash
eye
facebook-sign-in
filter
flag
flag-outline
globe
graduation-outline
graduation
heart
info
listings
lock
megaphone
menu-user
menu
message
add-message
network
newspaper
notebook
pencil
pencil-lock
pencil-strike
pending
person
phone
photo
pin
plus
pointer
preferences
printer
question
question-circle
ribbon
ribbon-outline
search
settings
share
social-facebook
social-instagram
social-link
social-linkedin
social-twitter
social-website
social-youtube
speedometer
star
star-circle
sub-nav--dashboard
sub-nav--matches
sub-nav--network
sy-mark
sy-mark-circle
trash
twitter-sign-in
user-alternate
user
users
Show Markup

<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>

Primary Link Button

Primary Link Button

Deep Medium Navy Link with Icon

test@serviceyear.org

Secondary Button with Black Icon

Secondary Button with Deep Medium Navy Icon

Show Markup

<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>