<div class="row">
<div class="col-12">
<div class="flex flex-wrap">
<div class="flex flex-column flex-center padding-xs margin-bottom-md" style="width: 100px;">
<svg id="icon--arrow-down" class="icon" width="48" height="48" viewBox="0 0 11 13">
<g fill="none" fill-rule="evenodd">
<path fill="currentColor" d="M0 4H12V5H0z" transform="translate(-145 -109) rotate(90 23 132)" />
<path stroke="currentColor" d="M5 2L9.5 7 14 2" transform="translate(-145 -109) rotate(90 23 132) rotate(-90 9.5 4.5)" />
</g>
</svg>
<small class="margin-top-auto">arrow-down</small>
</div>
<div class="flex flex-column flex-center padding-xs margin-bottom-md" style="width: 100px;">
<svg id="icon--arrow-left" class="icon" width="48" height="48" viewBox="0 0 13 11">
<g fill="none" fill-rule="evenodd">
<path fill="currentColor" d="M0 4H12V5H0z" transform="translate(-80 -110) rotate(-180 46.5 60)" />
<path stroke="currentColor" d="M5 2L9.5 7 14 2" transform="translate(-80 -110) rotate(-180 46.5 60) rotate(-90 9.5 4.5)" />
</g>
</svg>
<small class="margin-top-auto">arrow-left</small>
</div>
<div class="flex flex-column flex-center padding-xs margin-bottom-md" style="width: 100px;">
<svg id="icon--arrow-right" class="icon" width="48" height="48" viewBox="0 0 13 11">
<g fill="none" fill-rule="evenodd">
<path fill="currentColor" d="M0 4H12V5H0z" transform="translate(-114 -110) translate(114 111)" />
<path stroke="currentColor" d="M5 2L9.5 7 14 2" transform="translate(-114 -110) translate(114 111) rotate(-90 9.5 4.5)" />
</g>
</svg>
<small class="margin-top-auto">arrow-right</small>
</div>
<div class="flex flex-column flex-center padding-xs margin-bottom-md" style="width: 100px;">
<svg id="icon--arrow-up" class="icon" width="48" height="48" viewBox="0 0 11 13">
<g fill="none" fill-rule="evenodd">
<path fill="currentColor" d="M0 4H12V5H0z" transform="translate(-174 -108) rotate(-90 148 -27)" />
<path stroke="currentColor" d="M5 2L9.5 7 14 2" transform="translate(-174 -108) rotate(-90 148 -27) rotate(-90 9.5 4.5)" />
</g>
</svg>
<small class="margin-top-auto">arrow-up</small>
</div>
<div class="flex flex-column flex-center padding-xs margin-bottom-md" style="width: 100px;">
<svg id="icon--check-steps" class="icon" width="48" height="48" viewBox="0 0 20 14">
<g fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<g stroke="currentColor" stroke-width="4">
<path d="M79 548.469L84.392 554 95 544" transform="translate(-77 -542)" />
</g>
</g>
</svg>
<small class="margin-top-auto">check-steps</small>
</div>
<div class="flex flex-column flex-center padding-xs margin-bottom-md" style="width: 100px;">
<svg id="icon--check" class="icon" width="48" height="48" viewBox="0 0 17 17">
<g fill="none" fill-rule="evenodd" stroke-linecap="round">
<g stroke="currentColor">
<path d="M7.414 14.808c4.036 0 7.308-3.272 7.308-7.308S11.45.192 7.414.192.106 3.464.106 7.5s3.272 7.308 7.308 7.308h0z" transform="translate(-79 -133) translate(80 134)" />
<path stroke-linejoin="round" d="M4.388 7.261L6.461 9.388 10.541 5.542" transform="translate(-79 -133) translate(80 134)" />
</g>
</g>
</svg>
<small class="margin-top-auto">check</small>
</div>
<div class="flex flex-column flex-center padding-xs margin-bottom-md" style="width: 100px;">
<svg id="icon--facebook" width="48" height="48" class="icon" viewBox="0 0 8 15">
<g fill="none" fill-rule="evenodd">
<g fill="currentColor">
<path d="M81.32 723h-3.548v-7.083H76v-2.73h1.772v-1.637c0-2.225 1.001-3.55 3.844-3.55h2.367v2.73h-1.479c-1.107 0-1.18.38-1.18 1.093l-.005 1.364H84l-.314 2.73h-2.367V723z" transform="translate(-76 -708)" />
</g>
</g>
</svg>
<small class="margin-top-auto">facebook</small>
</div>
<div class="flex flex-column flex-center padding-xs margin-bottom-md" style="width: 100px;">
<svg id="icon--bookmarks" width="48" height="48" class="icon" viewBox="0 0 22 21">
<g fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<g stroke="currentColor">
<path d="M.815 8.222l8.904 10.641c.154.184.405.181.556 0l8.904-10.64-.355.454c.524-.655.9-1.445 1.071-2.314.069-.347.105-.707.105-1.076C20 2.37 17.74.004 14.953.004c-2.3 0-4.24 1.61-4.848 3.812l-.21-.004C9.286 1.61 7.346 0 5.047 0 2.26 0 0 2.365 0 5.283c0 .369.036.728.105 1.076.171.868.547 1.659 1.071 2.314" transform="translate(-110 -195) translate(111 196)" />
</g>
</g>
</svg>
<small class="margin-top-auto">bookmarks</small>
</div>
<div class="flex flex-column flex-center padding-xs margin-bottom-md" style="width: 100px;">
<svg id="icon--googleplus" width="48" height="48" class="icon" viewBox="0 0 18 12">
<g fill="none" fill-rule="evenodd">
<g fill="currentColor" fill-rule="nonzero">
<path d="M256.873 710.001c1.489.03 2.839.65 3.845 1.643.16.159.16.426-.001.585l-1.033 1.013c-.148.145-.377.144-.527.002-.634-.6-1.476-.967-2.398-.967-2.017 0-3.65 1.751-3.57 3.87.073 1.978 1.644 3.56 3.543 3.575 1.565.013 2.902-1.03 3.396-2.484h-2.813c-.213 0-.386-.18-.386-.402v-1.474c0-.222.173-.402.386-.402h5.2v.075l-.001.317c-.001.398-.003.96-.006.985-.168 3.157-2.678 5.663-5.75 5.663-3.193 0-5.78-2.71-5.758-6.043.022-3.308 2.698-6.02 5.873-5.956zm10.07 3.301c.186 0 .337.158.337.353v1.44h1.382c.187 0 .338.157.338.351v1.212c0 .195-.151.352-.338.352h-1.382v1.44c0 .195-.151.352-.338.352h-1.163c-.187 0-.338-.157-.338-.352v-1.44h-1.382c-.186 0-.338-.157-.338-.352v-1.212c0-.194.152-.352.338-.352h1.382v-1.44c0-.194.151-.352.338-.352z" transform="translate(-251 -710)" />
</g>
</g>
</svg>
<small class="margin-top-auto">googleplus</small>
</div>
<div class="flex flex-column flex-center padding-xs margin-bottom-md" style="width: 100px;">
<svg id="icon--image-placeholder" width="48" height="48" class="icon" viewBox="0 0 73 55">
<g fill="none" fill-rule="evenodd">
<path stroke="currentColor" stroke-width="5" d="M2.5 2.5H70.5V51.524H2.5z" transform="translate(-76 -630) translate(76 630)" />
<g fill="currentColor" transform="translate(-76 -630) translate(76 630) translate(15 12.012)">
<circle cx="4.5" cy="4.5" r="4.5" />
<path d="M0 30l10.5-15 3.461 4.945L25 4l18 26H0z" />
</g>
</g>
</svg>
<small class="margin-top-auto">placeholder</small>
</div>
<div class="flex flex-column flex-center padding-xs margin-bottom-md" style="width: 100px;">
<svg id="icon--login" width="48" height="48" class="icon" viewBox="0 0 26 22">
<g fill="none" fill-rule="evenodd" stroke-linecap="round">
<g stroke="currentColor">
<path d="M23.677 20c0-3.898-5.268-7.059-11.765-7.059C5.414 12.941.147 16.101.147 20" transform="translate(-75 -195) translate(76 196)" />
<path d="M11.912 12.946c3.573 0 6.47-2.897 6.47-6.47 0-3.574-2.897-6.47-6.47-6.47-3.574 0-6.47 2.896-6.47 6.47 0 3.573 2.896 6.47 6.47 6.47h0z" transform="translate(-75 -195) translate(76 196)" />
</g>
</g>
</svg>
<small class="margin-top-auto">login</small>
</div>
<div class="flex flex-column flex-center padding-xs margin-bottom-md" style="width: 100px;">
<svg id="icon--linkedin" width="48" height="48" class="icon icon" viewBox="0 0 14 14">
<g fill="none" fill-rule="evenodd">
<g fill="currentColor">
<path d="M446.5 722.5h-2.592v-4.781c0-1.41-.565-1.846-1.292-1.846-.77 0-1.524.615-1.524 1.88v4.747H438.5v-8.754h2.493v1.213h.033c.251-.539 1.127-1.459 2.464-1.459 1.447 0 3.01.912 3.01 3.586v5.414zm-11.5-10c-.828 0-1.5-.633-1.5-1.5 0-.866.672-1.5 1.5-1.5s1.5.634 1.5 1.5c0 .867-.672 1.5-1.5 1.5zm-1.5 10h3v-9h-3v9z" transform="translate(-433 -709)" />
</g>
</g>
</svg>
<small class="margin-top-auto">linkedin</small>
</div>
<div class="flex flex-column flex-center padding-xs margin-bottom-md" style="width: 100px;">
<svg id="icon--gris" width="48" height="48" class="icon" viewBox="0 0 22 22">
<g fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<g stroke="#333">
<path d="M7.895 7.368c0 .29-.236.527-.527.527H.526c-.29 0-.526-.236-.526-.527V.526C0 .236.236 0 .526 0h6.842c.29 0 .527.236.527.526v6.842h0zM20 7.368c0 .29-.236.527-.526.527h-6.842c-.29 0-.527-.236-.527-.527V.526c0-.29.236-.526.527-.526h6.842c.29 0 .526.236.526.526v6.842h0zM7.895 19.474c0 .29-.236.526-.527.526H.526C.236 20 0 19.764 0 19.474v-6.842c0-.29.236-.527.526-.527h6.842c.29 0 .527.236.527.527v6.842h0zM20 19.474c0 .29-.236.526-.526.526h-6.842c-.29 0-.527-.236-.527-.526v-6.842c0-.29.236-.527.527-.527h6.842c.29 0 .526.236.526.527v6.842h0z" transform="translate(-154 -469) translate(155 470)" />
</g>
</g>
</svg>
<small class="margin-top-auto">grid</small>
</div>
<div class="flex flex-column flex-center padding-xs margin-bottom-md" style="width: 100px;">
<svg id="icon--camera" width="48" height="48" class="icon" viewBox="0 0 21 17">
<g fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<g stroke="currentColor">
<path d="M12.794 8.162c0 2.012-1.58 3.643-3.53 3.643-1.948 0-3.529-1.631-3.529-3.643 0-2.012 1.58-3.643 3.53-3.643 1.949 0 3.53 1.63 3.53 3.643h0z" transform="translate(-77 -471) translate(78 472)" />
<path d="M4.853 2.647L4.908 2.647 0 2.647 0 15 18.529 15 18.529 2.647 14.118 2.647 13.732 2.647 12.408 0 6.232 0 4.908 2.647" transform="translate(-77 -471) translate(78 472)" />
</g>
</g>
</svg>
<small class="margin-top-auto">camera</small>
</div>
<div class="flex flex-column flex-center padding-xs margin-bottom-md" style="width: 100px;">
<svg id="icon--play" width="48" height="48" class="icon" viewBox="0 0 22 22">
<g fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<g stroke="currentColor">
<path d="M20 10c0 5.523-4.477 10-10 10S0 15.523 0 10 4.477 0 10 0s10 4.477 10 10h0z" transform="translate(-115 -469) translate(116 470)" />
<path d="M14.211 9.737L7.895 5.526 7.895 13.947z" transform="translate(-115 -469) translate(116 470)" />
</g>
</g>
</svg>
<small class="margin-top-auto">play</small>
</div>
<div class="flex flex-column flex-center padding-xs margin-bottom-md" style="width: 100px;">
<svg id="icon--pinterest" width="48" height="48" class="icon" viewBox="0 0 13 15">
<g fill="none" fill-rule="evenodd">
<g fill="currentColor">
<path d="M319.344 718.92c-.439 2.066-.975 4.046-2.562 5.08-.49-3.121.72-5.465 1.281-7.954-.957-1.446.115-4.359 2.135-3.641 2.485.882-2.153 5.38.961 5.941 3.25.586 4.577-5.063 2.562-6.9-2.912-2.652-8.478-.06-7.794 3.738.167.928 1.235 1.21.427 2.491-1.863-.371-2.42-1.69-2.348-3.45.115-2.88 2.882-4.895 5.658-5.175 3.51-.352 6.805 1.157 7.26 4.122.511 3.345-1.584 6.968-5.339 6.707-1.017-.07-1.444-.523-2.241-.958z" transform="translate(-314 -709)" />
</g>
</g>
</svg>
<small class="margin-top-auto">pinterest</small>
</div>
<div class="flex flex-column flex-center padding-xs margin-bottom-md" style="width: 100px;">
<svg id="icon--min" width="48" height="48" class="icon" viewBox="0 0 6 2">
<g fill="none" fill-rule="evenodd">
<g fill="currentColor">
<path d="M83.5 299H84.5V305H83.5z" transform="translate(-81 -301) rotate(90 84 302)" />
</g>
</g>
</svg>
<small class="margin-top-auto">min</small>
</div>
<div class="flex flex-column flex-center padding-xs margin-bottom-md" style="width: 100px;">
<svg id="icon--plus" width="48" height="48" class="icon" viewBox="0 0 8 6">
<g fill="none" fill-rule="evenodd">
<g fill="currentColor">
<path d="M3 0H4V6H3z" transform="translate(-99 -299) translate(99.5 299)" />
<path d="M3 0H4V6H3z" transform="translate(-99 -299) translate(99.5 299) rotate(90 3.5 3)" />
</g>
</g>
</svg>
<small class="margin-top-auto">plus</small>
</div>
<div class="flex flex-column flex-center padding-xs margin-bottom-md" style="width: 100px;">
<svg id="icon--trash" width="48" height="48" class="icon" viewBox="0 0 19 22">
<g fill="none" fill-rule="evenodd" stroke-linecap="round">
<g stroke="currentColor">
<path d="M13.351 20H4.376c-1.757 0-3.012-1.652-3.012-3.41V4.13c0-.502.237-.494.74-.494h13.065c.502 0 .74-.008.74.494v12.915c0 1.507-1.052 2.955-2.558 2.955h0zM0 3.636L17.273 3.636M11.818 2.727c0 .251-.203.455-.454.455H5.909c-.25 0-.454-.204-.454-.455V.455c0-.251.203-.455.454-.455h5.455c.25 0 .454.204.454.455v2.272h0zM5 7.727L5 15.909M8.636 7.727L8.636 15.909M12.273 7.727L12.273 15.909" transform="translate(-77 -331) translate(78 332)" />
</g>
</g>
</svg>
<small class="margin-top-auto">trash</small>
</div>
<div class="flex flex-column flex-center padding-xs margin-bottom-md" style="width: 100px;">
<svg id="icon--search" width="48" height="48" class="icon" viewBox="0 0 22 20">
<g fill="none" fill-rule="evenodd">
<g stroke="currentColor">
<path d="M16 8c0 4.418-3.582 8-8 8s-8-3.582-8-8 3.582-8 8-8 8 3.582 8 8zM14.545 13.091L19.219 17.764" transform="translate(-79 -162) translate(80 163)" />
</g>
</g>
</svg>
<small class="margin-top-auto">search</small>
</div>
<div class="flex flex-column flex-center padding-xs margin-bottom-md" style="width: 100px;">
<svg id="icon--shape-right" width="48" height="48" class="icon" viewBox="0 0 5 11">
<g fill="none" fill-rule="evenodd">
<g stroke="currentColor">
<path d="M5 2L9.5 7 14 2" transform="translate(-121 -110) translate(114 111) rotate(-90 9.5 4.5)" />
</g>
</g>
</svg>
<small class="margin-top-auto">shape-right</small>
</div>
<div class="flex flex-column flex-center padding-xs margin-bottom-md" style="width: 100px;">
<svg id="icon--shape-left" width="48" height="48" class="icon" viewBox="0 0 5 11">
<g fill="none" fill-rule="evenodd">
<g stroke="currentColor">
<path d="M5 2L9.5 7 14 2" transform="translate(-81 -110) rotate(-180 46.5 60) rotate(-90 9.5 4.5)" />
</g>
</g>
</svg>
<small class="margin-top-auto">shape-left</small>
</div>
<div class="flex flex-column flex-center padding-xs margin-bottom-md" style="width: 100px;">
<svg id="icon--shape-down" width="48" height="48" class="icon" viewBox="0 0 12 5">
<g fill="none" fill-rule="evenodd">
<g stroke="currentColor">
<path d="M145 85L150 90 155 85" transform="translate(-144 -85)" />
</g>
</g>
</svg>
<small class="margin-top-auto">shape-down</small>
</div>
<div class="flex flex-column flex-center padding-xs margin-bottom-md" style="width: 100px;">
<svg id="icon--shape-up" width="48" height="48" class="icon" viewBox="0 0 12 5">
<g fill="none" fill-rule="evenodd">
<g stroke="currentColor">
<path d="M174 85L179 90 184 85" transform="translate(-173 -85) rotate(-180 179 87.5)" />
</g>
</g>
</svg>
<small class="margin-top-auto">shape-up</small>
</div>
<div class="flex flex-column flex-center padding-xs margin-bottom-md" style="width: 100px;">
<svg id="icon--snapchat" width="48" height="48" class="icon" viewBox="0 0 16 16">
<g fill="none" fill-rule="evenodd">
<g fill="currentColor">
<path d="M560.155 708.5h-.04l-.277.003c-.66 0-2.897.183-3.952 2.543-.355.794-.27 2.143-.202 3.226l.024.389c-.054.03-.154.068-.311.068-.21 0-.457-.066-.736-.197-.074-.034-.16-.051-.253-.051-.327 0-.717.214-.778.533-.044.23.06.565.8.857.067.027.147.052.232.079.307.097.77.243.895.538.065.153.039.35-.077.585l-.008.016c-.04.095-1.02 2.322-3.194 2.679-.167.027-.287.176-.277.345.002.05.014.1.035.148.163.38.852.66 2.105.854.042.056.085.256.112.377.026.12.053.244.092.375.038.128.136.282.388.282.102 0 .222-.024.361-.051.21-.04.495-.096.853-.096.199 0 .404.017.612.051.404.067.748.31 1.146.59.57.402 1.215.857 2.196.857.027 0 .054 0 .08-.003.033.002.074.003.118.003.981 0 1.627-.455 2.196-.857.399-.28.742-.523 1.147-.59.207-.034.412-.051.611-.051.342 0 .612.043.853.09.15.03.272.044.361.044H565.285c.187 0 .318-.098.37-.276.038-.128.065-.248.092-.37.027-.122.07-.32.112-.377 1.253-.194 1.942-.472 2.105-.851.02-.049.033-.1.035-.15.01-.169-.11-.317-.277-.345-2.175-.357-3.154-2.584-3.194-2.678l-.008-.016c-.116-.235-.142-.432-.077-.585.126-.295.588-.441.895-.538.085-.027.166-.053.232-.079.542-.213.814-.476.808-.78-.004-.238-.19-.45-.487-.556-.1-.042-.218-.064-.334-.064-.08 0-.197.01-.307.061-.258.121-.49.186-.69.195-.132-.006-.218-.04-.268-.066l.02-.342.004-.046c.068-1.084.153-2.434-.202-3.228-1.056-2.361-3.297-2.545-3.96-2.545" transform="translate(-552 -708)" />
</g>
</g>
</svg>
<small class="margin-top-auto">snapchat</small>
</div>
<div class="flex flex-column flex-center padding-xs margin-bottom-md" style="width: 100px;">
<svg id="icon--star" width="48" height="48" class="icon" viewBox="0 0 19 18">
<g fill="none" fill-rule="evenodd">
<g fill="currentColor">
<path d="M86.5 520.25L80.916 523.186 81.982 516.968 77.465 512.564 83.708 511.657 86.5 506 89.292 511.657 95.535 512.564 91.018 516.968 92.084 523.186z" transform="translate(-77 -506)" />
</g>
</g>
</svg>
<small class="margin-top-auto">star</small>
</div>
<div class="flex flex-column flex-center padding-xs margin-bottom-md" style="width: 100px;">
<svg id="icon--thin-close" width="48" height="48" class="icon" viewBox="0 0 32 32">
<g fill="none" fill-rule="evenodd" stroke-linecap="round">
<g stroke="currentColor">
<path d="M0 0L29.841 29.669M29.841 0L0 29.669" transform="translate(-72 -417) translate(73 418)" />
</g>
</g>
</svg>
<small class="margin-top-auto">thin-close</small>
</div>
<div class="flex flex-column flex-center padding-xs margin-bottom-md" style="width: 100px;">
<svg id="icon--arrow-thin-down" width="48" height="48" class="icon" viewBox="0 0 32 47">
<g fill="none" fill-rule="evenodd">
<path fill="currentColor" d="M0 15.111H45.333V16.111H0z" transform="translate(-364 -409) rotate(90 -7 402.5)" />
<path stroke="currentColor" d="M21.333 7L36.833 24 52.333 7" transform="translate(-364 -409) rotate(90 -7 402.5) rotate(-90 36.833 15.5)" />
</g>
</svg>
<small class="margin-top-auto">thin-down</small>
</div>
<div class="flex flex-column flex-center padding-xs margin-bottom-md" style="width: 100px;">
<svg id="icon--thin-left" width="48" height="48" class="icon" viewBox="0 0 47 33">
<g fill="none" fill-rule="evenodd">
<path fill="currentColor" d="M0 15.111H45.333V16.111H0z" transform="translate(-133 -416) rotate(-180 90 224)" />
<path stroke="currentColor" d="M21.333 7L36.833 24 52.333 7" transform="translate(-133 -416) rotate(-180 90 224) rotate(-90 36.833 15.5)" />
</g>
</svg>
<small class="margin-top-auto">thin-left</small>
</div>
<div class="flex flex-column flex-center padding-xs margin-bottom-md" style="width: 100px;">
<svg id="icon--thin-right" width="48" height="48" class="icon" viewBox="0 0 47 33">
<g fill="none" fill-rule="evenodd">
<path fill="currentColor" d="M0 15.111H45.333V16.111H0z" transform="translate(-211 -416) translate(211 417)" />
<path stroke="currentColor" d="M21.333 7L36.833 24 52.333 7" transform="translate(-211 -416) translate(211 417) rotate(-90 36.833 15.5)" />
</g>
</svg>
<small class="margin-top-auto">thin-right</small>
</div>
<div class="flex flex-column flex-center padding-xs margin-bottom-md" style="width: 100px;">
<svg id="icon--thin-up" width="48" height="48" class="icon" viewBox="0 0 32 47">
<g fill="none" fill-rule="evenodd">
<path fill="currentColor" d="M0 15.111H45.333V16.111H0z" transform="translate(-295 -409) rotate(-90 375.5 80)" />
<path stroke="currentColor" d="M21.333 7L36.833 24 52.333 7" transform="translate(-295 -409) rotate(-90 375.5 80) rotate(-90 36.833 15.5)" />
</g>
</svg>
<small class="margin-top-auto">thin-up</small>
</div>
<div class="flex flex-column flex-center padding-xs margin-bottom-md" style="width: 100px;">
<svg id="icon--thin-min" width="48" height="48" class="icon" viewBox="0 0 44 44">
<g fill="none" fill-rule="evenodd" stroke-linecap="round">
<g stroke="currentColor">
<path d="M29.841 0L0 29.669" transform="translate(-502 -411) rotate(45 -235.07 838.417)" />
</g>
</g>
</svg>
<small class="margin-top-auto">thin-min</small>
</div>
<div class="flex flex-column flex-center padding-xs margin-bottom-md" style="width: 100px;">
<svg id="icon--thin-plus" width="48" height="48" class="icon" viewBox="0 0 44 44">
<g fill="none" fill-rule="evenodd" stroke-linecap="round">
<g stroke="currentColor">
<path d="M0 0L29.841 29.669M29.841 0L0 29.669" transform="translate(-427 -411) rotate(45 -272.57 747.884)" />
</g>
</g>
</svg>
<small class="margin-top-auto">thin-plus</small>
</div>
<div class="flex flex-column flex-center padding-xs margin-bottom-md" style="width: 100px;">
<svg id="icon--twitter" width="48" height="48" class="icon" viewBox="0 0 16 14">
<g fill="none" fill-rule="evenodd">
<g fill="currentColor">
<path d="M147.5 711.039c-.552.26-1.145.437-1.768.517.636-.407 1.124-1.05 1.353-1.815-.595.376-1.253.649-1.954.795-.562-.638-1.361-1.036-2.246-1.036-1.7 0-3.078 1.47-3.078 3.282 0 .258.028.508.08.748-2.557-.136-4.824-1.444-6.342-3.43-.266.486-.417 1.05-.417 1.651 0 1.139.544 2.143 1.369 2.731-.505-.017-.98-.164-1.393-.41v.041c0 1.59 1.06 2.916 2.468 3.218-.259.075-.53.115-.811.115-.198 0-.391-.02-.579-.06.392 1.305 1.528 2.254 2.875 2.28-1.054.88-2.38 1.405-3.823 1.405-.248 0-.493-.015-.734-.046 1.362.932 2.98 1.475 4.718 1.475 5.66 0 8.755-5 8.755-9.337 0-.143-.003-.284-.008-.425.6-.462 1.123-1.04 1.535-1.698v-.001z" transform="translate(-132 -709)" />
</g>
</g>
</svg>
<small class="margin-top-auto">twitter</small>
</div>
<div class="flex flex-column flex-center padding-xs margin-bottom-md" style="width: 100px;">
<svg id="icon--instagram" width="48" height="48" class="icon" viewBox="0 0 24 24">
<path fill="currentColor" d="M7.8,2H16.2C19.4,2 22,4.6 22,7.8V16.2A5.8,5.8 0 0,1 16.2,22H7.8C4.6,22 2,19.4 2,16.2V7.8A5.8,5.8 0 0,1 7.8,2M7.6,4A3.6,3.6 0 0,0 4,7.6V16.4C4,18.39 5.61,20 7.6,20H16.4A3.6,3.6 0 0,0 20,16.4V7.6C20,5.61 18.39,4 16.4,4H7.6M17.25,5.5A1.25,1.25 0 0,1 18.5,6.75A1.25,1.25 0 0,1 17.25,8A1.25,1.25 0 0,1 16,6.75A1.25,1.25 0 0,1 17.25,5.5M12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9Z"></path>
</svg>
<small class="margin-top-auto">instagram</small>
</div>
<div class="flex flex-column flex-center padding-xs margin-bottom-md" style="width: 100px;">
<svg id="icon--whatsapp" width="48" height="48" class="icon" viewBox="0 0 18 18">
<g fill="none" fill-rule="evenodd">
<g fill="currentColor" fill-rule="nonzero">
<path d="M506.4 709.627c-1.667-1.703-3.972-2.627-6.326-2.627-5.003 0-9.025 4.038-8.976 8.951 0 1.557.442 3.065 1.177 4.427L491 725l4.757-1.216c1.325.73 2.796 1.07 4.268 1.07 4.953 0 8.975-4.038 8.975-8.951 0-2.384-.932-4.622-2.6-6.276zm-6.326 13.719c-1.325 0-2.649-.34-3.777-1.022l-.294-.146-2.845.73.736-2.773-.196-.292c-2.158-3.454-1.129-8.027 2.403-10.167 3.531-2.14 8.092-1.12 10.25 2.383 2.159 3.503 1.129 8.027-2.403 10.168-1.128.73-2.501 1.119-3.874 1.119zm4.316-5.4l-.54-.243s-.785-.34-1.275-.584c-.05 0-.098-.049-.147-.049-.147 0-.245.049-.344.098 0 0-.049.048-.735.827-.05.097-.147.146-.245.146h-.05c-.049 0-.147-.05-.196-.098l-.245-.097c-.54-.243-1.03-.535-1.422-.924-.098-.098-.245-.195-.344-.292-.343-.34-.686-.73-.931-1.168l-.05-.097c-.049-.049-.049-.097-.098-.195 0-.097 0-.194.05-.243 0 0 .196-.243.343-.39.098-.096.147-.242.245-.34.098-.146.147-.34.098-.486-.049-.243-.638-1.557-.785-1.849-.098-.146-.196-.194-.343-.243h-.539c-.099 0-.197.049-.295.049l-.049.048c-.098.049-.196.146-.294.195-.098.097-.147.194-.245.292-.344.438-.54.973-.54 1.508 0 .389.098.778.245 1.119l.05.146c.44.924 1.03 1.751 1.814 2.48l.196.195c.147.146.295.244.393.39 1.03.875 2.207 1.508 3.531 1.848.147.049.343.049.49.097h.491c.245 0 .54-.097.736-.194.147-.097.245-.097.343-.195l.098-.097c.098-.097.196-.146.294-.243.098-.098.197-.195.246-.292.098-.195.147-.438.196-.681v-.34s-.05-.05-.147-.098z" transform="translate(-491 -707)" />
</g>
</g>
</svg>
<small class="margin-top-auto">whatsapp</small>
</div>
<div class="flex flex-column flex-center padding-xs margin-bottom-md" style="width: 100px;">
<svg id="icon--zoom-in" width="48" height="48" class="icon" viewBox="0 0 29 30">
<g fill="none" fill-rule="evenodd" stroke-linecap="round">
<g stroke="currentColor">
<path d="M19.127 20.306L26.6 28M22.804 11.269c0 6.224-5.105 11.268-11.402 11.268C5.105 22.537 0 17.493 0 11.27 0 5.045 5.105 0 11.402 0c6.297 0 11.402 5.045 11.402 11.269h0z" transform="translate(-75 -243) translate(76 244)" />
<path stroke-linejoin="round" d="M11.2 16.8L11.2 7 11.2 12.048M6.3 11.9L16.1 11.9 11.2 11.9" transform="translate(-75 -243) translate(76 244)" />
</g>
</g>
</svg>
<small class="margin-top-auto">zoom-in</small>
</div>
<div class="flex flex-column flex-center padding-xs margin-bottom-md" style="width: 100px;">
<svg id="icon--zoom-out" width="48" height="48" class="icon" viewBox="0 0 29 30">
<g fill="none" fill-rule="evenodd" stroke-linecap="round">
<g stroke="currentColor">
<path d="M19.127 20.306L26.6 28M22.804 11.269c0 6.224-5.105 11.268-11.402 11.268C5.105 22.537 0 17.493 0 11.27 0 5.045 5.105 0 11.402 0c6.297 0 11.402 5.045 11.402 11.269h0z" transform="translate(-117 -243) translate(118 244)" />
<path stroke-linejoin="round" d="M6.3 11.9L16.1 11.9 11.2 11.9" transform="translate(-117 -243) translate(118 244)" />
</g>
</g>
</svg>
<small class="margin-top-auto">zoom-out</small>
</div>
<div class="flex flex-column flex-center padding-xs margin-bottom-md" style="width: 100px;">
<svg id="icon--pencil" width="48" height="48" class="icon" viewBox="0 0 22 22">
<g fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<g stroke="currentColor">
<path d="M7.696 18.413L20.391 5.718c.22-.219.22-.574 0-.793l-4.76-4.76c-.22-.22-.575-.22-.793 0L2.143 12.858l-.397.397L.556 20 7.3 18.81l.396-.397h0zM16.628 9.481L11.074 3.927" transform="translate(-77 -370) translate(77 371)" />
</g>
</g>
</svg>
<small class="margin-top-auto">pencil</small>
</div>
<div class="flex flex-column flex-center padding-xs margin-bottom-md" style="width: 100px;">
<svg id="icon--shopping" width="48" height="48" class="icon" viewBox="0 0 17 22">
<g fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<g stroke="currentColor">
<path d="M11.977 20h-8.5c-1.28 0-2.318-.839-2.318-2.009L0 5.714c0-.195.173-.26.386-.26h14.682c.213 0 .387.12.387.315l-1.16 12.242c0 1.17-1.037 1.989-2.318 1.989h0z" transform="translate(-141 -194) translate(142 195)" />
<path d="M4.09 5.455V4.07C4.09 1.885 5.657.114 7.728.114c2.071 0 3.637 1.771 3.637 3.956v1.385" transform="translate(-141 -194) translate(142 195)" />
</g>
</g>
</svg>
<small class="margin-top-auto">shopping</small>
</div>
<div class="flex flex-column flex-center padding-xs margin-bottom-md" style="width: 100px;">
<svg id="icon--youtube" width="48" height="48" class="icon" viewBox="0 0 20 14">
<g fill="none" fill-rule="evenodd">
<g fill="currentColor">
<path d="M378 719v-6l5 3-5 3zm11.582-7.814c-.23-.86-.908-1.539-1.768-1.768C386.254 709 380 709 380 709s-6.254 0-7.814.418c-.86.23-1.538.907-1.768 1.768C370 712.746 370 716 370 716s0 3.254.418 4.813c.23.861.908 1.54 1.768 1.77C373.746 723 380 723 380 723s6.254 0 7.814-.418c.86-.23 1.538-.908 1.768-1.769C390 719.254 390 716 390 716s0-3.254-.418-4.814z" transform="translate(-370 -709)" />
</g>
</g>
</svg>
<small class="margin-top-auto">youtube</small>
</div>
<div class="flex flex-column flex-center padding-xs margin-bottom-md" style="width: 100px;">
<svg id="icon--filter" width="48" height="48" class="icon" viewBox="0 0 21 12">
<g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linejoin="round">
<path d="M0 3h4" />
<path stroke-linecap="round" d="M4 4.5h6V1H4z" />
<path d="M10 3h11M21 10h-4" />
<path stroke-linecap="round" d="M11 11.5h6V8h-6z" />
<path d="M11 10H0" />
</g>
</svg>
<small class="margin-top-auto">filter</small>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="flex flex-wrap">
<div class="flex flex-column flex-center padding-xs margin-bottom-md" style="width: 100px;">
<svg id="icon--arrow-down" class="icon" width="48" height="48" viewBox="0 0 11 13">
<g fill="none" fill-rule="evenodd">
<path fill="currentColor" d="M0 4H12V5H0z" transform="translate(-145 -109) rotate(90 23 132)"/>
<path stroke="currentColor" d="M5 2L9.5 7 14 2" transform="translate(-145 -109) rotate(90 23 132) rotate(-90 9.5 4.5)"/>
</g>
</svg>
<small class="margin-top-auto">arrow-down</small>
</div>
<div class="flex flex-column flex-center padding-xs margin-bottom-md" style="width: 100px;">
<svg id="icon--arrow-left" class="icon" width="48" height="48" viewBox="0 0 13 11">
<g fill="none" fill-rule="evenodd">
<path fill="currentColor" d="M0 4H12V5H0z" transform="translate(-80 -110) rotate(-180 46.5 60)"/>
<path stroke="currentColor" d="M5 2L9.5 7 14 2" transform="translate(-80 -110) rotate(-180 46.5 60) rotate(-90 9.5 4.5)"/>
</g>
</svg>
<small class="margin-top-auto">arrow-left</small>
</div>
<div class="flex flex-column flex-center padding-xs margin-bottom-md" style="width: 100px;">
<svg id="icon--arrow-right" class="icon" width="48" height="48" viewBox="0 0 13 11">
<g fill="none" fill-rule="evenodd">
<path fill="currentColor" d="M0 4H12V5H0z" transform="translate(-114 -110) translate(114 111)"/>
<path stroke="currentColor" d="M5 2L9.5 7 14 2" transform="translate(-114 -110) translate(114 111) rotate(-90 9.5 4.5)"/>
</g>
</svg>
<small class="margin-top-auto">arrow-right</small>
</div>
<div class="flex flex-column flex-center padding-xs margin-bottom-md" style="width: 100px;">
<svg id="icon--arrow-up" class="icon" width="48" height="48" viewBox="0 0 11 13">
<g fill="none" fill-rule="evenodd">
<path fill="currentColor" d="M0 4H12V5H0z" transform="translate(-174 -108) rotate(-90 148 -27)"/>
<path stroke="currentColor" d="M5 2L9.5 7 14 2" transform="translate(-174 -108) rotate(-90 148 -27) rotate(-90 9.5 4.5)"/>
</g>
</svg>
<small class="margin-top-auto">arrow-up</small>
</div>
<div class="flex flex-column flex-center padding-xs margin-bottom-md" style="width: 100px;">
<svg id="icon--check-steps" class="icon" width="48" height="48" viewBox="0 0 20 14">
<g fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<g stroke="currentColor" stroke-width="4">
<path d="M79 548.469L84.392 554 95 544" transform="translate(-77 -542)"/>
</g>
</g>
</svg>
<small class="margin-top-auto">check-steps</small>
</div>
<div class="flex flex-column flex-center padding-xs margin-bottom-md" style="width: 100px;">
<svg id="icon--check" class="icon" width="48" height="48" viewBox="0 0 17 17">
<g fill="none" fill-rule="evenodd" stroke-linecap="round">
<g stroke="currentColor">
<path d="M7.414 14.808c4.036 0 7.308-3.272 7.308-7.308S11.45.192 7.414.192.106 3.464.106 7.5s3.272 7.308 7.308 7.308h0z" transform="translate(-79 -133) translate(80 134)"/>
<path stroke-linejoin="round" d="M4.388 7.261L6.461 9.388 10.541 5.542" transform="translate(-79 -133) translate(80 134)"/>
</g>
</g>
</svg>
<small class="margin-top-auto">check</small>
</div>
<div class="flex flex-column flex-center padding-xs margin-bottom-md" style="width: 100px;">
<svg id="icon--facebook" width="48" height="48" class="icon" viewBox="0 0 8 15">
<g fill="none" fill-rule="evenodd">
<g fill="currentColor">
<path d="M81.32 723h-3.548v-7.083H76v-2.73h1.772v-1.637c0-2.225 1.001-3.55 3.844-3.55h2.367v2.73h-1.479c-1.107 0-1.18.38-1.18 1.093l-.005 1.364H84l-.314 2.73h-2.367V723z" transform="translate(-76 -708)"/>
</g>
</g>
</svg>
<small class="margin-top-auto">facebook</small>
</div>
<div class="flex flex-column flex-center padding-xs margin-bottom-md" style="width: 100px;">
<svg id="icon--bookmarks" width="48" height="48" class="icon" viewBox="0 0 22 21">
<g fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<g stroke="currentColor">
<path d="M.815 8.222l8.904 10.641c.154.184.405.181.556 0l8.904-10.64-.355.454c.524-.655.9-1.445 1.071-2.314.069-.347.105-.707.105-1.076C20 2.37 17.74.004 14.953.004c-2.3 0-4.24 1.61-4.848 3.812l-.21-.004C9.286 1.61 7.346 0 5.047 0 2.26 0 0 2.365 0 5.283c0 .369.036.728.105 1.076.171.868.547 1.659 1.071 2.314" transform="translate(-110 -195) translate(111 196)"/>
</g>
</g>
</svg>
<small class="margin-top-auto">bookmarks</small>
</div>
<div class="flex flex-column flex-center padding-xs margin-bottom-md" style="width: 100px;">
<svg id="icon--googleplus" width="48" height="48" class="icon" viewBox="0 0 18 12">
<g fill="none" fill-rule="evenodd">
<g fill="currentColor" fill-rule="nonzero">
<path d="M256.873 710.001c1.489.03 2.839.65 3.845 1.643.16.159.16.426-.001.585l-1.033 1.013c-.148.145-.377.144-.527.002-.634-.6-1.476-.967-2.398-.967-2.017 0-3.65 1.751-3.57 3.87.073 1.978 1.644 3.56 3.543 3.575 1.565.013 2.902-1.03 3.396-2.484h-2.813c-.213 0-.386-.18-.386-.402v-1.474c0-.222.173-.402.386-.402h5.2v.075l-.001.317c-.001.398-.003.96-.006.985-.168 3.157-2.678 5.663-5.75 5.663-3.193 0-5.78-2.71-5.758-6.043.022-3.308 2.698-6.02 5.873-5.956zm10.07 3.301c.186 0 .337.158.337.353v1.44h1.382c.187 0 .338.157.338.351v1.212c0 .195-.151.352-.338.352h-1.382v1.44c0 .195-.151.352-.338.352h-1.163c-.187 0-.338-.157-.338-.352v-1.44h-1.382c-.186 0-.338-.157-.338-.352v-1.212c0-.194.152-.352.338-.352h1.382v-1.44c0-.194.151-.352.338-.352z" transform="translate(-251 -710)"/>
</g>
</g>
</svg>
<small class="margin-top-auto">googleplus</small>
</div>
<div class="flex flex-column flex-center padding-xs margin-bottom-md" style="width: 100px;">
<svg id="icon--image-placeholder" width="48" height="48" class="icon" viewBox="0 0 73 55">
<g fill="none" fill-rule="evenodd">
<path stroke="currentColor" stroke-width="5" d="M2.5 2.5H70.5V51.524H2.5z" transform="translate(-76 -630) translate(76 630)"/>
<g fill="currentColor" transform="translate(-76 -630) translate(76 630) translate(15 12.012)">
<circle cx="4.5" cy="4.5" r="4.5"/>
<path d="M0 30l10.5-15 3.461 4.945L25 4l18 26H0z"/>
</g>
</g>
</svg>
<small class="margin-top-auto">placeholder</small>
</div>
<div class="flex flex-column flex-center padding-xs margin-bottom-md" style="width: 100px;">
<svg id="icon--login" width="48" height="48" class="icon" viewBox="0 0 26 22">
<g fill="none" fill-rule="evenodd" stroke-linecap="round">
<g stroke="currentColor">
<path d="M23.677 20c0-3.898-5.268-7.059-11.765-7.059C5.414 12.941.147 16.101.147 20" transform="translate(-75 -195) translate(76 196)"/>
<path d="M11.912 12.946c3.573 0 6.47-2.897 6.47-6.47 0-3.574-2.897-6.47-6.47-6.47-3.574 0-6.47 2.896-6.47 6.47 0 3.573 2.896 6.47 6.47 6.47h0z" transform="translate(-75 -195) translate(76 196)"/>
</g>
</g>
</svg>
<small class="margin-top-auto">login</small>
</div>
<div class="flex flex-column flex-center padding-xs margin-bottom-md" style="width: 100px;">
<svg id="icon--linkedin" width="48" height="48" class="icon icon" viewBox="0 0 14 14">
<g fill="none" fill-rule="evenodd">
<g fill="currentColor">
<path d="M446.5 722.5h-2.592v-4.781c0-1.41-.565-1.846-1.292-1.846-.77 0-1.524.615-1.524 1.88v4.747H438.5v-8.754h2.493v1.213h.033c.251-.539 1.127-1.459 2.464-1.459 1.447 0 3.01.912 3.01 3.586v5.414zm-11.5-10c-.828 0-1.5-.633-1.5-1.5 0-.866.672-1.5 1.5-1.5s1.5.634 1.5 1.5c0 .867-.672 1.5-1.5 1.5zm-1.5 10h3v-9h-3v9z" transform="translate(-433 -709)"/>
</g>
</g>
</svg>
<small class="margin-top-auto">linkedin</small>
</div>
<div class="flex flex-column flex-center padding-xs margin-bottom-md" style="width: 100px;">
<svg id="icon--gris" width="48" height="48" class="icon" viewBox="0 0 22 22">
<g fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<g stroke="#333">
<path d="M7.895 7.368c0 .29-.236.527-.527.527H.526c-.29 0-.526-.236-.526-.527V.526C0 .236.236 0 .526 0h6.842c.29 0 .527.236.527.526v6.842h0zM20 7.368c0 .29-.236.527-.526.527h-6.842c-.29 0-.527-.236-.527-.527V.526c0-.29.236-.526.527-.526h6.842c.29 0 .526.236.526.526v6.842h0zM7.895 19.474c0 .29-.236.526-.527.526H.526C.236 20 0 19.764 0 19.474v-6.842c0-.29.236-.527.526-.527h6.842c.29 0 .527.236.527.527v6.842h0zM20 19.474c0 .29-.236.526-.526.526h-6.842c-.29 0-.527-.236-.527-.526v-6.842c0-.29.236-.527.527-.527h6.842c.29 0 .526.236.526.527v6.842h0z" transform="translate(-154 -469) translate(155 470)"/>
</g>
</g>
</svg>
<small class="margin-top-auto">grid</small>
</div>
<div class="flex flex-column flex-center padding-xs margin-bottom-md" style="width: 100px;">
<svg id="icon--camera" width="48" height="48" class="icon" viewBox="0 0 21 17">
<g fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<g stroke="currentColor">
<path d="M12.794 8.162c0 2.012-1.58 3.643-3.53 3.643-1.948 0-3.529-1.631-3.529-3.643 0-2.012 1.58-3.643 3.53-3.643 1.949 0 3.53 1.63 3.53 3.643h0z" transform="translate(-77 -471) translate(78 472)"/>
<path d="M4.853 2.647L4.908 2.647 0 2.647 0 15 18.529 15 18.529 2.647 14.118 2.647 13.732 2.647 12.408 0 6.232 0 4.908 2.647" transform="translate(-77 -471) translate(78 472)"/>
</g>
</g>
</svg>
<small class="margin-top-auto">camera</small>
</div>
<div class="flex flex-column flex-center padding-xs margin-bottom-md" style="width: 100px;">
<svg id="icon--play" width="48" height="48" class="icon" viewBox="0 0 22 22">
<g fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<g stroke="currentColor">
<path d="M20 10c0 5.523-4.477 10-10 10S0 15.523 0 10 4.477 0 10 0s10 4.477 10 10h0z" transform="translate(-115 -469) translate(116 470)"/>
<path d="M14.211 9.737L7.895 5.526 7.895 13.947z" transform="translate(-115 -469) translate(116 470)"/>
</g>
</g>
</svg>
<small class="margin-top-auto">play</small>
</div>
<div class="flex flex-column flex-center padding-xs margin-bottom-md" style="width: 100px;">
<svg id="icon--pinterest" width="48" height="48" class="icon" viewBox="0 0 13 15">
<g fill="none" fill-rule="evenodd">
<g fill="currentColor">
<path d="M319.344 718.92c-.439 2.066-.975 4.046-2.562 5.08-.49-3.121.72-5.465 1.281-7.954-.957-1.446.115-4.359 2.135-3.641 2.485.882-2.153 5.38.961 5.941 3.25.586 4.577-5.063 2.562-6.9-2.912-2.652-8.478-.06-7.794 3.738.167.928 1.235 1.21.427 2.491-1.863-.371-2.42-1.69-2.348-3.45.115-2.88 2.882-4.895 5.658-5.175 3.51-.352 6.805 1.157 7.26 4.122.511 3.345-1.584 6.968-5.339 6.707-1.017-.07-1.444-.523-2.241-.958z" transform="translate(-314 -709)"/>
</g>
</g>
</svg>
<small class="margin-top-auto">pinterest</small>
</div>
<div class="flex flex-column flex-center padding-xs margin-bottom-md" style="width: 100px;">
<svg id="icon--min" width="48" height="48" class="icon" viewBox="0 0 6 2">
<g fill="none" fill-rule="evenodd">
<g fill="currentColor">
<path d="M83.5 299H84.5V305H83.5z" transform="translate(-81 -301) rotate(90 84 302)"/>
</g>
</g>
</svg>
<small class="margin-top-auto">min</small>
</div>
<div class="flex flex-column flex-center padding-xs margin-bottom-md" style="width: 100px;">
<svg id="icon--plus" width="48" height="48" class="icon" viewBox="0 0 8 6">
<g fill="none" fill-rule="evenodd">
<g fill="currentColor">
<path d="M3 0H4V6H3z" transform="translate(-99 -299) translate(99.5 299)"/>
<path d="M3 0H4V6H3z" transform="translate(-99 -299) translate(99.5 299) rotate(90 3.5 3)"/>
</g>
</g>
</svg>
<small class="margin-top-auto">plus</small>
</div>
<div class="flex flex-column flex-center padding-xs margin-bottom-md" style="width: 100px;">
<svg id="icon--trash" width="48" height="48" class="icon" viewBox="0 0 19 22">
<g fill="none" fill-rule="evenodd" stroke-linecap="round">
<g stroke="currentColor">
<path d="M13.351 20H4.376c-1.757 0-3.012-1.652-3.012-3.41V4.13c0-.502.237-.494.74-.494h13.065c.502 0 .74-.008.74.494v12.915c0 1.507-1.052 2.955-2.558 2.955h0zM0 3.636L17.273 3.636M11.818 2.727c0 .251-.203.455-.454.455H5.909c-.25 0-.454-.204-.454-.455V.455c0-.251.203-.455.454-.455h5.455c.25 0 .454.204.454.455v2.272h0zM5 7.727L5 15.909M8.636 7.727L8.636 15.909M12.273 7.727L12.273 15.909" transform="translate(-77 -331) translate(78 332)"/>
</g>
</g>
</svg>
<small class="margin-top-auto">trash</small>
</div>
<div class="flex flex-column flex-center padding-xs margin-bottom-md" style="width: 100px;">
<svg id="icon--search" width="48" height="48" class="icon" viewBox="0 0 22 20">
<g fill="none" fill-rule="evenodd">
<g stroke="currentColor">
<path d="M16 8c0 4.418-3.582 8-8 8s-8-3.582-8-8 3.582-8 8-8 8 3.582 8 8zM14.545 13.091L19.219 17.764" transform="translate(-79 -162) translate(80 163)"/>
</g>
</g>
</svg>
<small class="margin-top-auto">search</small>
</div>
<div class="flex flex-column flex-center padding-xs margin-bottom-md" style="width: 100px;">
<svg id="icon--shape-right" width="48" height="48" class="icon" viewBox="0 0 5 11">
<g fill="none" fill-rule="evenodd">
<g stroke="currentColor">
<path d="M5 2L9.5 7 14 2" transform="translate(-121 -110) translate(114 111) rotate(-90 9.5 4.5)"/>
</g>
</g>
</svg>
<small class="margin-top-auto">shape-right</small>
</div>
<div class="flex flex-column flex-center padding-xs margin-bottom-md" style="width: 100px;">
<svg id="icon--shape-left" width="48" height="48" class="icon" viewBox="0 0 5 11">
<g fill="none" fill-rule="evenodd">
<g stroke="currentColor">
<path d="M5 2L9.5 7 14 2" transform="translate(-81 -110) rotate(-180 46.5 60) rotate(-90 9.5 4.5)"/>
</g>
</g>
</svg>
<small class="margin-top-auto">shape-left</small>
</div>
<div class="flex flex-column flex-center padding-xs margin-bottom-md" style="width: 100px;">
<svg id="icon--shape-down" width="48" height="48" class="icon" viewBox="0 0 12 5">
<g fill="none" fill-rule="evenodd">
<g stroke="currentColor">
<path d="M145 85L150 90 155 85" transform="translate(-144 -85)"/>
</g>
</g>
</svg>
<small class="margin-top-auto">shape-down</small>
</div>
<div class="flex flex-column flex-center padding-xs margin-bottom-md" style="width: 100px;">
<svg id="icon--shape-up" width="48" height="48" class="icon" viewBox="0 0 12 5">
<g fill="none" fill-rule="evenodd">
<g stroke="currentColor">
<path d="M174 85L179 90 184 85" transform="translate(-173 -85) rotate(-180 179 87.5)"/>
</g>
</g>
</svg>
<small class="margin-top-auto">shape-up</small>
</div>
<div class="flex flex-column flex-center padding-xs margin-bottom-md" style="width: 100px;">
<svg id="icon--snapchat" width="48" height="48" class="icon" viewBox="0 0 16 16">
<g fill="none" fill-rule="evenodd">
<g fill="currentColor">
<path d="M560.155 708.5h-.04l-.277.003c-.66 0-2.897.183-3.952 2.543-.355.794-.27 2.143-.202 3.226l.024.389c-.054.03-.154.068-.311.068-.21 0-.457-.066-.736-.197-.074-.034-.16-.051-.253-.051-.327 0-.717.214-.778.533-.044.23.06.565.8.857.067.027.147.052.232.079.307.097.77.243.895.538.065.153.039.35-.077.585l-.008.016c-.04.095-1.02 2.322-3.194 2.679-.167.027-.287.176-.277.345.002.05.014.1.035.148.163.38.852.66 2.105.854.042.056.085.256.112.377.026.12.053.244.092.375.038.128.136.282.388.282.102 0 .222-.024.361-.051.21-.04.495-.096.853-.096.199 0 .404.017.612.051.404.067.748.31 1.146.59.57.402 1.215.857 2.196.857.027 0 .054 0 .08-.003.033.002.074.003.118.003.981 0 1.627-.455 2.196-.857.399-.28.742-.523 1.147-.59.207-.034.412-.051.611-.051.342 0 .612.043.853.09.15.03.272.044.361.044H565.285c.187 0 .318-.098.37-.276.038-.128.065-.248.092-.37.027-.122.07-.32.112-.377 1.253-.194 1.942-.472 2.105-.851.02-.049.033-.1.035-.15.01-.169-.11-.317-.277-.345-2.175-.357-3.154-2.584-3.194-2.678l-.008-.016c-.116-.235-.142-.432-.077-.585.126-.295.588-.441.895-.538.085-.027.166-.053.232-.079.542-.213.814-.476.808-.78-.004-.238-.19-.45-.487-.556-.1-.042-.218-.064-.334-.064-.08 0-.197.01-.307.061-.258.121-.49.186-.69.195-.132-.006-.218-.04-.268-.066l.02-.342.004-.046c.068-1.084.153-2.434-.202-3.228-1.056-2.361-3.297-2.545-3.96-2.545" transform="translate(-552 -708)"/>
</g>
</g>
</svg>
<small class="margin-top-auto">snapchat</small>
</div>
<div class="flex flex-column flex-center padding-xs margin-bottom-md" style="width: 100px;">
<svg id="icon--star" width="48" height="48" class="icon" viewBox="0 0 19 18">
<g fill="none" fill-rule="evenodd">
<g fill="currentColor">
<path d="M86.5 520.25L80.916 523.186 81.982 516.968 77.465 512.564 83.708 511.657 86.5 506 89.292 511.657 95.535 512.564 91.018 516.968 92.084 523.186z" transform="translate(-77 -506)"/>
</g>
</g>
</svg>
<small class="margin-top-auto">star</small>
</div>
<div class="flex flex-column flex-center padding-xs margin-bottom-md" style="width: 100px;">
<svg id="icon--thin-close" width="48" height="48" class="icon" viewBox="0 0 32 32">
<g fill="none" fill-rule="evenodd" stroke-linecap="round">
<g stroke="currentColor">
<path d="M0 0L29.841 29.669M29.841 0L0 29.669" transform="translate(-72 -417) translate(73 418)"/>
</g>
</g>
</svg>
<small class="margin-top-auto">thin-close</small>
</div>
<div class="flex flex-column flex-center padding-xs margin-bottom-md" style="width: 100px;">
<svg id="icon--arrow-thin-down" width="48" height="48" class="icon" viewBox="0 0 32 47">
<g fill="none" fill-rule="evenodd">
<path fill="currentColor" d="M0 15.111H45.333V16.111H0z" transform="translate(-364 -409) rotate(90 -7 402.5)"/>
<path stroke="currentColor" d="M21.333 7L36.833 24 52.333 7" transform="translate(-364 -409) rotate(90 -7 402.5) rotate(-90 36.833 15.5)"/>
</g>
</svg>
<small class="margin-top-auto">thin-down</small>
</div>
<div class="flex flex-column flex-center padding-xs margin-bottom-md" style="width: 100px;">
<svg id="icon--thin-left" width="48" height="48" class="icon" viewBox="0 0 47 33">
<g fill="none" fill-rule="evenodd">
<path fill="currentColor" d="M0 15.111H45.333V16.111H0z" transform="translate(-133 -416) rotate(-180 90 224)"/>
<path stroke="currentColor" d="M21.333 7L36.833 24 52.333 7" transform="translate(-133 -416) rotate(-180 90 224) rotate(-90 36.833 15.5)"/>
</g>
</svg>
<small class="margin-top-auto">thin-left</small>
</div>
<div class="flex flex-column flex-center padding-xs margin-bottom-md" style="width: 100px;">
<svg id="icon--thin-right" width="48" height="48" class="icon" viewBox="0 0 47 33">
<g fill="none" fill-rule="evenodd">
<path fill="currentColor" d="M0 15.111H45.333V16.111H0z" transform="translate(-211 -416) translate(211 417)"/>
<path stroke="currentColor" d="M21.333 7L36.833 24 52.333 7" transform="translate(-211 -416) translate(211 417) rotate(-90 36.833 15.5)"/>
</g>
</svg>
<small class="margin-top-auto">thin-right</small>
</div>
<div class="flex flex-column flex-center padding-xs margin-bottom-md" style="width: 100px;">
<svg id="icon--thin-up" width="48" height="48" class="icon" viewBox="0 0 32 47">
<g fill="none" fill-rule="evenodd">
<path fill="currentColor" d="M0 15.111H45.333V16.111H0z" transform="translate(-295 -409) rotate(-90 375.5 80)"/>
<path stroke="currentColor" d="M21.333 7L36.833 24 52.333 7" transform="translate(-295 -409) rotate(-90 375.5 80) rotate(-90 36.833 15.5)"/>
</g>
</svg>
<small class="margin-top-auto">thin-up</small>
</div>
<div class="flex flex-column flex-center padding-xs margin-bottom-md" style="width: 100px;">
<svg id="icon--thin-min" width="48" height="48" class="icon" viewBox="0 0 44 44">
<g fill="none" fill-rule="evenodd" stroke-linecap="round">
<g stroke="currentColor">
<path d="M29.841 0L0 29.669" transform="translate(-502 -411) rotate(45 -235.07 838.417)"/>
</g>
</g>
</svg>
<small class="margin-top-auto">thin-min</small>
</div>
<div class="flex flex-column flex-center padding-xs margin-bottom-md" style="width: 100px;">
<svg id="icon--thin-plus" width="48" height="48" class="icon" viewBox="0 0 44 44">
<g fill="none" fill-rule="evenodd" stroke-linecap="round">
<g stroke="currentColor">
<path d="M0 0L29.841 29.669M29.841 0L0 29.669" transform="translate(-427 -411) rotate(45 -272.57 747.884)"/>
</g>
</g>
</svg>
<small class="margin-top-auto">thin-plus</small>
</div>
<div class="flex flex-column flex-center padding-xs margin-bottom-md" style="width: 100px;">
<svg id="icon--twitter" width="48" height="48" class="icon" viewBox="0 0 16 14">
<g fill="none" fill-rule="evenodd">
<g fill="currentColor">
<path d="M147.5 711.039c-.552.26-1.145.437-1.768.517.636-.407 1.124-1.05 1.353-1.815-.595.376-1.253.649-1.954.795-.562-.638-1.361-1.036-2.246-1.036-1.7 0-3.078 1.47-3.078 3.282 0 .258.028.508.08.748-2.557-.136-4.824-1.444-6.342-3.43-.266.486-.417 1.05-.417 1.651 0 1.139.544 2.143 1.369 2.731-.505-.017-.98-.164-1.393-.41v.041c0 1.59 1.06 2.916 2.468 3.218-.259.075-.53.115-.811.115-.198 0-.391-.02-.579-.06.392 1.305 1.528 2.254 2.875 2.28-1.054.88-2.38 1.405-3.823 1.405-.248 0-.493-.015-.734-.046 1.362.932 2.98 1.475 4.718 1.475 5.66 0 8.755-5 8.755-9.337 0-.143-.003-.284-.008-.425.6-.462 1.123-1.04 1.535-1.698v-.001z" transform="translate(-132 -709)"/>
</g>
</g>
</svg>
<small class="margin-top-auto">twitter</small>
</div>
<div class="flex flex-column flex-center padding-xs margin-bottom-md" style="width: 100px;">
<svg id="icon--instagram" width="48" height="48" class="icon" viewBox="0 0 24 24">
<path fill="currentColor" d="M7.8,2H16.2C19.4,2 22,4.6 22,7.8V16.2A5.8,5.8 0 0,1 16.2,22H7.8C4.6,22 2,19.4 2,16.2V7.8A5.8,5.8 0 0,1 7.8,2M7.6,4A3.6,3.6 0 0,0 4,7.6V16.4C4,18.39 5.61,20 7.6,20H16.4A3.6,3.6 0 0,0 20,16.4V7.6C20,5.61 18.39,4 16.4,4H7.6M17.25,5.5A1.25,1.25 0 0,1 18.5,6.75A1.25,1.25 0 0,1 17.25,8A1.25,1.25 0 0,1 16,6.75A1.25,1.25 0 0,1 17.25,5.5M12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9Z"></path>
</svg>
<small class="margin-top-auto">instagram</small>
</div>
<div class="flex flex-column flex-center padding-xs margin-bottom-md" style="width: 100px;">
<svg id="icon--whatsapp" width="48" height="48" class="icon" viewBox="0 0 18 18">
<g fill="none" fill-rule="evenodd">
<g fill="currentColor" fill-rule="nonzero">
<path d="M506.4 709.627c-1.667-1.703-3.972-2.627-6.326-2.627-5.003 0-9.025 4.038-8.976 8.951 0 1.557.442 3.065 1.177 4.427L491 725l4.757-1.216c1.325.73 2.796 1.07 4.268 1.07 4.953 0 8.975-4.038 8.975-8.951 0-2.384-.932-4.622-2.6-6.276zm-6.326 13.719c-1.325 0-2.649-.34-3.777-1.022l-.294-.146-2.845.73.736-2.773-.196-.292c-2.158-3.454-1.129-8.027 2.403-10.167 3.531-2.14 8.092-1.12 10.25 2.383 2.159 3.503 1.129 8.027-2.403 10.168-1.128.73-2.501 1.119-3.874 1.119zm4.316-5.4l-.54-.243s-.785-.34-1.275-.584c-.05 0-.098-.049-.147-.049-.147 0-.245.049-.344.098 0 0-.049.048-.735.827-.05.097-.147.146-.245.146h-.05c-.049 0-.147-.05-.196-.098l-.245-.097c-.54-.243-1.03-.535-1.422-.924-.098-.098-.245-.195-.344-.292-.343-.34-.686-.73-.931-1.168l-.05-.097c-.049-.049-.049-.097-.098-.195 0-.097 0-.194.05-.243 0 0 .196-.243.343-.39.098-.096.147-.242.245-.34.098-.146.147-.34.098-.486-.049-.243-.638-1.557-.785-1.849-.098-.146-.196-.194-.343-.243h-.539c-.099 0-.197.049-.295.049l-.049.048c-.098.049-.196.146-.294.195-.098.097-.147.194-.245.292-.344.438-.54.973-.54 1.508 0 .389.098.778.245 1.119l.05.146c.44.924 1.03 1.751 1.814 2.48l.196.195c.147.146.295.244.393.39 1.03.875 2.207 1.508 3.531 1.848.147.049.343.049.49.097h.491c.245 0 .54-.097.736-.194.147-.097.245-.097.343-.195l.098-.097c.098-.097.196-.146.294-.243.098-.098.197-.195.246-.292.098-.195.147-.438.196-.681v-.34s-.05-.05-.147-.098z" transform="translate(-491 -707)"/>
</g>
</g>
</svg>
<small class="margin-top-auto">whatsapp</small>
</div>
<div class="flex flex-column flex-center padding-xs margin-bottom-md" style="width: 100px;">
<svg id="icon--zoom-in" width="48" height="48" class="icon" viewBox="0 0 29 30">
<g fill="none" fill-rule="evenodd" stroke-linecap="round">
<g stroke="currentColor">
<path d="M19.127 20.306L26.6 28M22.804 11.269c0 6.224-5.105 11.268-11.402 11.268C5.105 22.537 0 17.493 0 11.27 0 5.045 5.105 0 11.402 0c6.297 0 11.402 5.045 11.402 11.269h0z" transform="translate(-75 -243) translate(76 244)"/>
<path stroke-linejoin="round" d="M11.2 16.8L11.2 7 11.2 12.048M6.3 11.9L16.1 11.9 11.2 11.9" transform="translate(-75 -243) translate(76 244)"/>
</g>
</g>
</svg>
<small class="margin-top-auto">zoom-in</small>
</div>
<div class="flex flex-column flex-center padding-xs margin-bottom-md" style="width: 100px;">
<svg id="icon--zoom-out" width="48" height="48" class="icon" viewBox="0 0 29 30">
<g fill="none" fill-rule="evenodd" stroke-linecap="round">
<g stroke="currentColor">
<path d="M19.127 20.306L26.6 28M22.804 11.269c0 6.224-5.105 11.268-11.402 11.268C5.105 22.537 0 17.493 0 11.27 0 5.045 5.105 0 11.402 0c6.297 0 11.402 5.045 11.402 11.269h0z" transform="translate(-117 -243) translate(118 244)"/>
<path stroke-linejoin="round" d="M6.3 11.9L16.1 11.9 11.2 11.9" transform="translate(-117 -243) translate(118 244)"/>
</g>
</g>
</svg>
<small class="margin-top-auto">zoom-out</small>
</div>
<div class="flex flex-column flex-center padding-xs margin-bottom-md" style="width: 100px;">
<svg id="icon--pencil" width="48" height="48" class="icon" viewBox="0 0 22 22">
<g fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<g stroke="currentColor">
<path d="M7.696 18.413L20.391 5.718c.22-.219.22-.574 0-.793l-4.76-4.76c-.22-.22-.575-.22-.793 0L2.143 12.858l-.397.397L.556 20 7.3 18.81l.396-.397h0zM16.628 9.481L11.074 3.927" transform="translate(-77 -370) translate(77 371)"/>
</g>
</g>
</svg>
<small class="margin-top-auto">pencil</small>
</div>
<div class="flex flex-column flex-center padding-xs margin-bottom-md" style="width: 100px;">
<svg id="icon--shopping" width="48" height="48" class="icon" viewBox="0 0 17 22">
<g fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<g stroke="currentColor">
<path d="M11.977 20h-8.5c-1.28 0-2.318-.839-2.318-2.009L0 5.714c0-.195.173-.26.386-.26h14.682c.213 0 .387.12.387.315l-1.16 12.242c0 1.17-1.037 1.989-2.318 1.989h0z" transform="translate(-141 -194) translate(142 195)"/>
<path d="M4.09 5.455V4.07C4.09 1.885 5.657.114 7.728.114c2.071 0 3.637 1.771 3.637 3.956v1.385" transform="translate(-141 -194) translate(142 195)"/>
</g>
</g>
</svg>
<small class="margin-top-auto">shopping</small>
</div>
<div class="flex flex-column flex-center padding-xs margin-bottom-md" style="width: 100px;">
<svg id="icon--youtube" width="48" height="48" class="icon" viewBox="0 0 20 14">
<g fill="none" fill-rule="evenodd">
<g fill="currentColor">
<path d="M378 719v-6l5 3-5 3zm11.582-7.814c-.23-.86-.908-1.539-1.768-1.768C386.254 709 380 709 380 709s-6.254 0-7.814.418c-.86.23-1.538.907-1.768 1.768C370 712.746 370 716 370 716s0 3.254.418 4.813c.23.861.908 1.54 1.768 1.77C373.746 723 380 723 380 723s6.254 0 7.814-.418c.86-.23 1.538-.908 1.768-1.769C390 719.254 390 716 390 716s0-3.254-.418-4.814z" transform="translate(-370 -709)"/>
</g>
</g>
</svg>
<small class="margin-top-auto">youtube</small>
</div>
<div class="flex flex-column flex-center padding-xs margin-bottom-md" style="width: 100px;">
<svg id="icon--filter" width="48" height="48" class="icon" viewBox="0 0 21 12">
<g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linejoin="round">
<path d="M0 3h4"/>
<path stroke-linecap="round" d="M4 4.5h6V1H4z"/>
<path d="M10 3h11M21 10h-4"/>
<path stroke-linecap="round" d="M11 11.5h6V8h-6z"/>
<path d="M11 10H0"/>
</g>
</svg>
<small class="margin-top-auto">filter</small>
</div>
</div>
</div>
</div>
/* No context defined. */
No notes defined.