import React from 'react';
import { Link } from 'react-router-dom';

class UISimpleLineIcons extends React.Component {
	render() {
		return (
			<div>
				<ol className="breadcrumb float-xl-right">
					<li className="breadcrumb-item"><Link to="/">Home</Link></li>
					<li className="breadcrumb-item"><Link to="/ui">UI Elements</Link></li>
					<li className="breadcrumb-item active">Simple Line Icons</li>
				</ol>
				<h1 className="page-header">Simple Line Icons <small>162 beautifully crafted webfont icons</small></h1>
				
				<div className="row text-center">
					<div className="col-lg-2 col-sm-4 col-6">
						<h3 className="text-ellipsis"><i className="icon-user"></i><br /><small>icon-user</small></h3>
						<h3 className="text-ellipsis"><i className="icon-user-female"></i><br /><small>icon-user-female</small></h3>
						<h3 className="text-ellipsis"><i className="icon-user"></i><br /><small>icon-user</small></h3>
						<h3 className="text-ellipsis"><i className="icon-user-follow"></i><br /><small>icon-user-follow</small></h3>
						<h3 className="text-ellipsis"><i className="icon-user-following"></i><br /><small>icon-user-following</small></h3>
						<h3 className="text-ellipsis"><i className="icon-user-unfollow"></i><br /><small>icon-user-unfollow</small></h3>
						<h3 className="text-ellipsis"><i className="icon-trophy"></i><br /><small>icon-trophy</small></h3>
						<h3 className="text-ellipsis"><i className="icon-speedometer"></i><br /><small>icon-speedometer</small></h3>
						<h3 className="text-ellipsis"><i className="icon-social-youtube"></i><br /><small>icon-social-youtube</small></h3>
						<h3 className="text-ellipsis"><i className="icon-social-twitter"></i><br /><small>icon-social-twitter</small></h3>
						<h3 className="text-ellipsis"><i className="icon-social-tumblr"></i><br /><small>icon-social-tumblr</small></h3>
						<h3 className="text-ellipsis"><i className="icon-social-facebook"></i><br /><small>icon-social-facebook</small></h3>
						<h3 className="text-ellipsis"><i className="icon-social-dropbox"></i><br /><small>icon-social-dropbox</small></h3>
						<h3 className="text-ellipsis"><i className="icon-social-dribbble"></i><br /><small>icon-social-dribbble</small></h3>
						<h3 className="text-ellipsis"><i className="icon-shield"></i><br /><small>icon-shield</small></h3>
						<h3 className="text-ellipsis"><i className="icon-screen-tablet"></i><br /><small>icon-screen-tablet</small></h3>
						<h3 className="text-ellipsis"><i className="icon-screen-smartphone"></i><br /><small>icon-screen-smartphone</small></h3>
						<h3 className="text-ellipsis"><i className="icon-screen-desktop"></i><br /><small>icon-screen-desktop</small></h3>
						<h3 className="text-ellipsis"><i className="icon-plane"></i><br /><small>icon-plane</small></h3>
						<h3 className="text-ellipsis"><i className="icon-notebook"></i><br /><small>icon-notebook</small></h3>
						<h3 className="text-ellipsis"><i className="icon-mustache"></i><br /><small>icon-mustache</small></h3>
						<h3 className="text-ellipsis"><i className="icon-mouse"></i><br /><small>icon-mouse</small></h3>
						<h3 className="text-ellipsis"><i className="icon-magnet"></i><br /><small>icon-magnet</small></h3>
						<h3 className="text-ellipsis"><i className="icon-magic-wand"></i><br /><small>icon-magic-wand</small></h3>
						<h3 className="text-ellipsis"><i className="icon-hourglass"></i><br /><small>icon-hourglass</small></h3>
						<h3 className="text-ellipsis"><i className="icon-graduation"></i><br /><small>icon-graduation</small></h3>
						<h3 className="text-ellipsis"><i className="icon-ghost"></i><br /><small>icon-ghost</small></h3>
					</div>
					<div className="col-lg-2 col-sm-4 col-6">
						<h3 className="text-ellipsis"><i className="icon-game-controller"></i><br /><small>icon-game-controller</small></h3>
						<h3 className="text-ellipsis"><i className="icon-fire"></i><br /><small>icon-fire</small></h3>
						<h3 className="text-ellipsis"><i className="icon-eyeglass"></i><br /><small>icon-eyeglass</small></h3>
						<h3 className="text-ellipsis"><i className="icon-envelope-open"></i><br /><small>icon-envelope-open</small></h3>
						<h3 className="text-ellipsis"><i className="icon-envelope-letter"></i><br /><small>icon-envelope-letter</small></h3>
						<h3 className="text-ellipsis"><i className="icon-energy"></i><br /><small>icon-energy</small></h3>
						<h3 className="text-ellipsis"><i className="icon-emotsmile"></i><br /><small>icon-emotsmile</small></h3>
						<h3 className="text-ellipsis"><i className="icon-disc"></i><br /><small>icon-disc</small></h3>
						<h3 className="text-ellipsis"><i className="icon-cursor-move"></i><br /><small>icon-cursor-move</small></h3>
						<h3 className="text-ellipsis"><i className="icon-crop"></i><br /><small>icon-crop</small></h3>
						<h3 className="text-ellipsis"><i className="icon-credit-card"></i><br /><small>icon-credit-card</small></h3>
						<h3 className="text-ellipsis"><i className="icon-chemistry"></i><br /><small>icon-chemistry</small></h3>
						<h3 className="text-ellipsis"><i className="icon-bell"></i><br /><small>icon-bell</small></h3>
						<h3 className="text-ellipsis"><i className="icon-badge"></i><br /><small>icon-badge</small></h3>
						<h3 className="text-ellipsis"><i className="icon-anchor"></i><br /><small>icon-anchor</small></h3>
						<h3 className="text-ellipsis"><i className="icon-action-redo"></i><br /><small>icon-action-redo</small></h3>
						<h3 className="text-ellipsis"><i className="icon-action-undo"></i><br /><small>icon-action-undo</small></h3>
						<h3 className="text-ellipsis"><i className="icon-bag"></i><br /><small>icon-bag</small></h3>
						<h3 className="text-ellipsis"><i className="icon-basket"></i><br /><small>icon-basket</small></h3>
						<h3 className="text-ellipsis"><i className="icon-basket-loaded"></i><br /><small>icon-basket-loaded</small></h3>
						<h3 className="text-ellipsis"><i className="icon-book-open"></i><br /><small>icon-book-open</small></h3>
						<h3 className="text-ellipsis"><i className="icon-briefcase"></i><br /><small>icon-briefcase</small></h3>
						<h3 className="text-ellipsis"><i className="icon-bubbles"></i><br /><small>icon-bubbles</small></h3>
						<h3 className="text-ellipsis"><i className="icon-calculator"></i><br /><small>icon-calculator</small></h3>
						<h3 className="text-ellipsis"><i className="icon-call-end"></i><br /><small>icon-call-end</small></h3>
						<h3 className="text-ellipsis"><i className="icon-call-in"></i><br /><small>icon-call-in</small></h3>
						<h3 className="text-ellipsis"><i className="icon-call-out"></i><br /><small>icon-call-out</small></h3>
					</div>
					<div className="col-lg-2 col-sm-4 col-6">
						<h3 className="text-ellipsis"><i className="icon-compass"></i><br /><small>icon-compass</small></h3>
						<h3 className="text-ellipsis"><i className="icon-cup"></i><br /><small>icon-cup</small></h3>
						<h3 className="text-ellipsis"><i className="icon-diamond"></i><br /><small>icon-diamond</small></h3>
						<h3 className="text-ellipsis"><i className="icon-direction"></i><br /><small>icon-direction</small></h3>
						<h3 className="text-ellipsis"><i className="icon-directions"></i><br /><small>icon-directions</small></h3>
						<h3 className="text-ellipsis"><i className="icon-docs"></i><br /><small>icon-docs</small></h3>
						<h3 className="text-ellipsis"><i className="icon-drawer"></i><br /><small>icon-drawer</small></h3>
						<h3 className="text-ellipsis"><i className="icon-drop"></i><br /><small>icon-drop</small></h3>
						<h3 className="text-ellipsis"><i className="icon-earphones"></i><br /><small>icon-earphones</small></h3>
						<h3 className="text-ellipsis"><i className="icon-earphones-alt"></i><br /><small>icon-earphones-alt</small></h3>
						<h3 className="text-ellipsis"><i className="icon-feed"></i><br /><small>icon-feed</small></h3>
						<h3 className="text-ellipsis"><i className="icon-film"></i><br /><small>icon-film</small></h3>
						<h3 className="text-ellipsis"><i className="icon-folder-alt"></i><br /><small>icon-folder-alt</small></h3>
						<h3 className="text-ellipsis"><i className="icon-frame"></i><br /><small>icon-frame</small></h3>
						<h3 className="text-ellipsis"><i className="icon-globe"></i><br /><small>icon-globe</small></h3>
						<h3 className="text-ellipsis"><i className="icon-globe-alt"></i><br /><small>icon-globe-alt</small></h3>
						<h3 className="text-ellipsis"><i className="icon-handbag"></i><br /><small>icon-handbag</small></h3>
						<h3 className="text-ellipsis"><i className="icon-layers"></i><br /><small>icon-layers</small></h3>
						<h3 className="text-ellipsis"><i className="icon-map"></i><br /><small>icon-map</small></h3>
						<h3 className="text-ellipsis"><i className="icon-picture"></i><br /><small>icon-picture</small></h3>
						<h3 className="text-ellipsis"><i className="icon-pin"></i><br /><small>icon-pin</small></h3>
						<h3 className="text-ellipsis"><i className="icon-playlist"></i><br /><small>icon-playlist</small></h3>
						<h3 className="text-ellipsis"><i className="icon-present"></i><br /><small>icon-present</small></h3>
						<h3 className="text-ellipsis"><i className="icon-printer"></i><br /><small>icon-printer</small></h3>
						<h3 className="text-ellipsis"><i className="icon-puzzle"></i><br /><small>icon-puzzle</small></h3>
						<h3 className="text-ellipsis"><i className="icon-speech"></i><br /><small>icon-speech</small></h3>
						<h3 className="text-ellipsis"><i className="icon-vector"></i><br /><small>icon-vector</small></h3>
					</div>
					<div className="col-lg-2 col-sm-4 col-6">
						<h3 className="text-ellipsis"><i className="icon-wallet"></i><br /><small>icon-wallet</small></h3>
						<h3 className="text-ellipsis"><i className="icon-arrow-down"></i><br /><small>icon-arrow-down</small></h3>
						<h3 className="text-ellipsis"><i className="icon-arrow-left"></i><br /><small>icon-arrow-left</small></h3>
						<h3 className="text-ellipsis"><i className="icon-arrow-right"></i><br /><small>icon-arrow-right</small></h3>
						<h3 className="text-ellipsis"><i className="icon-arrow-up"></i><br /><small>icon-arrow-up</small></h3>
						<h3 className="text-ellipsis"><i className="icon-chart"></i><br /><small>icon-chart</small></h3>
						<h3 className="text-ellipsis"><i className="icon-bulb"></i><br /><small>icon-bulb</small></h3>
						<h3 className="text-ellipsis"><i className="icon-calendar"></i><br /><small>icon-calendar</small></h3>
						<h3 className="text-ellipsis"><i className="icon-control-end"></i><br /><small>icon-control-end</small></h3>
						<h3 className="text-ellipsis"><i className="icon-control-forward"></i><br /><small>icon-control-forward</small></h3>
						<h3 className="text-ellipsis"><i className="icon-control-pause"></i><br /><small>icon-control-pause</small></h3>
						<h3 className="text-ellipsis"><i className="icon-control-play"></i><br /><small>icon-control-play</small></h3>
						<h3 className="text-ellipsis"><i className="icon-control-rewind"></i><br /><small>icon-control-rewind</small></h3>
						<h3 className="text-ellipsis"><i className="icon-control-start"></i><br /><small>icon-control-start</small></h3>
						<h3 className="text-ellipsis"><i className="icon-cursor"></i><br /><small>icon-cursor</small></h3>
						<h3 className="text-ellipsis"><i className="icon-dislike"></i><br /><small>icon-dislike</small></h3>
						<h3 className="text-ellipsis"><i className="icon-equalizer"></i><br /><small>icon-equalizer</small></h3>
						<h3 className="text-ellipsis"><i className="icon-graph"></i><br /><small>icon-graph</small></h3>
						<h3 className="text-ellipsis"><i className="icon-grid"></i><br /><small>icon-grid</small></h3>
						<h3 className="text-ellipsis"><i className="icon-home"></i><br /><small>icon-home</small></h3>
						<h3 className="text-ellipsis"><i className="icon-like"></i><br /><small>icon-like</small></h3>
						<h3 className="text-ellipsis"><i className="icon-list"></i><br /><small>icon-list</small></h3>
						<h3 className="text-ellipsis"><i className="icon-login"></i><br /><small>icon-login</small></h3>
						<h3 className="text-ellipsis"><i className="icon-logout"></i><br /><small>icon-logout</small></h3>
						<h3 className="text-ellipsis"><i className="icon-loop"></i><br /><small>icon-loop</small></h3>
						<h3 className="text-ellipsis"><i className="icon-microphone"></i><br /><small>icon-microphone</small></h3>
						<h3 className="text-ellipsis"><i className="icon-music-tone"></i><br /><small>icon-music-tone</small></h3>
					</div>
					<div className="col-lg-2 col-sm-4 col-6">
						<h3 className="text-ellipsis"><i className="icon-music-tone-alt"></i><br /><small>icon-music-tone-alt</small></h3>
						<h3 className="text-ellipsis"><i className="icon-note"></i><br /><small>icon-note</small></h3>
						<h3 className="text-ellipsis"><i className="icon-pencil"></i><br /><small>icon-pencil</small></h3>
						<h3 className="text-ellipsis"><i className="icon-pie-chart"></i><br /><small>icon-pie-chart</small></h3>
						<h3 className="text-ellipsis"><i className="icon-question"></i><br /><small>icon-question</small></h3>
						<h3 className="text-ellipsis"><i className="icon-rocket"></i><br /><small>icon-rocket</small></h3>
						<h3 className="text-ellipsis"><i className="icon-share"></i><br /><small>icon-share</small></h3>
						<h3 className="text-ellipsis"><i className="icon-share-alt"></i><br /><small>icon-share-alt</small></h3>
						<h3 className="text-ellipsis"><i className="icon-shuffle"></i><br /><small>icon-shuffle</small></h3>
						<h3 className="text-ellipsis"><i className="icon-size-actual"></i><br /><small>icon-size-actual</small></h3>
						<h3 className="text-ellipsis"><i className="icon-size-fullscreen"></i><br /><small>icon-size-fullscreen</small></h3>
						<h3 className="text-ellipsis"><i className="icon-support"></i><br /><small>icon-support</small></h3>
						<h3 className="text-ellipsis"><i className="icon-tag"></i><br /><small>icon-tag</small></h3>
						<h3 className="text-ellipsis"><i className="icon-trash"></i><br /><small>icon-trash</small></h3>
						<h3 className="text-ellipsis"><i className="icon-umbrella"></i><br /><small>icon-umbrella</small></h3>
						<h3 className="text-ellipsis"><i className="icon-wrench"></i><br /><small>icon-wrench</small></h3>
						<h3 className="text-ellipsis"><i className="icon-ban"></i><br /><small>icon-ban</small></h3>
						<h3 className="text-ellipsis"><i className="icon-bubble"></i><br /><small>icon-bubble</small></h3>
						<h3 className="text-ellipsis"><i className="icon-camrecorder"></i><br /><small>icon-camrecorder</small></h3>
						<h3 className="text-ellipsis"><i className="icon-camera"></i><br /><small>icon-camera</small></h3>
						<h3 className="text-ellipsis"><i className="icon-check"></i><br /><small>icon-check</small></h3>
						<h3 className="text-ellipsis"><i className="icon-clock"></i><br /><small>icon-clock</small></h3>
						<h3 className="text-ellipsis"><i className="icon-close"></i><br /><small>icon-close</small></h3>
						<h3 className="text-ellipsis"><i className="icon-cloud-download"></i><br /><small>icon-cloud-download</small></h3>
						<h3 className="text-ellipsis"><i className="icon-cloud-upload"></i><br /><small>icon-cloud-upload</small></h3>
						<h3 className="text-ellipsis"><i className="icon-doc"></i><br /><small>icon-doc</small></h3>
						<h3 className="text-ellipsis"><i className="icon-envelope"></i><br /><small>icon-envelope</small></h3>
					</div>
					<div className="col-lg-2 col-sm-4 col-6">
						<h3 className="text-ellipsis"><i className="icon-eye"></i><br /><small>icon-eye</small></h3>
						<h3 className="text-ellipsis"><i className="icon-flag"></i><br /><small>icon-flag</small></h3>
						<h3 className="text-ellipsis"><i className="icon-folder"></i><br /><small>icon-folder</small></h3>
						<h3 className="text-ellipsis"><i className="icon-heart"></i><br /><small>icon-heart</small></h3>
						<h3 className="text-ellipsis"><i className="icon-info"></i><br /><small>icon-info</small></h3>
						<h3 className="text-ellipsis"><i className="icon-key"></i><br /><small>icon-key</small></h3>
						<h3 className="text-ellipsis"><i className="icon-link"></i><br /><small>icon-link</small></h3>
						<h3 className="text-ellipsis"><i className="icon-lock"></i><br /><small>icon-lock</small></h3>
						<h3 className="text-ellipsis"><i className="icon-lock-open"></i><br /><small>icon-lock-open</small></h3>
						<h3 className="text-ellipsis"><i className="icon-magnifier"></i><br /><small>icon-magnifier</small></h3>
						<h3 className="text-ellipsis"><i className="icon-magnifier-add"></i><br /><small>icon-magnifier-add</small></h3>
						<h3 className="text-ellipsis"><i className="icon-magnifier-remove"></i><br /><small>icon-magnifier-remove</small></h3>
						<h3 className="text-ellipsis"><i className="icon-paper-clip"></i><br /><small>icon-paper-clip</small></h3>
						<h3 className="text-ellipsis"><i className="icon-paper-plane"></i><br /><small>icon-paper-plane</small></h3>
						<h3 className="text-ellipsis"><i className="icon-plus"></i><br /><small>icon-plus</small></h3>
						<h3 className="text-ellipsis"><i className="icon-location-pin"></i><br /><small>icon-location-pin</small></h3>
						<h3 className="text-ellipsis"><i className="icon-power"></i><br /><small>icon-power</small></h3>
						<h3 className="text-ellipsis"><i className="icon-refresh"></i><br /><small>icon-refresh</small></h3>
						<h3 className="text-ellipsis"><i className="icon-reload"></i><br /><small>icon-reload</small></h3>
						<h3 className="text-ellipsis"><i className="icon-settings"></i><br /><small>icon-settings</small></h3>
						<h3 className="text-ellipsis"><i className="icon-star"></i><br /><small>icon-star</small></h3>
						<h3 className="text-ellipsis"><i className="icon-symbol-female"></i><br /><small>icon-symbol-female</small></h3>
						<h3 className="text-ellipsis"><i className="icon-symbol-male"></i><br /><small>icon-symbol-male</small></h3>
						<h3 className="text-ellipsis"><i className="icon-target"></i><br /><small>icon-target</small></h3>
						<h3 className="text-ellipsis"><i className="icon-volume-1"></i><br /><small>icon-volume-1</small></h3>
						<h3 className="text-ellipsis"><i className="icon-volume-2"></i><br /><small>icon-volume-2</small></h3>
						<h3 className="text-ellipsis"><i className="icon-volume-off"></i><br /><small>icon-volume-off</small></h3>
					</div>
				</div>
			</div>
		)
	}
}

export default UISimpleLineIcons;