Utility (no attribution)
App icons (no attribution)
Maps (no attribution)
Flags (MIT – no restriction)
<section class='c-banner u-background-dark-blue'>
<div class='c-banner__content-wrapper'>
<header class='c-section-header u-background-dark-blue'>
<p class='c-section-header__supra'><span>Brand</span></p>
<h1 class='c-heading u-background-dark-blue'>
Icons
</h1>
</header>
</div>
</section>
<div class='container-fluid'>
<h1 class='c-heading'>
UI
</h1>
<ul class='l-grid u-list--unstyled l-grid--compact'>
<li class='l-grid__item'>
<span class='c-icon c-icon--double c-icon--icon-arrow-svg'>
<svg height='100px' width='100px' fill="#000000" xmlns="http://www.w3.org/2000/svg" viewBox="25 25 50 40" x="0px" y="0px">
<path d="M50,61.66a2,2,0,0,0,2-2v-25l4.62,4.42a2,2,0,1,0,2.76-2.89l-8-7.65a2,2,0,0,0-2.76,0l-8,7.65a2,2,0,1,0,2.76,2.89L48,34.68v25A2,2,0,0,0,50,61.66Z"></path>
</svg>
</span>
<h5 class='u-margin--vertical--tight'>Arrow</h5>
<p><a href='../../graphic/icon-arrow.svg' title='Right click to download'>SVG</a> </p>
</li>
<li class='l-grid__item'>
<span class='c-icon c-icon--double c-icon--noun-antenna-1515372-svg'>
<?xml version="1.0" encoding="UTF-8"?>
<svg width="100pt" height="100pt" version="1.1" viewBox="25 25 50 50" xmlns="http://www.w3.org/2000/svg">
<g>
<path d="m33 33c-9.4414 9.4414-9.6406 25.191-0.44141 34.391 0.37109 0.40625 0.88672 0.64062 1.4336 0.65234 0.55078 0.011719 1.0781-0.19922 1.4648-0.58594 0.38672-0.39062 0.59766-0.91797 0.58203-1.4648-0.015624-0.54688-0.25391-1.0664-0.66016-1.4336-7.6602-7.6719-7.4609-20.82 0.44922-28.73 3.7539-3.7461 8.8398-5.8555 14.141-5.8555 5.3047 0 10.391 2.1094 14.141 5.8555 7.9102 7.9102 8.1094 21.059 0.44922 28.73-0.71484 0.78906-0.6875 2.0039 0.0625 2.7578 0.75391 0.75781 1.9688 0.78906 2.7578 0.074219 9.1992-9.1992 9-24.949-0.44141-34.391h0.003906c-4.5039-4.5-10.605-7.0273-16.973-7.0273-6.3633 0-12.469 2.5273-16.969 7.0273z" />
<path d="m61.41 61.41c3.0273-3.0195 4.6992-7.1367 4.6406-11.41-0.015625-4.2617-1.7227-8.3438-4.7422-11.352-3-2.9961-7.0664-4.6797-11.309-4.6797s-8.3086 1.6836-11.309 4.6797c-3.0039 3.0156-4.6875 7.0977-4.6914 11.352-0.050781 4.2656 1.6211 8.3672 4.6406 11.379 0.36719 0.40625 0.88672 0.64062 1.4336 0.65625 0.54688 0.011719 1.0742-0.20312 1.4609-0.58984 0.38672-0.38672 0.59766-0.91797 0.58203-1.4648-0.011719-0.54688-0.25-1.0625-0.65625-1.4297-2.2461-2.2539-3.4922-5.3125-3.4609-8.4922 0.011719-3.207 1.293-6.2812 3.5586-8.5469 2.2539-2.2617 5.3125-3.5312 8.5-3.5312 3.1914 0 6.25 1.2695 8.5 3.5312 2.2695 2.2656 3.5508 5.3398 3.5625 8.5469 0.039062 3.1914-1.2109 6.2617-3.4609 8.5195-0.71875 0.78906-0.69141 2.0039 0.0625 2.7578 0.75391 0.75781 1.9648 0.78906 2.7578 0.074218z" />
<path d="m42 70c-1.1055 0-2 0.89453-2 2s0.89453 2 2 2h16c1.1055 0 2-0.89453 2-2s-0.89453-2-2-2h-6v-12.289c2.7656-0.72266 4.9375-2.8711 5.6914-5.6289 0.75781-2.7578-0.019531-5.7109-2.0312-7.7422-3.1641-3.0312-8.1562-3.0312-11.32 0-2.0117 2.0312-2.7891 4.9844-2.0312 7.7422 0.75391 2.7578 2.9258 4.9062 5.6914 5.6289v12.289zm4-20c0-1.3359 0.66797-2.582 1.7773-3.3242 1.1133-0.74219 2.5195-0.87891 3.7539-0.36719 1.2344 0.51172 2.1328 1.6055 2.3906 2.9141 0.26172 1.3086-0.14844 2.6641-1.0938 3.6055-1.582 1.5117-4.0742 1.5117-5.6562 0-0.75-0.75-1.1719-1.7656-1.1719-2.8281z" />
</g>
</svg>
</span>
<h5 class='u-margin--vertical--tight'>Audience</h5>
<p><a href='../../graphic/noun-antenna-1515372.svg' title='Right click to download'>SVG</a> <a href='https://thenounproject.com/icon/1515372/' target='_blank' title='View on NounProject'>Source</a></p>
</li>
<li class='l-grid__item'>
<span class='c-icon c-icon--double c-icon--noun_user_1515313-svg'>
<svg height='100px' width='100px' fill="#000000" xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="25 25 50 50" x="0px" y="0px">
<path d="M50,26A24,24,0,1,0,74,50,24,24,0,0,0,50,26ZM40,67.29V66a10,10,0,0,1,20,0v1.29a19.81,19.81,0,0,1-20,0ZM44,46a6,6,0,1,1,6,6A6,6,0,0,1,44,46ZM63.89,64.35a14,14,0,0,0-7.45-10.77A9.91,9.91,0,0,0,60,46a10,10,0,0,0-20,0,9.91,9.91,0,0,0,3.56,7.58,14,14,0,0,0-7.45,10.77,20,20,0,1,1,27.78,0Z"></path>
</svg>
</span>
<h5 class='u-margin--vertical--tight'>Avatar</h5>
<p><a href='../../graphic/noun_User_1515313.svg' title='Right click to download'>SVG</a> <a href='https://thenounproject.com/icon/1515313/' target='_blank' title='View on NounProject'>Source</a></p>
</li>
<li class='l-grid__item'>
<span class='c-icon c-icon--double c-icon--noun_dashboard_1515370-svg'>
<svg height='100px' width='100px' fill="#000000" xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="25 25 50 50" x="0px" y="0px">
<path d="M50,74A24,24,0,1,0,26,50,24,24,0,0,0,50,74Zm0-44A20,20,0,1,1,30,50,20,20,0,0,1,50,30Z"></path>
<circle cx="64" cy="50" r="2"></circle>
<circle cx="36" cy="50" r="2"></circle>
<circle cx="60" cy="40" r="2"></circle>
<circle cx="40" cy="40" r="2"></circle>
<path d="M50,56a6,6,0,0,0,2-11.63V36a2,2,0,0,0-4,0v8.37A6,6,0,0,0,50,56Zm0-8a2,2,0,1,1-2,2A2,2,0,0,1,50,48Z"></path>
<path d="M58.59,58.58a12.52,12.52,0,0,1-17.2,0,2,2,0,0,0-2.78,2.86,16.36,16.36,0,0,0,22.8,0,2,2,0,1,0-2.82-2.84Z"></path>
</svg>
</span>
<h5 class='u-margin--vertical--tight'>Dashboard</h5>
<p><a href='../../graphic/noun_dashboard_1515370.svg' title='Right click to download'>SVG</a> <a href='https://thenounproject.com/icon/1515370/' target='_blank' title='View on NounProject'>Source</a></p>
</li>
<li class='l-grid__item'>
<span class='c-icon c-icon--double c-icon--noun_date_1515275-svg'>
<svg height='100px' width='100px' xmlns="http://www.w3.org/2000/svg" viewBox="25 25 50 50">
<path d="M34,74H66a8,8,0,0,0,8-8V34a8,8,0,0,0-8-8H34a8,8,0,0,0-8,8V66A8,8,0,0,0,34,74Zm32-4H34a4,4,0,0,1-4-4V42H70V66A4,4,0,0,1,66,70ZM34,30H66a4,4,0,0,1,4,4v4H30V34A4,4,0,0,1,34,30Z"></path>
<circle cx="38" cy="56" r="2"></circle>
<circle cx="38" cy="64" r="2"></circle>
<circle cx="46" cy="56" r="2"></circle>
<circle cx="46" cy="64" r="2"></circle>
<circle cx="54" cy="56" r="2"></circle>
<circle cx="54" cy="64" r="2"></circle>
<circle cx="62" cy="56" r="2"></circle>
<circle cx="46" cy="48" r="2"></circle>
<circle cx="54" cy="48" r="2"></circle>
<circle cx="62" cy="48" r="2"></circle>
</svg>
</span>
<h5 class='u-margin--vertical--tight'>Date</h5>
<p><a href='../../graphic/noun_date_1515275.svg' title='Right click to download'>SVG</a> <a href='https://thenounproject.com/icon/1515275/' target='_blank' title='View on NounProject'>Source</a></p>
</li>
<li class='l-grid__item'>
<span class='c-icon c-icon--double c-icon--noun_delete_1515567-svg'>
<svg height='100px' width='100px' fill="#000000" xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="25 25 50 50" x="0px" y="0px">
<path d="M28,42a4,4,0,0,0,4,4V66a8,8,0,0,0,8,8H60a8,8,0,0,0,8-8V46a4,4,0,0,0,4-4V38a4,4,0,0,0-4-4H60V30a4,4,0,0,0-4-4H44a4,4,0,0,0-4,4v4H32a4,4,0,0,0-4,4ZM64,66a4,4,0,0,1-4,4H40a4,4,0,0,1-4-4V46H64ZM44,30H56v4H44ZM32,38H68v4H32Z"></path>
<path d="M42,66a2,2,0,0,0,2-2V52a2,2,0,0,0-4,0V64A2,2,0,0,0,42,66Z"></path>
<path d="M50,66a2,2,0,0,0,2-2V52a2,2,0,0,0-4,0V64A2,2,0,0,0,50,66Z"></path>
<path d="M58,66a2,2,0,0,0,2-2V52a2,2,0,0,0-4,0V64A2,2,0,0,0,58,66Z"></path>
</svg>
</span>
<h5 class='u-margin--vertical--tight'>Delete</h5>
<p><a href='../../graphic/noun_Delete_1515567.svg' title='Right click to download'>SVG</a> <a href='https://thenounproject.com/icon/1515567/' target='_blank' title='View on NounProject'>Source</a></p>
</li>
<li class='l-grid__item'>
<span class='c-icon c-icon--double c-icon--noun_download_1515282-svg'>
<svg height='100px' width='100px' fill="#000000" xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="25 25 50 50" x="0px" y="0px">
<path d="M30,56a2,2,0,0,0-2,2v6a8,8,0,0,0,8,8H64a8,8,0,0,0,8-8V58a2,2,0,0,0-4,0v6a4,4,0,0,1-4,4H36a4,4,0,0,1-4-4V58A2,2,0,0,0,30,56Z"></path>
<path d="M50,28a2,2,0,0,0-2,2V55l-4.62-4.41a2,2,0,1,0-2.76,2.88l8,7.66a2,2,0,0,0,2.76,0l8-7.66a2,2,0,1,0-2.76-2.88L52,55V30A2,2,0,0,0,50,28Z"></path>
</svg>
</span>
<h5 class='u-margin--vertical--tight'>Download</h5>
<p><a href='../../graphic/noun_Download_1515282.svg' title='Right click to download'>SVG</a> <a href='https://thenounproject.com/icon/1515282/' target='_blank' title='View on NounProject'>Source</a></p>
</li>
<li class='l-grid__item'>
<span class='c-icon c-icon--double c-icon--noun_megaphone_1515584-svg'>
<svg height='100px' width='100px' fill="#000000" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="25 25 50 50" style="enable-background:new 25 25 50 50;" xml:space="preserve">
<path d="M65,38v-5.8c0-2.3-1.9-4.1-4.2-4.1c-0.9,0-1.7,0.3-2.4,0.8L48.4,36H37c-5.5,0-10,4.5-10,10c0,4.8,3.3,8.8,8,9.8V66 c0,3.3,2.7,6,6,6s6-2.7,6-6V56h1.2l10.3,7.3c1.9,1.3,4.5,0.9,5.8-1c0.5-0.7,0.8-1.5,0.8-2.4V54c4.4,0,8-3.6,8-8S69.4,38,65,38z M43,66c0,1.1-0.9,2-2,2s-2-0.9-2-2V56h4V66z M47,52H37c-3.3,0-6-2.7-6-6s2.7-6,6-6h10V52z M61,59.9L60.8,60L51,53.1V39l9.8-7 l0.2,0.2V59.9z M65,50v-8c2.2,0,4,1.8,4,4S67.2,50,65,50z"></path>
</svg>
</span>
<h5 class='u-margin--vertical--tight'>Feedback</h5>
<p><a href='../../graphic/noun_Megaphone_1515584.svg' title='Right click to download'>SVG</a> <a href='https://thenounproject.com/icon/1515584/' target='_blank' title='View on NounProject'>Source</a></p>
</li>
<li class='l-grid__item'>
<span class='c-icon c-icon--double c-icon--noun-globe-1515236-svg'>
<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1" viewBox="300 300 600 600" xmlns="http://www.w3.org/2000/svg">
<path d="m600 312c-76.383 0-149.64 30.344-203.65 84.352-54.008 54.012-84.352 127.27-84.352 203.65s30.344 149.64 84.352 203.65c54.012 54.008 127.27 84.352 203.65 84.352s149.64-30.344 203.65-84.352c54.008-54.012 84.352-127.27 84.352-203.65s-30.344-149.64-84.352-203.65c-54.012-54.008-127.27-84.352-203.65-84.352zm228 211.68c-36.66-17.543-75.797-29.359-116.04-35.039-5.6797-40.246-17.5-79.379-35.039-116.04 35.094 11.883 66.977 31.695 93.18 57.898 26.199 26.199 46.012 58.086 57.898 93.18zm-110.64 137.76c1.6797-20.281 2.6406-40.801 2.6406-61.441s-0.96094-41.16-2.6406-61.441c76.441 14.641 122.64 41.52 122.64 61.441s-46.199 46.801-122.64 61.441zm-117.36 178.56c-19.922 0-46.801-46.199-61.441-122.64 20.281 1.6797 40.801 2.6406 61.441 2.6406s41.16-0.96094 61.441-2.6406c-14.641 76.441-41.52 122.64-61.441 122.64zm0-168c-22.883-0.003906-45.754-1.168-68.52-3.4805-4.6406-45.562-4.6406-91.477 0-137.04 45.562-4.6406 91.477-4.6406 137.04 0 2.3125 22.766 3.4766 45.637 3.4805 68.52-0.003906 22.883-1.168 45.754-3.4805 68.52-22.766 2.3125-45.637 3.4766-68.52 3.4805zm-240-72c0-19.922 46.199-46.801 122.64-61.441-1.6797 20.281-2.6406 40.801-2.6406 61.441s0.96094 41.16 2.6406 61.441c-76.441-14.641-122.64-41.52-122.64-61.441zm240-240c19.922 0 46.801 46.199 61.441 122.64-20.281-1.6797-40.801-2.6406-61.441-2.6406s-41.16 0.96094-61.441 2.6406c14.641-76.441 41.52-122.64 61.441-122.64zm-76.32 12.602c-17.543 36.66-29.359 75.793-35.039 116.04-40.246 5.6797-79.379 17.496-116.04 35.039 11.883-35.094 31.695-66.98 57.898-93.18 26.199-26.203 58.086-46.016 93.18-57.898zm-151.08 303.72c36.66 17.543 75.793 29.359 116.04 35.039 5.6211 40.449 17.438 79.793 35.039 116.64-35.16-11.945-67.086-31.852-93.289-58.16-26.207-26.309-45.984-58.312-57.789-93.52zm303.72 151.68c17.543-36.66 29.359-75.797 35.039-116.04 40.48-5.8125 79.824-17.832 116.64-35.641-11.867 35.27-31.738 67.316-58.051 93.629s-58.359 46.184-93.629 58.051z" />
</svg>
</span>
<h5 class='u-margin--vertical--tight'>Globe</h5>
<p><a href='../../graphic/noun-globe-1515236.svg' title='Right click to download'>SVG</a> <a href='https://thenounproject.com/icon/1515236/' target='_blank' title='View on NounProject'>Source</a></p>
</li>
<li class='l-grid__item'>
<span class='c-icon c-icon--double c-icon--noun-heart-1515286-svg'>
<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="25 25 50 50" x="0px" y="0px">
<path d="M69.9,32.1a14,14,0,0,0-19.8,0l-.1.1-.1-.1A14,14,0,0,0,30.06,51.86L48.55,71.37a2,2,0,0,0,2.9,0L69.9,51.9A14,14,0,0,0,69.9,32.1ZM67,49.11l-17,18-17.07-18A10,10,0,1,1,47.07,34.93l1.52,1.51a2,2,0,0,0,2.83,0l1.51-1.51A10,10,0,1,1,67,49.11Z"></path>
</svg>
</span>
<h5 class='u-margin--vertical--tight'>Heart</h5>
<p><a href='../../graphic/noun-heart-1515286.svg' title='Right click to download'>SVG</a> <a href='https://thenounproject.com/icon/1515286/' target='_blank' title='View on NounProject'>Source</a></p>
</li>
<li class='l-grid__item'>
<span class='c-icon c-icon--double c-icon--noun_buoy_1515358-svg'>
<svg height='100px' width='100px' fill="#000000" xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="25 25 50 50" x="0px" y="0px">
<path d="M33,67A24,24,0,1,0,33,33,23.92,23.92,0,0,0,33,67Zm1.49-29.63,5.58,5.59s.1.06.15.1a11.92,11.92,0,0,0,0,13.94s-.11.06-.15.1l-5.58,5.59A20,20,0,0,1,34.52,37.34ZM55.66,55.66a8,8,0,1,1,0-11.32A8,8,0,0,1,55.66,55.66ZM37.34,65.49l5.59-5.59s.06-.1.1-.15a11.92,11.92,0,0,0,13.94,0s.06.11.1.15l5.59,5.59A20.06,20.06,0,0,1,37.34,65.49Zm28.14-2.83L59.9,57.07s-.1-.06-.15-.1a11.92,11.92,0,0,0,0-13.94s.11-.06.15-.1l5.58-5.59A20,20,0,0,1,65.48,62.66ZM62.66,34.52,57.07,40.1s-.06.1-.1.15a11.92,11.92,0,0,0-13.94,0s-.06-.11-.1-.15l-5.59-5.58A20,20,0,0,1,62.66,34.52Z"></path>
</svg>
</span>
<h5 class='u-margin--vertical--tight'>Help</h5>
<p><a href='../../graphic/noun_Buoy_1515358.svg' title='Right click to download'>SVG</a> <a href='https://thenounproject.com/icon/1515358/' target='_blank' title='View on NounProject'>Source</a></p>
</li>
<li class='l-grid__item'>
<span class='c-icon c-icon--double c-icon--noun-location-pin-1515429-svg'>
<?xml version="1.0" encoding="UTF-8"?>
<svg width="100pt" height="100pt" version="1.1" viewBox="25 25 50 50" xmlns="http://www.w3.org/2000/svg">
<g>
<path d="m62 38c0.003906-4.6719-2.7031-8.9219-6.9414-10.895-4.2344-1.9688-9.2305-1.3008-12.801 1.7148-3.5703 3.0117-5.0664 7.8242-3.832 12.332 1.2305 4.5078 4.9688 7.8906 9.5742 8.668-0.003906 0.058594-0.003906 0.12109 0 0.17969v14c0 1.1055 0.89453 2 2 2s2-0.89453 2-2v-14c0.003906-0.058594 0.003906-0.12109 0-0.17969 5.7695-0.97656 9.9922-5.9688 10-11.82zm-12 8c-3.2344 0-6.1523-1.9492-7.3906-4.9375-1.2383-2.9922-0.55469-6.4297 1.7344-8.7188s5.7266-2.9727 8.7188-1.7344c2.9883 1.2383 4.9375 4.1562 4.9375 7.3906 0 2.1211-0.84375 4.1562-2.3438 5.6562s-3.5352 2.3438-5.6562 2.3438z" />
<path d="m32.129 55.301-6 16c-0.22656 0.61328-0.14062 1.3008 0.23047 1.8398 0.37109 0.53516 0.98438 0.85938 1.6406 0.85938h44c0.65625 0 1.2695-0.32422 1.6406-0.85938 0.37109-0.53906 0.45703-1.2266 0.23047-1.8398l-6-16c-0.29297-0.78125-1.0391-1.3008-1.8711-1.3008h-8c-1.1055 0-2 0.89453-2 2s0.89453 2 2 2h6.6094l4.5 12h-38.219l4.5-12h6.6094c1.1055 0 2-0.89453 2-2s-0.89453-2-2-2h-8c-0.83203 0-1.5781 0.51953-1.8711 1.3008z" />
</g>
</svg>
</span>
<h5 class='u-margin--vertical--tight'>Location</h5>
<p><a href='../../graphic/noun-location-pin-1515429.svg' title='Right click to download'>SVG</a> <a href='https://thenounproject.com/icon/1515429/' target='_blank' title='View on NounProject'>Source</a></p>
</li>
<li class='l-grid__item'>
<span class='c-icon c-icon--double c-icon--noun-link-1515599-svg'>
<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="25 25 50 50" x="0px" y="0px">
<path d="M44,32V28a2,2,0,0,0-4,0v4a2,2,0,0,0,4,0Z"></path>
<path d="M28,44h4a2,2,0,0,0,0-4H28a2,2,0,0,0,0,4Z"></path>
<path d="M35.41,32.59l-2-2a2,2,0,0,0-2.82,2.82l2,2a2,2,0,0,0,2.82-2.82Z"></path>
<path d="M58,74a2,2,0,0,0,2-2V68a2,2,0,0,0-4,0v4A2,2,0,0,0,58,74Z"></path>
<path d="M74,58a2,2,0,0,0-2-2H68a2,2,0,0,0,0,4h4A2,2,0,0,0,74,58Z"></path>
<path d="M66.59,69.41a2,2,0,0,0,2.82-2.82l-2-2a2,2,0,0,0-2.82,2.82Z"></path>
<path d="M28,60.1A11.92,11.92,0,0,0,39.9,72a11.79,11.79,0,0,0,8.41-3.49l6.2-6.2a11.89,11.89,0,0,0,0-16.82,2,2,0,1,0-2.83,2.82,7.92,7.92,0,0,1,0,11.18l-6.2,6.2A7.91,7.91,0,0,1,34.31,54.51l3.1-3.1a2,2,0,0,0-2.82-2.82l-3.1,3.1A11.79,11.79,0,0,0,28,60.1Z"></path>
<path d="M62.59,48.59a2,2,0,0,0,2.82,2.82l3.1-3.1A11.79,11.79,0,0,0,72,39.9,11.92,11.92,0,0,0,60.1,28a11.79,11.79,0,0,0-8.41,3.49l-6.2,6.2a11.88,11.88,0,0,0,0,16.82,2,2,0,0,0,2.82,0,2,2,0,0,0,0-2.82,7.92,7.92,0,0,1,0-11.18l6.2-6.2A7.91,7.91,0,0,1,65.69,45.49Z"></path>
</svg>
</span>
<h5 class='u-margin--vertical--tight'>Link</h5>
<p><a href='../../graphic/noun-link-1515599.svg' title='Right click to download'>SVG</a> <a href='https://thenounproject.com/icon/1515599/' target='_blank' title='View on NounProject'>Source</a></p>
</li>
<li class='l-grid__item'>
<span class='c-icon c-icon--double c-icon--noun-mail-1515222-svg'>
<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="25 25 50 50" x="0px" y="0px">
<path d="M34,70H66a8,8,0,0,0,8-8V38a8,8,0,0,0-8-8H34a8,8,0,0,0-8,8V62A8,8,0,0,0,34,70Zm7.26-19.91L30.1,62.85A4,4,0,0,1,30,62V38.83ZM34,66a3.78,3.78,0,0,1-1.17-.2L44.1,52.93l.95,1a7,7,0,0,0,9.9,0l.95-1L67.17,65.8A3.78,3.78,0,0,1,66,66ZM70,38.83V62a4,4,0,0,1-.1.85L58.74,50.09ZM66,34a3.91,3.91,0,0,1,2.37.8L52.12,51.05a3.08,3.08,0,0,1-4.24,0L31.63,34.8A3.91,3.91,0,0,1,34,34Z"></path>
</svg>
</span>
<h5 class='u-margin--vertical--tight'>Mail</h5>
<p><a href='../../graphic/noun-mail-1515222.svg' title='Right click to download'>SVG</a> <a href='https://thenounproject.com/icon/1515222/' target='_blank' title='View on NounProject'>Source</a></p>
</li>
<li class='l-grid__item'>
<span class='c-icon c-icon--double c-icon--noun_navigation_1515427-svg'>
<svg height='100px' width='100px' fill="#000000" xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="25 25 50 50" x="0px" y="0px">
<title>Navigation</title>
<path d="M42,60a2,2,0,0,0,.63-.1l12-4a2,2,0,0,0,1.27-1.27l4-12a2,2,0,0,0-2.53-2.53l-12,4a2,2,0,0,0-1.27,1.27l-4,12A2,2,0,0,0,42,60Zm5.58-12.42,7.26-2.42-2.42,7.26-7.26,2.42Z"></path>
<path d="M33,67a23.94,23.94,0,0,0,16.9,7h.14A24,24,0,0,0,74,50.07s0,0,0-.07,0,0,0-.07A24,24,0,0,0,50.07,26h-.14A24,24,0,0,0,26,49.93s0,0,0,.07,0,0,0,.07A23.94,23.94,0,0,0,33,67Zm2.83-31.11A19.88,19.88,0,0,1,48,30.11V34a2,2,0,0,0,4,0V30.11A20,20,0,0,1,69.89,48H66a2,2,0,0,0,0,4h3.89A20,20,0,0,1,52,69.89V66a2,2,0,0,0-4,0v3.89A20,20,0,0,1,30.11,52H34a2,2,0,0,0,0-4H30.11A19.88,19.88,0,0,1,35.86,35.86Z"></path>
</svg>
</span>
<h5 class='u-margin--vertical--tight'>Outcomes/Focus area</h5>
<p><a href='../../graphic/noun_Navigation_1515427.svg' title='Right click to download'>SVG</a> <a href='https://thenounproject.com/icon/1515427/' target='_blank' title='View on NounProject'>Source</a></p>
</li>
<li class='l-grid__item'>
<span class='c-icon c-icon--double c-icon--noun_key_1515230-svg'>
<svg height='100px' width='100px' fill="#000000" xmlns="http://www.w3.org/2000/svg" data-name="Private" viewBox="25 25 50 50" x="0px" y="0px">
<path d="M28,74H38a2,2,0,0,0,2-2V68h4a2,2,0,0,0,2-2V62h4a2,2,0,0,0,1.41-.59l1.84-1.83a17,17,0,1,0-12.4-11.26L26.59,62.59A2,2,0,0,0,26,64v8A2,2,0,0,0,28,74Zm2-9.17L44.59,50.24A2,2,0,0,0,45,48.05a12.84,12.84,0,0,1-1-5,13,13,0,1,1,9.23,12.44,2,2,0,0,0-2,.5L49.17,58H44a2,2,0,0,0-2,2v4H38a2,2,0,0,0-2,2v4H30Z"></path>
<circle cx="61" cy="39" r="3"></circle>
</svg>
</span>
<h5 class='u-margin--vertical--tight'>Private</h5>
<p><a href='../../graphic/noun_Key_1515230.svg' title='Right click to download'>SVG</a> <a href='https://thenounproject.com/icon/1515230/' target='_blank' title='View on NounProject'>Source</a></p>
</li>
<li class='l-grid__item'>
<span class='c-icon c-icon--double c-icon--noun_magnifying-glass_1515330-svg'>
<svg height='100px' width='100px' fill="#000000" xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="25 25 50 50" x="0px" y="0px">
<path d="M60.34,51.51a18.05,18.05,0,1,0-8.83,8.83L63.34,72.17a6.24,6.24,0,1,0,8.83-8.83ZM30,44A14,14,0,1,1,44,58,14,14,0,0,1,30,44ZM67.76,70a2.22,2.22,0,0,1-1.59-.66L55,58.2A19,19,0,0,0,58.2,55L69.34,66.17A2.24,2.24,0,0,1,67.76,70Z"></path>
</svg>
</span>
<h5 class='u-margin--vertical--tight'>Search</h5>
<p><a href='../../graphic/noun_Magnifying Glass_1515330.svg' title='Right click to download'>SVG</a> <a href='https://thenounproject.com/icon/1515330/' target='_blank' title='View on NounProject'>Source</a></p>
</li>
<li class='l-grid__item'>
<span class='c-icon c-icon--double c-icon--noun-share-1515414-svg'>
<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="25 25 50 50" x="0px" y="0px">
<path d="M62,44a8,8,0,1,0-8-8,7.93,7.93,0,0,0,.45,2.54l-11.1,5.55a8,8,0,1,0,0,11.82l11.1,5.55A7.93,7.93,0,0,0,54,64a8.07,8.07,0,1,0,2.65-5.91l-11.1-5.55a7.39,7.39,0,0,0,0-5.08l11.1-5.55A8,8,0,0,0,62,44Zm0-12a4,4,0,1,1-4,4A4,4,0,0,1,62,32ZM38,54a4,4,0,1,1,4-4A4,4,0,0,1,38,54Zm24,6a4,4,0,1,1-4,4A4,4,0,0,1,62,60Z"></path>
</svg>
</span>
<h5 class='u-margin--vertical--tight'>Share</h5>
<p><a href='../../graphic/noun-share-1515414.svg' title='Right click to download'>SVG</a> <a href='https://thenounproject.com/icon/1515414/' target='_blank' title='View on NounProject'>Source</a></p>
</li>
<li class='l-grid__item'>
<span class='c-icon c-icon--double c-icon--noun_star_1515575-svg'>
<svg height='100px' width='100px' fill="#000000" xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="25 25 50 50" x="0px" y="0px">
<path d="M26.18,44.3A3.61,3.61,0,0,0,27.1,48l8.82,8.59L33.83,68.75a3.64,3.64,0,0,0,5.28,3.83L50,66.85l10.89,5.73a3.68,3.68,0,0,0,1.7.42,3.65,3.65,0,0,0,3.58-4.25L64.08,56.62,72.9,48a3.63,3.63,0,0,0-2-6.2L58.71,40.06,53.26,29h0a3.64,3.64,0,0,0-6.52,0l-5.45,11L29.12,41.83A3.62,3.62,0,0,0,26.18,44.3Zm16.73-.43a2,2,0,0,0,1.51-1.1L50,31.46l5.58,11.31a2,2,0,0,0,1.51,1.1l12.48,1.81-9,8.81A2,2,0,0,0,60,56.26L62.1,68.69,50.93,62.82a2,2,0,0,0-1.86,0L37.9,68.69,40,56.26a2,2,0,0,0-.58-1.77l-9-8.81Z"></path>
</svg>
</span>
<h5 class='u-margin--vertical--tight'>Star</h5>
<p><a href='../../graphic/noun_Star_1515575.svg' title='Right click to download'>SVG</a> <a href='https://thenounproject.com/icon/1515575/' target='_blank' title='View on NounProject'>Source</a></p>
</li>
<li class='l-grid__item'>
<span class='c-icon c-icon--double c-icon--noun_settings_1515651-svg'>
<svg height='100px' width='100px' fill="#000000" xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="25 25 50 50" x="0px" y="0px">
<path d="M50,58a8,8,0,1,0-8-8A8,8,0,0,0,50,58Zm0-12a4,4,0,1,1-4,4A4,4,0,0,1,50,46Z"></path>
<path d="M28.65,60.93A22.72,22.72,0,0,0,29.86,63a5.81,5.81,0,0,0,6.8,2.24l2.51-.9A17.82,17.82,0,0,0,43,66.56l.48,2.63A5.83,5.83,0,0,0,49,74l1,0,1,0a5.83,5.83,0,0,0,5.5-4.79L57,66.56a17.82,17.82,0,0,0,3.81-2.2l2.51.9A5.81,5.81,0,0,0,70.14,63a20.55,20.55,0,0,0,1.2-2.09,5.72,5.72,0,0,0-1.46-7l-2-1.72a17.36,17.36,0,0,0,0-4.4l2-1.72a5.82,5.82,0,0,0,1.47-7A22.72,22.72,0,0,0,70.14,37a5.81,5.81,0,0,0-6.8-2.24l-2.51.9A17.41,17.41,0,0,0,57,33.44l-.48-2.63A5.83,5.83,0,0,0,51,26c-.69,0-1.39,0-2.08,0a5.83,5.83,0,0,0-5.5,4.79L43,33.44a17.41,17.41,0,0,0-3.81,2.2l-2.51-.9A5.81,5.81,0,0,0,29.86,37a21.55,21.55,0,0,0-1.2,2.08,5.82,5.82,0,0,0,1.46,7l2,1.72a17.36,17.36,0,0,0,0,4.4l-2,1.72A5.75,5.75,0,0,0,28.65,60.93Zm4.06-4,2.88-2.44a2,2,0,0,0,.67-1.9,13.43,13.43,0,0,1,0-5.26,2,2,0,0,0-.67-1.9L32.71,43a1.78,1.78,0,0,1-.49-2.14,18.67,18.67,0,0,1,1-1.74,1.79,1.79,0,0,1,2.1-.64l3.56,1.27a2,2,0,0,0,2-.37,14,14,0,0,1,4.54-2.62,2,2,0,0,0,1.31-1.53l.68-3.73A1.86,1.86,0,0,1,49.15,30a16.07,16.07,0,0,1,1.7,0,1.86,1.86,0,0,1,1.76,1.5l.68,3.74a2,2,0,0,0,1.31,1.53,14,14,0,0,1,4.54,2.62,2,2,0,0,0,2,.37l3.56-1.27a1.79,1.79,0,0,1,2.1.64,18.67,18.67,0,0,1,1,1.74A1.78,1.78,0,0,1,67.29,43l-2.87,2.44a2,2,0,0,0-.68,1.9,13.43,13.43,0,0,1,0,5.26,2,2,0,0,0,.68,1.9L67.29,57a1.78,1.78,0,0,1,.49,2.14,18.67,18.67,0,0,1-1,1.74,1.78,1.78,0,0,1-2.1.64l-3.56-1.27a2,2,0,0,0-2,.37,14,14,0,0,1-4.54,2.62,2,2,0,0,0-1.31,1.53l-.68,3.73A1.86,1.86,0,0,1,50.85,70a16.07,16.07,0,0,1-1.7,0,1.86,1.86,0,0,1-1.76-1.51l-.68-3.73a2,2,0,0,0-1.31-1.53,14,14,0,0,1-4.54-2.62,2,2,0,0,0-1.31-.49,2,2,0,0,0-.67.12l-3.56,1.27a1.78,1.78,0,0,1-2.1-.64,18.67,18.67,0,0,1-1-1.74A1.78,1.78,0,0,1,32.71,57Z"></path>
</svg>
</span>
<h5 class='u-margin--vertical--tight'>Settings</h5>
<p><a href='../../graphic/noun_Settings_1515651.svg' title='Right click to download'>SVG</a> <a href='https://thenounproject.com/icon/1515651/' target='_blank' title='View on NounProject'>Source</a></p>
</li>
<li class='l-grid__item'>
<span class='c-icon c-icon--double c-icon--noun_tag_1515302-svg'>
<svg height='100px' width='100px' fill="#000000" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="25 25 50 50" style="enable-background:new 0 0 100 100;" xml:space="preserve">
<path d="M68,26H51.6c-1.6,0-3.1,0.6-4.2,1.8L28.1,47c-2.7,2.7-2.7,7.2,0,9.9c0,0,0,0,0,0l14.9,15c2.7,2.7,7.2,2.7,9.9,0c0,0,0,0,0,0 l19.3-19.3c1.1-1.1,1.8-2.6,1.8-4.2V32C74,28.7,71.3,26,68,26z M70,48.3c0,0.5-0.2,1-0.6,1.4L50.1,69.1c-1.2,1.2-3.1,1.2-4.2,0 l-15-14.9c-1.2-1.2-1.2-3.1,0-4.2l19.3-19.3c0.4-0.4,0.9-0.6,1.4-0.6H68c1.1,0,2,0.9,2,2V48.3z"></path>
<path d="M61,36c-1.7,0-3,1.3-3,3s1.3,3,3,3s3-1.3,3-3S62.7,36,61,36z"></path>
</svg>
</span>
<h5 class='u-margin--vertical--tight'>Tag</h5>
<p><a href='../../graphic/noun_Tag_1515302.svg' title='Right click to download'>SVG</a> <a href='https://thenounproject.com/icon/1515302/' target='_blank' title='View on NounProject'>Source</a></p>
</li>
<li class='l-grid__item'>
<span class='c-icon c-icon--double c-icon--noun_upload_1515287-svg'>
<svg height='100px' width='100px' fill="#000000" xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="25 25 50 50" x="0px" y="0px">
<path d="M30,56a2,2,0,0,0-2,2v6a8,8,0,0,0,8,8H64a8,8,0,0,0,8-8V58a2,2,0,0,0-4,0v6a4,4,0,0,1-4,4H36a4,4,0,0,1-4-4V58A2,2,0,0,0,30,56Z"></path>
<path d="M50,61.66a2,2,0,0,0,2-2v-25l4.62,4.42a2,2,0,1,0,2.76-2.89l-8-7.65a2,2,0,0,0-2.76,0l-8,7.65a2,2,0,1,0,2.76,2.89L48,34.68v25A2,2,0,0,0,50,61.66Z"></path>
</svg>
</span>
<h5 class='u-margin--vertical--tight'>Upload</h5>
<p><a href='../../graphic/noun_Upload_1515287.svg' title='Right click to download'>SVG</a> <a href='https://thenounproject.com/icon/1515287/' target='_blank' title='View on NounProject'>Source</a></p>
</li>
<li class='l-grid__item'>
<span class='c-icon c-icon--double c-icon--noun-web-1515383-svg'>
<?xml version="1.0" encoding="UTF-8"?>
<svg width="1200pt" height="1200pt" version="1.1" viewBox="300 300 600 600" xmlns="http://www.w3.org/2000/svg">
<path d="m601.92 312h-3.8438c-50.551 0.16797-100.17 13.641-143.87 39.066-43.695 25.422-79.93 61.898-105.06 105.77-25.133 43.863-38.273 93.574-38.105 144.13 0.25391 76.383 30.844 149.54 85.031 203.36 54.191 53.832 127.55 83.93 203.93 83.676 76.383 0.25391 149.74-29.844 203.93-83.676 54.188-53.828 84.777-126.98 85.031-203.36 0.25391-76.383-29.844-149.74-83.676-203.93-53.828-54.191-126.98-84.777-203.36-85.031zm205.56 168h-99.48c-8.1016-39.973-23.961-77.969-46.68-111.84 61.605 16.461 114.17 56.68 146.16 111.84zm-207.48 350.4c-28.844-31.059-49.074-69.113-58.68-110.4h117.36c-9.6055 41.285-29.836 79.34-58.68 110.4zm-67.559-158.4c-5.9219-47.816-5.9219-96.184 0-144h135.12c5.9219 47.816 5.9219 96.184 0 144zm-172.44-72c0.027344-24.418 3.75-48.695 11.039-72h113.16c-5.5977 47.836-5.5977 96.164 0 144h-113.16c-7.2891-23.305-11.012-47.582-11.039-72zm240-230.4c28.844 31.059 49.074 69.113 58.68 110.4h-117.36c9.6055-41.285 29.836-79.34 58.68-110.4zm115.8 158.4h113.16c14.738 46.867 14.738 97.133 0 144h-113.16c5.5977-47.836 5.5977-96.164 0-144zm-177-159.84c-22.762 33.859-38.664 71.859-46.801 111.84h-99.602c32.051-55.211 84.707-95.438 146.4-111.84zm-146.28 351.84h99.48c8.1016 39.973 23.961 77.969 46.68 111.84-61.605-16.461-114.17-56.68-146.16-111.84zm268.68 111.84c22.762-33.859 38.664-71.859 46.801-111.84h99.602c-32.051 55.211-84.707 95.438-146.4 111.84z" />
</svg>
</span>
<h5 class='u-margin--vertical--tight'>Website</h5>
<p><a href='../../graphic/noun-web-1515383.svg' title='Right click to download'>SVG</a> <a href='https://thenounproject.com/icon/1515383/' target='_blank' title='View on NounProject'>Source</a></p>
</li>
</ul>
<h1 class='c-heading'>
Content type
</h1>
<ul class='l-grid u-list--unstyled l-grid--compact'>
<li class='l-grid__item'>
<span class='c-icon c-icon--double c-icon--noun_book_1515384-svg'>
<svg height='100px' width='100px' fill="#000000" xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="25 25 50 50" x="0px" y="0px">
<path d="M72,66V36a2,2,0,0,0-2-2H62V28a2,2,0,0,0-2-2H58A10,10,0,0,0,48,36v0a9.9,9.9,0,0,0-6-2H30a2,2,0,0,0-2,2V66a2,2,0,0,0,2,2H42a6,6,0,0,1,5.78,4.5A2,2,0,0,0,49.72,74h.56a2,2,0,0,0,1.94-1.5A6,6,0,0,1,58,68H70A2,2,0,0,0,72,66ZM52,36a6,6,0,0,1,6-6V56a9.9,9.9,0,0,0-6,2V36ZM42,64H32V38H42a6,6,0,0,1,6,6V66A9.92,9.92,0,0,0,42,64Zm26,0H58a9.92,9.92,0,0,0-6,2v0a6,6,0,0,1,6-6h2a2,2,0,0,0,2-2V38h6Z"></path>
</svg>
</span>
<h5 class='u-margin--vertical--tight'>Document</h5>
<p><a href='../../graphic/noun_book_1515384.svg' title='Right click to download'>SVG</a> <a href='https://thenounproject.com/icon/1515384/' target='_blank' title='View on NounProject'>Source</a></p>
</li>
<li class='l-grid__item'>
<span class='c-icon c-icon--double c-icon--noun_speaker_1515309-svg'>
<svg height='100px' width='100px' fill="#000000" xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="25 25 50 50" x="0px" y="0px">
<path d="M60.28,34A2,2,0,0,0,58,35.72,2,2,0,0,0,59.72,38a12.17,12.17,0,0,1,0,24A2,2,0,0,0,60,66l.29,0a16.17,16.17,0,0,0,0-32Z"></path>
<path d="M59.33,54.11A2,2,0,0,0,60,58a2.24,2.24,0,0,0,.67-.11,8.5,8.5,0,0,0,0-15.78,2,2,0,1,0-1.34,3.78,4.5,4.5,0,0,1,0,8.22Z"></path>
<path d="M51.88,28.3a3.43,3.43,0,0,0-3.75.74l-9,9H32a6,6,0,0,0-6,6V56a6,6,0,0,0,6,6h7.17l9,9A3.44,3.44,0,0,0,54,68.52v-37A3.42,3.42,0,0,0,51.88,28.3ZM50,67.17l-8.59-8.58A2,2,0,0,0,40,58H32a2,2,0,0,1-2-2V44a2,2,0,0,1,2-2h8a2,2,0,0,0,1.41-.59L50,32.83Z"></path>
</svg>
</span>
<h5 class='u-margin--vertical--tight'>Audio</h5>
<p><a href='../../graphic/noun_Speaker_1515309.svg' title='Right click to download'>SVG</a> <a href='https://thenounproject.com/icon/1515309/' target='_blank' title='View on NounProject'>Source</a></p>
</li>
<li class='l-grid__item'>
<span class='c-icon c-icon--double c-icon--noun_design_1515493-svg'>
<svg height='100px' width='100px' fill="#000000" xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="25 25 50 50" x="0px" y="0px">
<path d="M72,59.18,62.83,50l8.51-8.52a9.05,9.05,0,0,0,0-12.82,9.08,9.08,0,0,0-12.83,0L50,37.17,40.82,28a6.83,6.83,0,0,0-9.64,0L28,31.18a6.83,6.83,0,0,0,0,9.64L37.17,50l-3.9,3.9A17.88,17.88,0,0,0,28,66.63V70a2,2,0,0,0,2,2h3.37A17.88,17.88,0,0,0,46.1,66.73l3.9-3.9L59.18,72a6.83,6.83,0,0,0,9.64,0L72,68.82a6.83,6.83,0,0,0,0-9.64ZM61.34,31.48A5.08,5.08,0,0,1,70,35.07a5,5,0,0,1-1.49,3.59L60,47.17,52.83,40ZM43.27,63.9a13.92,13.92,0,0,1-9.9,4.1H32V66.63a13.92,13.92,0,0,1,4.1-9.9l3.9-3.9L47.17,60ZM69.18,66,66,69.18a2.81,2.81,0,0,1-4,0L30.82,38a2.82,2.82,0,0,1,0-4L34,30.82a2.82,2.82,0,0,1,4,0L40.17,33l-3.58,3.59a2,2,0,0,0,0,2.82,2,2,0,0,0,2.82,0L43,35.83,46.17,39l-1.58,1.59a2,2,0,0,0,0,2.82,2,2,0,0,0,2.82,0L49,41.83,52.17,45l-3.58,3.59a2,2,0,0,0,0,2.82,2,2,0,0,0,2.82,0L55,47.83,58.17,51l-1.58,1.59a2,2,0,0,0,0,2.82,2,2,0,0,0,2.82,0L61,53.83,64.17,57l-3.58,3.59a2,2,0,0,0,0,2.82,2,2,0,0,0,2.82,0L67,59.83,69.18,62a2.82,2.82,0,0,1,0,4Z"></path>
</svg>
</span>
<h5 class='u-margin--vertical--tight'>Tool</h5>
<p><a href='../../graphic/noun_design_1515493.svg' title='Right click to download'>SVG</a> <a href='https://thenounproject.com/icon/1515493/' target='_blank' title='View on NounProject'>Source</a></p>
</li>
<li class='l-grid__item'>
<span class='c-icon c-icon--double c-icon--noun_video_camera_1515271-svg'>
<svg height='100px' width='100px' fill="#000000" xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="25 25 50 50" x="0px" y="0px">
<path d="M34,74H54a8,8,0,0,0,8-7.1l9,5.22a2,2,0,0,0,3-1.73V49.61a2,2,0,0,0-3-1.73L62,53.1A8,8,0,0,0,54,46H34a8,8,0,0,0-8,8V66A8,8,0,0,0,34,74Zm36-7.07-8-4.62V57.69l8-4.62ZM30,54a4,4,0,0,1,4-4H54a4,4,0,0,1,4,4V66a4,4,0,0,1-4,4H34a4,4,0,0,1-4-4Z"></path>
<path d="M28,35a7,7,0,1,0,7-7A7,7,0,0,0,28,35Zm10,0a3,3,0,1,1-3-3A3,3,0,0,1,38,35Z"></path>
<path d="M54,42a8,8,0,1,0-8-8A8,8,0,0,0,54,42Zm0-12a4,4,0,1,1-4,4A4,4,0,0,1,54,30Z"></path>
</svg>
</span>
<h5 class='u-margin--vertical--tight'>Video</h5>
<p><a href='../../graphic/noun_video_camera_1515271.svg' title='Right click to download'>SVG</a> <a href='https://thenounproject.com/icon/1515271/' target='_blank' title='View on NounProject'>Source</a></p>
</li>
</ul>
</div>
{% set list_class = 'l-grid u-list--unstyled l-grid--compact' %}
{% set item_class = 'l-grid__item' %}
{% include get_template( 'banner', 'unit' ) with {
display: {
backgroundColor: 'dark-blue',
},
header: {
supraheading: 'Brand',
heading: {
text: 'Icons'
},
lead: NULL,
},
} %}
<div class='container-fluid'>
{% for section in sections %}
{% include '@unit/heading/heading.twig' with section %}
<ul class='{{ list_class }}'>
{% for item in section.icons %}
<li class='{{ item_class }}'>
{% if 'png' in item.icon %}
{% set basename = item.icon %}
{% set label = 'PNG' %}
{% else %}
{% set basename = item.icon ~ '.svg' %}
{% set label = 'SVG' %}
{% endif %}
{% set url = asset( basename, 'graphic' ) %}
{% if item.icon %}
{% include '@unit/icon/icon.twig' with { display: { modifiers: modifiers }, basename: item.icon ~ '.svg' } %}
{% endif %}
<h5 class='u-margin--vertical--tight'>{{ item.label }}</h5>
{% if item.tags %}
<p class='u-margin--vertical--hairline--bottom'>{{ item.tags|join( ', ' ) }}</p>
{% endif %}
<p><a href='{{ url }}' title='Right click to download'>{{ label }}</a> {% if item.source %}<a href='{{ item.source }}' target='_blank' title='View on NounProject'>Source</a>{% endif %}</p>
</li>
{% endfor %}
</ul>
{% endfor %}
</div>
{
"modifiers": [
"double"
],
"sections": {
"ui": {
"text": "UI",
"icons": [
{
"id": "arrow",
"label": "Arrow",
"icon": "icon-arrow"
},
{
"id": "audience",
"label": "Audience",
"icon": "noun-antenna-1515372",
"source": "https://thenounproject.com/icon/1515372/"
},
{
"id": "avatar",
"label": "Avatar",
"icon": "noun_User_1515313",
"source": "https://thenounproject.com/icon/1515313/"
},
{
"id": "dashboard",
"label": "Dashboard",
"icon": "noun_dashboard_1515370",
"source": "https://thenounproject.com/icon/1515370/"
},
{
"id": "date",
"label": "Date",
"icon": "noun_date_1515275",
"source": "https://thenounproject.com/icon/1515275/"
},
{
"id": "delete",
"label": "Delete",
"icon": "noun_Delete_1515567",
"source": "https://thenounproject.com/icon/1515567/"
},
{
"id": "download",
"label": "Download",
"icon": "noun_Download_1515282",
"source": "https://thenounproject.com/icon/1515282/"
},
{
"id": "feedback",
"label": "Feedback",
"icon": "noun_Megaphone_1515584",
"source": "https://thenounproject.com/icon/1515584/"
},
{
"id": "globe",
"label": "Globe",
"icon": "noun-globe-1515236",
"source": "https://thenounproject.com/icon/1515236/"
},
{
"id": "heart",
"label": "Heart",
"icon": "noun-heart-1515286",
"source": "https://thenounproject.com/icon/1515286/"
},
{
"id": "help",
"label": "Help",
"icon": "noun_Buoy_1515358",
"source": "https://thenounproject.com/icon/1515358/"
},
{
"id": "location",
"label": "Location",
"icon": "noun-location-pin-1515429",
"source": "https://thenounproject.com/icon/1515429/"
},
{
"id": "link",
"label": "Link",
"icon": "noun-link-1515599",
"source": "https://thenounproject.com/icon/1515599/"
},
{
"id": "mail",
"label": "Mail",
"icon": "noun-mail-1515222",
"source": "https://thenounproject.com/icon/1515222/"
},
{
"id": "outcomes",
"label": "Outcomes/Focus area",
"icon": "noun_Navigation_1515427",
"source": "https://thenounproject.com/icon/1515427/"
},
{
"id": "private",
"label": "Private",
"icon": "noun_Key_1515230",
"source": "https://thenounproject.com/icon/1515230/"
},
{
"id": "search",
"label": "Search",
"icon": "noun_Magnifying Glass_1515330",
"source": "https://thenounproject.com/icon/1515330/"
},
{
"id": "share",
"label": "Share",
"icon": "noun-share-1515414",
"source": "https://thenounproject.com/icon/1515414/"
},
{
"id": "star",
"label": "Star",
"icon": "noun_Star_1515575",
"source": "https://thenounproject.com/icon/1515575/"
},
{
"id": "settings",
"label": "Settings",
"icon": "noun_Settings_1515651",
"source": "https://thenounproject.com/icon/1515651/"
},
{
"id": "tag",
"label": "Tag",
"icon": "noun_Tag_1515302",
"source": "https://thenounproject.com/icon/1515302/"
},
{
"id": "upload",
"label": "Upload",
"icon": "noun_Upload_1515287",
"source": "https://thenounproject.com/icon/1515287/"
},
{
"id": "website",
"label": "Website",
"icon": "noun-web-1515383",
"source": "https://thenounproject.com/icon/1515383/"
}
]
},
"content-type": {
"text": "Content type",
"icons": [
{
"id": "document",
"label": "Document",
"icon": "noun_book_1515384",
"source": "https://thenounproject.com/icon/1515384/"
},
{
"id": "audio",
"label": "Audio",
"icon": "noun_Speaker_1515309",
"source": "https://thenounproject.com/icon/1515309/"
},
{
"id": "tool",
"label": "Tool",
"icon": "noun_design_1515493",
"source": "https://thenounproject.com/icon/1515493/"
},
{
"id": "video",
"label": "Video",
"icon": "noun_video_camera_1515271",
"source": "https://thenounproject.com/icon/1515271/"
}
]
}
}
}