# Icons8 Line Awesome
Line Awesome is a free set of more than 1,500 line icons from [Icons8](https://icons8.com) in regular, solid and brand styles. It is based on the [Icons8 Windows 10 style](https://icons8.com/icons/windows), and its class names follow Font Awesome 5, so it works as a drop-in replacement for it, and a separate stylesheet replaces Font Awesome 6 and 7.
Use it as a web font with CSS classes, import icons one by one as SVG for Vue, React or plain JavaScript, or get them as components through [unplugin-icons](#bundler-plugins) in Vite, webpack, Rollup and Nuxt.
## Quick start
```shell
npm install line-awesome
```
**Web font.** Import the CSS once, then put classes on an element: `las` for solid, `lar` for regular, `lab` for brands.
```js
import 'line-awesome/dist/line-awesome/css/line-awesome.min.css';
```
```html
```
**SVG, tree-shakeable.** Import an icon by name; icons you don't import stay out of the bundle.
```jsx
import { lasStar } from 'line-awesome';
import { LaIcon } from 'line-awesome/react'; // or 'line-awesome/vue'
export const Favorite = () => ;
```
No bundler? Load the CSS [from a CDN](#cdn).
## Choose how to use it
Every icon comes two ways: as a web font with CSS classes, as in 1.x, and since 2.0 as a tree-shakeable SVG module.
| You want | Use | What the page loads |
|---|---|---|
| Icons by CSS class, no build step | [The font](#the-font), from a CDN or npm | the CSS (16 KB gzip) and the font files of the styles in use (13–97 KB each) |
| Only the icons you use, in a Vue or React app | [SVG icons](#svg-icons) with `LaIcon` | each imported icon, inlined in your JavaScript |
| Icon components without imports | [Bundler plugins](#bundler-plugins) through unplugin-icons | each used icon, inlined in your JavaScript |
In the Rollup example, one icon with `toSvgString` is 616 B gzip, and every further icon adds about 200 B.
## The font
### CDN
Add the stylesheet to your page:
```html
```
Keep the version in the URL. Without it the CDN serves whatever version is latest.
### npm
```shell
npm install line-awesome
```
Import the CSS by its path:
```js
import 'line-awesome/dist/line-awesome/css/line-awesome.min.css';
```
Sass users can load the SCSS with Sass's `NodePackageImporter`. Point `$la-font-path` at the package, so the bundler finds the fonts and copies them into the build:
```scss
@use 'pkg:line-awesome' with (
$la-font-path: 'line-awesome/dist/line-awesome/fonts'
);
```
`pkg:` URLs need the importer in your Sass options. In Vite:
```js
// vite.config.js
import { NodePackageImporter } from 'sass';
export default {
css: {
preprocessorOptions: {
scss: {
importers: [new NodePackageImporter()],
silenceDeprecations: ['import', 'global-builtin'],
},
},
},
};
```
`silenceDeprecations` is optional. The SCSS predates the Sass module system, and without it Dart Sass prints `import` and `global-builtin` deprecation warnings for it.
### Classes
An icon has one of three styles, each with its class: `las` for solid, `lar` for regular and `lab` for brands. Put the style class and the icon class on an element:
```html
```
Size classes: `la-xs`, `la-sm`, `la-lg`, `la-1x` to `la-10x`, and `la-fw` for fixed width.
Search icons and copy their classes on the [Line Awesome page](https://icons8.com/line-awesome).
### Icons added after 1.3.0
Icons added after 1.3.0 (`la-x-twitter`, `la-tiktok`, `la-sparkles` and others, listed in [`added-icons.json`](added-icons.json)) are in the main fonts and the main stylesheet: nothing to load besides `line-awesome.css`. Their glyphs were appended to the 1.3.0 fonts, so every earlier icon keeps its codepoint, glyph and shape, and a test compares them with the 1.3.0 fonts glyph by glyph.
```html
```
Use the style class of the icon's font: `las` for the new solid icons and `lab` for the new brands (`lab la-x-twitter`); `la la-sparkles` without `las`, or `lar la-sparkles`, shows nothing.
As SVG icons they need nothing extra either: `labXTwitter` is exported like any other icon.
The old `.eot` and `.svg` fonts (Internet Explorer 8 and older) are not rebuilt and have no added icons. Every other browser uses WOFF2, WOFF or TTF.
To see every icon in the fonts, open [`examples/all-icons/index.html`](examples/all-icons/README.md).
### Replacing Font Awesome
Swap the Font Awesome stylesheet for the Line Awesome one that matches your Font Awesome version and keep the markup.
**Font Awesome 6 or 7** (`fa-solid fa-house`, `fas fa-house`, `fa-brands fa-github`):
```html
```
It knows the names of Font Awesome Free 6.7.2 and 7.3.1 and their old names (`fa-home` for `fa-house`), the `fa-solid`, `fa-regular`, `fa-brands` and `fas`, `far`, `fab` prefixes, and the utility classes: sizes, `fa-fw`, lists, animations, rotation, `fa-stack`, `sr-only`. CSS of your own that sets `font-family: "Font Awesome 6 Free"` (or 7) and a codepoint gets the Line Awesome font too.
Icons are as wide as their glyph, as in Font Awesome 6, and `fa-fw` makes them 1.25em wide. Font Awesome 7 gives every icon the fixed width; to keep that, add `:root { --fa-width: 1.25em; }`.
Line Awesome has about three quarters of the free Font Awesome icons: 76% of 6.7.2 and 72% of 7.3.1. A class for an icon it lacks shows nothing, as an unknown class does in Font Awesome. A regular icon that Line Awesome has only in solid shows the solid one. Check the icons you use on the [Line Awesome page](https://icons8.com/line-awesome) or with [`examples/font-awesome-6-7`](examples/font-awesome-6-7/index.html).
**Font Awesome 5** (`fas fa-star`, `fab fa-github`):
```html
```
It is the Font Awesome 5.11.2 stylesheet with Line Awesome fonts in place of the Font Awesome ones. Keep it for Font Awesome 5 markup: a few names, such as `fa-desktop` and `fa-hands`, mean different icons in 5 and 6.
## SVG icons
Each icon is a plain data object exported by name. Import only what you use; everything else is left out of the bundle.
Names follow the font classes: the style prefix plus the icon name in camel case.
| Font class | Import |
|---|---|
| `las la-star` | `lasStar` (solid) |
| `lar la-star` | `larStar` (regular) |
| `lab la-github` | `labGithub` (brands) |
### Vue
```vue
```
### React
```jsx
import { lasStar } from 'line-awesome';
import { LaIcon } from 'line-awesome/react';
export function Rating() {
return ;
}
```
### Without a framework
```js
import { lasStar } from 'line-awesome';
import { toSvgString } from 'line-awesome/core';
element.innerHTML = toSvgString(lasStar, { size: 24 });
```
### `LaIcon` props
| Prop | Default | Description |
|---|---|---|
| `icon` | — | An icon object, e.g. `lasStar`. |
| `size` | `1em` | Height; width follows the icon's aspect ratio. A number means pixels. |
| `title` | — | Accessible name. Without it the icon is decorative and hidden from screen readers (`aria-hidden`). |
Other attributes (`class`, `style`, event handlers) go to the `
