Files and Directories

The icon files you download from Lineicons have many files and folders. It has demo files and the actual fonts and Lineicons CSS file which you’ll need to use.

Here’s a quick overview of all the files and folders inside the downloaded file.

Directories

│   demo.html
│   lineicons.css
│   unicodesMap.json
│
├───css
│       icons.css
│
├───demo
│   └───css
│           style.css
│
├───fonts
│       lineicons.eot
│       lineicons.svg
│       lineicons.ttf
│       lineicons.woff
│       lineicons.woff2
│
├───less
│       icons.less
│
└───scss
        icons.scss

Icons

The Lineicons icons has a unique structure and styles. Here’s how the icons were structured.

Regular Icons

The regular icons has two clases, the first one is for the base style and the other one is for the unique icon style.

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

<i class="lni lni-cart"></i>

<i class="lni lni-calculator"></i>

Light Icons

Just like the Regular icons the Light icons also has two classes. But the Light icons has a different class prefix than the regular variant.

Here are the example codes of light icons:

<i class="lnil lnil-add-file"></i>

<i class="lnil lnil-cart"></i>

Fill Icons

Just like the Regular icons the Fill icons also has two classes. But the Fill icons has a different class prefix than the regular variant.

Here are the example codes of fill icons:

<i class="lnif lnif-add-file"></i>

<i class="lnif lnif-cart"></i>