LineIcons Usage Guide

We follow the simplest way for including and usage, here are the basic guideline to use and include LineIcons on your projects.

Using as Icon Font by Including on Project Header

Copy-paste the stylesheet link into project head to load LineIcons CSS, this snippet will load LineIcons on your project.

<link href="your-project-dir/font-css/LineIcons.css" rel="stylesheet">
<!-- or --> 
<link href="" rel="stylesheet">


We have added lni as base class from LineIcons V2. You can find all HTML classes on Icons page, and here are few example how to use them on HTML file.

<i class="lni lni-add-file"></i>
<i class="lni lni-cart"></i>
<i class="lni lni-calculator"></i>

Starter Template

You can copy-paste this starter template which shows all the snippets and easiest way to get started

<!doctype html> 
<html lang='en'>
<meta charset='utf-8'>
 <meta name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no'>
 <!-- LineIcons CSS -->
<link href="" rel="stylesheet">
<title>LineIcons Starter Template</title>
 <h1>Icons Added!</h1>
<i class="lni lni-add-file"></i>
<i class="lni lni-cart"></i>
<i class="lni lni-calculator"></i>

Using as LineIcons with Texts

Install font files which is available in fonts folder of downloaded package, then open demo.html file (comes with download package) you can see values like:

for all individual icons. Copy-paste specific icon value on photoshop/illustrator as text and select font family as LineIocns. You can see the specific icon visible as text.


Free CDN

CDN is quickest way to get started, include this snippet on header of your HTML file and start using without hosting icon files on your server!

<link rel="stylesheet" href="">

Helper Classes

Useful CSS Classes to Manipulate Icons