NewLine Awesome 2 · tree-shakable

Line icons for your code

1,500+ free icons for Vue, React and plain CSS. Import only the icons you use.
Tree-shaking keeps the rest out of your bundle

1,500+free icons

npm i line-awesome

Then pick your stack in the Usage section below

≈0.6 KB

per imported icon, gzip

SSR + TS

Vue, React, SSR, TypeScript

What's new in Line Awesome 2

Small, typed, and backwards compatible

  • ≈0.6 KB

    Only the icons you use

    Each imported icon is about 0.6 KB gzip in your bundle, instead of the whole font

  • Same SVG

    On the server and in the browser

    LaIcon renders identical markup with SSR in Vue and React. Types ship with the package

  • v1 compatible

    Your la-* classes keep working

    The 1.x CSS classes and pinned CDN links stay the same, so the font upgrade changes nothing in your markup

Pick your stack and copy the snippet.

One config for Vite, webpack, Rollup, Rspack, esbuild and Nuxt

npm i -D unplugin-icons unplugin-vue-components // 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') }), ], } // then in any template, no imports needed <i-la-heart-solid />

Browse 1,500+ icons

Click an icon to copy it. The format sticks between visits

Copy as

Popular

100 icons

Popular: 100 icons

Enter or Space to copy, I or Shift+Enter for details, arrow keys to move.

3 steps · about a minute

Migrating from Font Awesome

I use
  1. font-awesome/all.css
    line-awesome/all.css

    Swap the stylesheet

    Swap the Font Awesome stylesheet for this one and keep your markup

  2. <i class="fas fa-heart">

    Keep your markup

    Classes like fas fa-heart stay as they are. No find-and-replace

  3. Your icons are now line

    It is the Font Awesome 5.11.2 stylesheet with Line Awesome fonts in place of the Font Awesome ones