uikit
Version:
UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces.
559 lines (517 loc) • 70.1 kB
HTML
<!DOCTYPE html>
<html lang="en-gb" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Icon - UIkit tests</title>
<script src="js/test.js"></script>
</head>
<body>
<div class="uk-container">
<h1>Icon</h1>
<div uk-grid>
<div class="uk-width-expand@m">
<h2>List</h2>
<div class="uk-grid-small uk-child-width-1-2@s uk-child-width-1-4@m" uk-grid>
<div>
<ul class="uk-list">
<li>
<span class="uk-icon uk-icon-image uk-margin-small-right" style="background-image: url('images/avatar.jpg');"></span>
Image
</li>
<!-- App -->
<li><span class="uk-margin-small-right" uk-icon="icon: home"></span> home</li>
<li><span class="uk-margin-small-right" uk-icon="icon: sign-in"></span> sign-in</li>
<li><span class="uk-margin-small-right" uk-icon="icon: sign-out"></span> sign-out</li>
<li><span class="uk-margin-small-right" uk-icon="icon: user"></span> user</li>
<li><span class="uk-margin-small-right" uk-icon="icon: users"></span> users</li>
<li><span class="uk-margin-small-right" uk-icon="icon: lock"></span> lock</li>
<li><span class="uk-margin-small-right" uk-icon="icon: unlock"></span> unlock</li>
<li><span class="uk-margin-small-right" uk-icon="icon: settings"></span> settings</li>
<li><span class="uk-margin-small-right" uk-icon="icon: cog"></span> cog</li>
<li><span class="uk-margin-small-right" uk-icon="icon: nut"></span> nut</li>
<li><span class="uk-margin-small-right" uk-icon="icon: comment"></span> comment</li>
<li><span class="uk-margin-small-right" uk-icon="icon: commenting"></span> commenting</li>
<li><span class="uk-margin-small-right" uk-icon="icon: comments"></span> comments</li>
<li><span class="uk-margin-small-right" uk-icon="icon: hashtag"></span> hashtag</li>
<li><span class="uk-margin-small-right" uk-icon="icon: tag"></span> tag</li>
<li><span class="uk-margin-small-right" uk-icon="icon: cart"></span> cart</li>
<li><span class="uk-margin-small-right" uk-icon="icon: bag"></span> bag</li>
<li><span class="uk-margin-small-right" uk-icon="icon: credit-card"></span> credit-card</li>
<li><span class="uk-margin-small-right" uk-icon="icon: mail"></span> mail</li>
<li><span class="uk-margin-small-right" uk-icon="icon: receiver"></span> receiver</li>
<li><span class="uk-margin-small-right" uk-icon="icon: print"></span> print</li>
<li><span class="uk-margin-small-right" uk-icon="icon: search"></span> search</li>
<li><span class="uk-margin-small-right" uk-icon="icon: location"></span> location</li>
<li><span class="uk-margin-small-right" uk-icon="icon: bookmark"></span> bookmark</li>
<li><span class="uk-margin-small-right" uk-icon="icon: code"></span> code</li>
<li><span class="uk-margin-small-right" uk-icon="icon: paint-bucket"></span> paint-bucket</li>
<li><span class="uk-margin-small-right" uk-icon="icon: camera"></span> camera</li>
<li><span class="uk-margin-small-right" uk-icon="icon: video-camera"></span> video-camera</li>
<li><span class="uk-margin-small-right" uk-icon="icon: bell"></span> bell</li>
<li><span class="uk-margin-small-right" uk-icon="icon: microphone"></span> microphone</li>
<li><span class="uk-margin-small-right" uk-icon="icon: bolt"></span> bolt</li>
<li><span class="uk-margin-small-right" uk-icon="icon: star"></span> star</li>
<li><span class="uk-margin-small-right" uk-icon="icon: heart"></span> heart</li>
<li><span class="uk-margin-small-right" uk-icon="icon: happy"></span> happy</li>
<li><span class="uk-margin-small-right" uk-icon="icon: lifesaver"></span> lifesaver</li>
<li><span class="uk-margin-small-right" uk-icon="icon: rss"></span> rss</li>
<li><span class="uk-margin-small-right" uk-icon="icon: social"></span> social</li>
<li><span class="uk-margin-small-right" uk-icon="icon: git-branch"></span> git-branch</li>
<li><span class="uk-margin-small-right" uk-icon="icon: git-fork"></span> git-fork</li>
<li><span class="uk-margin-small-right" uk-icon="icon: world"></span> world</li>
</ul>
</div>
<div>
<ul class="uk-list">
<!-- App -->
<li><span class="uk-margin-small-right" uk-icon="icon: calendar"></span> calendar</li>
<li><span class="uk-margin-small-right" uk-icon="icon: clock"></span> clock</li>
<li><span class="uk-margin-small-right" uk-icon="icon: history"></span> history</li>
<li><span class="uk-margin-small-right" uk-icon="icon: future"></span> future</li>
<li><span class="uk-margin-small-right" uk-icon="icon: crosshairs"></span> crosshairs</li>
<li><span class="uk-margin-small-right" uk-icon="icon: pencil"></span> pencil</li>
<li><span class="uk-margin-small-right" uk-icon="icon: trash"></span> trash</li>
<li><span class="uk-margin-small-right" uk-icon="icon: move"></span> move</li>
<li><span class="uk-margin-small-right" uk-icon="icon: link"></span> link</li>
<li><span class="uk-margin-small-right" uk-icon="icon: link-external"></span> link-external</li>
<li><span class="uk-margin-small-right" uk-icon="icon: eye"></span> eye</li>
<li><span class="uk-margin-small-right" uk-icon="icon: eye-slash"></span> eye-slash</li>
<li><span class="uk-margin-small-right" uk-icon="icon: question"></span> question</li>
<li><span class="uk-margin-small-right" uk-icon="icon: info"></span> info</li>
<li><span class="uk-margin-small-right" uk-icon="icon: warning"></span> warning</li>
<li><span class="uk-margin-small-right" uk-icon="icon: image"></span> image</li>
<li><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> thumbnails</li>
<li><span class="uk-margin-small-right" uk-icon="icon: table"></span> table</li>
<li><span class="uk-margin-small-right" uk-icon="icon: list"></span> list</li>
<li><span class="uk-margin-small-right" uk-icon="icon: menu"></span> menu</li>
<li><span class="uk-margin-small-right" uk-icon="icon: grid"></span> grid</li>
<li><span class="uk-margin-small-right" uk-icon="icon: more"></span> more</li>
<li><span class="uk-margin-small-right" uk-icon="icon: more-vertical"></span> more-vertical</li>
<li><span class="uk-margin-small-right" uk-icon="icon: plus"></span> plus</li>
<li><span class="uk-margin-small-right" uk-icon="icon: plus-circle"></span> plus-circle</li>
<li><span class="uk-margin-small-right" uk-icon="icon: minus"></span> minus</li>
<li><span class="uk-margin-small-right" uk-icon="icon: minus-circle"></span> minus-circle</li>
<li><span class="uk-margin-small-right" uk-icon="icon: close"></span> close</li>
<li><span class="uk-margin-small-right" uk-icon="icon: close-circle"></span> close-circle</li>
<li><span class="uk-margin-small-right" uk-icon="icon: check"></span> check</li>
<li><span class="uk-margin-small-right" uk-icon="icon: ban"></span> ban</li>
<li><span class="uk-margin-small-right" uk-icon="icon: refresh"></span> refresh</li>
<li><span class="uk-margin-small-right" uk-icon="icon: play"></span> play</li>
<li><span class="uk-margin-small-right" uk-icon="icon: play-circle"></span> play-circle</li>
<!-- Devices -->
<li><span class="uk-margin-small-right" uk-icon="icon: tv"></span> tv</li>
<li><span class="uk-margin-small-right" uk-icon="icon: desktop"></span> desktop</li>
<li><span class="uk-margin-small-right" uk-icon="icon: laptop"></span> laptop</li>
<li><span class="uk-margin-small-right" uk-icon="icon: tablet"></span> tablet</li>
<li><span class="uk-margin-small-right" uk-icon="icon: phone"></span> phone</li>
<li><span class="uk-margin-small-right" uk-icon="icon: tablet-landscape"></span> tablet-landscape</li>
<li><span class="uk-margin-small-right" uk-icon="icon: phone-landscape"></span> phone-landscape</li>
</ul>
</div>
<div>
<ul class="uk-list">
<!-- Storage -->
<li><span class="uk-margin-small-right" uk-icon="icon: file"></span> file</li>
<li><span class="uk-margin-small-right" uk-icon="icon: file-text"></span> file-text</li>
<li><span class="uk-margin-small-right" uk-icon="icon: file-pdf"></span> file-pdf</li>
<li><span class="uk-margin-small-right" uk-icon="icon: copy"></span> copy</li>
<li><span class="uk-margin-small-right" uk-icon="icon: file-edit"></span> file-edit</li>
<li><span class="uk-margin-small-right" uk-icon="icon: folder"></span> folder</li>
<li><span class="uk-margin-small-right" uk-icon="icon: album"></span> album</li>
<li><span class="uk-margin-small-right" uk-icon="icon: push"></span> push</li>
<li><span class="uk-margin-small-right" uk-icon="icon: pull"></span> pull</li>
<li><span class="uk-margin-small-right" uk-icon="icon: server"></span> server</li>
<li><span class="uk-margin-small-right" uk-icon="icon: database"></span> database</li>
<li><span class="uk-margin-small-right" uk-icon="icon: cloud-upload"></span> cloud-upload</li>
<li><span class="uk-margin-small-right" uk-icon="icon: cloud-download"></span> cloud-download</li>
<li><span class="uk-margin-small-right" uk-icon="icon: download"></span> download</li>
<li><span class="uk-margin-small-right" uk-icon="icon: upload"></span> upload</li>
<!-- Direction -->
<li><span class="uk-margin-small-right" uk-icon="icon: reply"></span> reply</li>
<li><span class="uk-margin-small-right" uk-icon="icon: forward"></span> forward</li>
<li><span class="uk-margin-small-right" uk-icon="icon: expand"></span> expand</li>
<li><span class="uk-margin-small-right" uk-icon="icon: shrink"></span> shrink</li>
<li><span class="uk-margin-small-right" uk-icon="icon: arrow-up-right"></span> arrow-up-right</li>
<li><span class="uk-margin-small-right" uk-icon="icon: arrow-down-arrow-up"></span> arrow-down-arrow-up</li>
<li><span class="uk-margin-small-right" uk-icon="icon: arrow-up"></span> arrow-up</li>
<li><span class="uk-margin-small-right" uk-icon="icon: arrow-down"></span> arrow-down</li>
<li><span class="uk-margin-small-right" uk-icon="icon: arrow-left"></span> arrow-left</li>
<li><span class="uk-margin-small-right" uk-icon="icon: arrow-right"></span> arrow-right</li>
<li><span class="uk-margin-small-right" uk-icon="icon: chevron-up"></span> chevron-up</li>
<li><span class="uk-margin-small-right" uk-icon="icon: chevron-down"></span> chevron-down</li>
<li><span class="uk-margin-small-right" uk-icon="icon: chevron-left"></span> chevron-left</li>
<li><span class="uk-margin-small-right" uk-icon="icon: chevron-right"></span> chevron-right</li>
<li><span class="uk-margin-small-right" uk-icon="icon: chevron-double-left"></span> chevron-double-left</li>
<li><span class="uk-margin-small-right" uk-icon="icon: chevron-double-right"></span> chevron-double-right</li>
<li><span class="uk-margin-small-right" uk-icon="icon: triangle-up"></span> triangle-up</li>
<li><span class="uk-margin-small-right" uk-icon="icon: triangle-down"></span> triangle-down</li>
<li><span class="uk-margin-small-right" uk-icon="icon: triangle-left"></span> triangle-left</li>
<li><span class="uk-margin-small-right" uk-icon="icon: triangle-right"></span> triangle-right</li>
<!-- Editor -->
<li><span class="uk-margin-small-right" uk-icon="icon: bold"></span> bold</li>
<li><span class="uk-margin-small-right" uk-icon="icon: italic"></span> italic</li>
<li><span class="uk-margin-small-right" uk-icon="icon: strikethrough"></span> strikethrough</li>
<li><span class="uk-margin-small-right" uk-icon="icon: quote-right"></span> quote-right</li>
</ul>
</div>
<div>
<ul class="uk-list">
<!-- Brands -->
<li><span class="uk-margin-small-right" uk-icon="icon: 500px"></span> 500px</li>
<li><span class="uk-margin-small-right" uk-icon="icon: android"></span> android</li>
<li><span class="uk-margin-small-right" uk-icon="icon: android-robot"></span> android-robot</li>
<li><span class="uk-margin-small-right" uk-icon="icon: apple"></span> apple</li>
<li><span class="uk-margin-small-right" uk-icon="icon: behance"></span> behance</li>
<li><span class="uk-margin-small-right" uk-icon="icon: bluesky"></span> bluesky</li>
<li><span class="uk-margin-small-right" uk-icon="icon: discord"></span> discord</li>
<li><span class="uk-margin-small-right" uk-icon="icon: dribbble"></span> dribbble</li>
<li><span class="uk-margin-small-right" uk-icon="icon: etsy"></span> etsy</li>
<li><span class="uk-margin-small-right" uk-icon="icon: facebook"></span> facebook</li>
<li><span class="uk-margin-small-right" uk-icon="icon: flickr"></span> flickr</li>
<li><span class="uk-margin-small-right" uk-icon="icon: foursquare"></span> foursquare</li>
<li><span class="uk-margin-small-right" uk-icon="icon: github"></span> github</li>
<li><span class="uk-margin-small-right" uk-icon="icon: github-alt"></span> github-alt</li>
<li><span class="uk-margin-small-right" uk-icon="icon: gitter"></span> gitter</li>
<li><span class="uk-margin-small-right" uk-icon="icon: google"></span> google</li>
<li><span class="uk-margin-small-right" uk-icon="icon: instagram"></span> instagram</li>
<li><span class="uk-margin-small-right" uk-icon="icon: joomla"></span> joomla</li>
<li><span class="uk-margin-small-right" uk-icon="icon: linkedin"></span> linkedin</li>
<li><span class="uk-margin-small-right" uk-icon="icon: mastodon"></span> mastodon</li>
<li><span class="uk-margin-small-right" uk-icon="icon: microsoft"></span> microsoft</li>
<li><span class="uk-margin-small-right" uk-icon="icon: pinterest"></span> pinterest</li>
<li><span class="uk-margin-small-right" uk-icon="icon: reddit"></span> reddit</li>
<li><span class="uk-margin-small-right" uk-icon="icon: signal"></span> signal</li>
<li><span class="uk-margin-small-right" uk-icon="icon: soundcloud"></span> soundcloud</li>
<li><span class="uk-margin-small-right" uk-icon="icon: telegram"></span> telegram</li>
<li><span class="uk-margin-small-right" uk-icon="icon: threads"></span> threads</li>
<li><span class="uk-margin-small-right" uk-icon="icon: tiktok"></span> tiktok</li>
<li><span class="uk-margin-small-right" uk-icon="icon: tripadvisor"></span> tripadvisor</li>
<li><span class="uk-margin-small-right" uk-icon="icon: tumblr"></span> tumblr</li>
<li><span class="uk-margin-small-right" uk-icon="icon: twitch"></span> twitch</li>
<li><span class="uk-margin-small-right" uk-icon="icon: uikit"></span> uikit</li>
<li><span class="uk-margin-small-right" uk-icon="icon: vimeo"></span> vimeo</li>
<li><span class="uk-margin-small-right" uk-icon="icon: whatsapp"></span> whatsapp</li>
<li><span class="uk-margin-small-right" uk-icon="icon: wordpress"></span> wordpress</li>
<li><span class="uk-margin-small-right" uk-icon="icon: x"></span> x</li>
<li><span class="uk-margin-small-right" uk-icon="icon: xing"></span> xing</li>
<li><span class="uk-margin-small-right" uk-icon="icon: yelp"></span> yelp</li>
<li><span class="uk-margin-small-right" uk-icon="icon: yootheme"></span> yootheme</li>
<li><span class="uk-margin-small-right" uk-icon="icon: youtube"></span> youtube</li>
</ul>
</div>
</div>
<h2>Link</h2>
<ul class="uk-grid-small uk-flex-middle" uk-grid>
<!-- App -->
<li><a class="uk-icon-link" href="#" uk-icon="icon: home"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: sign-in"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: sign-out"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: user"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: users"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: lock"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: unlock"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: settings"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: cog"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: nut"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: comment"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: commenting"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: comments"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: hashtag"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: tag"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: cart"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: bag"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: credit-card"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: mail"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: receiver"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: print"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: search"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: location"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: bookmark"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: code"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: paint-bucket"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: camera"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: video-camera"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: bell"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: microphone"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: bolt"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: star"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: heart"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: happy"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: lifesaver"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: rss"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: social"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: git-branch"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: git-fork"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: world"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: calendar"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: clock"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: history"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: future"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: crosshairs"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: pencil"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: trash"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: move"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: link"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: link-external"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: eye"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: eye-slash"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: question"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: info"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: warning"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: image"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: thumbnails"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: table"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: list"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: menu"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: grid"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: more"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: more-vertical"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: plus"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: plus-circle"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: minus"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: minus-circle"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: close"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: close-circle"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: check"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: ban"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: refresh"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: play"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: play-circle"></a></li>
<!-- Devices -->
<li><a class="uk-icon-link" href="#" uk-icon="icon: tv"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: desktop"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: laptop"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: tablet"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: phone"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: tablet-landscape"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: phone-landscape"></a></li>
<!-- Storage -->
<li><a class="uk-icon-link" href="#" uk-icon="icon: file"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: file-text"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: file-pdf"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: copy"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: file-edit"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: folder"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: album"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: push"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: pull"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: server"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: database"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: cloud-upload"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: cloud-download"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: download"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: upload"></a></li>
<!-- Direction -->
<li><a class="uk-icon-link" href="#" uk-icon="icon: reply"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: forward"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: expand"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: shrink"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: arrow-up-right"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: arrow-down-arrow-up"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: arrow-up"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: arrow-down"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: arrow-left"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: arrow-right"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: chevron-up"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: chevron-down"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: chevron-left"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: chevron-right"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: chevron-double-left"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: chevron-double-right"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: triangle-up"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: triangle-down"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: triangle-left"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: triangle-right"></a></li>
<!-- Editor -->
<li><a class="uk-icon-link" href="#" uk-icon="icon: bold"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: italic"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: strikethrough"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: quote-right"></a></li>
<!-- Brands -->
<li><a class="uk-icon-link" href="#" uk-icon="icon: 500px"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: android"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: android-robot"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: apple"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: behance"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: bluesky"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: discord"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: dribbble"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: etsy"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: facebook"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: flickr"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: foursquare"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: github"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: github-alt"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: gitter"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: google"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: instagram"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: joomla"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: linkedin"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: mastodon"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: microsoft"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: pinterest"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: reddit"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: signal"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: soundcloud"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: telegram"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: threads"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: tiktok"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: tripadvisor"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: tumblr"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: twitch"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: uikit"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: vimeo"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: whatsapp"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: wordpress"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: x"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: xing"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: yelp"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: yootheme"></a></li>
<li><a class="uk-icon-link" href="#" uk-icon="icon: youtube"></a></li>
</ul>
<h2>Button</h2>
<ul class="uk-grid-small uk-flex-middle" uk-grid>
<!-- App -->
<li><a class="uk-icon-button" href="#" uk-icon="icon: home"></a></li>
<li><a class="uk-icon-button" href="#" uk-icon="icon: sign-in"></a></li>
<li><a class="uk-icon-button" href="#" uk-icon="icon: sign-out"></a></li>
<li><a class="uk-icon-button" href="#" uk-icon="icon: user"></a></li>
<li><a class="uk-icon-button" href="#" uk-icon="icon: users"></a></li>
<li><a class="uk-icon-button" href="#" uk-icon="icon: lock"></a></li>
<li><a class="uk-icon-button" href="#" uk-icon="icon: unlock"></a></li>
<li><a class="uk-icon-button" href="#" uk-icon="icon: settings"></a></li>
<li><a class="uk-icon-button" href="#" uk-icon="icon: cog"></a></li>
<li><a class="uk-icon-button" href="#" uk-icon="icon: nut"></a></li>
<li><a class="uk-icon-button" href="#" uk-icon="icon: comment"></a></li>
<li><a class="uk-icon-button" href="#" uk-icon="icon: commenting"></a></li>
<li><a class="uk-icon-button" href="#" uk-icon="icon: comments"></a></li>
<li><a class="uk-icon-button" href="#" uk-icon="icon: hashtag"></a></li>
<li><a class="uk-icon-button" href="#" uk-icon="icon: tag"></a></li>
<li><a class="uk-icon-button" href="#" uk-icon="icon: cart"></a></li>
<li><a class="uk-icon-button" href="#" uk-icon="icon: bag"></a></li>
<li><a class="uk-icon-button" href="#" uk-icon="icon: credit-card"></a></li>
<li><a class="uk-icon-button" href="#" uk-icon="icon: mail"></a></li>
<li><a class="uk-icon-button" href="#" uk-icon="icon: receiver"></a></li>
<li><a class="uk-icon-button" href="#" uk-icon="icon: print"></a></li>
<li><a class="uk-icon-button" href="#" uk-icon="icon: search"></a></li>
<li><a class="uk-icon-button" href="#" uk-icon="icon: location"></a></li>
<li><a class="uk-icon-button" href="#" uk-icon="icon: bookmark"></a></li>
<li><a class="uk-icon-button" href="#" uk-icon="icon: code"></a></li>
<li><a class="uk-icon-button" href="#" uk-icon="icon: paint-bucket"></a></li>
<li><a class="uk-icon-button" href="#" uk-icon="icon: camera"></a></li>
<li><a class="uk-icon-button" href="#" uk-icon="icon: video-camera"></a></li>
<li><a class="uk-icon-button" href="#" uk-icon="icon: bell"></a></li>
<li><a class="uk-icon-button" href="#" uk-icon="icon: microphone"></a></li>
<li><a class="uk-icon-button" href="#" uk-icon="icon: bolt"></a></li>
<li><a class="uk-icon-button" href="#" uk-icon="icon: star"></a></li>
<li><a class="uk-icon-button" href="#" uk-icon="icon: heart"></a></li>
<li><a class="uk-icon-button" href="#" uk-icon="icon: happy"></a></li>
<li><a class="uk-icon-button" href="#" uk-icon="icon: lifesaver"></a></li>
<li><a class="uk-icon-button" href="#" uk-icon="icon: rss"></a></li>
<li><a class="uk-icon-button" href="#" uk-icon="icon: social"></a></li>
<li><a class="uk-icon-button" href="#" uk-icon="icon: git-branch"></a></li>
<li><a class="uk-icon-button" href="#" uk-icon="icon: git-fork"></a></li>
<li><a class="uk-icon-button" href="#" uk-icon="icon: world"></a></li>
<li><a class="uk-icon-button" href="#" uk-icon="icon: calendar"></a></li>
<li><a class="uk-icon-button" href="#" uk-icon="icon: clock"></a></li>
<li><a class="uk-icon-button" href="#" uk-icon="icon: history"></a></li>
<li><a class="uk-icon-button" href="#" uk-icon="icon: future"></a></li>
<li><a class="uk-icon-button" href="#" uk-icon="icon: crosshairs"></a></li>
<li><a class="uk-icon-button" href="#" uk-icon="icon: pencil"></a></li>
<li><a class="uk-icon-button" href="#" uk-icon="icon: trash"></a></li>
<li><a class="uk-icon-button" href="#" uk-icon="icon: move"></a></li>
<li><a class="uk-icon-button" href="#" uk-icon="icon: link"></a></li>
<li><a class="uk-icon-button" href="#" uk-icon="icon: link-external"></a></li>
<li><a class="uk-icon-button" href="#" uk-icon="icon: eye"></a></li>
<li><a class="uk-icon-button" href="#" uk-icon="icon: eye-slash"></a></li>
<li><a class="uk-icon-button" href="#" uk-icon="icon: question"></a></li>
<li><a class="uk-icon-button" href="#" uk-icon="icon: info"></a></li>
<li><a class="uk-icon-button" href="#" uk-icon="icon: warning"></a></li>
<li><a class="uk-icon-button" href="#" uk-icon="icon: image"></a></li>
<li><a class="uk-icon-button" href="#" uk-icon="icon: thumbnails"></a></li>
<li><a class="uk-icon-button" href="#" uk-icon="icon: table"></a></li>
<li><a class="uk-icon-button" href="#" uk-icon="icon: list"></a></li>
<li><a class="uk-icon-button" href="#" uk-icon="icon: menu"></a></li>
<li><a class="uk-icon-button" href="#" uk-icon="icon: grid"></a></li>
<li><a class="uk-icon-button" href="#" uk-icon="icon: more"></a></li>
<li><a class="uk-icon-button" href="#" uk-icon="icon: more-vertical"></a></li>
<li><a class="uk-icon-button" href="#" uk-icon="icon: plus"></a></li>
<li><a class="uk-icon-button" href="#" uk-icon="icon: plus-circle"></a></li>
<li><a class="uk-icon-button" href="#" uk-icon="icon: minus"></a></li>
<li><a class="uk-icon-button" href="#" uk-icon="icon: minus-circle"></a></li>
<li><a class="uk-icon-button" href="#" uk-icon="icon: close"></a></li>
<li><a class="uk-icon-button" href="#" uk-icon="icon: close-circle"></a></li>
<li><a class="uk-icon-button" href="#" uk-icon="icon: check"></a></li>
<li><a class="uk-icon-button" href="#" uk-icon="icon: ban"></a></li>
<li><a class="uk-icon-button" href="#" uk-icon="icon: refresh"></a></li>
<li><a class="uk-icon-button" href="#" uk-icon="icon: play"></a></li>
<li><a class="uk-icon-button" href="#" uk-icon="icon: play-circle"></a></li>
<!-- Devices -->
<li><a class="uk-icon-button" href="#" uk-icon="icon: tv"></a></li>
<li><a class="uk-icon-button" href="#" uk-icon="icon: desktop"></a></li>
<li><a class="uk-icon-button" href="#" uk-icon="icon: laptop"></a></li>
<li><a class="uk-icon-button" href="#" uk-icon="icon: tablet"></a></li>
<li><a class="uk-icon-button" href="#" uk-icon="icon: phone"></a></li>
<li><a class="uk-icon-button" href="#" uk-icon="icon: tablet-landscape"></a></li>
<li><a class="uk-icon-button" href="#" uk-icon="icon: phone-landscape"></a></li>
<!-- Storage -->
<li><a class="uk-icon-button" href="#" uk-icon="icon: file"></a></li>
<li><a class="uk-icon-button" href="#" uk-icon="icon: file-text"></a></li>
<li><a class="uk-icon-button" href="#" uk-icon="icon: file-pdf"></a></li>
<li><a class="uk-icon-button" href="#" uk-icon="icon: copy"></a></li>
<li><a class="uk-icon-button" href="#" uk-icon="icon: file-edit"></a></li>
<li><a class="uk-icon-button" href="#" uk-icon="icon: folder"></a></li>
<li><a class="uk-icon-button" href="#" uk-icon="icon: album"></a></li>
<li><a class="uk-icon-button" href="#" uk-icon="icon: push"></a></li>
<li><a class="uk-icon-button" href="#" uk-icon="icon: pull"></a></li>
<li><a class="uk-icon-button" href="#" uk-icon="icon: server"></a></li>
<li><a class="uk-icon-button" href="#" uk-icon="icon: database"></a></li>
<li><a class="uk-icon-button" href="#" uk-icon="icon: cloud-upload"></a></li>
<li><a class="uk-icon-button" href="#" uk-icon="icon: cloud-download"></a></li>
<li><a class="uk-icon-button" href="#" uk-icon="icon: download"></a></li>
<li><a class="uk-icon-button" href="#" uk-icon="icon: upload"></a></li>
<!-- Direction -->
<li><a class="uk-icon-button" href="#" uk-icon="icon: reply"></a></li>
<li><a class="uk-icon-button" href="#" uk-icon="icon: forward"></a></li>
<li><a class="uk-icon-button" href="#" uk-icon="icon: expand"></a></li>
<li><a class="uk-icon-button" href="#" uk-icon="icon: shrink"></a></li>
<li><a class="uk-icon-button" href="#" uk-icon="icon: arrow-up-right"></a></li>
<li><a class="uk-icon-button" href="#" uk-icon="icon: arrow-down-arrow-up"></a></li>
<li><a class="uk-icon-button" href="#" uk-icon="icon: arrow-up"></a></li>
<li><a class="uk-icon-button" href="#" uk-icon="icon: arrow-down"></a></li>
<li><a class="uk-icon-button" href="#" uk-icon="icon: arrow-left"></a></li>
<li><a class="uk-icon-button" href="#" uk-icon="icon: arrow-right"></a></li>
<li><a class="uk-icon-button" href="#" uk-icon="icon: chevron-up"></a></li>
<li><a class="uk-icon-button" href="#" uk-icon="icon: chevron-down"></a></li>
<li><a class="uk-icon-button" href="#" uk-icon="icon: chevron-left"></a></li>
<li><a class="uk-icon-button" href="#" uk-icon="icon: chevron-right"></a></li>
<li><a class="uk-icon-button" href="#" uk-icon="icon: chevron-double-left"></a></li>
<li><a class="uk-icon-button" href="#" uk-icon="icon: chevron-double-right"></a></li>
<li><a class="uk-icon-button" href="#" uk-icon="icon: triangle-up"></a></li>
<li><a class="uk-icon-button" href="#" uk-icon="icon: triangle-down"></a></li>
<li><a class="uk-icon-button" href="#" uk-icon="icon: triangle-left"></a></li>
<li><a class="uk-icon-button" href="#" uk-icon="icon: triangle-right"></a></li>
<!-- Editor -->
<li><a class="uk-icon-button" href="#" uk-icon="icon: bold"></a></li>
<li><a class="uk-icon-button" href="#" uk-icon="icon: italic"></a></li>
<li><a class="uk-icon-button" href="#" uk-icon="icon: strikethrough"></a></li>
<li><a class="uk-icon-button" href="#" uk-icon="icon: quote-right"></a></li>
<!-- Brands -->
<li><a class="uk-icon-button" href="#" uk-icon="icon: 500px"></a></li>
<li><a class="uk-icon-button" href="#" uk-icon="icon: android"></a></li>
<li><a class="uk-icon-button" href="#" uk-icon="icon: android-robot"></a></li>
<li><a class="uk-icon-button" href="#" uk-icon="icon: apple"></a></li>
<li><a class="uk-icon-button" href="#" uk-icon="icon: behance"></a></li>
<li><a class="uk-icon-button" href="#" uk-icon="icon: bluesky"></a></li>
<li><a class="uk-icon-button" href="#" uk-icon="icon: discord"></a></li>
<li><a class="uk-icon-button" href="#" uk-icon="icon: dribbble"></a></li>
<li><a class="uk-icon-button" href="#" uk-icon="icon: etsy"></a></li>
<li><a class="uk-icon-button" href="#" uk-icon="icon: facebook"></a></li>
<li><a class="uk-icon-button" href="#" uk-icon="icon: flickr"></a></li>
<li><a class="uk-icon-button" href="#" uk-icon="icon: foursquare"></a></li>
<li><a class="uk-icon-button" href="#" uk-icon="icon: github"></a></li>
<li><a class="uk-icon-button" href="#" uk-icon="icon: github-alt"></a></li>
<li><a class="uk-icon-button" href="#" uk-icon="icon: gitter"></a></li>
<li><a class="uk-icon-button" href="#" uk-icon="icon: google"></a></li>
<li><a class="uk-icon-button" href="#" uk-icon="icon: instagram"></a></