Installation Methods
Using and adding the Lineicons V5 is very easy. You can install Lineicons using different methods. Here are the methods you can use:
1. Icon Font
Using the icon font is ideal for easy integration and simple setup. You can use the icons by just adding the class names to the HTML code.
Step-1:
First, you need to copy-paste the CSS stylesheet into the head section to load Lineicons.
<link href="your-project-dir/icon-font/lineicons.css" rel="stylesheet" />
Or you can use the free CDN as well.
<link href="https://cdn.lineicons.com/5.0/lineicons.css" rel="stylesheet" />
Step-2:
Now you just have to browse the library and copy-paste the code into the HTML elements.
<i class="lni lni-telephone-3"></i>
2. Using NPM
You can integrate the Lineicons icon library using NPM packages.
Step 1:
Download the NPM package using the command
npm install lineicons
Or
yarn add lineicons
Step 2:
Then, you have to add the CSS file to your project.
<link rel="stylesheet" href="./node_modules/lineicons/web-font/lineicons.css" />
Lineicons React
Use Lineicons with the React.js. Here is the code to install the React package
npm install lineicons-react
Or
yarn add lineicons-react
3. CDN Integration
If you want to integrate Lineicons V5 quickly without installation, you can use Lineicons CDN. It allows you to test or add the icons without any dependencies.
Lineicons includes both free and pro-CDN options.
You need to include the CDN link in the <head>
section to start using the library without having to host the icon files on your server!
Free CDN:
Here is the CDN for free icons:
<link href="https://cdn.lineicons.com/5.0/lineicons.css" rel="stylesheet" />
Pro CDN:
You can access the premium icons with the Pro CDN. Just follow these steps to get the Pro CDN from Profile> CDN settings> CDN links
- Add the site you want to authorize to load the pro icon font CDN.
- Then, scroll down to the CDN link section. Please copy the link and add it to the head section of your HTML file.
Note: The CDN limit is tied to your subscription type. You can always add or remove sites depending on your needs.
4. Manual Download
You can manually download the icons if you want to use them offline or have complete control over them.
- Create a collection of your needed icons.
- You can download the collection by clicking on the download button at the bottom. Then, unzip the file and start using it in your projects.
You can download the icons separately as well.
With these flexible installation methods, you can seamlessly integrate Lineicons V5 into your projects and enhance your user interface!