icon-kit
Version:
Simple and beautiful line icons.
1,696 lines (1,426 loc) • 50.6 kB
HTML
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>IconKit</title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800" rel="stylesheet">
<link rel="stylesheet" href="dist/css/iconkit.min.css">
<style>
body {
margin: 0;
padding: 0;
color: #212121;
font-size: .9rem;
line-height: 1.5;
font-weight: 400;
font-family: "Nunito Sans",sans-serif;
}
h1 {
font-weight: 600;
}
h3 {
color: #404040;
font-weight: normal;
}
pre {
border-radius: 6px;
background: #f7f7f7;
padding: 20px;
}
.container {
max-width: 1140px;
width: 100%;
margin-right: auto;
margin-left: auto;
}
.icon_lists {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
list-style: none;
margin: 0;
padding: 0;
margin-top: 30px;
}
.icon_lists>li {
-ms-flex: 0 0 33.333333%;
flex: 0 0 33.333333%;
max-width: 33.333333%;
position: relative;
width: 100%;
min-height: 1px;
}
.icon_lists>li>i {
float: left;
width: 60px;
height: 60px;
text-align: center;
border-radius: .1875rem;
margin-right: 1rem;
margin-bottom: 1.5rem;
font-size: 2.8rem;
-webkit-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
</style>
</head>
<body>
<div class="container">
<h1>Icon Kit</h1>
<hr>
<h3>Step 1: Include the css of iconkit</h3>
<pre><code class="lang-js hljs javascript"><span class="hljs-comment"><link rel="stylesheet" type="text/css" href="./iconkit.css"></span></code></pre>
<h3>Step 2: Copy the individual code of icon into pages</h3>
<pre><code class="lang-css hljs"><<span class="hljs-selector-tag">i</span> <span class="hljs-selector-tag">class</span>="<span class="hljs-selector-tag">ik ik-xxx</span>"></<span class="hljs-selector-tag">i</span>></code></pre>
<ul class="icon_lists">
<li>
<i class="ik ik-alert-octagon"></i>
<div class="name">alert-octagon</div>
<div class="fontclass">.ik-alert-octagon</div>
</li>
<li>
<i class="ik ik-alert-circle"></i>
<div class="name">alert-circle</div>
<div class="fontclass">.ik-alert-circle</div>
</li>
<li>
<i class="ik ik-activity"></i>
<div class="name">activity</div>
<div class="fontclass">.ik-activity</div>
</li>
<li>
<i class="ik ik-alert-triangle"></i>
<div class="name">alert-triangle</div>
<div class="fontclass">.ik-alert-triangle</div>
</li>
<li>
<i class="ik ik-align-center"></i>
<div class="name">align-center</div>
<div class="fontclass">.ik-align-center</div>
</li>
<li>
<i class="ik ik-airplay"></i>
<div class="name">airplay</div>
<div class="fontclass">.ik-airplay</div>
</li>
<li>
<i class="ik ik-align-justify"></i>
<div class="name">align-justify</div>
<div class="fontclass">.ik-align-justify</div>
</li>
<li>
<i class="ik ik-align-left"></i>
<div class="name">align-left</div>
<div class="fontclass">.ik-align-left</div>
</li>
<li>
<i class="ik ik-align-right"></i>
<div class="name">align-right</div>
<div class="fontclass">.ik-align-right</div>
</li>
<li>
<i class="ik ik-arrow-down-left"></i>
<div class="name">arrow-down-left</div>
<div class="fontclass">.ik-arrow-down-left</div>
</li>
<li>
<i class="ik ik-arrow-down-right"></i>
<div class="name">arrow-down-right</div>
<div class="fontclass">.ik-arrow-down-right</div>
</li>
<li>
<i class="ik ik-anchor"></i>
<div class="name">anchor</div>
<div class="fontclass">.ik-anchor</div>
</li>
<li>
<i class="ik ik-aperture"></i>
<div class="name">aperture</div>
<div class="fontclass">.ik-aperture</div>
</li>
<li>
<i class="ik ik-arrow-left"></i>
<div class="name">arrow-left</div>
<div class="fontclass">.ik-arrow-left</div>
</li>
<li>
<i class="ik ik-arrow-right"></i>
<div class="name">arrow-right</div>
<div class="fontclass">.ik-arrow-right</div>
</li>
<li>
<i class="ik ik-arrow-down"></i>
<div class="name">arrow-down</div>
<div class="fontclass">.ik-arrow-down</div>
</li>
<li>
<i class="ik ik-arrow-up-left"></i>
<div class="name">arrow-up-left</div>
<div class="fontclass">.ik-arrow-up-left</div>
</li>
<li>
<i class="ik ik-arrow-up-right"></i>
<div class="name">arrow-up-right</div>
<div class="fontclass">.ik-arrow-up-right</div>
</li>
<li>
<i class="ik ik-arrow-up"></i>
<div class="name">arrow-up</div>
<div class="fontclass">.ik-arrow-up</div>
</li>
<li>
<i class="ik ik-award"></i>
<div class="name">award</div>
<div class="fontclass">.ik-award</div>
</li>
<li>
<i class="ik ik-bar-chart"></i>
<div class="name">bar-chart</div>
<div class="fontclass">.ik-bar-chart</div>
</li>
<li>
<i class="ik ik-at-sign"></i>
<div class="name">at-sign</div>
<div class="fontclass">.ik-at-sign</div>
</li>
<li>
<i class="ik ik-bar-chart-2"></i>
<div class="name">bar-chart-2</div>
<div class="fontclass">.ik-bar-chart-</div>
</li>
<li>
<i class="ik ik-battery-charging"></i>
<div class="name">battery-charging</div>
<div class="fontclass">.ik-battery-charging</div>
</li>
<li>
<i class="ik ik-bell-off"></i>
<div class="name">bell-off</div>
<div class="fontclass">.ik-bell-off</div>
</li>
<li>
<i class="ik ik-battery"></i>
<div class="name">battery</div>
<div class="fontclass">.ik-battery</div>
</li>
<li>
<i class="ik ik-bluetooth"></i>
<div class="name">bluetooth</div>
<div class="fontclass">.ik-bluetooth</div>
</li>
<li>
<i class="ik ik-bell"></i>
<div class="name">bell</div>
<div class="fontclass">.ik-bell</div>
</li>
<li>
<i class="ik ik-book"></i>
<div class="name">book</div>
<div class="fontclass">.ik-book</div>
</li>
<li>
<i class="ik ik-briefcase"></i>
<div class="name">briefcase</div>
<div class="fontclass">.ik-briefcase</div>
</li>
<li>
<i class="ik ik-camera-off"></i>
<div class="name">camera-off</div>
<div class="fontclass">.ik-camera-off</div>
</li>
<li>
<i class="ik ik-calendar"></i>
<div class="name">calendar</div>
<div class="fontclass">.ik-calendar</div>
</li>
<li>
<i class="ik ik-bookmark"></i>
<div class="name">bookmark</div>
<div class="fontclass">.ik-bookmark</div>
</li>
<li>
<i class="ik ik-box"></i>
<div class="name">box</div>
<div class="fontclass">.ik-box</div>
</li>
<li>
<i class="ik ik-camera"></i>
<div class="name">camera</div>
<div class="fontclass">.ik-camera</div>
</li>
<li>
<i class="ik ik-check-circle"></i>
<div class="name">check-circle</div>
<div class="fontclass">.ik-check-circle</div>
</li>
<li>
<i class="ik ik-check"></i>
<div class="name">check</div>
<div class="fontclass">.ik-check</div>
</li>
<li>
<i class="ik ik-check-square"></i>
<div class="name">check-square</div>
<div class="fontclass">.ik-check-square</div>
</li>
<li>
<i class="ik ik-cast"></i>
<div class="name">cast</div>
<div class="fontclass">.ik-cast</div>
</li>
<li>
<i class="ik ik-chevron-down"></i>
<div class="name">chevron-down</div>
<div class="fontclass">.ik-chevron-down</div>
</li>
<li>
<i class="ik ik-chevron-left"></i>
<div class="name">chevron-left</div>
<div class="fontclass">.ik-chevron-left</div>
</li>
<li>
<i class="ik ik-chevron-right"></i>
<div class="name">chevron-right</div>
<div class="fontclass">.ik-chevron-right</div>
</li>
<li>
<i class="ik ik-chevron-up"></i>
<div class="name">chevron-up</div>
<div class="fontclass">.ik-chevron-up</div>
</li>
<li>
<i class="ik ik-chevrons-down"></i>
<div class="name">chevrons-down</div>
<div class="fontclass">.ik-chevrons-down</div>
</li>
<li>
<i class="ik ik-chevrons-right"></i>
<div class="name">chevrons-right</div>
<div class="fontclass">.ik-chevrons-right</div>
</li>
<li>
<i class="ik ik-chevrons-up"></i>
<div class="name">chevrons-up</div>
<div class="fontclass">.ik-chevrons-up</div>
</li>
<li>
<i class="ik ik-chevrons-left"></i>
<div class="name">chevrons-left</div>
<div class="fontclass">.ik-chevrons-left</div>
</li>
<li>
<i class="ik ik-circle"></i>
<div class="name">circle</div>
<div class="fontclass">.ik-circle</div>
</li>
<li>
<i class="ik ik-clipboard"></i>
<div class="name">clipboard</div>
<div class="fontclass">.ik-clipboard</div>
</li>
<li>
<i class="ik ik-chrome"></i>
<div class="name">chrome</div>
<div class="fontclass">.ik-chrome</div>
</li>
<li>
<i class="ik ik-clock"></i>
<div class="name">clock</div>
<div class="fontclass">.ik-clock</div>
</li>
<li>
<i class="ik ik-cloud-lightning"></i>
<div class="name">cloud-lightning</div>
<div class="fontclass">.ik-cloud-lightning</div>
</li>
<li>
<i class="ik ik-cloud-drizzle"></i>
<div class="name">cloud-drizzle</div>
<div class="fontclass">.ik-cloud-drizzle</div>
</li>
<li>
<i class="ik ik-cloud-rain"></i>
<div class="name">cloud-rain</div>
<div class="fontclass">.ik-cloud-rain</div>
</li>
<li>
<i class="ik ik-cloud-off"></i>
<div class="name">cloud-off</div>
<div class="fontclass">.ik-cloud-off</div>
</li>
<li>
<i class="ik ik-codepen"></i>
<div class="name">codepen</div>
<div class="fontclass">.ik-codepen</div>
</li>
<li>
<i class="ik ik-cloud-snow"></i>
<div class="name">cloud-snow</div>
<div class="fontclass">.ik-cloud-snow</div>
</li>
<li>
<i class="ik ik-compass"></i>
<div class="name">compass</div>
<div class="fontclass">.ik-compass</div>
</li>
<li>
<i class="ik ik-copy"></i>
<div class="name">copy</div>
<div class="fontclass">.ik-copy</div>
</li>
<li>
<i class="ik ik-corner-down-right"></i>
<div class="name">corner-down-right</div>
<div class="fontclass">.ik-corner-down-right</div>
</li>
<li>
<i class="ik ik-corner-down-left"></i>
<div class="name">corner-down-left</div>
<div class="fontclass">.ik-corner-down-left</div>
</li>
<li>
<i class="ik ik-corner-left-down"></i>
<div class="name">corner-left-down</div>
<div class="fontclass">.ik-corner-left-down</div>
</li>
<li>
<i class="ik ik-corner-left-up"></i>
<div class="name">corner-left-up</div>
<div class="fontclass">.ik-corner-left-up</div>
</li>
<li>
<i class="ik ik-corner-up-left"></i>
<div class="name">corner-up-left</div>
<div class="fontclass">.ik-corner-up-left</div>
</li>
<li>
<i class="ik ik-corner-up-right"></i>
<div class="name">corner-up-right</div>
<div class="fontclass">.ik-corner-up-right</div>
</li>
<li>
<i class="ik ik-corner-right-down"></i>
<div class="name">corner-right-down</div>
<div class="fontclass">.ik-corner-right-down</div>
</li>
<li>
<i class="ik ik-corner-right-up"></i>
<div class="name">corner-right-up</div>
<div class="fontclass">.ik-corner-right-up</div>
</li>
<li>
<i class="ik ik-cpu"></i>
<div class="name">cpu</div>
<div class="fontclass">.ik-cpu</div>
</li>
<li>
<i class="ik ik-credit-card"></i>
<div class="name">credit-card</div>
<div class="fontclass">.ik-credit-card</div>
</li>
<li>
<i class="ik ik-crosshair"></i>
<div class="name">crosshair</div>
<div class="fontclass">.ik-crosshair</div>
</li>
<li>
<i class="ik ik-disc"></i>
<div class="name">disc</div>
<div class="fontclass">.ik-disc</div>
</li>
<li>
<i class="ik ik-delete"></i>
<div class="name">delete</div>
<div class="fontclass">.ik-delete</div>
</li>
<li>
<i class="ik ik-download-cloud"></i>
<div class="name">download-cloud</div>
<div class="fontclass">.ik-download-cloud</div>
</li>
<li>
<i class="ik ik-download"></i>
<div class="name">download</div>
<div class="fontclass">.ik-download</div>
</li>
<li>
<i class="ik ik-droplet"></i>
<div class="name">droplet</div>
<div class="fontclass">.ik-droplet</div>
</li>
<li>
<i class="ik ik-edit-2"></i>
<div class="name">edit-2</div>
<div class="fontclass">.ik-edit-</div>
</li>
<li>
<i class="ik ik-edit"></i>
<div class="name">edit</div>
<div class="fontclass">.ik-edit</div>
</li>
<li>
<i class="ik ik-edit-1"></i>
<div class="name">edit-3</div>
<div class="fontclass">.ik-edit-1</div>
</li>
<li>
<i class="ik ik-external-link"></i>
<div class="name">external-link</div>
<div class="fontclass">.ik-external-link</div>
</li>
<li>
<i class="ik ik-eye"></i>
<div class="name">eye</div>
<div class="fontclass">.ik-eye</div>
</li>
<li>
<i class="ik ik-feather"></i>
<div class="name">feather</div>
<div class="fontclass">.ik-feather</div>
</li>
<li>
<i class="ik ik-facebook"></i>
<div class="name">facebook</div>
<div class="fontclass">.ik-facebook</div>
</li>
<li>
<i class="ik ik-file-minus"></i>
<div class="name">file-minus</div>
<div class="fontclass">.ik-file-minus</div>
</li>
<li>
<i class="ik ik-eye-off"></i>
<div class="name">eye-off</div>
<div class="fontclass">.ik-eye-off</div>
</li>
<li>
<i class="ik ik-fast-forward"></i>
<div class="name">fast-forward</div>
<div class="fontclass">.ik-fast-forward</div>
</li>
<li>
<i class="ik ik-file-text"></i>
<div class="name">file-text</div>
<div class="fontclass">.ik-file-text</div>
</li>
<li>
<i class="ik ik-film"></i>
<div class="name">film</div>
<div class="fontclass">.ik-film</div>
</li>
<li>
<i class="ik ik-file"></i>
<div class="name">file</div>
<div class="fontclass">.ik-file</div>
</li>
<li>
<i class="ik ik-file-plus"></i>
<div class="name">file-plus</div>
<div class="fontclass">.ik-file-plus</div>
</li>
<li>
<i class="ik ik-folder"></i>
<div class="name">folder</div>
<div class="fontclass">.ik-folder</div>
</li>
<li>
<i class="ik ik-filter"></i>
<div class="name">filter</div>
<div class="fontclass">.ik-filter</div>
</li>
<li>
<i class="ik ik-flag"></i>
<div class="name">flag</div>
<div class="fontclass">.ik-flag</div>
</li>
<li>
<i class="ik ik-globe"></i>
<div class="name">globe</div>
<div class="fontclass">.ik-globe</div>
</li>
<li>
<i class="ik ik-grid"></i>
<div class="name">grid</div>
<div class="fontclass">.ik-grid</div>
</li>
<li>
<i class="ik ik-heart"></i>
<div class="name">heart</div>
<div class="fontclass">.ik-heart</div>
</li>
<li>
<i class="ik ik-home"></i>
<div class="name">home</div>
<div class="fontclass">.ik-home</div>
</li>
<li>
<i class="ik ik-github"></i>
<div class="name">github</div>
<div class="fontclass">.ik-github</div>
</li>
<li>
<i class="ik ik-image"></i>
<div class="name">image</div>
<div class="fontclass">.ik-image</div>
</li>
<li>
<i class="ik ik-inbox"></i>
<div class="name">inbox</div>
<div class="fontclass">.ik-inbox</div>
</li>
<li>
<i class="ik ik-layers"></i>
<div class="name">layers</div>
<div class="fontclass">.ik-layers</div>
</li>
<li>
<i class="ik ik-info"></i>
<div class="name">info</div>
<div class="fontclass">.ik-info</div>
</li>
<li>
<i class="ik ik-instagram"></i>
<div class="name">instagram</div>
<div class="fontclass">.ik-instagram</div>
</li>
<li>
<i class="ik ik-layout"></i>
<div class="name">layout</div>
<div class="fontclass">.ik-layout</div>
</li>
<li>
<i class="ik ik-link-2"></i>
<div class="name">link-2</div>
<div class="fontclass">.ik-link-</div>
</li>
<li>
<i class="ik ik-life-buoy"></i>
<div class="name">life-buoy</div>
<div class="fontclass">.ik-life-buoy</div>
</li>
<li>
<i class="ik ik-link"></i>
<div class="name">link</div>
<div class="fontclass">.ik-link</div>
</li>
<li>
<i class="ik ik-log-in"></i>
<div class="name">log-in</div>
<div class="fontclass">.ik-log-in</div>
</li>
<li>
<i class="ik ik-list"></i>
<div class="name">list</div>
<div class="fontclass">.ik-list</div>
</li>
<li>
<i class="ik ik-lock"></i>
<div class="name">lock</div>
<div class="fontclass">.ik-lock</div>
</li>
<li>
<i class="ik ik-log-out"></i>
<div class="name">log-out</div>
<div class="fontclass">.ik-log-out</div>
</li>
<li>
<i class="ik ik-loader"></i>
<div class="name">loader</div>
<div class="fontclass">.ik-loader</div>
</li>
<li>
<i class="ik ik-mail"></i>
<div class="name">mail</div>
<div class="fontclass">.ik-mail</div>
</li>
<li>
<i class="ik ik-maximize-2"></i>
<div class="name">maximize-2</div>
<div class="fontclass">.ik-maximize-2</div>
</li>
<li>
<i class="ik ik-map"></i>
<div class="name">map</div>
<div class="fontclass">.ik-map</div>
</li>
<li>
<i class="ik ik-maximize"></i>
<div class="name">maximize</div>
<div class="fontclass">.ik-maximize</div>
</li>
<li>
<i class="ik ik-map-pin"></i>
<div class="name">map-pin</div>
<div class="fontclass">.ik-map-pin</div>
</li>
<li>
<i class="ik ik-menu"></i>
<div class="name">menu</div>
<div class="fontclass">.ik-menu</div>
</li>
<li>
<i class="ik ik-message-circle"></i>
<div class="name">message-circle</div>
<div class="fontclass">.ik-message-circle</div>
</li>
<li>
<i class="ik ik-message-square"></i>
<div class="name">message-square</div>
<div class="fontclass">.ik-message-square</div>
</li>
<li>
<i class="ik ik-minimize-2"></i>
<div class="name">minimize-2</div>
<div class="fontclass">.ik-minimize-</div>
</li>
<li>
<i class="ik ik-minimize"></i>
<div class="name">minimize</div>
<div class="fontclass">.ik-minimize</div>
</li>
<li>
<i class="ik ik-mic-off"></i>
<div class="name">mic-off</div>
<div class="fontclass">.ik-mic-off</div>
</li>
<li>
<i class="ik ik-minus-circle"></i>
<div class="name">minus-circle</div>
<div class="fontclass">.ik-minus-circle</div>
</li>
<li>
<i class="ik ik-mic"></i>
<div class="name">mic</div>
<div class="fontclass">.ik-mic</div>
</li>
<li>
<i class="ik ik-minus-square"></i>
<div class="name">minus-square</div>
<div class="fontclass">.ik-minus-square</div>
</li>
<li>
<i class="ik ik-minus"></i>
<div class="name">minus</div>
<div class="fontclass">.ik-minus</div>
</li>
<li>
<i class="ik ik-moon"></i>
<div class="name">moon</div>
<div class="fontclass">.ik-moon</div>
</li>
<li>
<i class="ik ik-monitor"></i>
<div class="name">monitor</div>
<div class="fontclass">.ik-monitor</div>
</li>
<li>
<i class="ik ik-more-vertical"></i>
<div class="name">more-vertical</div>
<div class="fontclass">.ik-more-vertical</div>
</li>
<li>
<i class="ik ik-more-horizontal"></i>
<div class="name">more-horizontal</div>
<div class="fontclass">.ik-more-horizontal</div>
</li>
<li>
<i class="ik ik-move"></i>
<div class="name">move</div>
<div class="fontclass">.ik-move</div>
</li>
<li>
<i class="ik ik-music"></i>
<div class="name">music</div>
<div class="fontclass">.ik-music</div>
</li>
<li>
<i class="ik ik-navigation-2"></i>
<div class="name">navigation-2</div>
<div class="fontclass">.ik-navigation-</div>
</li>
<li>
<i class="ik ik-navigation"></i>
<div class="name">navigation</div>
<div class="fontclass">.ik-navigation</div>
</li>
<li>
<i class="ik ik-octagon"></i>
<div class="name">octagon</div>
<div class="fontclass">.ik-octagon</div>
</li>
<li>
<i class="ik ik-package"></i>
<div class="name">package</div>
<div class="fontclass">.ik-package</div>
</li>
<li>
<i class="ik ik-pause-circle"></i>
<div class="name">pause-circle</div>
<div class="fontclass">.ik-pause-circle</div>
</li>
<li>
<i class="ik ik-pause"></i>
<div class="name">pause</div>
<div class="fontclass">.ik-pause</div>
</li>
<li>
<i class="ik ik-percent"></i>
<div class="name">percent</div>
<div class="fontclass">.ik-percent</div>
</li>
<li>
<i class="ik ik-phone-call"></i>
<div class="name">phone-call</div>
<div class="fontclass">.ik-phone-call</div>
</li>
<li>
<i class="ik ik-phone-forwarded"></i>
<div class="name">phone-forwarded</div>
<div class="fontclass">.ik-phone-forwarded</div>
</li>
<li>
<i class="ik ik-phone-missed"></i>
<div class="name">phone-missed</div>
<div class="fontclass">.ik-phone-missed</div>
</li>
<li>
<i class="ik ik-phone-off"></i>
<div class="name">phone-off</div>
<div class="fontclass">.ik-phone-off</div>
</li>
<li>
<i class="ik ik-phone-incoming"></i>
<div class="name">phone-incoming</div>
<div class="fontclass">.ik-phone-incoming</div>
</li>
<li>
<i class="ik ik-phone"></i>
<div class="name">phone</div>
<div class="fontclass">.ik-phone</div>
</li>
<li>
<i class="ik ik-phone-outgoing"></i>
<div class="name">phone-outgoing</div>
<div class="fontclass">.ik-phone-outgoing</div>
</li>
<li>
<i class="ik ik-pie-chart"></i>
<div class="name">pie-chart</div>
<div class="fontclass">.ik-pie-chart</div>
</li>
<li>
<i class="ik ik-play-circle"></i>
<div class="name">play-circle</div>
<div class="fontclass">.ik-play-circle</div>
</li>
<li>
<i class="ik ik-play"></i>
<div class="name">play</div>
<div class="fontclass">.ik-play</div>
</li>
<li>
<i class="ik ik-plus-square"></i>
<div class="name">plus-square</div>
<div class="fontclass">.ik-plus-square</div>
</li>
<li>
<i class="ik ik-plus-circle"></i>
<div class="name">plus-circle</div>
<div class="fontclass">.ik-plus-circle</div>
</li>
<li>
<i class="ik ik-plus"></i>
<div class="name">plus</div>
<div class="fontclass">.ik-plus</div>
</li>
<li>
<i class="ik ik-pocket"></i>
<div class="name">pocket</div>
<div class="fontclass">.ik-pocket</div>
</li>
<li>
<i class="ik ik-printer"></i>
<div class="name">printer</div>
<div class="fontclass">.ik-printer</div>
</li>
<li>
<i class="ik ik-power"></i>
<div class="name">power</div>
<div class="fontclass">.ik-power</div>
</li>
<li>
<i class="ik ik-radio"></i>
<div class="name">radio</div>
<div class="fontclass">.ik-radio</div>
</li>
<li>
<i class="ik ik-repeat"></i>
<div class="name">repeat</div>
<div class="fontclass">.ik-repeat</div>
</li>
<li>
<i class="ik ik-refresh-ccw"></i>
<div class="name">refresh-ccw</div>
<div class="fontclass">.ik-refresh-ccw</div>
</li>
<li>
<i class="ik ik-rewind"></i>
<div class="name">rewind</div>
<div class="fontclass">.ik-rewind</div>
</li>
<li>
<i class="ik ik-rotate-ccw"></i>
<div class="name">rotate-ccw</div>
<div class="fontclass">.ik-rotate-ccw</div>
</li>
<li>
<i class="ik ik-refresh-cw"></i>
<div class="name">refresh-cw</div>
<div class="fontclass">.ik-refresh-cw</div>
</li>
<li>
<i class="ik ik-rotate-cw"></i>
<div class="name">rotate-cw</div>
<div class="fontclass">.ik-rotate-cw</div>
</li>
<li>
<i class="ik ik-save"></i>
<div class="name">save</div>
<div class="fontclass">.ik-save</div>
</li>
<li>
<i class="ik ik-search"></i>
<div class="name">search</div>
<div class="fontclass">.ik-search</div>
</li>
<li>
<i class="ik ik-server"></i>
<div class="name">server</div>
<div class="fontclass">.ik-server</div>
</li>
<li>
<i class="ik ik-scissors"></i>
<div class="name">scissors</div>
<div class="fontclass">.ik-scissors</div>
</li>
<li>
<i class="ik ik-share-2"></i>
<div class="name">share-2</div>
<div class="fontclass">.ik-share-</div>
</li>
<li>
<i class="ik ik-share"></i>
<div class="name">share</div>
<div class="fontclass">.ik-share</div>
</li>
<li>
<i class="ik ik-shield"></i>
<div class="name">shield</div>
<div class="fontclass">.ik-shield</div>
</li>
<li>
<i class="ik ik-settings"></i>
<div class="name">settings</div>
<div class="fontclass">.ik-settings</div>
</li>
<li>
<i class="ik ik-skip-back"></i>
<div class="name">skip-back</div>
<div class="fontclass">.ik-skip-back</div>
</li>
<li>
<i class="ik ik-shuffle"></i>
<div class="name">shuffle</div>
<div class="fontclass">.ik-shuffle</div>
</li>
<li>
<i class="ik ik-sidebar"></i>
<div class="name">sidebar</div>
<div class="fontclass">.ik-sidebar</div>
</li>
<li>
<i class="ik ik-skip-forward"></i>
<div class="name">skip-forward</div>
<div class="fontclass">.ik-skip-forward</div>
</li>
<li>
<i class="ik ik-slack"></i>
<div class="name">slack</div>
<div class="fontclass">.ik-slack</div>
</li>
<li>
<i class="ik ik-slash"></i>
<div class="name">slash</div>
<div class="fontclass">.ik-slash</div>
</li>
<li>
<i class="ik ik-smartphone"></i>
<div class="name">smartphone</div>
<div class="fontclass">.ik-smartphone</div>
</li>
<li>
<i class="ik ik-square"></i>
<div class="name">square</div>
<div class="fontclass">.ik-square</div>
</li>
<li>
<i class="ik ik-speaker"></i>
<div class="name">speaker</div>
<div class="fontclass">.ik-speaker</div>
</li>
<li>
<i class="ik ik-star"></i>
<div class="name">star</div>
<div class="fontclass">.ik-star</div>
</li>
<li>
<i class="ik ik-stop-circle"></i>
<div class="name">stop-circle</div>
<div class="fontclass">.ik-stop-circle</div>
</li>
<li>
<i class="ik ik-sun"></i>
<div class="name">sun</div>
<div class="fontclass">.ik-sun</div>
</li>
<li>
<i class="ik ik-sunrise"></i>
<div class="name">sunrise</div>
<div class="fontclass">.ik-sunrise</div>
</li>
<li>
<i class="ik ik-tablet"></i>
<div class="name">tablet</div>
<div class="fontclass">.ik-tablet</div>
</li>
<li>
<i class="ik ik-tag"></i>
<div class="name">tag</div>
<div class="fontclass">.ik-tag</div>
</li>
<li>
<i class="ik ik-sunset"></i>
<div class="name">sunset</div>
<div class="fontclass">.ik-sunset</div>
</li>
<li>
<i class="ik ik-target"></i>
<div class="name">target</div>
<div class="fontclass">.ik-target</div>
</li>
<li>
<i class="ik ik-thermometer"></i>
<div class="name">thermometer</div>
<div class="fontclass">.ik-thermometer</div>
</li>
<li>
<i class="ik ik-thumbs-up"></i>
<div class="name">thumbs-up</div>
<div class="fontclass">.ik-thumbs-up</div>
</li>
<li>
<i class="ik ik-thumbs-down"></i>
<div class="name">thumbs-down</div>
<div class="fontclass">.ik-thumbs-down</div>
</li>
<li>
<i class="ik ik-toggle-left"></i>
<div class="name">toggle-left</div>
<div class="fontclass">.ik-toggle-left</div>
</li>
<li>
<i class="ik ik-toggle-right"></i>
<div class="name">toggle-right</div>
<div class="fontclass">.ik-toggle-right</div>
</li>
<li>
<i class="ik ik-trash-2"></i>
<div class="name">trash-2</div>
<div class="fontclass">.ik-trash-</div>
</li>
<li>
<i class="ik ik-trash"></i>
<div class="name">trash</div>
<div class="fontclass">.ik-trash</div>
</li>
<li>
<i class="ik ik-trending-up"></i>
<div class="name">trending-up</div>
<div class="fontclass">.ik-trending-up</div>
</li>
<li>
<i class="ik ik-trending-down"></i>
<div class="name">trending-down</div>
<div class="fontclass">.ik-trending-down</div>
</li>
<li>
<i class="ik ik-triangle"></i>
<div class="name">triangle</div>
<div class="fontclass">.ik-triangle</div>
</li>
<li>
<i class="ik ik-type"></i>
<div class="name">type</div>
<div class="fontclass">.ik-type</div>
</li>
<li>
<i class="ik ik-twitter"></i>
<div class="name">twitter</div>
<div class="fontclass">.ik-twitter</div>
</li>
<li>
<i class="ik ik-upload"></i>
<div class="name">upload</div>
<div class="fontclass">.ik-upload</div>
</li>
<li>
<i class="ik ik-umbrella"></i>
<div class="name">umbrella</div>
<div class="fontclass">.ik-umbrella</div>
</li>
<li>
<i class="ik ik-upload-cloud"></i>
<div class="name">upload-cloud</div>
<div class="fontclass">.ik-upload-cloud</div>
</li>
<li>
<i class="ik ik-unlock"></i>
<div class="name">unlock</div>
<div class="fontclass">.ik-unlock</div>
</li>
<li>
<i class="ik ik-user-check"></i>
<div class="name">user-check</div>
<div class="fontclass">.ik-user-check</div>
</li>
<li>
<i class="ik ik-user-minus"></i>
<div class="name">user-minus</div>
<div class="fontclass">.ik-user-minus</div>
</li>
<li>
<i class="ik ik-user-plus"></i>
<div class="name">user-plus</div>
<div class="fontclass">.ik-user-plus</div>
</li>
<li>
<i class="ik ik-user-x"></i>
<div class="name">user-x</div>
<div class="fontclass">.ik-user-x</div>
</li>
<li>
<i class="ik ik-user"></i>
<div class="name">user</div>
<div class="fontclass">.ik-user</div>
</li>
<li>
<i class="ik ik-users"></i>
<div class="name">users</div>
<div class="fontclass">.ik-users</div>
</li>
<li>
<i class="ik ik-video-off"></i>
<div class="name">video-off</div>
<div class="fontclass">.ik-video-off</div>
</li>
<li>
<i class="ik ik-video"></i>
<div class="name">video</div>
<div class="fontclass">.ik-video</div>
</li>
<li>
<i class="ik ik-voicemail"></i>
<div class="name">voicemail</div>
<div class="fontclass">.ik-voicemail</div>
</li>
<li>
<i class="ik ik-volume-x"></i>
<div class="name">volume-x</div>
<div class="fontclass">.ik-volume-x</div>
</li>
<li>
<i class="ik ik-volume-2"></i>
<div class="name">volume-1</div>
<div class="fontclass">.ik-volume-</div>
</li>
<li>
<i class="ik ik-volume-1"></i>
<div class="name">volume-2</div>
<div class="fontclass">.ik-volume-1</div>
</li>
<li>
<i class="ik ik-volume"></i>
<div class="name">volume</div>
<div class="fontclass">.ik-volume</div>
</li>
<li>
<i class="ik ik-watch"></i>
<div class="name">watch</div>
<div class="fontclass">.ik-watch</div>
</li>
<li>
<i class="ik ik-wifi"></i>
<div class="name">wifi</div>
<div class="fontclass">.ik-wifi</div>
</li>
<li>
<i class="ik ik-x-square"></i>
<div class="name">x-square</div>
<div class="fontclass">.ik-x-square</div>
</li>
<li>
<i class="ik ik-wind"></i>
<div class="name">wind</div>
<div class="fontclass">.ik-wind</div>
</li>
<li>
<i class="ik ik-x"></i>
<div class="name">x</div>
<div class="fontclass">.ik-x</div>
</li>
<li>
<i class="ik ik-x-circle"></i>
<div class="name">x-circle</div>
<div class="fontclass">.ik-x-circle</div>
</li>
<li>
<i class="ik ik-zap"></i>
<div class="name">zap</div>
<div class="fontclass">.ik-zap</div>
</li>
<li>
<i class="ik ik-zoom-in"></i>
<div class="name">zoom-in</div>
<div class="fontclass">.ik-zoom-in</div>
</li>
<li>
<i class="ik ik-zoom-out"></i>
<div class="name">zoom-out</div>
<div class="fontclass">.ik-zoom-out</div>
</li>
<li>
<i class="ik ik-command"></i>
<div class="name">command</div>
<div class="fontclass">.ik-command</div>
</li>
<li>
<i class="ik ik-cloud"></i>
<div class="name">cloud</div>
<div class="fontclass">.ik-cloud</div>
</li>
<li>
<i class="ik ik-hash"></i>
<div class="name">hash</div>
<div class="fontclass">.ik-hash</div>
</li>
<li>
<i class="ik ik-headphones"></i>
<div class="name">headphones</div>
<div class="fontclass">.ik-headphones</div>
</li>
<li>
<i class="ik ik-underline"></i>
<div class="name">underline</div>
<div class="fontclass">.ik-underline</div>
</li>
<li>
<i class="ik ik-italic"></i>
<div class="name">italic</div>
<div class="fontclass">.ik-italic</div>
</li>
<li>
<i class="ik ik-bold"></i>
<div class="name">bold</div>
<div class="fontclass">.ik-bold</div>
</li>
<li>
<i class="ik ik-crop"></i>
<div class="name">crop</div>
<div class="fontclass">.ik-crop</div>
</li>
<li>
<i class="ik ik-help-circle"></i>
<div class="name">help-circle</div>
<div class="fontclass">.ik-help-circle</div>
</li>
<li>
<i class="ik ik-paperclip"></i>
<div class="name">paperclip</div>
<div class="fontclass">.ik-paperclip</div>
</li>
<li>
<i class="ik ik-shopping-cart"></i>
<div class="name">shopping-cart</div>
<div class="fontclass">.ik-shopping-cart</div>
</li>
<li>
<i class="ik ik-tv"></i>
<div class="name">tv</div>
<div class="fontclass">.ik-tv</div>
</li>
<li>
<i class="ik ik-wifi-off"></i>
<div class="name">wifi-off</div>
<div class="fontclass">.ik-wifi-off</div>
</li>
<li>
<i class="ik ik-gitlab"></i>
<div class="name">gitlab</div>
<div class="fontclass">.ik-gitlab</div>
</li>
<li>
<i class="ik ik-sliders"></i>
<div class="name">sliders</div>
<div class="fontclass">.ik-sliders</div>
</li>
<li>
<i class="ik ik-star-on"></i>
<div class="name">star-on</div>
<div class="fontclass">.ik-star-on</div>
</li>
<li>
<i class="ik ik-heart-on"></i>
<div class="name">heart-on</div>
<div class="fontclass">.ik-heart-on</div>
</li>
<li>
<i class="ik ik-archive"></i>
<div class="name">archive</div>
<div class="fontclass">.ik-archive</div>
</li>
<li>
<i class="ik ik-arrow-down-circle"></i>
<div class="name">arrow-down-circle</div>
<div class="fontclass">.ik-arrow-down-circle</div>
</li>
<li>
<i class="ik ik-arrow-up-circle"></i>
<div class="name">arrow-up-circle</div>
<div class="fontclass">.ik-arrow-up-circle</div>
</li>
<li>
<i class="ik ik-arrow-left-circle"></i>
<div class="name">arrow-left-circle</div>
<div class="fontclass">.ik-arrow-left-circle</div>
</li>
<li>
<i class="ik ik-arrow-right-circle"></i>
<div class="name">arrow-right-circle</div>
<div class="fontclass">.ik-arrow-right-circle</div>
</li>
<li>
<i class="ik ik-bar-chart-line-"></i>
<div class="name">bar-chart-line-2</div>
<div class="fontclass">.ik-bar-chart-line-</div>
</li>
<li>
<i class="ik ik-bar-chart-line"></i>
<div class="name">bar-chart-line</div>
<div class="fontclass">.ik-bar-chart-line</div>
</li>
<li>
<i class="ik ik-book-open"></i>
<div class="name">book-open</div>
<div class="fontclass">.ik-book-open</div>
</li>
<li>
<i class="ik ik-code"></i>
<div class="name">code</div>
<div class="fontclass">.ik-code</div>
</li>
<li>
<i class="ik ik-database"></i>
<div class="name">database</div>
<div class="fontclass">.ik-database</div>
</li>
<li>
<i class="ik ik-dollar-sign"></i>
<div class="name">dollar-sign</div>
<div class="fontclass">.ik-dollar-sign</div>
</li>
<li>
<i class="ik ik-folder-plus"></i>
<div class="name">folder-plus</div>
<div class="fontclass">.ik-folder-plus</div>
</li>
<li>
<i class="ik ik-gift"></i>
<div class="name">gift</div>
<div class="fontclass">.ik-gift</div>
</li>
<li>
<i class="ik ik-folder-minus"></i>
<div class="name">folder-minus</div>
<div class="fontclass">.ik-folder-minus</div>
</li>
<li>
<i class="ik ik-git-commit"></i>
<div class="name">git-commit</div>
<div class="fontclass">.ik-git-commit</div>
</li>
<li>
<i class="ik ik-git-branch"></i>
<div class="name">git-branch</div>
<div class="fontclass">.ik-git-branch</div>
</li>
<li>
<i class="ik ik-git-pull-request"></i>
<div class="name">git-pull-request</div>
<div class="fontclass">.ik-git-pull-request</div>
</li>
<li>
<i class="ik ik-git-merge"></i>
<div class="name">git-merge</div>
<div class="fontclass">.ik-git-merge</div>
</li>
<li>
<i class="ik ik-linkedin"></i>
<div class="name">linkedin</div>
<div class="fontclass">.ik-linkedin</div>
</li>
<li>
<i class="ik ik-hard-drive"></i>
<div class="name">hard-drive</div>
<div class="fontclass">.ik-hard-drive</div>
</li>
<li>
<i class="ik ik-more-vertical-"></i>
<div class="name">more-vertical-2</div>
<div class="fontclass">.ik-more-vertical-</div>
</li>
<li>
<i class="ik ik-more-horizontal-"></i>
<div class="name">more-horizontal-2</div>
<div class="fontclass">.ik-more-horizontal-</div>
</li>
<li>
<i class="ik ik-rss"></i>
<div class="name">rss</div>
<div class="fontclass">.ik-rss</div>
</li>
<li>
<i class="ik ik-send"></i>
<div class="name">send</div>
<div class="fontclass">.ik-send</div>
</li>
<li>
<i class="ik ik-shield-off"></i>
<div class="name">shield-off</div>
<div class="fontclass">.ik-shield-off</div>
</li>
<li>
<i class="ik ik-shopping-bag"></i>
<div class="name">shopping-bag</div>
<div class="fontclass">.ik-shopping-bag</div>
</li>
<li>
<i class="ik ik-terminal"></i>
<div class="name">terminal</div>
<div class="f