Docs
Integrations
Available File Formats

Available File Formats

Welcome to another section of Lineicons documentation. Here we'll share the various formats that Lineicons offers and make your icon integration better.

Lineicons offers a variety of file formats to ensure user-friendliness and compatibility across other platforms. Thus, you can effortlessly integrate with other development and design projects.

Supported File Formats

  1. SVG: Lineicons offers SVG icons for crisp and scalable designs. The SVG icons are ideal for web and mobile projects.
  2. PNG: For static uses like presentation or image-based design, PNG icons are perfect.
  3. Web Font: You can load Lineicons as Web Fonts using the CSS classes. It provides a highly efficient performance for any web project.
  4. JSX: Lineicons has ready-to-use JSX format icons. You can add the icons directly to the components and simplify the development process.
  5. TSX: For the React Typescript environment, Lineicons includes flexibility and safety within the projects.
  6. HTML: You can use the icons of Lineicons as the basic HTML setup. You can easily add the icons to any complex framework.
  7. Figma: You can import the icons directly into Figma. So, you can easily customize the icons as you want and add them to your projects.

Choosing the Right File Format for Icons

With Lineicons, you can select any format that suits your project's needs. All formats are versatile and easy to integrate.

  1. For Web and Responsive Designs: You should use SVG, PNG, or Base 64 Strings for scalable and responsive icons.
  2. Static or Image-based Projects: Use PNG and WEBP for creating high-quality images in social media and print.
  3. Framework-based Development: Use React (JSX), Vue, TSX, or Svelte for easy integration with any framework.
  4. Design Workflows: You can use the SVG, HTML, or Figma file for smooth design-development transitions.

How to Access the Formats in Lineicons

  1. SVG and PNG Formats

For both SVG and PNG formats, you can download the icon directly from the Lineicons (opens in a new tab) website. You can customize the color, size, and rotation of the icons. So, you can build scalable and responsive designs effortlessly.

  1. Adding Web Fonts in HTML

First, add the CDN link to your project.

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

You can use the Pro CDN as well. To get that go to your Profile> CDN settings> CDN links.

Then, add icon classes to HTML elements and start using the icons.

<i class="lni lni-crown-3"></i>

Explore more about React, Vue, and other framework integrations!

Other Frameworks IntegrationFigma Plugin