<p class="uk-article-lead">YOOtheme is a well-known template and extension provider for Joomla and WordPress who helps you to create professional websites. But to make your website or interface design a real eye-catcher there was one thing missing: Icons! Icons are an essential tool to simplify user interfaces and today almost every major website uses icons to highlight important parts in their content.</p>

<ul class="uk-grid uk-grid-width-medium-1-2 uk-grid-width-large-1-3" data-uk-grid-margin>
    <li>
        <a class="uk-thumbnail uk-overlay-hover" href="#modal-1" data-uk-modal="{center:true}">
            <div class="uk-overlay">
                <img src="images/yootheme/icons_buildings.png" width="600" height="400" alt="Building Icons">
                <div class="uk-overlay-panel uk-overlay-icon uk-overlay-background uk-overlay-fade"></div>
            </div>
            <div class="uk-thumbnail-caption">Building Icons</div>
        </a>
    </li>
    <li>
        <a class="uk-thumbnail uk-overlay-hover" href="#modal-2" data-uk-modal="{center:true}">
            <div class="uk-overlay">
                <img src="images/yootheme/icons_hosting.png" width="600" height="400" alt="Hosting Icons">
                <div class="uk-overlay-panel uk-overlay-icon uk-overlay-background uk-overlay-fade"></div>
            </div>
            <div class="uk-thumbnail-caption">Hosting Icons</div>
        </a>
    </li>
    <li>
        <a class="uk-thumbnail uk-overlay-hover" href="#modal-3" data-uk-modal="{center:true}">
            <div class="uk-overlay">
                <img src="images/yootheme/icons_tools.png" width="600" height="400" alt="Tool Icons">
                <div class="uk-overlay-panel uk-overlay-icon uk-overlay-background uk-overlay-fade"></div>
            </div>
            <div class="uk-thumbnail-caption">Tool Icons</div>
        </a>
    </li>
    <li>
        <a class="uk-thumbnail uk-overlay-hover" href="#modal-4" data-uk-modal="{center:true}">
            <div class="uk-overlay">
                <img src="images/yootheme/icons_shipping.png" width="600" height="400" alt="Shipping Icons">
                <div class="uk-overlay-panel uk-overlay-icon uk-overlay-background uk-overlay-fade"></div>
            </div>
            <div class="uk-thumbnail-caption">Shipping Icons</div>
        </a>
    </li>
    <li>
        <a class="uk-thumbnail uk-overlay-hover" href="#modal-5" data-uk-modal="{center:true}">
            <div class="uk-overlay">
                <img src="images/yootheme/icons_ecommerce.png" width="600" height="400" alt="E-Commerce Icons">
                <div class="uk-overlay-panel uk-overlay-icon uk-overlay-background uk-overlay-fade"></div>
            </div>
            <div class="uk-thumbnail-caption">E-Commerce Icons</div>
        </a>
    </li>
    <li>
        <a class="uk-thumbnail uk-overlay-hover" href="#modal-6" data-uk-modal="{center:true}">
            <div class="uk-overlay">
                <img src="images/yootheme/icons_space.png" width="600" height="400" alt="Space Icons">
                <div class="uk-overlay-panel uk-overlay-icon uk-overlay-background uk-overlay-fade"></div>
            </div>
            <div class="uk-thumbnail-caption">Space Icons</div>
        </a>
    </li>
</ul>

<h2 class="uk-h3">Features</h2>

<div class="uk-grid uk-grid-divider" data-uk-grid-margin>
    <div class="uk-width-medium-1-3">
       <div class="uk-grid">
            <div class="uk-width-large-1-6 uk-vertical-align uk-text-center" style="height: 50px;">
                <div class="uk-vertical-align-middle">
                    <i class="uk-icon-paste uk-icon-medium uk-text-primary"></i>
                </div>
            </div>
            <div class="uk-width-large-5-6 uk-text-center-small uk-text-center-medium">
                <h3 class="uk-h4 uk-margin-bottom-remove">PNGs in 8 Sizes</h3>
                <p class="uk-margin-top-remove">From 16x16 to 512x512 pixels. </p>
            </div>
        </div>
    </div>

    <div class="uk-width-medium-1-3">
        <div class="uk-grid">
            <div class="uk-width-large-1-6 uk-vertical-align uk-text-center" style="height: 50px;">
                <div class="uk-vertical-align-middle">
                    <i class="uk-icon-sort-amount-asc uk-icon-medium uk-text-primary"></i>
                </div>
            </div>
            <div class="uk-width-large-5-6 uk-text-center-small uk-text-center-medium">
                <h3 class="uk-h4 uk-margin-bottom-remove">Scalable vector sources</h3>
                <p class="uk-margin-top-remove">Customizable PDF vector files.</p>
            </div>
        </div>
    </div>

    <div class="uk-width-medium-1-3">
        <div class="uk-grid">
            <div class="uk-width-large-1-6 uk-vertical-align uk-text-center" style="height: 50px;">
                <div class="uk-vertical-align-middle">
                    <i class="uk-icon-tint uk-icon-medium uk-text-primary"></i>
                </div>
            </div>
            <div class="uk-width-large-5-6 uk-text-center-small uk-text-center-medium">
                <h3 class="uk-h4 uk-margin-bottom-remove">Pixel perfect design</h3>
                <p class="uk-margin-top-remove">Handcrafted every size.</p>
            </div>
        </div>
    </div>

    <div class="uk-width-medium-1-1">
        <div class="uk-panel uk-panel-box uk-text-center">
            <p><strong>YOOtheme Icons.</strong> Beautiful and handcrafted icons for web and print projects. <a class="uk-button uk-button-primary uk-margin-left" href="http://www.yootheme.com/icons" target="_blank">Visit Website</a></p>
        </div>
    </div>
</div>

<div id="modal-1" class="uk-modal">
    <div class="uk-modal-dialog uk-modal-dialog-lightbox">
        <a href="" class="uk-modal-close uk-close uk-close-alt"></a>
        <img src="images/yootheme/icons_buildings.png" width="600" height="400" alt="Building Icons">
    </div>
</div>

<div id="modal-2" class="uk-modal">
    <div class="uk-modal-dialog uk-modal-dialog-lightbox">
        <a href="" class="uk-modal-close uk-close uk-close-alt"></a>
        <img src="images/yootheme/icons_hosting.png" width="600" height="400" alt="Hosting Icons">
    </div>
</div>

<div id="modal-3" class="uk-modal">
    <div class="uk-modal-dialog uk-modal-dialog-lightbox">
        <a href="" class="uk-modal-close uk-close uk-close-alt"></a>
        <img src="images/yootheme/icons_tools.png" width="600" height="400" alt="Tool Icons">
    </div>
</div>

<div id="modal-4" class="uk-modal">
    <div class="uk-modal-dialog uk-modal-dialog-lightbox">
        <a href="" class="uk-modal-close uk-close uk-close-alt"></a>
        <img src="images/yootheme/icons_shipping.png" width="600" height="400" alt="Shipping Icons">
    </div>
</div>

<div id="modal-5" class="uk-modal">
    <div class="uk-modal-dialog uk-modal-dialog-lightbox">
        <a href="" class="uk-modal-close uk-close uk-close-alt"></a>
        <img src="images/yootheme/icons_ecommerce.png" width="600" height="400" alt="E-Commerce Icons">
    </div>
</div>

<div id="modal-6" class="uk-modal">
    <div class="uk-modal-dialog uk-modal-dialog-lightbox">
        <a href="" class="uk-modal-close uk-close uk-close-alt"></a>
        <img src="images/yootheme/icons_space.png" width="600" height="400" alt="Space Icons">
    </div>
</div>