# Installation

Lineicons (now version 5.1+) offers multiple ways to integrate icons into your projects. This updated guide includes the original installation methods plus new sections on **SVG usage**, **Figma integration**, and expanded **NPM package** details based on the latest documentation.

## 1. Icon Font (Web Font)

The icon font method provides easy integration with simple class-based usage.

### Step 1: Load the CSS

Add the stylesheet to your `<head>` section.

**Local:**

```
<link href="your-project-dir/icon-font/lineicons.css" rel="stylesheet"/>
```

**Free CDN (Recommended):**

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

### Step 2: Use the Icons

Add the class names to any HTML element.

```
<i class="lni lni-telephone-3"></i>
```

## 2. Using NPM

Lineicons provides a core package for traditional web font usage and modern **SVG component packages** for popular frameworks. The component packages offer better performance, scalability, and customization (size, color, stroke width).

### Core Package (Web Font)

For basic projects or Svelte:

```
npm install lineicons
```

or

```
yarn add lineicons
```

Import the CSS:

```
<link rel="stylesheet" href="./node_modules/lineicons/web-font/lineicons.css"/>
```

### Framework-Specific SVG Components

These packages provide dedicated components for seamless SVG icon usage (free icons via `@lineiconshq/free-icons`; Pro icons require manual `.tgz` installation — see guides).

- **React**

Package: `@lineiconshq/react-lineicons`

Install (free icons):

```
npm install @lineiconshq/react-lineicons @lineiconshq/free-icons
```

Usage example:

```
  import { Lineicons } from '@lineiconshq/react-lineicons';
  import { Home2Outlined } from '@lineiconshq/free-icons';
  
  <Lineicons icon={Home2Outlined} size={48} color="blue" />
  ```

- **Vue**

Package: `@lineiconshq/vue-lineicons`

Install (free icons):

```
npm install @lineiconshq/vue-lineicons @lineiconshq/free-icons
```

Usage example (Composition API):

```
  <template>
      <Lineicons :icon="Home2Outlined" :size="48" color="blue" />
  </template>
  
  <script setup>
  import { Lineicons } from '@lineiconshq/vue-lineicons';
  import { Home2Outlined } from '@lineiconshq/free-icons';
  </script>
  ```

- **Angular**

Package: `@lineiconshq/angular-lineicons`

Install (free icons):

```
npm install @lineiconshq/angular-lineicons @lineiconshq/free-icons
```

Usage example:

```
  <lineicons [icon]="Home2Outlined" [size]="48" [color]="'blue'"></lineicons>
  ```

- **React Native**

Package: `@lineiconshq/react-native-lineicons`

Install (free icons):

```
npm install @lineiconshq/react-native-lineicons @lineiconshq/free-icons react-native-svg
```

Usage example:

```
  import { Lineicons } from '@lineiconshq/react-native-lineicons';
  import { Home2Outlined } from '@lineiconshq/free-icons';
  
  <Lineicons icon={Home2Outlined} size={48} color="blue" />
  ```

For other frameworks (e.g., Svelte, Next.js), use the core web font package or direct SVG imports. Detailed Pro icon setup and advanced usage available in each guide.

## 3. CDN Integration

Quickly add Lineicons without local files.

**Free CDN:**

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

**Pro CDN:**

1. Go to **Profile > CDN settings > CDN links**.
2. Authorize your site.
3. Copy and paste the provided Pro CDN link into your `<head>`.

_Note: CDN limits depend on your subscription._

## 4. Manual Download

For offline use or full control:

1. Browse icons on [lineicons.com/icons](/content/icons/index.html).
2. Create a collection or select individual icons.
3. Customize (color, size, etc.) and download as a zip.
4. Unzip and use the files directly.

## 5. Using SVG Icons

Lineicons provides individual SVG files for scalable, customizable icons—ideal for modern web and responsive designs.

### How to Download SVGs

1. Visit [lineicons.com/icons](/content/icons/index.html).
2. Search or browse for icons.
3. Customize color, size, rotation if needed.
4. Download as SVG (free or pro based on icon).

### Usage Methods on Websites

#### Inline SVG (Recommended for customization)

Paste the SVG code directly into HTML:

```
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="currentColor">
  <!-- Paste the <path> from the downloaded SVG here -->
</svg>
```

#### As `<img>` Tag

```
<img src="path/to/your-icon.svg" alt="Icon" width="48" height="48"/>
```

#### SVG Sprite with `<use>`

Create a sprite file or reference externally for reuse.

SVGs offer better performance and styling flexibility compared to icon fonts.

## 6. Figma Integration

Use Lineicons directly in Figma for design workflows.

### Install the Lineicons Figma Plugin

1. Visit the plugin page: [Lineicons on Figma Community](https://www.figma.com/community/plugin/1217738304122072948/lineicons).
2. Click "Open in" a new Figma file.
3. Click "Run" to install and launch.
4. Search and insert icons directly into your designs.

**Pro Tip:** Organize icons in separate layers/groups for a clean workspace. Customize colors, sizes, and styles within Figma.

## Additional Notes

- **Supported Formats:** SVG, PNG, Web Font, JSX/TSX (React), Vue, Svelte, HTML, Figma files, and more.
- For framework-specific integrations and Pro icon details, refer to the dedicated guides linked above.
- Create custom collections on the site for project-specific icon sets.