<ul class="Grid">
    <li class="Grid-cell u-sm-size1of2 u-md-size1of4 u-lg-size1of6">
        <div class="u-padding-r-all">
            <span class="u-text-r-l Icon Icon-behance"></span>
            <p>Icon-behance</p>
        </div>
    </li>

    <li class="Grid-cell u-sm-size1of2 u-md-size1of4 u-lg-size1of6">
        <div class="u-padding-r-all">
            <span class="u-text-r-l Icon Icon-linkedin"></span>
            <p>Icon-linkedin</p>
        </div>
    </li>

    <li class="Grid-cell u-sm-size1of2 u-md-size1of4 u-lg-size1of6">
        <div class="u-padding-r-all">
            <span class="u-text-r-l Icon Icon-youtube"></span>
            <p>Icon-youtube</p>
        </div>
    </li>

    <li class="Grid-cell u-sm-size1of2 u-md-size1of4 u-lg-size1of6">
        <div class="u-padding-r-all">
            <span class="u-text-r-l Icon Icon-instagram"></span>
            <p>Icon-instagram</p>
        </div>
    </li>

    <li class="Grid-cell u-sm-size1of2 u-md-size1of4 u-lg-size1of6">
        <div class="u-padding-r-all">
            <span class="u-text-r-l Icon Icon-medium"></span>
            <p>Icon-medium</p>
        </div>
    </li>

    <li class="Grid-cell u-sm-size1of2 u-md-size1of4 u-lg-size1of6">
        <div class="u-padding-r-all">
            <span class="u-text-r-l Icon Icon-github"></span>
            <p>Icon-github</p>
        </div>
    </li>

    <li class="Grid-cell u-sm-size1of2 u-md-size1of4 u-lg-size1of6">
        <div class="u-padding-r-all">
            <span class="u-text-r-l Icon Icon-slideshare"></span>
            <p>Icon-slideshare</p>
        </div>
    </li>

    <li class="Grid-cell u-sm-size1of2 u-md-size1of4 u-lg-size1of6">
        <div class="u-padding-r-all">
            <span class="u-text-r-l Icon Icon-googleplus"></span>
            <p>Icon-googleplus</p>
        </div>
    </li>

    <li class="Grid-cell u-sm-size1of2 u-md-size1of4 u-lg-size1of6">
        <div class="u-padding-r-all">
            <span class="u-text-r-l Icon Icon-flickr"></span>
            <p>Icon-flickr</p>
        </div>
    </li>

    <li class="Grid-cell u-sm-size1of2 u-md-size1of4 u-lg-size1of6">
        <div class="u-padding-r-all">
            <span class="u-text-r-l Icon Icon-expand-media"></span>
            <p>Icon-expand-media</p>
        </div>
    </li>

    <li class="Grid-cell u-sm-size1of2 u-md-size1of4 u-lg-size1of6">
        <div class="u-padding-r-all">
            <span class="u-text-r-l Icon Icon-list"></span>
            <p>Icon-list</p>
        </div>
    </li>

    <li class="Grid-cell u-sm-size1of2 u-md-size1of4 u-lg-size1of6">
        <div class="u-padding-r-all">
            <span class="u-text-r-l Icon Icon-pin"></span>
            <p>Icon-pin</p>
        </div>
    </li>

    <li class="Grid-cell u-sm-size1of2 u-md-size1of4 u-lg-size1of6">
        <div class="u-padding-r-all">
            <span class="u-text-r-l Icon Icon-facebook"></span>
            <p>Icon-facebook</p>
        </div>
    </li>

    <li class="Grid-cell u-sm-size1of2 u-md-size1of4 u-lg-size1of6">
        <div class="u-padding-r-all">
            <span class="u-text-r-l Icon Icon-share"></span>
            <p>Icon-share</p>
        </div>
    </li>

    <li class="Grid-cell u-sm-size1of2 u-md-size1of4 u-lg-size1of6">
        <div class="u-padding-r-all">
            <span class="u-text-r-l Icon Icon-twitter"></span>
            <p>Icon-twitter</p>
        </div>
    </li>

    <li class="Grid-cell u-sm-size1of2 u-md-size1of4 u-lg-size1of6">
        <div class="u-padding-r-all">
            <span class="u-text-r-l Icon Icon-whatsapp"></span>
            <p>Icon-whatsapp</p>
        </div>
    </li>

    <li class="Grid-cell u-sm-size1of2 u-md-size1of4 u-lg-size1of6">
        <div class="u-padding-r-all">
            <span class="u-text-r-l Icon Icon-rss"></span>
            <p>Icon-rss</p>
        </div>
    </li>

    <li class="Grid-cell u-sm-size1of2 u-md-size1of4 u-lg-size1of6">
        <div class="u-padding-r-all">
            <span class="u-text-r-l Icon Icon-youtube-text"></span>
            <p>Icon-youtube-text</p>
        </div>
    </li>

    <li class="Grid-cell u-sm-size1of2 u-md-size1of4 u-lg-size1of6">
        <div class="u-padding-r-all">
            <span class="u-text-r-l Icon Icon-comment"></span>
            <p>Icon-comment</p>
        </div>
    </li>

    <li class="Grid-cell u-sm-size1of2 u-md-size1of4 u-lg-size1of6">
        <div class="u-padding-r-all">
            <span class="u-text-r-l Icon Icon-file"></span>
            <p>Icon-file</p>
        </div>
    </li>

    <li class="Grid-cell u-sm-size1of2 u-md-size1of4 u-lg-size1of6">
        <div class="u-padding-r-all">
            <span class="u-text-r-l Icon Icon-mail"></span>
            <p>Icon-mail</p>
        </div>
    </li>

    <li class="Grid-cell u-sm-size1of2 u-md-size1of4 u-lg-size1of6">
        <div class="u-padding-r-all">
            <span class="u-text-r-l Icon Icon-video"></span>
            <p>Icon-video</p>
        </div>
    </li>

    <li class="Grid-cell u-sm-size1of2 u-md-size1of4 u-lg-size1of6">
        <div class="u-padding-r-all">
            <span class="u-text-r-l Icon Icon-camera"></span>
            <p>Icon-camera</p>
        </div>
    </li>

    <li class="Grid-cell u-sm-size1of2 u-md-size1of4 u-lg-size1of6">
        <div class="u-padding-r-all">
            <span class="u-text-r-l Icon Icon-external-link"></span>
            <p>Icon-external-link</p>
        </div>
    </li>

    <li class="Grid-cell u-sm-size1of2 u-md-size1of4 u-lg-size1of6">
        <div class="u-padding-r-all">
            <span class="u-text-r-l Icon Icon-link"></span>
            <p>Icon-link</p>
        </div>
    </li>

    <li class="Grid-cell u-sm-size1of2 u-md-size1of4 u-lg-size1of6">
        <div class="u-padding-r-all">
            <span class="u-text-r-l Icon Icon-calendar"></span>
            <p>Icon-calendar</p>
        </div>
    </li>

    <li class="Grid-cell u-sm-size1of2 u-md-size1of4 u-lg-size1of6">
        <div class="u-padding-r-all">
            <span class="u-text-r-l Icon Icon-pdf"></span>
            <p>Icon-pdf</p>
        </div>
    </li>

    <li class="Grid-cell u-sm-size1of2 u-md-size1of4 u-lg-size1of6">
        <div class="u-padding-r-all">
            <span class="u-text-r-l Icon Icon-copy"></span>
            <p>Icon-copy</p>
        </div>
    </li>

    <li class="Grid-cell u-sm-size1of2 u-md-size1of4 u-lg-size1of6">
        <div class="u-padding-r-all">
            <span class="u-text-r-l Icon Icon-favorite"></span>
            <p>Icon-favorite</p>
        </div>
    </li>

    <li class="Grid-cell u-sm-size1of2 u-md-size1of4 u-lg-size1of6">
        <div class="u-padding-r-all">
            <span class="u-text-r-l Icon Icon-error"></span>
            <p>Icon-error</p>
        </div>
    </li>

    <li class="Grid-cell u-sm-size1of2 u-md-size1of4 u-lg-size1of6">
        <div class="u-padding-r-all">
            <span class="u-text-r-l Icon Icon-download"></span>
            <p>Icon-download</p>
        </div>
    </li>

    <li class="Grid-cell u-sm-size1of2 u-md-size1of4 u-lg-size1of6">
        <div class="u-padding-r-all">
            <span class="u-text-r-l Icon Icon-upload"></span>
            <p>Icon-upload</p>
        </div>
    </li>

    <li class="Grid-cell u-sm-size1of2 u-md-size1of4 u-lg-size1of6">
        <div class="u-padding-r-all">
            <span class="u-text-r-l Icon Icon-unlock"></span>
            <p>Icon-unlock</p>
        </div>
    </li>

    <li class="Grid-cell u-sm-size1of2 u-md-size1of4 u-lg-size1of6">
        <div class="u-padding-r-all">
            <span class="u-text-r-l Icon Icon-lock"></span>
            <p>Icon-lock</p>
        </div>
    </li>

    <li class="Grid-cell u-sm-size1of2 u-md-size1of4 u-lg-size1of6">
        <div class="u-padding-r-all">
            <span class="u-text-r-l Icon Icon-settings"></span>
            <p>Icon-settings</p>
        </div>
    </li>

    <li class="Grid-cell u-sm-size1of2 u-md-size1of4 u-lg-size1of6">
        <div class="u-padding-r-all">
            <span class="u-text-r-l Icon Icon-search"></span>
            <p>Icon-search</p>
        </div>
    </li>

    <li class="Grid-cell u-sm-size1of2 u-md-size1of4 u-lg-size1of6">
        <div class="u-padding-r-all">
            <span class="u-text-r-l Icon Icon-zoom-in"></span>
            <p>Icon-zoom-in</p>
        </div>
    </li>

    <li class="Grid-cell u-sm-size1of2 u-md-size1of4 u-lg-size1of6">
        <div class="u-padding-r-all">
            <span class="u-text-r-l Icon Icon-zoom-out"></span>
            <p>Icon-zoom-out</p>
        </div>
    </li>

    <li class="Grid-cell u-sm-size1of2 u-md-size1of4 u-lg-size1of6">
        <div class="u-padding-r-all">
            <span class="u-text-r-l Icon Icon-arrow-down"></span>
            <p>Icon-arrow-down</p>
        </div>
    </li>

    <li class="Grid-cell u-sm-size1of2 u-md-size1of4 u-lg-size1of6">
        <div class="u-padding-r-all">
            <span class="u-text-r-l Icon Icon-arrow-up"></span>
            <p>Icon-arrow-up</p>
        </div>
    </li>

    <li class="Grid-cell u-sm-size1of2 u-md-size1of4 u-lg-size1of6">
        <div class="u-padding-r-all">
            <span class="u-text-r-l Icon Icon-more-items"></span>
            <p>Icon-more-items</p>
        </div>
    </li>

    <li class="Grid-cell u-sm-size1of2 u-md-size1of4 u-lg-size1of6">
        <div class="u-padding-r-all">
            <span class="u-text-r-l Icon Icon-more-actions"></span>
            <p>Icon-more-actions</p>
        </div>
    </li>

    <li class="Grid-cell u-sm-size1of2 u-md-size1of4 u-lg-size1of6">
        <div class="u-padding-r-all">
            <span class="u-text-r-l Icon Icon-check"></span>
            <p>Icon-check</p>
        </div>
    </li>

    <li class="Grid-cell u-sm-size1of2 u-md-size1of4 u-lg-size1of6">
        <div class="u-padding-r-all">
            <span class="u-text-r-l Icon Icon-cancel"></span>
            <p>Icon-cancel</p>
        </div>
    </li>

    <li class="Grid-cell u-sm-size1of2 u-md-size1of4 u-lg-size1of6">
        <div class="u-padding-r-all">
            <span class="u-text-r-l Icon Icon-app"></span>
            <p>Icon-app</p>
        </div>
    </li>

    <li class="Grid-cell u-sm-size1of2 u-md-size1of4 u-lg-size1of6">
        <div class="u-padding-r-all">
            <span class="u-text-r-l Icon Icon-refresh"></span>
            <p>Icon-refresh</p>
        </div>
    </li>

    <li class="Grid-cell u-sm-size1of2 u-md-size1of4 u-lg-size1of6">
        <div class="u-padding-r-all">
            <span class="u-text-r-l Icon Icon-close"></span>
            <p>Icon-close</p>
        </div>
    </li>

    <li class="Grid-cell u-sm-size1of2 u-md-size1of4 u-lg-size1of6">
        <div class="u-padding-r-all">
            <span class="u-text-r-l Icon Icon-drop-up"></span>
            <p>Icon-drop-up</p>
        </div>
    </li>

    <li class="Grid-cell u-sm-size1of2 u-md-size1of4 u-lg-size1of6">
        <div class="u-padding-r-all">
            <span class="u-text-r-l Icon Icon-drop-down"></span>
            <p>Icon-drop-down</p>
        </div>
    </li>

    <li class="Grid-cell u-sm-size1of2 u-md-size1of4 u-lg-size1of6">
        <div class="u-padding-r-all">
            <span class="u-text-r-l Icon Icon-collapse"></span>
            <p>Icon-collapse</p>
        </div>
    </li>

    <li class="Grid-cell u-sm-size1of2 u-md-size1of4 u-lg-size1of6">
        <div class="u-padding-r-all">
            <span class="u-text-r-l Icon Icon-expand"></span>
            <p>Icon-expand</p>
        </div>
    </li>

    <li class="Grid-cell u-sm-size1of2 u-md-size1of4 u-lg-size1of6">
        <div class="u-padding-r-all">
            <span class="u-text-r-l Icon Icon-chevron-right"></span>
            <p>Icon-chevron-right</p>
        </div>
    </li>

    <li class="Grid-cell u-sm-size1of2 u-md-size1of4 u-lg-size1of6">
        <div class="u-padding-r-all">
            <span class="u-text-r-l Icon Icon-chevron-left"></span>
            <p>Icon-chevron-left</p>
        </div>
    </li>

    <li class="Grid-cell u-sm-size1of2 u-md-size1of4 u-lg-size1of6">
        <div class="u-padding-r-all">
            <span class="u-text-r-l Icon Icon-arrow-right"></span>
            <p>Icon-arrow-right</p>
        </div>
    </li>

    <li class="Grid-cell u-sm-size1of2 u-md-size1of4 u-lg-size1of6">
        <div class="u-padding-r-all">
            <span class="u-text-r-l Icon Icon-arrow-left"></span>
            <p>Icon-arrow-left</p>
        </div>
    </li>

    <li class="Grid-cell u-sm-size1of2 u-md-size1of4 u-lg-size1of6">
        <div class="u-padding-r-all">
            <span class="u-text-r-l Icon Icon-checkbox-checked"></span>
            <p>Icon-checkbox-checked</p>
        </div>
    </li>

    <li class="Grid-cell u-sm-size1of2 u-md-size1of4 u-lg-size1of6">
        <div class="u-padding-r-all">
            <span class="u-text-r-l Icon Icon-checkbox"></span>
            <p>Icon-checkbox</p>
        </div>
    </li>

    <li class="Grid-cell u-sm-size1of2 u-md-size1of4 u-lg-size1of6">
        <div class="u-padding-r-all">
            <span class="u-text-r-l Icon Icon-radio-button"></span>
            <p>Icon-radio-button</p>
        </div>
    </li>

    <li class="Grid-cell u-sm-size1of2 u-md-size1of4 u-lg-size1of6">
        <div class="u-padding-r-all">
            <span class="u-text-r-l Icon Icon-radio-button-checked"></span>
            <p>Icon-radio-button-checked</p>
        </div>
    </li>

    <li class="Grid-cell u-sm-size1of2 u-md-size1of4 u-lg-size1of6">
        <div class="u-padding-r-all">
            <span class="u-text-r-l Icon Icon-warning"></span>
            <p>Icon-warning</p>
        </div>
    </li>

    <li class="Grid-cell u-sm-size1of2 u-md-size1of4 u-lg-size1of6">
        <div class="u-padding-r-all">
            <span class="u-text-r-l Icon Icon-info"></span>
            <p>Icon-info</p>
        </div>
    </li>

    <li class="Grid-cell u-sm-size1of2 u-md-size1of4 u-lg-size1of6">
        <div class="u-padding-r-all">
            <span class="u-text-r-l Icon Icon-print"></span>
            <p>Icon-print</p>
        </div>
    </li>

</ul>