Icons

Ready

HTML
View
Context
Info
Notes


        
        <style>
    .icons {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        padding: 0.75rem;
    }

    .row {
        width: 100%;
    }

    .row+.row {
        margin-top: 1rem;
    }

    .icon+.icon {
        margin-left: 0.5rem;
    }
</style>
<h1>Icons</h1>
<div class="icons">
    <div class="row">
        <svg class="icon icon--favorite" aria-hidden="" viewBox="" focusable="">
            <use href="/images/favorite.svg#favorite" />
        </svg>
        <svg class="icon icon--favorite-filled" aria-hidden="" viewBox="" focusable="">
            <use href="/images/favorite-filled.svg#favorite-filled" />
        </svg>
        <svg class="icon icon--share" aria-hidden="" viewBox="" focusable="">
            <use href="/images/share.svg#share" />
        </svg>
        <svg class="icon icon--author" aria-hidden="" viewBox="" focusable="">
            <use href="/images/author.svg#author" />
        </svg>
        <svg class="icon icon--edit" aria-hidden="" viewBox="" focusable="">
            <use href="/images/edit.svg#edit" />
        </svg>
        <svg class="icon icon--save" aria-hidden="" viewBox="" focusable="">
            <use href="/images/save.svg#save" />
        </svg>
        <svg class="icon icon--info" aria-hidden="" viewBox="" focusable="">
            <use href="/images/info.svg#info" />
        </svg>
        <svg class="icon icon--lock" aria-hidden="" viewBox="" focusable="">
            <use href="/images/lock.svg#lock" />
        </svg>
        <svg class="icon icon--success" aria-hidden="" viewBox="" focusable="">
            <use href="/images/success.svg#success" />
        </svg>
        <svg class="icon icon--warning" aria-hidden="" viewBox="" focusable="">
            <use href="/images/warning.svg#warning" />
        </svg>
        <svg class="icon icon--error" aria-hidden="" viewBox="" focusable="">
            <use href="/images/error.svg#error" />
        </svg>
        <svg class="icon icon--location" aria-hidden="" viewBox="" focusable="">
            <use href="/images/location.svg#location" />
        </svg>
        <svg class="icon icon--broken-link" aria-hidden="" viewBox="" focusable="">
            <use href="/images/broken-link.svg#broken-link" />
        </svg>
        <svg class="icon icon--menu" aria-hidden="" viewBox="" focusable="">
            <use href="/images/menu.svg#menu" />
        </svg>
        <svg class="icon icon--filter" aria-hidden="" viewBox="" focusable="">
            <use href="/images/filter.svg#filter" />
        </svg>
        <svg class="icon icon--sort" aria-hidden="" viewBox="" focusable="">
            <use href="/images/sort.svg#sort" />
        </svg>
        <svg class="icon icon--reset" aria-hidden="" viewBox="" focusable="">
            <use href="/images/reset.svg#reset" />
        </svg>
        <svg class="icon icon--tag" aria-hidden="" viewBox="" focusable="">
            <use href="/images/tag.svg#tag" />
        </svg>
        <svg class="icon icon--delete" aria-hidden="" viewBox="" focusable="">
            <use href="/images/delete.svg#delete" />
        </svg>
        <svg class="icon icon--archive" aria-hidden="" viewBox="" focusable="">
            <use href="/images/archive.svg#archive" />
        </svg>
        <svg class="icon icon--notification" aria-hidden="" viewBox="" focusable="">
            <use href="/images/notification.svg#notification" />
        </svg>
        <svg class="icon icon--settings" aria-hidden="" viewBox="" focusable="">
            <use href="/images/settings.svg#settings" />
        </svg>
        <svg class="icon icon--customize" aria-hidden="" viewBox="" focusable="">
            <use href="/images/customize.svg#customize" />
        </svg>
        <svg class="icon icon--export" aria-hidden="" viewBox="" focusable="">
            <use href="/images/export.svg#export" />
        </svg>
        <svg class="icon icon--external" aria-hidden="" viewBox="" focusable="">
            <use href="/images/external.svg#external" />
        </svg>
    </div>
    <div class="row">
        <svg class="icon icon--chevron-left" aria-hidden="" viewBox="" focusable="">
            <use href="/images/chevron-left.svg#chevron-left" />
        </svg>
        <svg class="icon icon--chevron-right" aria-hidden="" viewBox="" focusable="">
            <use href="/images/chevron-right.svg#chevron-right" />
        </svg>
        <svg class="icon icon--chevron-up" aria-hidden="" viewBox="" focusable="">
            <use href="/images/chevron-up.svg#chevron-up" />
        </svg>
        <svg class="icon icon--chevron-down" aria-hidden="" viewBox="" focusable="">
            <use href="/images/chevron-down.svg#chevron-down" />
        </svg>
        <svg class="icon icon--scroll-up" aria-hidden="" viewBox="" focusable="">
            <use href="/images/scroll-up.svg#scroll-up" />
        </svg>
        <svg class="icon icon--scroll-down" aria-hidden="" viewBox="" focusable="">
            <use href="/images/scroll-down.svg#scroll-down" />
        </svg>
        <svg class="icon icon--close" aria-hidden="" viewBox="" focusable="">
            <use href="/images/close.svg#close" />
        </svg>
        <svg class="icon icon--add" aria-hidden="" viewBox="" focusable="">
            <use href="/images/add.svg#add" />
        </svg>
        <svg class="icon icon--calendar" aria-hidden="" viewBox="" focusable="">
            <use href="/images/calendar.svg#calendar" />
        </svg>
        <svg class="icon icon--search" aria-hidden="" viewBox="" focusable="">
            <use href="/images/search.svg#search" />
        </svg>
    </div>
    <div class="row">
        <svg class="icon icon--academic" aria-hidden="" viewBox="" focusable="">
            <use href="/images/academic.svg#academic" />
        </svg>
        <svg class="icon icon--article" aria-hidden="" viewBox="" focusable="">
            <use href="/images/article.svg#article" />
        </svg>
        <svg class="icon icon--audio" aria-hidden="" viewBox="" focusable="">
            <use href="/images/audio.svg#audio" />
        </svg>
        <svg class="icon icon--blog" aria-hidden="" viewBox="" focusable="">
            <use href="/images/blog.svg#blog" />
        </svg>
        <svg class="icon icon--book" aria-hidden="" viewBox="" focusable="">
            <use href="/images/book.svg#book" />
        </svg>
        <svg class="icon icon--case-study" aria-hidden="" viewBox="" focusable="">
            <use href="/images/case-study.svg#case-study" />
        </svg>
        <svg class="icon icon--curriculum" aria-hidden="" viewBox="" focusable="">
            <use href="/images/curriculum.svg#curriculum" />
        </svg>
        <svg class="icon icon--document" aria-hidden="" viewBox="" focusable="">
            <use href="/images/document.svg#document" />
        </svg>
        <svg class="icon icon--online-training" aria-hidden="" viewBox="" focusable="">
            <use href="/images/online-training.svg#online-training" />
        </svg>
        <svg class="icon icon--presentation" aria-hidden="" viewBox="" focusable="">
            <use href="/images/presentation.svg#presentation" />
        </svg>
        <svg class="icon icon--report" aria-hidden="" viewBox="" focusable="">
            <use href="/images/report.svg#report" />
        </svg>
        <svg class="icon icon--template" aria-hidden="" viewBox="" focusable="">
            <use href="/images/template.svg#template" />
        </svg>
        <svg class="icon icon--toolkit" aria-hidden="" viewBox="" focusable="">
            <use href="/images/toolkit.svg#toolkit" />
        </svg>
        <svg class="icon icon--video" aria-hidden="" viewBox="" focusable="">
            <use href="/images/video.svg#video" />
        </svg>
    </div>
    <div class="row">
        <svg class="icon icon--cooperative" aria-hidden="" viewBox="" focusable="">
            <use href="/images/cooperative.svg#cooperative" />
        </svg>
        <svg class="icon icon--converting" aria-hidden="" viewBox="" focusable="">
            <use href="/images/converting.svg#converting" />
        </svg>
        <svg class="icon icon--member" aria-hidden="" viewBox="" focusable="">
            <use href="/images/member.svg#member" />
        </svg>
        <svg class="icon icon--founder" aria-hidden="" viewBox="" focusable="">
            <use href="/images/founder.svg#founder" />
        </svg>
        <svg class="icon icon--service-provider" aria-hidden="" viewBox="" focusable="">
            <use href="/images/service-provider.svg#service-provider" />
        </svg>
        <svg class="icon icon--policy-maker" aria-hidden="" viewBox="" focusable="">
            <use href="/images/policy-maker.svg#policy-maker" />
        </svg>
        <svg class="icon icon--community-builder" aria-hidden="" viewBox="" focusable="">
            <use href="/images/community-builder.svg#community-builder" />
        </svg>
        <svg class="icon icon--support-organization" aria-hidden="" viewBox="" focusable="">
            <use href="/images/support-organization.svg#support-organization" />
        </svg>
        <svg class="icon icon--funder" aria-hidden="" viewBox="" focusable="">
            <use href="/images/funder.svg#funder" />
        </svg>
        <svg class="icon icon--researcher" aria-hidden="" viewBox="" focusable="">
            <use href="/images/researcher.svg#researcher" />
        </svg>
        <svg class="icon icon--language-small" aria-hidden="" viewBox="" focusable="">
            <use href="/images/language-small.svg#language-small" />
        </svg>
        <svg class="icon icon--pricing" aria-hidden="" viewBox="" focusable="">
            <use href="/images/pricing.svg#pricing" />
        </svg>
        <svg class="icon icon--licensing" aria-hidden="" viewBox="" focusable="">
            <use href="/images/licensing.svg#licensing" />
        </svg>
        <svg class="icon icon--sector-small" aria-hidden="" viewBox="" focusable="">
            <use href="/images/sector-small.svg#sector-small" />
        </svg>
        <svg class="icon icon--coop-type" aria-hidden="" viewBox="" focusable="">
            <use href="/images/coop-type.svg#coop-type" />
        </svg>
    </div>
    <div class="row">
        <svg class="icon icon--facebook" aria-hidden="" viewBox="" focusable="">
            <use href="/images/facebook.svg#facebook" />
        </svg>
        <svg class="icon icon--github" aria-hidden="" viewBox="" focusable="">
            <use href="/images/github.svg#github" />
        </svg>
        <svg class="icon icon--instagram" aria-hidden="" viewBox="" focusable="">
            <use href="/images/instagram.svg#instagram" />
        </svg>
        <svg class="icon icon--linkedin" aria-hidden="" viewBox="" focusable="">
            <use href="/images/linkedin.svg#linkedin" />
        </svg>
        <svg class="icon icon--mastodon" aria-hidden="" viewBox="" focusable="">
            <use href="/images/mastodon.svg#mastodon" />
        </svg>
        <svg class="icon icon--medium" aria-hidden="" viewBox="" focusable="">
            <use href="/images/medium.svg#medium" />
        </svg>
        <svg class="icon icon--reddit" aria-hidden="" viewBox="" focusable="">
            <use href="/images/reddit.svg#reddit" />
        </svg>
        <svg class="icon icon--stack-overflow" aria-hidden="" viewBox="" focusable="">
            <use href="/images/stack-overflow.svg#stack-overflow" />
        </svg>
        <svg class="icon icon--twitter" aria-hidden="" viewBox="" focusable="">
            <use href="/images/twitter.svg#twitter" />
        </svg>
    </div>
    <div class="row">
        <svg class="icon icon--topic icon--md" aria-hidden="" viewBox="0 0 24 24" focusable="">
            <use href="/images/topic.svg#topic" />
        </svg>
        <svg class="icon icon--goal icon--md" aria-hidden="" viewBox="0 0 24 24" focusable="">
            <use href="/images/goal.svg#goal" />
        </svg>
        <svg class="icon icon--sector icon--md" aria-hidden="" viewBox="0 0 24 24" focusable="">
            <use href="/images/sector.svg#sector" />
        </svg>
        <svg class="icon icon--format icon--md" aria-hidden="" viewBox="0 0 24 24" focusable="">
            <use href="/images/format.svg#format" />
        </svg>
    </div>
    <div class="row">
        <svg class="icon icon--language icon--lg" aria-hidden="" viewBox="0 0 32 32" focusable="">
            <use href="/images/language.svg#language" />
        </svg>
        <svg class="icon icon--pcc icon--lg" aria-hidden="" viewBox="0 0 32 32" focusable="">
            <use href="/images/pcc.svg#pcc" />
        </svg>
        <svg class="icon icon--resources icon--lg" aria-hidden="" viewBox="0 0 32 32" focusable="">
            <use href="/images/resources.svg#resources" />
        </svg>
        <svg class="icon icon--directory icon--lg" aria-hidden="" viewBox="0 0 32 32" focusable="">
            <use href="/images/directory.svg#directory" />
        </svg>
        <svg class="icon icon--tools icon--lg" aria-hidden="" viewBox="0 0 32 32" focusable="">
            <use href="/images/tools.svg#tools" />
        </svg>
    </div>
    <div class="row">
        <svg class="icon icon--browse icon--xl" aria-hidden="" viewBox="0 0 40 40" focusable="">
            <use href="/images/browse.svg#browse" />
        </svg>
        <svg class="icon icon--see-tools icon--xl" aria-hidden="" viewBox="0 0 40 40" focusable="">
            <use href="/images/see-tools.svg#see-tools" />
        </svg>
        <svg class="icon icon--share-tools icon--xl" aria-hidden="" viewBox="0 0 40 40" focusable="">
            <use href="/images/share-tools.svg#share-tools" />
        </svg>
    </div>
</div>
<div class="icons has-blue-500-color">
    <div class="row">
        <svg class="icon icon--favorite" aria-hidden="" viewBox="" focusable="">
            <use href="/images/favorite.svg#favorite" />
        </svg>
        <svg class="icon icon--favorite-filled" aria-hidden="" viewBox="" focusable="">
            <use href="/images/favorite-filled.svg#favorite-filled" />
        </svg>
        <svg class="icon icon--share" aria-hidden="" viewBox="" focusable="">
            <use href="/images/share.svg#share" />
        </svg>
        <svg class="icon icon--author" aria-hidden="" viewBox="" focusable="">
            <use href="/images/author.svg#author" />
        </svg>
        <svg class="icon icon--edit" aria-hidden="" viewBox="" focusable="">
            <use href="/images/edit.svg#edit" />
        </svg>
        <svg class="icon icon--save" aria-hidden="" viewBox="" focusable="">
            <use href="/images/save.svg#save" />
        </svg>
        <svg class="icon icon--info" aria-hidden="" viewBox="" focusable="">
            <use href="/images/info.svg#info" />
        </svg>
        <svg class="icon icon--lock" aria-hidden="" viewBox="" focusable="">
            <use href="/images/lock.svg#lock" />
        </svg>
        <svg class="icon icon--success" aria-hidden="" viewBox="" focusable="">
            <use href="/images/success.svg#success" />
        </svg>
        <svg class="icon icon--warning" aria-hidden="" viewBox="" focusable="">
            <use href="/images/warning.svg#warning" />
        </svg>
        <svg class="icon icon--error" aria-hidden="" viewBox="" focusable="">
            <use href="/images/error.svg#error" />
        </svg>
        <svg class="icon icon--location" aria-hidden="" viewBox="" focusable="">
            <use href="/images/location.svg#location" />
        </svg>
        <svg class="icon icon--broken-link" aria-hidden="" viewBox="" focusable="">
            <use href="/images/broken-link.svg#broken-link" />
        </svg>
        <svg class="icon icon--menu" aria-hidden="" viewBox="" focusable="">
            <use href="/images/menu.svg#menu" />
        </svg>
        <svg class="icon icon--filter" aria-hidden="" viewBox="" focusable="">
            <use href="/images/filter.svg#filter" />
        </svg>
        <svg class="icon icon--sort" aria-hidden="" viewBox="" focusable="">
            <use href="/images/sort.svg#sort" />
        </svg>
        <svg class="icon icon--reset" aria-hidden="" viewBox="" focusable="">
            <use href="/images/reset.svg#reset" />
        </svg>
        <svg class="icon icon--tag" aria-hidden="" viewBox="" focusable="">
            <use href="/images/tag.svg#tag" />
        </svg>
        <svg class="icon icon--delete" aria-hidden="" viewBox="" focusable="">
            <use href="/images/delete.svg#delete" />
        </svg>
        <svg class="icon icon--archive" aria-hidden="" viewBox="" focusable="">
            <use href="/images/archive.svg#archive" />
        </svg>
        <svg class="icon icon--notification" aria-hidden="" viewBox="" focusable="">
            <use href="/images/notification.svg#notification" />
        </svg>
        <svg class="icon icon--settings" aria-hidden="" viewBox="" focusable="">
            <use href="/images/settings.svg#settings" />
        </svg>
        <svg class="icon icon--customize" aria-hidden="" viewBox="" focusable="">
            <use href="/images/customize.svg#customize" />
        </svg>
        <svg class="icon icon--export" aria-hidden="" viewBox="" focusable="">
            <use href="/images/export.svg#export" />
        </svg>
        <svg class="icon icon--external" aria-hidden="" viewBox="" focusable="">
            <use href="/images/external.svg#external" />
        </svg>
    </div>
    <div class="row">
        <svg class="icon icon--chevron-left" aria-hidden="" viewBox="" focusable="">
            <use href="/images/chevron-left.svg#chevron-left" />
        </svg>
        <svg class="icon icon--chevron-right" aria-hidden="" viewBox="" focusable="">
            <use href="/images/chevron-right.svg#chevron-right" />
        </svg>
        <svg class="icon icon--chevron-up" aria-hidden="" viewBox="" focusable="">
            <use href="/images/chevron-up.svg#chevron-up" />
        </svg>
        <svg class="icon icon--chevron-down" aria-hidden="" viewBox="" focusable="">
            <use href="/images/chevron-down.svg#chevron-down" />
        </svg>
        <svg class="icon icon--scroll-up" aria-hidden="" viewBox="" focusable="">
            <use href="/images/scroll-up.svg#scroll-up" />
        </svg>
        <svg class="icon icon--scroll-down" aria-hidden="" viewBox="" focusable="">
            <use href="/images/scroll-down.svg#scroll-down" />
        </svg>
        <svg class="icon icon--close" aria-hidden="" viewBox="" focusable="">
            <use href="/images/close.svg#close" />
        </svg>
        <svg class="icon icon--add" aria-hidden="" viewBox="" focusable="">
            <use href="/images/add.svg#add" />
        </svg>
        <svg class="icon icon--calendar" aria-hidden="" viewBox="" focusable="">
            <use href="/images/calendar.svg#calendar" />
        </svg>
        <svg class="icon icon--search" aria-hidden="" viewBox="" focusable="">
            <use href="/images/search.svg#search" />
        </svg>
    </div>
    <div class="row">
        <svg class="icon icon--academic" aria-hidden="" viewBox="" focusable="">
            <use href="/images/academic.svg#academic" />
        </svg>
        <svg class="icon icon--article" aria-hidden="" viewBox="" focusable="">
            <use href="/images/article.svg#article" />
        </svg>
        <svg class="icon icon--audio" aria-hidden="" viewBox="" focusable="">
            <use href="/images/audio.svg#audio" />
        </svg>
        <svg class="icon icon--blog" aria-hidden="" viewBox="" focusable="">
            <use href="/images/blog.svg#blog" />
        </svg>
        <svg class="icon icon--book" aria-hidden="" viewBox="" focusable="">
            <use href="/images/book.svg#book" />
        </svg>
        <svg class="icon icon--case-study" aria-hidden="" viewBox="" focusable="">
            <use href="/images/case-study.svg#case-study" />
        </svg>
        <svg class="icon icon--curriculum" aria-hidden="" viewBox="" focusable="">
            <use href="/images/curriculum.svg#curriculum" />
        </svg>
        <svg class="icon icon--document" aria-hidden="" viewBox="" focusable="">
            <use href="/images/document.svg#document" />
        </svg>
        <svg class="icon icon--online-training" aria-hidden="" viewBox="" focusable="">
            <use href="/images/online-training.svg#online-training" />
        </svg>
        <svg class="icon icon--presentation" aria-hidden="" viewBox="" focusable="">
            <use href="/images/presentation.svg#presentation" />
        </svg>
        <svg class="icon icon--report" aria-hidden="" viewBox="" focusable="">
            <use href="/images/report.svg#report" />
        </svg>
        <svg class="icon icon--template" aria-hidden="" viewBox="" focusable="">
            <use href="/images/template.svg#template" />
        </svg>
        <svg class="icon icon--toolkit" aria-hidden="" viewBox="" focusable="">
            <use href="/images/toolkit.svg#toolkit" />
        </svg>
        <svg class="icon icon--video" aria-hidden="" viewBox="" focusable="">
            <use href="/images/video.svg#video" />
        </svg>
    </div>
    <div class="row">
        <svg class="icon icon--cooperative" aria-hidden="" viewBox="" focusable="">
            <use href="/images/cooperative.svg#cooperative" />
        </svg>
        <svg class="icon icon--converting" aria-hidden="" viewBox="" focusable="">
            <use href="/images/converting.svg#converting" />
        </svg>
        <svg class="icon icon--member" aria-hidden="" viewBox="" focusable="">
            <use href="/images/member.svg#member" />
        </svg>
        <svg class="icon icon--founder" aria-hidden="" viewBox="" focusable="">
            <use href="/images/founder.svg#founder" />
        </svg>
        <svg class="icon icon--service-provider" aria-hidden="" viewBox="" focusable="">
            <use href="/images/service-provider.svg#service-provider" />
        </svg>
        <svg class="icon icon--policy-maker" aria-hidden="" viewBox="" focusable="">
            <use href="/images/policy-maker.svg#policy-maker" />
        </svg>
        <svg class="icon icon--community-builder" aria-hidden="" viewBox="" focusable="">
            <use href="/images/community-builder.svg#community-builder" />
        </svg>
        <svg class="icon icon--support-organization" aria-hidden="" viewBox="" focusable="">
            <use href="/images/support-organization.svg#support-organization" />
        </svg>
        <svg class="icon icon--funder" aria-hidden="" viewBox="" focusable="">
            <use href="/images/funder.svg#funder" />
        </svg>
        <svg class="icon icon--researcher" aria-hidden="" viewBox="" focusable="">
            <use href="/images/researcher.svg#researcher" />
        </svg>
        <svg class="icon icon--language-small" aria-hidden="" viewBox="" focusable="">
            <use href="/images/language-small.svg#language-small" />
        </svg>
        <svg class="icon icon--pricing" aria-hidden="" viewBox="" focusable="">
            <use href="/images/pricing.svg#pricing" />
        </svg>
        <svg class="icon icon--licensing" aria-hidden="" viewBox="" focusable="">
            <use href="/images/licensing.svg#licensing" />
        </svg>
        <svg class="icon icon--sector-small" aria-hidden="" viewBox="" focusable="">
            <use href="/images/sector-small.svg#sector-small" />
        </svg>
        <svg class="icon icon--coop-type" aria-hidden="" viewBox="" focusable="">
            <use href="/images/coop-type.svg#coop-type" />
        </svg>
    </div>
    <div class="row">
        <svg class="icon icon--facebook" aria-hidden="" viewBox="" focusable="">
            <use href="/images/facebook.svg#facebook" />
        </svg>
        <svg class="icon icon--github" aria-hidden="" viewBox="" focusable="">
            <use href="/images/github.svg#github" />
        </svg>
        <svg class="icon icon--instagram" aria-hidden="" viewBox="" focusable="">
            <use href="/images/instagram.svg#instagram" />
        </svg>
        <svg class="icon icon--linkedin" aria-hidden="" viewBox="" focusable="">
            <use href="/images/linkedin.svg#linkedin" />
        </svg>
        <svg class="icon icon--mastodon" aria-hidden="" viewBox="" focusable="">
            <use href="/images/mastodon.svg#mastodon" />
        </svg>
        <svg class="icon icon--medium" aria-hidden="" viewBox="" focusable="">
            <use href="/images/medium.svg#medium" />
        </svg>
        <svg class="icon icon--reddit" aria-hidden="" viewBox="" focusable="">
            <use href="/images/reddit.svg#reddit" />
        </svg>
        <svg class="icon icon--stack-overflow" aria-hidden="" viewBox="" focusable="">
            <use href="/images/stack-overflow.svg#stack-overflow" />
        </svg>
        <svg class="icon icon--twitter" aria-hidden="" viewBox="" focusable="">
            <use href="/images/twitter.svg#twitter" />
        </svg>
    </div>
    <div class="row">
        <svg class="icon icon--topic icon--md" aria-hidden="" viewBox="0 0 24 24" focusable="">
            <use href="/images/topic.svg#topic" />
        </svg>
        <svg class="icon icon--goal icon--md" aria-hidden="" viewBox="0 0 24 24" focusable="">
            <use href="/images/goal.svg#goal" />
        </svg>
        <svg class="icon icon--sector icon--md" aria-hidden="" viewBox="0 0 24 24" focusable="">
            <use href="/images/sector.svg#sector" />
        </svg>
        <svg class="icon icon--format icon--md" aria-hidden="" viewBox="0 0 24 24" focusable="">
            <use href="/images/format.svg#format" />
        </svg>
    </div>
    <div class="row">
        <svg class="icon icon--language icon--lg" aria-hidden="" viewBox="0 0 32 32" focusable="">
            <use href="/images/language.svg#language" />
        </svg>
        <svg class="icon icon--pcc icon--lg" aria-hidden="" viewBox="0 0 32 32" focusable="">
            <use href="/images/pcc.svg#pcc" />
        </svg>
        <svg class="icon icon--resources icon--lg" aria-hidden="" viewBox="0 0 32 32" focusable="">
            <use href="/images/resources.svg#resources" />
        </svg>
        <svg class="icon icon--directory icon--lg" aria-hidden="" viewBox="0 0 32 32" focusable="">
            <use href="/images/directory.svg#directory" />
        </svg>
        <svg class="icon icon--tools icon--lg" aria-hidden="" viewBox="0 0 32 32" focusable="">
            <use href="/images/tools.svg#tools" />
        </svg>
    </div>
    <div class="row">
        <svg class="icon icon--browse icon--xl" aria-hidden="" viewBox="0 0 40 40" focusable="">
            <use href="/images/browse.svg#browse" />
        </svg>
        <svg class="icon icon--see-tools icon--xl" aria-hidden="" viewBox="0 0 40 40" focusable="">
            <use href="/images/see-tools.svg#see-tools" />
        </svg>
        <svg class="icon icon--share-tools icon--xl" aria-hidden="" viewBox="0 0 40 40" focusable="">
            <use href="/images/share-tools.svg#share-tools" />
        </svg>
    </div>
</div>

<div class="icons has-dark-mint-500-background-color">
    <div class="row">
        <svg class="icon icon--favorite" aria-hidden="" viewBox="" focusable="">
            <use href="/images/favorite.svg#favorite" />
        </svg>
        <svg class="icon icon--favorite-filled" aria-hidden="" viewBox="" focusable="">
            <use href="/images/favorite-filled.svg#favorite-filled" />
        </svg>
        <svg class="icon icon--share" aria-hidden="" viewBox="" focusable="">
            <use href="/images/share.svg#share" />
        </svg>
        <svg class="icon icon--author" aria-hidden="" viewBox="" focusable="">
            <use href="/images/author.svg#author" />
        </svg>
        <svg class="icon icon--edit" aria-hidden="" viewBox="" focusable="">
            <use href="/images/edit.svg#edit" />
        </svg>
        <svg class="icon icon--save" aria-hidden="" viewBox="" focusable="">
            <use href="/images/save.svg#save" />
        </svg>
        <svg class="icon icon--info" aria-hidden="" viewBox="" focusable="">
            <use href="/images/info.svg#info" />
        </svg>
        <svg class="icon icon--lock" aria-hidden="" viewBox="" focusable="">
            <use href="/images/lock.svg#lock" />
        </svg>
        <svg class="icon icon--success" aria-hidden="" viewBox="" focusable="">
            <use href="/images/success.svg#success" />
        </svg>
        <svg class="icon icon--warning" aria-hidden="" viewBox="" focusable="">
            <use href="/images/warning.svg#warning" />
        </svg>
        <svg class="icon icon--error" aria-hidden="" viewBox="" focusable="">
            <use href="/images/error.svg#error" />
        </svg>
        <svg class="icon icon--location" aria-hidden="" viewBox="" focusable="">
            <use href="/images/location.svg#location" />
        </svg>
        <svg class="icon icon--broken-link" aria-hidden="" viewBox="" focusable="">
            <use href="/images/broken-link.svg#broken-link" />
        </svg>
        <svg class="icon icon--menu" aria-hidden="" viewBox="" focusable="">
            <use href="/images/menu.svg#menu" />
        </svg>
        <svg class="icon icon--filter" aria-hidden="" viewBox="" focusable="">
            <use href="/images/filter.svg#filter" />
        </svg>
        <svg class="icon icon--sort" aria-hidden="" viewBox="" focusable="">
            <use href="/images/sort.svg#sort" />
        </svg>
        <svg class="icon icon--reset" aria-hidden="" viewBox="" focusable="">
            <use href="/images/reset.svg#reset" />
        </svg>
        <svg class="icon icon--tag" aria-hidden="" viewBox="" focusable="">
            <use href="/images/tag.svg#tag" />
        </svg>
        <svg class="icon icon--delete" aria-hidden="" viewBox="" focusable="">
            <use href="/images/delete.svg#delete" />
        </svg>
        <svg class="icon icon--archive" aria-hidden="" viewBox="" focusable="">
            <use href="/images/archive.svg#archive" />
        </svg>
        <svg class="icon icon--notification" aria-hidden="" viewBox="" focusable="">
            <use href="/images/notification.svg#notification" />
        </svg>
        <svg class="icon icon--settings" aria-hidden="" viewBox="" focusable="">
            <use href="/images/settings.svg#settings" />
        </svg>
        <svg class="icon icon--customize" aria-hidden="" viewBox="" focusable="">
            <use href="/images/customize.svg#customize" />
        </svg>
        <svg class="icon icon--export" aria-hidden="" viewBox="" focusable="">
            <use href="/images/export.svg#export" />
        </svg>
        <svg class="icon icon--external" aria-hidden="" viewBox="" focusable="">
            <use href="/images/external.svg#external" />
        </svg>
    </div>
    <div class="row">
        <svg class="icon icon--chevron-left" aria-hidden="" viewBox="" focusable="">
            <use href="/images/chevron-left.svg#chevron-left" />
        </svg>
        <svg class="icon icon--chevron-right" aria-hidden="" viewBox="" focusable="">
            <use href="/images/chevron-right.svg#chevron-right" />
        </svg>
        <svg class="icon icon--chevron-up" aria-hidden="" viewBox="" focusable="">
            <use href="/images/chevron-up.svg#chevron-up" />
        </svg>
        <svg class="icon icon--chevron-down" aria-hidden="" viewBox="" focusable="">
            <use href="/images/chevron-down.svg#chevron-down" />
        </svg>
        <svg class="icon icon--scroll-up" aria-hidden="" viewBox="" focusable="">
            <use href="/images/scroll-up.svg#scroll-up" />
        </svg>
        <svg class="icon icon--scroll-down" aria-hidden="" viewBox="" focusable="">
            <use href="/images/scroll-down.svg#scroll-down" />
        </svg>
        <svg class="icon icon--close" aria-hidden="" viewBox="" focusable="">
            <use href="/images/close.svg#close" />
        </svg>
        <svg class="icon icon--add" aria-hidden="" viewBox="" focusable="">
            <use href="/images/add.svg#add" />
        </svg>
        <svg class="icon icon--calendar" aria-hidden="" viewBox="" focusable="">
            <use href="/images/calendar.svg#calendar" />
        </svg>
        <svg class="icon icon--search" aria-hidden="" viewBox="" focusable="">
            <use href="/images/search.svg#search" />
        </svg>
    </div>
    <div class="row">
        <svg class="icon icon--academic" aria-hidden="" viewBox="" focusable="">
            <use href="/images/academic.svg#academic" />
        </svg>
        <svg class="icon icon--article" aria-hidden="" viewBox="" focusable="">
            <use href="/images/article.svg#article" />
        </svg>
        <svg class="icon icon--audio" aria-hidden="" viewBox="" focusable="">
            <use href="/images/audio.svg#audio" />
        </svg>
        <svg class="icon icon--blog" aria-hidden="" viewBox="" focusable="">
            <use href="/images/blog.svg#blog" />
        </svg>
        <svg class="icon icon--book" aria-hidden="" viewBox="" focusable="">
            <use href="/images/book.svg#book" />
        </svg>
        <svg class="icon icon--case-study" aria-hidden="" viewBox="" focusable="">
            <use href="/images/case-study.svg#case-study" />
        </svg>
        <svg class="icon icon--curriculum" aria-hidden="" viewBox="" focusable="">
            <use href="/images/curriculum.svg#curriculum" />
        </svg>
        <svg class="icon icon--document" aria-hidden="" viewBox="" focusable="">
            <use href="/images/document.svg#document" />
        </svg>
        <svg class="icon icon--online-training" aria-hidden="" viewBox="" focusable="">
            <use href="/images/online-training.svg#online-training" />
        </svg>
        <svg class="icon icon--presentation" aria-hidden="" viewBox="" focusable="">
            <use href="/images/presentation.svg#presentation" />
        </svg>
        <svg class="icon icon--report" aria-hidden="" viewBox="" focusable="">
            <use href="/images/report.svg#report" />
        </svg>
        <svg class="icon icon--template" aria-hidden="" viewBox="" focusable="">
            <use href="/images/template.svg#template" />
        </svg>
        <svg class="icon icon--toolkit" aria-hidden="" viewBox="" focusable="">
            <use href="/images/toolkit.svg#toolkit" />
        </svg>
        <svg class="icon icon--video" aria-hidden="" viewBox="" focusable="">
            <use href="/images/video.svg#video" />
        </svg>
    </div>
    <div class="row">
        <svg class="icon icon--cooperative" aria-hidden="" viewBox="" focusable="">
            <use href="/images/cooperative.svg#cooperative" />
        </svg>
        <svg class="icon icon--converting" aria-hidden="" viewBox="" focusable="">
            <use href="/images/converting.svg#converting" />
        </svg>
        <svg class="icon icon--member" aria-hidden="" viewBox="" focusable="">
            <use href="/images/member.svg#member" />
        </svg>
        <svg class="icon icon--founder" aria-hidden="" viewBox="" focusable="">
            <use href="/images/founder.svg#founder" />
        </svg>
        <svg class="icon icon--service-provider" aria-hidden="" viewBox="" focusable="">
            <use href="/images/service-provider.svg#service-provider" />
        </svg>
        <svg class="icon icon--policy-maker" aria-hidden="" viewBox="" focusable="">
            <use href="/images/policy-maker.svg#policy-maker" />
        </svg>
        <svg class="icon icon--community-builder" aria-hidden="" viewBox="" focusable="">
            <use href="/images/community-builder.svg#community-builder" />
        </svg>
        <svg class="icon icon--support-organization" aria-hidden="" viewBox="" focusable="">
            <use href="/images/support-organization.svg#support-organization" />
        </svg>
        <svg class="icon icon--funder" aria-hidden="" viewBox="" focusable="">
            <use href="/images/funder.svg#funder" />
        </svg>
        <svg class="icon icon--researcher" aria-hidden="" viewBox="" focusable="">
            <use href="/images/researcher.svg#researcher" />
        </svg>
        <svg class="icon icon--language-small" aria-hidden="" viewBox="" focusable="">
            <use href="/images/language-small.svg#language-small" />
        </svg>
        <svg class="icon icon--pricing" aria-hidden="" viewBox="" focusable="">
            <use href="/images/pricing.svg#pricing" />
        </svg>
        <svg class="icon icon--licensing" aria-hidden="" viewBox="" focusable="">
            <use href="/images/licensing.svg#licensing" />
        </svg>
        <svg class="icon icon--sector-small" aria-hidden="" viewBox="" focusable="">
            <use href="/images/sector-small.svg#sector-small" />
        </svg>
        <svg class="icon icon--coop-type" aria-hidden="" viewBox="" focusable="">
            <use href="/images/coop-type.svg#coop-type" />
        </svg>
    </div>
    <div class="row">
        <svg class="icon icon--facebook" aria-hidden="" viewBox="" focusable="">
            <use href="/images/facebook.svg#facebook" />
        </svg>
        <svg class="icon icon--github" aria-hidden="" viewBox="" focusable="">
            <use href="/images/github.svg#github" />
        </svg>
        <svg class="icon icon--instagram" aria-hidden="" viewBox="" focusable="">
            <use href="/images/instagram.svg#instagram" />
        </svg>
        <svg class="icon icon--linkedin" aria-hidden="" viewBox="" focusable="">
            <use href="/images/linkedin.svg#linkedin" />
        </svg>
        <svg class="icon icon--mastodon" aria-hidden="" viewBox="" focusable="">
            <use href="/images/mastodon.svg#mastodon" />
        </svg>
        <svg class="icon icon--medium" aria-hidden="" viewBox="" focusable="">
            <use href="/images/medium.svg#medium" />
        </svg>
        <svg class="icon icon--reddit" aria-hidden="" viewBox="" focusable="">
            <use href="/images/reddit.svg#reddit" />
        </svg>
        <svg class="icon icon--stack-overflow" aria-hidden="" viewBox="" focusable="">
            <use href="/images/stack-overflow.svg#stack-overflow" />
        </svg>
        <svg class="icon icon--twitter" aria-hidden="" viewBox="" focusable="">
            <use href="/images/twitter.svg#twitter" />
        </svg>
    </div>
    <div class="row">
        <svg class="icon icon--topic icon--md" aria-hidden="" viewBox="0 0 24 24" focusable="">
            <use href="/images/topic.svg#topic" />
        </svg>
        <svg class="icon icon--goal icon--md" aria-hidden="" viewBox="0 0 24 24" focusable="">
            <use href="/images/goal.svg#goal" />
        </svg>
        <svg class="icon icon--sector icon--md" aria-hidden="" viewBox="0 0 24 24" focusable="">
            <use href="/images/sector.svg#sector" />
        </svg>
        <svg class="icon icon--format icon--md" aria-hidden="" viewBox="0 0 24 24" focusable="">
            <use href="/images/format.svg#format" />
        </svg>
    </div>
    <div class="row">
        <svg class="icon icon--language icon--lg" aria-hidden="" viewBox="0 0 32 32" focusable="">
            <use href="/images/language.svg#language" />
        </svg>
        <svg class="icon icon--pcc icon--lg" aria-hidden="" viewBox="0 0 32 32" focusable="">
            <use href="/images/pcc.svg#pcc" />
        </svg>
        <svg class="icon icon--resources icon--lg" aria-hidden="" viewBox="0 0 32 32" focusable="">
            <use href="/images/resources.svg#resources" />
        </svg>
        <svg class="icon icon--directory icon--lg" aria-hidden="" viewBox="0 0 32 32" focusable="">
            <use href="/images/directory.svg#directory" />
        </svg>
        <svg class="icon icon--tools icon--lg" aria-hidden="" viewBox="0 0 32 32" focusable="">
            <use href="/images/tools.svg#tools" />
        </svg>
    </div>
    <div class="row">
        <svg class="icon icon--browse icon--xl" aria-hidden="" viewBox="0 0 40 40" focusable="">
            <use href="/images/browse.svg#browse" />
        </svg>
        <svg class="icon icon--see-tools icon--xl" aria-hidden="" viewBox="0 0 40 40" focusable="">
            <use href="/images/see-tools.svg#see-tools" />
        </svg>
        <svg class="icon icon--share-tools icon--xl" aria-hidden="" viewBox="0 0 40 40" focusable="">
            <use href="/images/share-tools.svg#share-tools" />
        </svg>
    </div>
</div>


        <style>
	.icons {
		align-items: center;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 0.75rem;
	}

	.row {
		width: 100%;
	}

	.row + .row {
		margin-top: 1rem;
	}

	.icon + .icon {
		margin-left: 0.5rem;
	}
</style>
<h1>{{ iconsTitle }}</h1>
<div class="icons">
	{% for group in icons %}
	<div class="row">
		{% for icon in group %}
			{% render '@svg', icon %}
		{% endfor %}
	</div>
	{% endfor %}
</div>
<div class="icons has-blue-500-color">
	{% for group in icons %}
	<div class="row">
		{% for icon in group %}
			{% render '@svg', icon %}
		{% endfor %}
	</div>
	{% endfor %}
</div>

<div class="icons has-dark-mint-500-background-color">
	{% for group in icons %}
	<div class="row">
		{% for icon in group %}
			{% render '@svg', icon %}
		{% endfor %}
	</div>
	{% endfor %}
</div>


        
            
            {
  "iconsTitle": "Icons",
  "icons": [
    [
      {
        "svg": "favorite"
      },
      {
        "svg": "favorite-filled"
      },
      {
        "svg": "share"
      },
      {
        "svg": "author"
      },
      {
        "svg": "edit"
      },
      {
        "svg": "save"
      },
      {
        "svg": "info"
      },
      {
        "svg": "lock"
      },
      {
        "svg": "success"
      },
      {
        "svg": "warning"
      },
      {
        "svg": "error"
      },
      {
        "svg": "location"
      },
      {
        "svg": "broken-link"
      },
      {
        "svg": "menu"
      },
      {
        "svg": "filter"
      },
      {
        "svg": "sort"
      },
      {
        "svg": "reset"
      },
      {
        "svg": "tag"
      },
      {
        "svg": "delete"
      },
      {
        "svg": "archive"
      },
      {
        "svg": "notification"
      },
      {
        "svg": "settings"
      },
      {
        "svg": "customize"
      },
      {
        "svg": "export"
      },
      {
        "svg": "external"
      }
    ],
    [
      {
        "svg": "chevron-left"
      },
      {
        "svg": "chevron-right"
      },
      {
        "svg": "chevron-up"
      },
      {
        "svg": "chevron-down"
      },
      {
        "svg": "scroll-up"
      },
      {
        "svg": "scroll-down"
      },
      {
        "svg": "close"
      },
      {
        "svg": "add"
      },
      {
        "svg": "calendar"
      },
      {
        "svg": "search"
      }
    ],
    [
      {
        "svg": "academic"
      },
      {
        "svg": "article"
      },
      {
        "svg": "audio"
      },
      {
        "svg": "blog"
      },
      {
        "svg": "book"
      },
      {
        "svg": "case-study"
      },
      {
        "svg": "curriculum"
      },
      {
        "svg": "document"
      },
      {
        "svg": "online-training"
      },
      {
        "svg": "presentation"
      },
      {
        "svg": "report"
      },
      {
        "svg": "template"
      },
      {
        "svg": "toolkit"
      },
      {
        "svg": "video"
      }
    ],
    [
      {
        "svg": "cooperative"
      },
      {
        "svg": "converting"
      },
      {
        "svg": "member"
      },
      {
        "svg": "founder"
      },
      {
        "svg": "service-provider"
      },
      {
        "svg": "policy-maker"
      },
      {
        "svg": "community-builder"
      },
      {
        "svg": "support-organization"
      },
      {
        "svg": "funder"
      },
      {
        "svg": "researcher"
      },
      {
        "svg": "language-small"
      },
      {
        "svg": "pricing"
      },
      {
        "svg": "licensing"
      },
      {
        "svg": "sector-small"
      },
      {
        "svg": "coop-type"
      }
    ],
    [
      {
        "svg": "facebook"
      },
      {
        "svg": "github"
      },
      {
        "svg": "instagram"
      },
      {
        "svg": "linkedin"
      },
      {
        "svg": "mastodon"
      },
      {
        "svg": "medium"
      },
      {
        "svg": "reddit"
      },
      {
        "svg": "stack-overflow"
      },
      {
        "svg": "twitter"
      }
    ],
    [
      {
        "svg": "topic",
        "class": "icon icon--topic icon--md",
        "viewBox": "0 0 24 24"
      },
      {
        "svg": "goal",
        "class": "icon icon--goal icon--md",
        "viewBox": "0 0 24 24"
      },
      {
        "svg": "sector",
        "class": "icon icon--sector icon--md",
        "viewBox": "0 0 24 24"
      },
      {
        "svg": "format",
        "class": "icon icon--format icon--md",
        "viewBox": "0 0 24 24"
      }
    ],
    [
      {
        "svg": "language",
        "class": "icon icon--language icon--lg",
        "viewBox": "0 0 32 32"
      },
      {
        "svg": "pcc",
        "class": "icon icon--pcc icon--lg",
        "viewBox": "0 0 32 32"
      },
      {
        "svg": "resources",
        "class": "icon icon--resources icon--lg",
        "viewBox": "0 0 32 32"
      },
      {
        "svg": "directory",
        "class": "icon icon--directory icon--lg",
        "viewBox": "0 0 32 32"
      },
      {
        "svg": "tools",
        "class": "icon icon--tools icon--lg",
        "viewBox": "0 0 32 32"
      }
    ],
    [
      {
        "svg": "browse",
        "class": "icon icon--browse icon--xl",
        "viewBox": "0 0 40 40"
      },
      {
        "svg": "see-tools",
        "class": "icon icon--see-tools icon--xl",
        "viewBox": "0 0 40 40"
      },
      {
        "svg": "share-tools",
        "class": "icon icon--share-tools icon--xl",
        "viewBox": "0 0 40 40"
      }
    ]
  ]
}

Handle: @icons
Preview:
- With layout
- Component only
Filesystem Path: src/components/10-atoms/20-icons/icons.njk
References (1): @svg

There are no notes for this item.

Icons

Typography

Paragraph

Quote

List

Divider

Link

Call To Action

Button

Form Elements

Input

Textareas

Selects

Checkboxes

Custom Checkboxes

Radio Buttons

Submit Button

Image

Menu Button

Menu

Card

Accordion

Link List

Dialog

Notification

Radio Group

Responsive Blocks

Tabs

Archive

Term List

Search Results