Docs
Basic Usage

Basic Usage - Lineicons

Once you've completed the setup and installation (via CDN, NPM, manual download, or other methods), you can start using Lineicons in your projects. Browse the library to copy or download icons in various formats, including SVG (recommended), PNG, JSX/TSX, Vue, Svelte, HTML (icon font), WEBP, and more.

Accessing Icons

Follow these steps to find and use icons:

  1. Visit the Lineicons Icons Page (opens in a new tab).
  2. Search by keyword, browse categories via the right sidebar, or filter by free/pro, style (outlined/filled).
  3. Change colors, size, stroke width, or rotation as needed.
  4. Sort icons by Alphabetical, Featured, Categorized, or Newly Added.
  5. Copy the code in your preferred format or download individual icons/collections.
  6. Create custom collections for projects by clicking the "+" icon on selected icons.

1. SVG Usage (Recommended)

SVGs offer superior scalability, performance, accessibility, and customization. Most copied SVGs use fill="currentColor" or stroke="currentColor" for easy CSS theming.

Inline SVG (Best for dynamic styling)

Paste the copied SVG code directly into HTML:

<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path>
</svg>
<!-- Example: Telephone icon -->

Customization with CSS

.custom-icon {
  width: 64px;
  height: 64px;
  color: #007bff;         /* Inherits to stroke/fill */
  stroke-width: 3;        /* For outlined icons */
}
<svg class="custom-icon" ...>...</svg>

Inline Attributes

<svg width="32" height="32" stroke="red" stroke-width="1.5" ...>...</svg>

As <img> Tag (Simple, limited styling)

<img src="path/to/icon.svg" alt="Telephone" width="48" height="48"/>

Note: External SVGs cannot inherit currentColor from parent CSS.

SVG Sprite (For reuse and performance)

Create a sprite file and reference symbols:

<svg width="48" height="48" style="color: green;">
  <use href="/sprites/lineicons-sprite.svg#telephone"></use>
</svg>

2. Icon Font Usage

For projects using the web font CSS:

Basic Usage

Use the class names from the icon details page (typically lni lni-icon-name).

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

Sizing

<i class="lni lni-telephone-3 lni-2x"></i> <!-- 2x -->
<i class="lni lni-telephone-3 lni-3x"></i>
<i class="lni lni-telephone-3 lni-5x"></i>

Or via CSS:

.large-icon { font-size: 64px; }

Coloring & Effects

<i class="lni lni-telephone-3" style="color: purple;"></i>
 
<i class="lni lni-telephone-3 lni-rotate-90"></i>
<i class="lni lni-telephone-3 lni-flip-horizontal"></i>
 
<i class="lni lni-spinner lni-spin"></i>      <!-- Spin animation -->
<i class="lni lni-heart lni-pulse"></i>      <!-- Pulse effect -->

3. Framework-Specific Usage

Lineicons provides optimized components for popular frameworks via NPM packages. These use SVG for better performance and customization.

For other frameworks (Svelte, Next.js, etc.), use direct SVG imports or the core package. See the full Integrations Overview (opens in a new tab).

4. Figma Usage

Insert Lineicons directly into your Figma designs.

Install the Plugin

  1. Visit the Lineicons Figma Plugin (opens in a new tab) on Figma Community.
  2. Install and run the plugin in your Figma file.
  3. Search and insert icons, then customize colors, sizes, and styles natively in Figma.

Tip: Group icons in separate layers for organized workflows.

Best Practices

  • Prefer SVG over icon fonts for modern projects.
  • Use currentColor for theme support (light/dark modes).
  • Adjust stroke-width for bold/thin variants.
  • Add aria-hidden="true" and focusable="false" to decorative icons for accessibility.
  • Combine with utility frameworks like Tailwind CSS or Bootstrap.

Explore all icons at lineicons.com/icons (opens in a new tab)!

Last updated: February 2026

InstallationStyles and Categories