# 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 [Permalink for this section](/content/docs/integrations/file-formats#supported-file-formats/index.html)

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 [Permalink for this section](/content/docs/integrations/file-formats#choosing-the-right-file-format-for-icons/index.html)

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 [Permalink for this section](/content/docs/integrations/file-formats#how-to-access-the-formats-in-lineicons/index.html)

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)](/content/site-root.html) website. You can customize the color, size, and rotation of the icons. So, you can build scalable and responsive designs effortlessly.

2. **Adding Web Fonts in HTML**  
First, add the CDN link to your project.
   
   ```
   <link href="https://cdn.lineicons.com/5.1/line/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 Integration](/content/docs/integrations/others "Other Frameworks Integration"/index.html) [Figma Plugin](/content/docs/figma-plugin "Figma Plugin"/index.html)