Getting Started

Welcome to the Lineicons Getting Started section. In this section, we will guide you through quickly getting started with Lineicons, an amazing icon library for designers, developers, and creative businesses.

Are you ready to boost your projects and build engaging and striking user interfaces with Lineicons?

Let’s jump into the simple guide and discover the easy setup process.

Quick-Start

In this quick start guide, we will share the quickest and simplest guide to add icons from Lineicons v5 to your projects. You can directly add the SVG icons to your HTML code or use the CDN for icon fonts.

1. Using Direct SVGs

If you are looking for pixel-perfect accuracy and better control over the icons, you can directly use the SVG versions of Lineicons.

Step 1: Copy the SVG code

Browse Lineicons and select the icon you need. Then click on “Copy SVG.” The SVG code will be copied to your clipboard.

Step 2: Paste the code into HTML

After you have copied the code, you can directly paste it into your code. Here is an example:

<svg
  width="80"
  height="80"
  viewBox="0 0 24 24"
  fill="#010114"
  xmlns="http://www.w3.org/2000/svg"
  transform="rotate(0 0 0)"
>
  <path
    d="M8.17625 14.5688C8.5003 14.3108 8.97215 14.3643 9.23014 14.6884C9.87961 15.5041 10.8788 16.0248 12 16.0248C13.1213 16.0248 14.1205 15.5041 14.7699 14.6884C15.0279 14.3643 15.4998 14.3108 15.8238 14.5688C16.1479 14.8268 16.2014 15.2986 15.9434 15.6226C15.0216 16.7805 13.5975 17.5248 12 17.5248C10.4026 17.5248 8.97846 16.7805 8.05665 15.6226C7.79865 15.2986 7.8522 14.8268 8.17625 14.5688Z"
    fill="#010114"
  />
  <path
    d="M6.95349 8.15698C6.53927 8.15698 6.20349 8.49276 6.20349 8.90698V10.8605C6.20349 11.6343 6.83081 12.2616 7.60465 12.2616H9.38884C10.1627 12.2616 10.79 11.6343 10.79 10.8605V9.65698H13.21V10.8605C13.21 11.6343 13.8373 12.2616 14.6112 12.2616H16.3953C17.1692 12.2616 17.7965 11.6343 17.7965 10.8605V8.90698C17.7965 8.49276 17.4607 8.15698 17.0465 8.15698H6.95349Z"
    fill="#010114"
  />
  <path
    fillRule="evenodd"
    clipRule="evenodd"
    d="M2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12ZM12 3.5C7.30558 3.5 3.5 7.30558 3.5 12C3.5 16.6944 7.30558 20.5 12 20.5C16.6944 20.5 20.5 16.6944 20.5 12C20.5 7.30558 16.6944 3.5 12 3.5Z"
    fill="#010114"
  />
</svg>

Customizing the icons

When using the SVG icons, you will have full control over the styling. You can change the color, size, and other attributes using CSS or inline styles.

2. Using CDN

The easiest way to add icons from Lineicons is to include them using CDN. It uses icon fonts, so you can simply add icons with predefined classes to your HTML elements.

Step-1: Add CDN Link

Lineicons offers CDN for both Free and Premium plans.

Free CDN:

For using Lineicons V5 in your projects, you have to add the CDN link in the <head> section of your HTML file.

<link href="https://cdn.lineicons.com/5.0/lineicons.css" rel="stylesheet" />

In case, If you are using Lineicons V4 then the CDN link will be:

<link href="https://cdn.lineicons.com/4.0/lineicons.css" rel="stylesheet" />

Pro CDN:

For using the Pro CDN, you can get the CDN link from Profile>CDN Settings>CDN Links

Then, you have to scroll down and copy the CDN link to paste it into your <head> tag.

Step 2: Add the Icons

With the class-based approach, you can easily add the icons you need. For instance, if you want to add a trophy icon, just copy and paste the code into your project.

<i class="lni lni-trophy-1"></i>

You can easily browse the icons (opens in a new tab) and copy-paste them into your projects.

3. Using Local CSS File

To use Lineicons locally in your project, follow these steps:

Download Lineicons: Go to the download menu and download the Lineicons package. Extract the files after downloading.
Copy the lineicons.css file and the fonts folder to your project directory.
Now Link the lineicons.css file to your project head to load the icons.

<link rel="stylesheet" href="lineicons.css" />

You can also put all the Lineicons files and folders inside a folder. That way, you’ll have to add the folder name before the lineicons.css file when linking it.

Like this:

<link rel="stylesheet" href="./icons/lineicons.css" />

💡

Note: If placed in a subfolder (e.g., icons), modify the path:

Start exploring Lineicons (opens in a new tab) today and elevate your design projects with ease!

Introduction Installation