2.1.0 • Published 2d ago

line-awesome

Licence

MIT

Version

2.1.0

Deps

Size

11.9 MB

Vulns

Weekly

Stars

1.3K

Summary Dependency Versions

Browse icons · Quick start · SVG icons · Upgrading from 1.x · Changelog

Icons8 Line Awesome

Line Awesome is a free set of more than 1,500 line icons from Icons8 in regular, solid and brand styles. It is based on the Icons8 Windows 10 style, 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 in Vite, webpack, Rollup and Nuxt.

More than 1,500 icons in 3 styles: 616 B for the first imported icon, 16 KB of CSS for the font

Quick start

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.

import 'line-awesome/dist/line-awesome/css/line-awesome.min.css';

<i class="las la-star"></i>

SVG, tree-shakeable. Import an icon by name; icons you don't import stay out of the bundle.

import { lasStar } from 'line-awesome';
import { LaIcon } from 'line-awesome/react'; // or 'line-awesome/vue'

export const Favorite = () => <LaIcon icon={lasStar} size={24} title="Favorite" />;

No bundler? Load the CSS from a 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, 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 with `LaIcon`	each imported icon, inlined in your JavaScript
Icon components without imports	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:

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/line-awesome@2/dist/line-awesome/css/line-awesome.min.css"
/>

Keep the version in the URL. Without it the CDN serves whatever version is latest.

npm

npm install line-awesome

Import the CSS by its path:

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:

@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:

// 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:

<i class="las la-battery-three-quarters"></i>

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.

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) 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.

<i class="lab la-x-twitter"></i>

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.

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):

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/line-awesome@2/dist/font-awesome-6-7-line-awesome/css/all.min.css"
/>

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 or with examples/font-awesome-6-7.

Font Awesome 5 (fas fa-star, fab fa-github):

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/line-awesome@2/dist/font-awesome-line-awesome/css/all.min.css"
/>

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

<script setup>
import { lasStar } from 'line-awesome';
import { LaIcon } from 'line-awesome/vue';
</script>

<template>
  <LaIcon :icon="lasStar" />
  <LaIcon :icon="lasStar" size="2em" title="Favorite" class="text-yellow" />
</template>

React

import { lasStar } from 'line-awesome';
import { LaIcon } from 'line-awesome/react';

export function Rating() {
  return <LaIcon icon={lasStar} size={24} title="Favorite" className="text-yellow" />;
}

Without a framework

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 <svg>. Monochrome icons use currentColor, so they take the text color. To align an icon with text like the font does, give it a class such as .icon { vertical-align: -0.125em; }.

LaIcon renders the same markup on the server and in the browser, and sets no inline styles, so it works under a strict Content Security Policy. TypeScript types ship with the package.

A single icon can also be imported from its own path: import lasStar from 'line-awesome/icons/las-star'.

Bundler plugins

Line Awesome ships icons.json in the Iconify format, so unplugin-icons (Vite, webpack, Rollup, Rspack, esbuild) takes icons straight from this package, with no per-icon registration.

Vite + Vue, with auto-import

Install the plugins:

npm install -D unplugin-icons unplugin-vue-components

Add them to vite.config.js:

import vue from '@vitejs/plugin-vue';
import Icons from 'unplugin-icons/vite';
import IconsResolver from 'unplugin-icons/resolver';
import { ExternalPackageIconLoader } from 'unplugin-icons/loaders';
import Components from 'unplugin-vue-components/vite';

export default {
  plugins: [
    vue(),
    Components({
      resolvers: [
        IconsResolver({
          customCollections: ['line-awesome'],
          alias: { la: 'line-awesome' },
        }),
      ],
    }),
    Icons({
      compiler: 'vue3',
      customCollections: ExternalPackageIconLoader('line-awesome'),
    }),
  ],
};

Use icons in templates, no imports needed:

<template>
  <i-la-heart-solid />
  <i-la-github />
</template>

With pnpm, list vue in your own dependencies. The icon components unplugin-icons generates import vue from the project root, and pnpm puts only direct dependencies there.

Nuxt

Install the same plugins:

npm install -D unplugin-icons unplugin-vue-components

Add their Nuxt modules to nuxt.config.ts:

import IconsResolver from 'unplugin-icons/resolver';
import { ExternalPackageIconLoader } from 'unplugin-icons/loaders';

export default defineNuxtConfig({
  modules: [
    [
      'unplugin-icons/nuxt',
      { customCollections: ExternalPackageIconLoader('line-awesome') },
    ],
    [
      'unplugin-vue-components/nuxt',
      {
        dts: false,
        resolvers: [
          IconsResolver({
            customCollections: ['line-awesome'],
            alias: { la: 'line-awesome' },
          }),
        ],
      },
    ],
  ],
  build: { transpile: ['line-awesome'] },
});

build.transpile matters once your code imports from line-awesome, for icons or for LaIcon. Without it, the server build copies the whole package into .output/server/node_modules (7.3 MB) instead of bundling the icons in use.

Templates use the same <i-la-heart-solid /> tags, and LaIcon works as in any Vue app. The pnpm note above applies here too.

webpack + React

Install the plugin and the JSX compiler it uses:

npm install -D unplugin-icons @svgr/core @svgr/plugin-jsx

Add it to webpack.config.js:

import Icons from 'unplugin-icons/webpack';
import { ExternalPackageIconLoader } from 'unplugin-icons/loaders';

export default {
  plugins: [
    Icons({
      compiler: 'jsx',
      jsx: 'react',
      customCollections: ExternalPackageIconLoader('line-awesome'),
    }),
  ],
};

Import icons as components:

import LaHeart from '~icons/line-awesome/heart-solid';

export function Like() {
  return <LaHeart />;
}

Rollup

Install the plugin:

npm install -D unplugin-icons

Add it to rollup.config.js:

import Icons from 'unplugin-icons/rollup';
import { ExternalPackageIconLoader } from 'unplugin-icons/loaders';

export default {
  plugins: [
    Icons({
      compiler: 'raw',
      customCollections: ExternalPackageIconLoader('line-awesome'),
    }),
  ],
};

With the raw compiler an import is an SVG string:

import heart from '~icons/line-awesome/heart-solid';

document.body.innerHTML = heart;

Icon names in Iconify

Iconify names match the la set. An icon drawn in both styles has the regular one unsuffixed and the solid one ending in -solid (heart, heart-solid). Solid-only and brand icons have no suffix (times, github), and -solid works for them as an alias (times-solid). The same icons.json works with UnoCSS preset-icons and Tailwind Iconify plugins.

Working setups for each recipe live in examples/, and CI builds them all.

Upgrading from 1.x

Nothing changes for the font: the same CSS and font files at the same paths, the same la-*, lar, las, lab classes. Pinned CDN URLs such as line-awesome@1.3.0 keep serving 1.3.0; unversioned ones serve 2.x with the same icons, plus the ones added since (see Icons added after 1.3.0).

The package has a JavaScript entry now. Published 1.x had none, so import 'line-awesome' did not resolve; in 2.x it gives the icons and loads no styles. Keep importing the CSS by its path, as shown above. A CSS @import 'line-awesome'; resolves to the stylesheet through the style export condition.

Sass: use @use 'pkg:line-awesome' with $la-font-path, as shown above.

Font Awesome 4 names from the font's compatibility section (la la-close, la la-star-o) are exported too, marked deprecated: lasClose points to lasTimes, larStarO to larStar.

Font Awesome 6 and 7 names that Line Awesome lacks are exported as well (since 2.1.0): lasHouse is lasHome, lasMagnifyingGlass is lasSearch. They are also aliases in icons.json and listed under fa in metadata.json.

The JavaScript is ESM only. Node 20.19+ and all current bundlers load it. require('line-awesome') works on Node 20.19+; on Node 18 use import instead. Jest with babel-jest needs to be told to transform the package:

// jest.config.js
export default {
  transformIgnorePatterns: ['node_modules/(?!line-awesome)'],
};

Vue and React are optional peer dependencies. Install the one whose LaIcon you import; the font and line-awesome/core need neither.

Using in Figma, Sketch, Photoshop, etc.

To use Line Awesome in a design tool, install the font files. There are three, one per style (regular, solid, brands); install all three to get every icon. The files are in dist/line-awesome/fonts/ (.ttf for design tools), and every icon is also a separate file in svg/.

Line Awesome: browse and search all the icons in the font
Icons: many more styles, including the Windows 10 set this font is built from
Illustrations: when line icons aren't enough, illustrations from flat to 3D

Credits

Based on the Icons8 Windows 10 icon pack; the original set is larger than a single font can reasonably carry, so Line Awesome ships a selection.

Questions or ideas about the icons? Open an issue.

Keywords

font awesome icons svg icons8 line-awesome font-awesome vue react tree-shaking unplugin-icons iconify